404 страницы и отложенная загрузка в Angular2

Я не могу позволить своим 404 страницам работать с модулями отложенной загрузки. Когда я ввожу случайный URL-адрес в браузере, я вижу только пустую страницу вместо моей классной страницы 404.

Вот моя конфигурация маршрутизации

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
  { path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#DashboardModule'},
  { path: 'buckets', loadChildren: 'app/buckets/buckets.module#BucketsModule'},
  { path: '**', loadChildren: 'app/notfound/notfound.module#NotFoundModule'} 
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Когда я перехожу к / buckets, я вижу, что чанк лениво загружается, и он показывает соответствующий компонент, который настроен в модуле Buckets, это нормально.

Но это не работает со страницами ошибок 404. Обычно '**' для пути должно работать для всех других несуществующих маршрутов, но это не так.

Может кто поможет?

-angular2 final (2.0.0)


angular http-status-code-404 routing
person webmaster    schedule 26.09.2016    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Сопоставление URL-адресов не работает с ленивыми модулями с подстановочными знаками. Интересно, что вы добавите в маршрутизацию внутри ваших лениво загруженных модулей.

Сказав, что вы можете попытаться перенаправить на другой маршрут для маршрутов с подстановочными знаками, как показано ниже,

{ path: 'notfound', loadChildren: 'app/notfound/notfound.module#NotFoundModule'}
{ path: '**', redirectTo: '/notfound' }

Обновить

вы можете указать пустой путь в маршрутизации модуля, чтобы он загружал компонент по умолчанию,

const notfoundRoutes: Routes = [
  { path: '',  component: NotFoundComponent }
];

Это гарантирует, что при маршрутизации по пути, который не настроен, он будет лениво загружать модуль NotFound.

См. Этот Plunker !!

Надеюсь это поможет!!

person Madhu Ranjan    schedule 27.09.2016
comment
@webmaster: он работает, проверьте, что Plunker обновлен в решении, я вижу, что маршрут не настроен должным образом в добавленном вами решении, поэтому вам необходимо импортировать модуль. Ваше здоровье!! - person Madhu Ranjan; 27.09.2016
comment
Молодец, Мадху, я часами боролся с этим, и твое решение работает! Это единственный способ отложенной загрузки страницы с ошибкой 404, который я вижу ... (это должно быть отмечено как правильный ответ) - person Rodney; 05.01.2017
comment
Сопоставление URL-адресов не будет работать с модулями с отложенной загрузкой с подстановочными знаками. - он будет работать, это просто случай, когда заданный подстановочный знак соответствует всем URL-адресам. Сказав это, любой URL-адрес приведет к загрузке модуля с отложенной загрузкой, так что это больше не настоящий модуль с отложенной загрузкой. Это просто фрагмент приложения, который сохраняется и загружается из отдельного файла фрагмента при загрузке приложения. Но предлагаемое решение кажется твердым. - person garfunkel61; 08.01.2018

arrow_upward
0
arrow_downward

Хорошо разобрался, я сделал следующее.

импортировал модуль NotFound в AppModule

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    CoreModule.forRoot(),
    NotFoundModule,
    routing
  ],
  declarations: [
    AppComponent
  ],
  providers: [  ],
  bootstrap: [AppComponent]
})

внутри модуля NotFound я объявил маршрут (не ленивый)

const routes: Routes =  [
  { 
    path: 'notfound', 
    component: NotFoundComponent
  }
]

в маршрутах AppModule я добавил

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
  { path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#DashboardModule'},
  { path: 'buckets', loadChildren: 'app/buckets/buckets.module#BucketsModule'},
  { path: '**', redirectTo: '/notfound' } 
];

Таким образом, модуль NotFound напрямую импортируется в приложение, поэтому он действительно существует в контексте приложения.

Каждый раз, когда вы вводите несуществующий маршрут, вы попадаете в / notfound;)

person webmaster    schedule 27.09.2016
comment
Хм - у меня это уже работало, но я пытаюсь переместить страницу 404 на LazyLoading (она будет выполняться только в 1% случаев, поэтому я не хочу связывать ее заранее). Я не могу заставить его работать с отложенной загрузкой ... - person Rodney; 05.01.2017