如何在angular2中定义惰性模块路径并为该路径加载特定模块 [英] How to define lazy Module paths in angular2 and load specific module for that path

问题描述

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

I have different components and routes based on roles. Now i have defined routes as for certain components as below

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'

现在，每当我导航到登录页面或注册页面时，所有列出的模块块都将全部加载在一起，页面会稍有延迟并卡住，直到模块块未加载.有谁知道如何定义路径并停止特定路径上不需要的模块加载.预先感谢您的帮助

Now whenever I navigate to login or register page all the listed module chunks are getting loaded all together and page is slightly delayed and stucks until module chunks are not loading. Does anyone has idea how to define path and stop the unwanted module load on specific path. Thanks in advance for any help

推荐答案

您将需要指定将在您的模块下执行的路由.

You will need to specify a route under your module will be executed.

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

Note that all lazy-loaded module must follow these three rules.

1. 您要延迟加载的模块应具有一条父路由.
2. 不要在app.module.ts中导入模块.因为如果这样做，就不会出现延迟加载的问题
3. 您将需要在app.routes中的一条路由下进行配置.

1. The module which you want to lazy load they should have one parent route.
2. Dont import module in your app.module.ts. Because if you do then no point of lazy loading
3. Your will need to configure under one route in your app.routes.

因此，要回答您的问题，您将需要这样的配置.

So to answer your question you will need config like this..

{
// 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.在您的登录模块中，应导出这样的路由

So whenever you will hit login route it will load the #LoginModule. In your login module should export routes like this

const routes: Routes = [
    { 
        path: '', 
        children: [
           {
           path: '',
           component: YourComponentToLoad 
           }
        ]
    }
]

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class LoginRoutingModule {

}

此外，在app-routing.module.ts中，您可以按照以下方式定义预加载策略，以便在应用程序初始化后，惰性模块将立即开始加载.因此，当用户单击链接并希望查看延迟加载的模块时，它将准备就绪.

Also, in your app-routing.module.ts you can define preloading strategy as following so that after the app is initialized, lazy modules will start loading immediately. So, when user clicks on a link and wants to see a lazy loaded module, it'll be ready.

app-routing.module.ts

@NgModule({
    imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
    exports: [RouterModule]
})
export class AppRoutingModule {

这篇关于如何在angular2中定义惰性模块路径并为该路径加载特定模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！