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

【问题标题】：Why is Google Lighthouse returning a 404 for Angular redirectTo routes?为什么 Google Lighthouse 会为 Angular redirectTo 路由返回 404？
【发布时间】：2021-02-20 03:06:21
【问题描述】：

我正在处理一个 Ionic Aungular PWA 项目，并且我一直在 Chrome 中获得失败的 Lighthouse 审核，并出现 404 错误，提示找不到我重定向到的路径的 localhost 页面作为默认路径（本例中为 /home ）。我在下面包含了我的自动生成的 src/app/app-routing.module.ts 文件。如果我替换重定向路径以加载“home”模块而不是重定向到 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 { }

【问题讨论】：

标签： angular ionic-framework angular-routing lighthouse

【解决方案1】：

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

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

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

【讨论】：