Angular 5懒加载报错：Cannot find module 问题求助

我来帮你排查这个懒加载失效的问题，看了你的配置和报错信息，主要是几个配置细节出了问题，一步步来修复：

1. 修正Webpack的Loader配置（核心问题） #

你的webpack.config.js里混用了Webpack 3已不推荐的module.loaders和新的module.rules，而且angular-router-loader没被正确加入TypeScript的处理流程里——这个loader是专门解析Angular懒加载语法的，没生效的话Webpack就找不到懒加载的模块。

修改sharedConfig里的module部分，删掉冗余的loaders数组，把angular-router-loader加到TS loader链的最前面：

module: {
  rules: [{
    test: /\.ts$/, 
    include: /ClientApp/, 
    use: isDevBuild ? [
      'angular-router-loader', // 必须放在TS loader前面，先处理懒加载语法
      'awesome-typescript-loader?silent=true', 
      'angular2-template-loader'
    ] : [
      'angular-router-loader',
      '@ngtools/webpack'
    ]
  }, {
    test: /\.html$/, use: 'html-loader?minimize=false'
  }, {
    test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize']
  }, {
    test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000'
  }]
},

2. 清理UsersModule里的冗余Router配置 #

你在users.module.ts里把RouterModule既加在了imports又加在了providers里，这完全没必要——UsersRoutingModule已经通过RouterModule.forChild()导入了路由功能，重复添加会导致路由模块冲突，影响懒加载模块的识别。修改后：

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    UsersRoutingModule // 这里已经包含了RouterModule的功能，无需额外导入
  ],
  declarations: [
    UsersComponent,
    UserFormComponent,
    UsersListComponent,
    UserViewComponent
  ],
  providers: [ UsersResolver ] // 删掉这里的RouterModule
})
export class UsersModule { }

3. 验证懒加载路径（可选） #

你的app-routing.module.ts里的路径写法是对的，但可以试试用基于app目录的绝对路径测试，避免相对路径解析的问题：

loadChildren: 'app/components/users/users.module#UsersModule'

4. 清理缓存并重新构建 #

做完上面的修改后，一定要清理旧的构建文件和依赖缓存：

• 删除wwwroot/dist和ClientApp/dist两个目录
• 执行npm ci（或者npm clean install）重新安装依赖
• 重新运行构建命令（开发环境webpack --mode development，生产环境webpack --mode production）

问题根源总结 #

• Webpack loader顺序错误，导致angular-router-loader没处理懒加载语法，Webpack无法识别要分割的模块
• 冗余的RouterModule配置引发路由模块冲突
• Webpack 3中混用loaders和rules导致部分loader不生效

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