Angular 5中能否同时使用Webpack与SystemJsNgModuleLoader？

你的问题核心在于Webpack的模块打包逻辑和SystemJS动态加载机制的冲突——Webpack默认会解析并打包所有它识别的模块路径，导致你原本期望动态加载的./dyn被提前打包或者路径被修改，最终运行时无法发起网络请求加载外部模块。下面是具体的解决方案：

1. 让Webpack忽略动态加载的模块路径 #

Webpack会自动解析代码中的模块引用，哪怕是动态字符串形式的路径。要避免它处理你的动态模块，需要在加载路径上添加Webpack魔法注释/* webpackIgnore: true */，告诉Webpack不要解析这个路径，完全交给SystemJS处理：

import { SystemJsNgModuleLoader } from '@angular/core';

constructor(private loader: SystemJsNgModuleLoader) {}

loadDynamicModule() {
  // 添加webpackIgnore注释，阻止Webpack解析该路径
  this.loader.load(`/* webpackIgnore: true */./dyn#DynModule`)
    .then(moduleFactory => {
      // 在这里处理加载后的模块工厂，比如注入到当前应用中
      const moduleRef = moduleFactory.create(this.injector);
      const component = moduleRef.instance.rootComponent;
      // ...后续逻辑
    })
    .catch(err => console.error('动态加载失败:', err));
}

2. 确保SystemJS在应用中可用 #

SystemJsNgModuleLoader依赖全局的SystemJS实例，所以你需要保证它在运行时存在：

• 最简单的方式是在index.html中直接引入SystemJS资源：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.js"></script>
  

• 如果你希望把SystemJS打包进主应用，可以通过npm安装后导入，并确保它挂载到全局：

  import * as SystemJS from 'systemjs';
  (window as any).System = SystemJS;
  

3. 调整动态模块的路径与格式 #

• 路径问题：打包后应用的部署路径可能变化，建议使用绝对路径而非相对路径加载模块，比如把dyn.js放在assets目录下，加载路径改为/* webpackIgnore: true *//assets/dyn#DynModule，避免相对路径解析错误。
• 模块格式：确保dyn.js是SystemJS兼容的模块格式。如果是用TypeScript编写的dyn.ts，需要在tsconfig.json中配置：

  {
    "compilerOptions": {
      "module": "system",
      "moduleResolution": "node",
      "target": "es5"
    }
  }
  

  编译后的dyn.js会以System.register的形式导出模块，这样SystemJS才能正确识别并加载DynModule。

4. 验证Webpack配置（可选） #

如果上述步骤后仍有问题，可以检查Webpack配置，确保没有意外打包dyn.js：

• 不要在任何静态import中引入./dyn
• 确保dyn.js所在的目录（比如assets）没有被Webpack的module.rules处理为需要打包的模块

这样调整后，Webpack会正常打包主应用为单文件，而运行时SystemJsNgModuleLoader会发起网络请求加载dyn.js，实现动态模块加载的需求。

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