2016-09-26 2 views
2

Я не могу позволить работе «404 страниц» использовать ленивые модули загрузки. Когда я вводил случайный url в браузере, я вижу только чистую страницу вместо моей крутой страницы 404.404 страницы и Lazy Загрузка в Angular2

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

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); 

Когда я серфинга в/ведра я вижу порция лениться загружается и показывает соответствующий компонент, который выполнен в модуле Ковши, то будет хорошо.

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

Может кто-нибудь помочь?

-angular2 финал (2.0.0)

ответ

5

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

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

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

Update

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

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

Это гарантирует, что при переходе на путь, который не сконфигурирован, он идет и loa ds NotFound модуль лениво.

Смотрите эту Plunker!!

Надеется, что это помогает !!

+0

все еще не работает, но увидеть мой ответ – webmaster

+0

@webmaster: он работает, проверьте Plunker обновленную в растворе, я вижу, что маршрут не правильно настроен в добавленном вами решении, вам нужно импортировать модуль. Ура !! –

+0

Молодцы Мадху, я боролся с этим в течение нескольких часов, и ваше решение работает! Это единственный способ Lazy Загрузить страницу ошибки 404, которую я могу увидеть ... (это должно быть отмечено как правильный ответ) – Rodney

0

Хорошо, выяснилось, что я сделал следующее.

импортируется модуль 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 напрямую импортируется в приложение, поэтому он существует в контекст приложения.

Everytime вы вводите unexistent маршрут вы получаете маршрутизируетесь/NOTFOUND;)

+0

Хм - У меня уже было это, но я пытаюсь переместить страницу 404 на LazyLoading (на нее будет нанесено только 1% время, поэтому я не хочу связывать это так). Я не могу заставить его работать с Lazy Loading ... – Rodney