为什么 Google Lighthouse 会为 Angular redirectTo 路由返回 404？

Question

我正在做一个 Ionic Aungular PWA 项目，我一直在 Chrome 中遇到失败的 Lighthouse 审核，并出现 404 错误，说找不到我重定向到的路径的本地主机页面作为默认路径（在本例中为 /home）。我在下面包含了我自动生成的 src/app/app-routing.module.ts 文件。如果我替换重定向路径以加载“home”模块而不是重定向到主路径，则审核成功。任何人都可以帮助解释为什么 redirectTo 不起作用吗？

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'create-restaurant-menu',
    loadChildren: () => import('./pages/page2/page2.module').then( m => m.Page2Model)
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

您是否按照 the Angular docs 的建议使用 http-server 进行测试？如果是这样：您应该知道 http-server 不会将 404 转发给 index.html。在审核期间，Lighthouse 将刷新数次。如果您的 SPA 同时更改了路径，http-server 将找不到该路径的匹配文件，并且只是 return 404。

这当然很讽刺，因为 Lighthouse 和 Angular 都是由 Google 开发的，但他们忽略了他们的指令可能会破坏他们自己的工具。更讽刺的是，Angular 文档建议首先使用 http-server，而它的维护者明确表示 (back in 2017) 它不支持 SPA。

我建议使用 serve 而不是 http-server。如果您添加选项 --single，它将“将所有未找到的请求重写为 index.html”。如果这能解决您的审核问题，请告诉我。

为什么 Google Lighthouse 会为 Angular redirectTo 路由返回 404？

Why is Google Lighthouse returning a 404 for Angular redirectTo routes?

lighthouse

angular-routing

ionic-framework

angular