我有一些项目,我想对组件使用延迟加载。在 app.module.ts 文件中,我从导入部分第三条记录中删除了我到不同组件的路由。在我的 app-routing.module.ts 中,我创建了如下所示的 APP_ROUTES:
const APP_ROUTES : Route[] = [
{
path: '', pathMatch: 'full',
redirectTo: 'login'
},
{
path: 'cars',
loadChildren: 'app/cars/cars.module#CarsModule'
}
];
@NgModule({
imports: [
RouterModule.forRoot(APP_ROUTES)
],
exports: [
RouterModule
]
})
我有一个名为 cars 的主文件夹,我将 CarsRoutingModule 从 app.module.ts 粘贴到 中>cars.module.ts(部分导入)。我在我的汽车模块中创建了 ROUTES,如下所示:
const CARS_ROUTES : Route[] = [
{
path: '',
component: <any> CarsComponent,
children: [
{
path: '',
component: <any>CarsListComponent
},
{
path: ':id',
component: <any>CarDetailsComponent,
resolve: { car: CarResolve }
}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(CARS_ROUTES)
],
exports: [
RouterModule
]
})
我觉得还行。好的,所以我有第二个模块 login.module.ts,我将 app.module.ts 中的 LoginRoutingModule 粘贴到 login.module.ts 中(部分导入) .我创建了如下 ROUTES:
const LOGIN_ROUTES : Route[] = [
{
path: 'login',
component: <any>LoginComponent,
}
];
@NgModule({
imports: [
RouterModule.forChild(LOGIN_ROUTES)
],
exports: [
RouterModule
]
})
而且它看起来也很适合我。我编译我的项目没有错误。我有登录屏幕,所以它很好,但是当我完成登录和密码并进入仪表板时 - 我没有看到像 chunk.js 这样的东西(也进入 Sources 选项卡),如下所示:
猜猜,但如果我错了请纠正我 - 在 angular 4+ 中我们没有 chunk.js 文件?我检查了其他东西。当我的项目中没有延迟加载时,我的登录站点上有更多模块:
就像我们在左侧看到我的调试器在 ng 文件夹中一样,我有:AppModule、CarsModule、CoreModule、LoginModule , 共享模块。 当我在同一个地方添加延迟加载时,我只有 AppModule、CoreModule 和如下所示:
那么现在,我可以确定我的延迟加载工作正常吗?
最佳答案
我知道哪里出了问题。代码非常好,但我使用了 ng serve。当我使用 ng serve --aot(提前)并且我有 cars.module.chunk.js!
关于javascript - 延迟加载不会在 Angular 中创建 chunk.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48459917/