如何在 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

你需要在你的模块下指定一个路由来执行。

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

你想延迟加载的模块应该有一个父路由。
不要在 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 中，您可以定义如下预加载策略，以便在应用程序初始化后，惰性模块将立即开始加载。因此，当用户单击 link 并希望看到延迟加载的模块时，它就会准备就绪。

app-routing.module.ts

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

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

How to define lazy Module paths in angular2 and load specific module for that path

lazy-loading

angular2-routing

angular