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

Question

我创建了一个使用延迟加载和标准角度路由设置的 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 { }

Roadmap-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。发生这种情况是因为页面刷新时找不到请求的页面，但是发生了角度路由并找到了请求的页面。拥有 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 Static Web App 的原因

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

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