angular - Angular2 中的 404 页面和延迟加载

Question

我无法使用延迟加载模块让我的“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 时，我看到该 block 正在延迟加载，它显示了在 Buckets 模块中配置的适当组件，没关系。

但它不适用于 404 错误页面。通常路径的“**”应该适用于所有其他不存在的路由，但事实并非如此。

有人可以帮忙吗？

-angular2 最终版本 (2.0.0)

Answer 1

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

话虽如此，您可能会尝试重定向到通配符路由的不同路由，如下所示，

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

更新

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

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

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

查看此 Plunker!!

希望这对您有所帮助!