在 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 它允许页面提供服务，但当您在开发人员工具中查看时仍然 returns 404。发生这种情况是因为页面刷新找不到请求的页面，但是 angular 路由发生并找到请求的页面。拥有 404 远非理想，所以我继续寻找

尝试 2

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

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

尝试 3

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

尝试 4

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

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

Answer 1

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

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

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

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

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

How to get Angular routing working when hosting on Azure blob storage

azure-storage

single-page-application

angular