Angular-无法加载Lazy加载的模块

Question

我在Angular中遇到了延迟加载模块的问题。我刚刚从Angular 12升级到Angular 13。

有一个模块加载不正确。当浏览器尝试下载模块时，它会得到一个404。所讨论的模块是biot-biot-module。当我在编译后查看LazyChuck文件时，这个模块看起来与其他模块不同。看起来它试图捆绑css。结果是没有生成src_app_biot_biot_module_ts.js。

你知道为什么会这样吗？据我所见，所有模块都是以相同的方式配置的。

Initial Chunk Files                                    | Names                                    | Raw Size
main.js                                                | main                                     | 22.71 MB |
runtime.js                                             | runtime                                  | 15.89 kB |
Lazy Chunk Files                                       | Names                                    | Raw Size
src_app_biot_biot_module_ts.css, biot-biot-module.js   | biot-biot-module                         | 19.34 MB |
src_app_telegrams_telegrams_module_ts.js               | telegrams-telegrams-module               | 12.04 MB |
src_app_model-management_model-management_module_ts.js | model-management-model-management-module | 10.98 MB |
src_app_key-management_key-management_module_ts.js     | key-management-key-management-module     |  5.51 MB |
src_app_gum_gum_module_ts.js                           | gum-gum-module                           |  4.34 MB |
src_app_lora_lora_module_ts.js                         | lora-lora-module                         |  3.30 MB |

应用程序路由模块

const routes: Routes = [
{
path: 'home',
component: HomeComponent,
},
{
path: 'telegrams',
loadChildren: () => import('./telegrams/telegrams.module').then(m => m.TelegramsModule),
},
{
path: 'biot',
loadChildren: () => import('./biot/biot.module').then(m => m.BiotModule),
},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: '**',
redirectTo: '/home'
}
];

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

Biot模块

@NgModule({
declarations: [
// components
],
imports: [
CommonModule,
SharedModule,
BiotRoutingModule
]
})
export class BiotModule { }

Biot路由模块

const routes: Routes = [
{
path: '',
component: BiotComponent,
children: [
{
path: 'rules', component: RulesComponent,
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BiotRoutingModule { }

Answer 1

尝试组合这两个模块，您不需要两个模块。