Question

我有一个有角度的网站，它在云端和本地都运行良好，但是当我使用Google chrome中的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 { }

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掩码，则此方法可能无效。

角路线在Google灯塔中返回404错误

1 个答案: