Angular 路线在谷歌灯塔中返回 404 错误

Question

我有一个 Angular 网站，它在云上和本地都运行良好，但是当我在谷歌浏览器中使用灯塔测试它时，所有测试都失败了，因为它返回 404 页，我无法检测到，所以我使用 http-server 在本地运行构建来测试一下，这次我看到结果有所不同，但仍然出现404错误，但这次是我的主页。

在 angular 项目中，我已将路由配置为将 '' 重定向到 '/home/shop' 并且它确实并找到了，但是当在路由 '/home/shop' 上再次重新加载时，它说未找到，我必须删除它并通过点击空路径''返回主页。

请注意，只有在我部署我的项目时才会出现这种行为。

如果有人帮助我在我的项目中配置我的路由以在没有任何重定向的情况下检索主页，那就太好了。

这是我的路线:

export const rootRouterConfig: Routes = [
  { 
    path: '', 
    redirectTo: 'home/shop', 
    pathMatch: 'full' 
  },
  { 
    path : '',
    component : MainComponent,
    children: [ 
      {
        path : 'home',
        loadChildren: './shop/shop.module#ShopModule'
      },
      { 
        path: 'pages',
        loadChildren: './pages/pages.module#PagesModule'
      },
      { 
        path: 'blog',
        loadChildren: './blog/blog.module#BlogModule'
      }
    ]
  },
  { 
    path: '**', 
    redirectTo: 'pages/404'
  }
];

这是子路线:

const routes: Routes = [
  { 
    path: 'shop',
    component: HomeFiveComponent
  },
  {
    path: 'collection/:category/:subCategory',
    component: CollectionLeftSidebarComponent
  },
  {
    path: 'right-sidebar/collection/:category',
    component: CollectionRightSidebarComponent
  },
  {
    path: 'no-sidebar/collection/:category',
    component: CollectionNoSidebarComponent
  },
  {
    path: 'product/:id',
    component: ProductLeftSidebarComponent
  },
  {
    path: 'right-sidebar/product/:id',
    component: ProductRightSidebarComponent
  },
  {
    path: 'no-sidebar/product/:id',
    component: ProductNoSidebarComponent
  },
  {
    path: 'col-left/product/:id',
    component: ProductColLeftComponent
  },
  {
    path: 'col-right/product/:id',
    component: ProductColRightComponent
  },
  {
    path: 'column/product/:id',
    component: ProductColumnComponent
  },
  {
    path: 'accordian/product/:id',
    component: ProductAccordianComponent
  },
  {
    path: 'left-image/product/:id',
    component: ProductLeftImageComponent
  },
  {
    path: 'right-image/product/:id',
    component: ProductRightImageComponent
  },
  {
    path: 'vertical/product/:id',
    component: ProductVerticalTabComponent
  },
  {
    path: 'search',
    component: SearchComponent
  },
  {
    path: 'wishlist',
    component: WishlistComponent
  },
  {
    path: 'compare',
    component: ProductCompareComponent
  },
  {
    path: 'cart',
    component: CartComponent
  },
  {
    path: 'checkout',
    component: CheckoutComponent
  },
  {
    path: 'checkout/success',
    component: SuccessComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ShopRoutingModule { }

Answer 1

作为快速修复尝试 HashLocationStrategy

将此添加到 app.module.ts

import { HashLocationStrategy, LocationStrategy  } from '@angular/common';

providers: [
       {provide : LocationStrategy , useClass: HashLocationStrategy}
  ],

https://angular.io/api/common/HashLocationStrategy#methods

这对我有用

注意:如果您使用 dns 掩码，这可能不起作用。