Angular 5字符串语法懒加载失效问题求助

嘿，我来帮你捋捋这个问题——这种懒加载在JIT能跑但AOT挂的情况，我碰到过好多次，基本都是几个容易忽略的配置细节没到位。咱们一步步排查：

1. 先检查懒加载路由的语法（最常见的坑） #

旧的字符串拼接写法（比如loadChildren: 'app/schedule/schedule.module#ScheduleModule'）在AOT编译下是不兼容的，必须用Angular官方推荐的动态import箭头函数写法，这是AOT支持的标准姿势：

// app.routing.module.ts里的路由配置
const routes: Routes = [
  // ...其他路由
  {
    path: 'schedule',
    loadChildren: () => import('./schedule/schedule.module').then(m => m.ScheduleModule)
  }
];

如果你还在使用旧的字符串写法，直接换成上面的格式，这大概率是问题根源。

2. 确认懒加载模块的路由配置是否完整 #

ScheduleRoutingModule必须正确配置子路由，而且要被ScheduleModule导入：

// schedule-routing.module.ts
const routes: Routes = [
  // 这里必须有默认路由，不然导航到/schedule时找不到对应的组件
  { path: '', component: ScheduleComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ScheduleRoutingModule { }

同时，ScheduleModule里要确保导入了ScheduleRoutingModule，并且没有拼写错误：

// schedule.module.ts
@NgModule({
  imports: [
    CommonModule,
    ScheduleRoutingModule // 必须导入这个路由模块
  ],
  declarations: [ScheduleComponent]
})
export class ScheduleModule { } // 这里的类名必须和路由里的m.ScheduleModule完全一致

3. 核对文件路径的准确性（AOT对大小写/路径很严格） #

AOT编译不像JIT那样能容错路径的大小写或者相对路径错误，比如你写import('./Schedule/Schedule.module')但实际文件是schedule/schedule.module.ts，JIT可能能正常加载，但AOT直接报错。

• 确保import里的相对路径（./或../）和实际文件结构完全匹配
• 文件名和类名的大小写要完全一致（比如ScheduleModule不能写成scheduleModule）

4. 避免循环依赖 #

检查ScheduleModule的imports里，有没有不小心导入了AppModule——这会导致循环依赖，AOT编译直接失败，运行时也会出问题。懒加载模块只需要导入必要的功能模块（比如CommonModule、自己的路由模块）就行。

5. 检查tsconfig.json的编译配置 #

AOT需要特定的TypeScript编译选项，确保你的tsconfig.json里有这些配置：

{
  "compilerOptions": {
    "module": "esnext", // 必须是esnext/es2020，支持动态import
    "target": "es2015",
    "moduleResolution": "node",
    "strict": true
  },
  "angularCompilerOptions": {
    "enableIvy": true, // Angular 9+默认开启，不要手动关闭
    "fullTemplateTypeCheck": true
  }
}

如果module设置成commonjs，动态import在AOT下会无法正常工作。

按照上面的步骤排查一遍，应该就能找到你遗漏的点了。

内容的提问来源于stack exchange，提问作者user1513171