Angular新手按指南操作遇懒加载模块错误：Uncaught (in promise): TypeError

Hey there! I’ve run into this exact error a few times when setting up lazy loading with Angular, so let’s walk through the most common fixes that might be missing from your tutorial:

先看你遇到的错误详情： #

Uncaught (in promise): TypeError: webpack_require.e is not a function
webpackAsyncContext@webpack-internal:///./src/$$_lazy_route_resource:23:9
SystemJsNgModuleLoader.prototype.loadAndCompile@webpack-internal:///./node_modules/@an...

1. 先确认路由配置的核心语法 #

懒加载的路由必须用**loadChildren（复数！）**，很多新手容易写成单数loadChild直接踩坑。另外不同Angular版本的写法有区别，要和你用的版本匹配：

// Angular 7及以下版本写法
const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: './lazy/lazy.module#LazyModule'
  }
];

// Angular 8+ 推荐的动态导入写法
const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  }
];

如果教程用的是旧语法但你装的是新版本，两种写法都兼容，但一定要保证拼写和路径完全正确。

2. 检查懒加载模块的结构是否合规 #

• 懒加载模块必须自己导入RouterModule.forChild()配置子路由，比如：

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: '', component: LazyComponent }
    ])
  ],
  declarations: [LazyComponent]
})
export class LazyModule { }

• 绝对不能在AppModule的imports数组里直接导入这个懒加载模块！一旦导入就会破坏懒加载机制，直接触发这个错误。

3. 验证Angular CLI与教程版本是否匹配 #

这个错误很多时候是版本不兼容导致的：

• 运行ng version确认你的CLI版本和Angular核心包版本完全一致，不一致的话用npm install @angular/cli@对应版本修复
• 如果是Angular 8+，检查angular.json里的build配置，确保optimization、buildOptimizer是开启状态（默认是开的，别被旧教程误导关闭）

4. 清理缓存重新构建 #

webpack缓存经常会搞出奇怪的问题，试试这几步：

• 运行ng clean清理构建缓存
• 删除node_modules和package-lock.json，重新执行npm install
• 重启开发服务器：ng serve --open

5. 检查polyfills配置 #

错误提到了polyfills.bundle.js，打开src/polyfills.ts确认：

• import 'core-js/es/promise';没有被注释（懒加载依赖Promise）
• import 'zone.js/dist/zone';存在且启用（Angular的核心运行依赖）

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