如何在angular2中定义惰性模块路径并为该路径定义特定于负载的模块

Question

我根据角色有不同的组件和路线。现在我已经为某些组件定义了路线，如下所示

Login Module 
path: '', loadChildren:'app/login/login.module#LoginModule';

Register Module 
path:'', loadChildren: 'app/register/register.module#LoginModule'

Dashboard Module
path:'' loadChildren:'app/dashboard/dashboard.module#dashboardModule'

User Profile Module
path:'' loadChildren:'app/user-profile/user-profile.module#UserProfileModule'

现在每当我导航到登录或注册页面时，所有列出的模块块都会被一起加载，页面会稍微延迟并停留，直到模块块没有加载。有没有人知道如何定义路径并在特定路径上停止不需要的模块加载。在此先感谢您的任何帮助

Answer 1

您需要指定模块下的路线才会被执行。

请注意，所有延迟加载的模块都必须遵循这三个规则。

1. 您想要延迟加载的模块应该有一个父路由。
2. 请勿在{{1​​}}中导入模块。因为如果你这么做就没有延迟加载的意义
3. 您需要在app.module.ts的一条路线下进行配置。

所以要回答你的问题，你需要这样的配置..

app.routes

因此，只要您点击{ // Login Module path: 'login', loadChildren:'app/login/login.module#LoginModule'; // Register Module , path:'register', loadChildren: 'app/register/register.module#LoginModule' // Dashboard Module path:'dashboard', loadChildren:'app/dashboard/dashboard.module#dashboardModule' // User Profile Module path:'profile', loadChildren:'app/user-profile/user-profile.module#UserProfileModule' } 路线，就会加载login。在您的登录模块中应该导出这样的路由

#LoginModule

此外，在您的const routes: Routes = [ { path: '', children: [ { path: '', component: YourComponentToLoad } ] } ] @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class LoginRoutingModule { } 中，您可以将预加载策略定义如下，以便在初始化应用程序后，懒惰模块将立即开始加载。因此，当用户点击链接并想要查看延迟加载的模块时，它就会准备就绪。

app-routing.module.ts

app-routing.module.ts