Angular 路由在谷歌灯塔中返回 404 错误答案

【问题标题】：Angular routes returns 404 error in google lighthouseAngular 路由在谷歌灯塔中返回 404 错误
【发布时间】：2019-07-03 20:18:26
【问题描述】：

我有一个有角度的网站，它在云端和本地运行都很好，但是当我在谷歌浏览器中使用 lighthouse 测试它时，所有测试都失败了，因为它返回 404 页面，我无法检测到，所以我运行构建localy 使用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 { }

【问题讨论】：

标签： angular routes lighthouse

【解决方案1】：

作为一个快速修复尝试 HashLocationStrategy

将此添加到 app.module.ts

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

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

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

这对我有用

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

【讨论】：