Angular2 中的 404 页面和延迟加载

Question

我无法使用延迟加载模块让我的“404 页面”正常工作。当我在浏览器中输入一个随机网址时，我只看到一个空白页面，而不是我很酷的 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)

Answer 1

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

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

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

每次你输入一个不存在的路由，你都会被路由到 /notfound ;)