Question

我无法让我的404页面＃39;使用延迟加载模块工作。当我在浏览器中输入随机网址时，我只看到一个空白页而不是我的酷页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错误页面。通常＆＃39; **＆＃39; for path应该适用于所有其他不存在的路由，但它没有。

有人可以帮忙吗？

-angular2 final（2.0.0）

Answer 1

网址匹配不适用于通配符延迟加载模块。我想知道你将在Lazy加载模块的路由中添加什么。

说过你可能会尝试重定向到下面的通配符路由的不同路由，

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

<强>更新

您可以在模块路由中给出一个空路径，以便它加载默认组件

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

这确保当您路由到未配置的路径时，它会延迟加载NotFound模块。

请参阅此Plunker!!

希望这会有所帮助!!

Answer 2

好的想通了，我做的是以下。

在AppModule中导入NotFound模块

@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模块直接在应用程序中导入，因此它确实存在于应用程序上下文中。

每当您输入一条不存在的路线时，您将被路由到/未发现;）

Angular2中的404页面和延迟加载

2 个答案: