从库中延迟加载功能模块

Question

我有一个角度 8 应用程序，我想从库中延迟加载功能模块。它在 ng 服务模式下工作，但 ng 构建 --prod 失败。 示例代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppGuardService } from './app-config/app-guard.service';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: '',
canActivate: [AuthGuardService],
children: [
{
path: '',
canActivate: [CustomerGuardService],
component: AppComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'home'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'featureModule',
loadChildren: () => import('@custom/lib').then(m => m.AppModule)
}
]
}
]
},
{
path: '**',
redirectTo: '/'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

我可以为每个微应用程序想到一个包装器模块，但它感觉不是一个干净的解决方案

Answer 1

只需在功能模块路由中path之后和loadChildren : () =>之前添加data: { preload: true }即可。喜欢这个

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppGuardService } from './app-config/app-guard.service';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: '',
canActivate: [AuthGuardService],
children: [
{
path: '',
canActivate: [CustomerGuardService],
component: AppComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'home'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'featureModule',
data: { preload: true }, //This will do lazy loading
loadChildren: () => import('@custom/lib').then(m => m.AppModule)
}
]
}
]
},
{
path: '**',
redirectTo: '/'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

Answer 2

尝试将 path='' 在 Children 之后替换为有意义的路径，这种方式可能会在重定向时引起混淆。