angular - 在 Azure blob 存储上托管时如何使 Angular 路由正常工作

Question

我创建了一个使用延迟加载和标准 Angular 路由设置的 Angular 应用程序，当我在本地运行该应用程序时，此设置运行良好。但是，当我尝试从 azure blob 存储提供服务时，我在应用程序中导航时收到 404。

Azure 存储 static site 已启用，当我导航到根页面时，它会显示。

我需要实现哪些 Azure 配置才能解决此问题？

请注意:为了使这个问题尽可能简洁，我在代码下方添加了我的尝试。此外，我不确定哪些 Azure 配置适合添加，因此在收到请求之前我将它们排除在外。

app-routing.module.ts

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    
    const routes: Routes = [
      { path: '', loadChildren: () => import('./feature-modules/home/home.module').then(h => h.HomeModule) },
      { path: 'roadmap', loadChildren: () => import('./feature-modules/roadmap/roadmap.module').then(h => h.RoadmapModule) },
      { path: 'games', loadChildren: () => import('./feature-modules/games/games.module').then(h => h.GamesModule) },
      { path: 'locations', loadChildren: () => import('./feature-modules/locations/locations.module').then(h => h.LocationsModule) },
      { path: 'tasks', loadChildren: () => import('./feature-modules/site-tasks/site-tasks.module').then(h => h.SiteTasksModule) },
      { path: 'contact', loadChildren: () => import('./feature-modules/contact/contact.module').then(h => h.ContactModule) },
      { path: '**', loadChildren: () => import('./feature-modules/not-found/not-found.module').then(h => h.NotFoundModule) },
    ];
    
    @NgModule({
      imports: [
        RouterModule.forRoot(routes)
      ],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

路线图-routing.module.ts

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { RoadmapComponent } from './roadmap/roadmap.component';
    
    const routes: Routes = [
      { path: '', component: RoadmapComponent }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class RoadmapRoutingModule { }

我尝试过的

尝试 1

设置错误文档路径为index.html as suggested here它允许提供页面，但在您查看开发人员工具时仍会返回 404。发生这种情况是因为页面刷新找不到请求的页面，但是发生了 Angular 路由并找到了请求的页面。拥有 404 远非理想，所以我继续寻找

尝试 2

我看到了this suggestion并更改了我的 app-routing.ts 如下所示

    imports: [RouterModule.forChild(routes, { useHash: true})],

尝试 3

我找到了 this solution但它并不真正适用于我的情况，因为他们通过 CDN 提供他们的应用程序，这不是我现在需要的

尝试 4

This suggestion没有为我工作。我尝试创建一个 routes.json 然后发现它已被弃用并添加了 staticwebapp.config.json 对我来说都不起作用

我们将不胜感激任何帮助或建议

Answer 1

如果您使用 Angular 路由/SPA，则不能将 Azure Blob 存储与静态站点功能结合使用，因为它不是为此设计的。这就是您问题的答案。

...这就是微软发布 Azure 静态 Web 应用程序的原因

关于您的尝试 #4，这是正确的方法(因此，与您最初的问题无关)。因此，您应该发布另一个与 Azure 静态 Web 应用相关的问题，并提供一些您尝试使用 Angular 路由的详细信息。

我尝试使用“staticwebapp.config.json”并遵循 Microsoft 文档，我的 Angular SPA 应用程序没有遇到任何问题