Angular14.2.8懒加载不创建代码块
- 在 tsconfig.json 文件中，确保开启了使用“esModuleInterop”选项，以便正确生成代码块：
{ "compilerOptions": { "esModuleInterop": true, //其他选项 } }
- 确认 AppModule 和需要进行懒加载的模块都导入了 RouterModule：
import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; import { LazyLoadedModule } from './lazy-loaded-module';
@NgModule({ imports: [ CommonModule, RouterModule.forChild([{ path: '', component: LazyLoadedModule }]) ], declarations: [ //组件和指令 ] }) export class HomeModule {}
- 在 app-routing.module.ts 文件中使用 loadChildren 导入懒加载模块：
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [ { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) //这是一个懒加载模块 }, //其他路由 ];
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
通过以上步骤，你就可以创建代码块并正确地进行懒加载了。