Angular routes возвращает ошибку 404 в Google Lighthouse

У меня есть веб-сайт angular, он работает нормально в облаке и локально, но когда я тестировал его с помощью lighthouse в google chrome, все тесты не прошли, потому что он возвращал 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 { }

person Khaled Jamal    schedule 03.07.2019    source источник


Ответы (1)


в качестве быстрого решения попробуйте HashLocationStrategy

добавьте это в app.module.ts

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

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

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

это работает для меня

Примечание: если вы используете маскировку DNS, это может не сработать.

person aruna    schedule 19.05.2020