404页和Angular2中的延迟加载 [英] 404 pages and Lazy Loading in Angular2

问题描述

我无法使用延迟加载模块来处理 404页面。当我在浏览器中输入一个随机URL时，我只会看到一个空白页面，而不是很酷的404页面。

I am unable to let my '404 pages' work using lazy loading modules. When I enter a random url in the browser I only see a blank page instead of my cool 404 page.

这是我的路由配置

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 Module中配置的，没关系。

When I surf to /buckets I see the chunk is being lazy loaded and it shows the appropriate component which is configured in the Buckets Module, thats ok.

但是它不适用于404错误页面。通常，路径的 **应该适用于所有其他不存在的路由，但是不起作用。

But it doesn't work with 404 error pages. Normally '**' for path should work for all other unexistent routes, but it doesn't.

有人可以帮忙吗？

-angular2 final（2.0.0）

-angular2 final (2.0.0)

推荐答案

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

URL matching wont work with wildcard lazy loaded modules. I wonder what you will add in the routing inside your Lazy loaded modules.

前面已经说过，您可能会尝试将以下通配符路由重定向到其他路由，

Having said that you may try to redirect to a different route for wildcard routes like below,

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

更新

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

you may give an empty path in Module routing so that it loads default component,

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

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

This makes sure that when you route to a path which is not configured it goes and loads NotFound module lazily.

查看此柱塞！

希望这会有所帮助！

这篇关于404页和Angular2中的延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！