Angular 12中动态导入依赖rxjs的外部JS模块的问题咨询及解决方案探讨

一、如何让动态加载的模块复用Angular/Webpack已打包的依赖 #

你的核心痛点是：动态加载的dynamic_module.js无法识别Webpack打包后的rxjs——因为Webpack会把依赖打包进自身的模块系统，不会直接暴露给全局或外部模块引用。这里有几个可行的方案：

1. 将Webpack打包的依赖暴露为全局变量

你可以在Angular应用中把需要的依赖挂载到全局window对象上，让动态模块直接从全局获取：

• 在Angular的main.ts（或其他初始化入口文件）中添加：

  import * as rxjs from 'rxjs';
  // 将rxjs挂载到全局对象
  (window as any).rxjs = rxjs;
  

• 修改dynamic_module.js的导入逻辑，改用全局变量：

  // 替换原来的import语句
  const { Observable } = window.rxjs;
  export class MyClass{
    hello( msg ) {
      console.log('[MODULE] Hello World');
      console.log(msg);
    }
  }
  

这样动态模块加载时就能直接复用Angular已经加载好的rxjs，无需重新发起HTTP请求。

2. 使用SystemJS的映射配置指向全局依赖

如果你坚持用SystemJS加载模块，可以配置SystemJS把rxjs的导入映射到全局变量：

• 在加载SystemJS后，添加映射配置：

  SystemJS.config({
    map: {
      'rxjs': 'global:rxjs'
    }
  });
  

• 确保你已经按照方案1把rxjs挂载到全局，这样SystemJS加载dynamic_module.js时，会直接使用全局的rxjs，而不是发起HTTP请求。

3. 进阶方案：Webpack Module Federation（适合复杂场景）

如果你的应用规模较大，或者需要动态加载多个外部模块，Angular 12支持Webpack的Module Federation特性。你可以把Angular应用配置为host，把dynamic_module.js所在的模块配置为remote，通过Federation共享依赖。这种方式更规范，但配置相对复杂，需要将动态模块也纳入Module Federation的构建流程（不过你可以把它作为独立的构建产物部署）。

二、重复加载依赖的风险 #

如果不得不通过HTTP重新加载rxjs等依赖，确实会引发一系列问题：

• 内存浪费：浏览器会加载并解析两份完全相同的rxjs代码，占用额外的内存资源，尤其对于大型依赖，影响更明显。
• 实例/类型冲突：来自不同rxjs副本的实例（比如Observable）会被视为不同的类型，使用instanceof判断会返回false，某些依赖于实例类型的逻辑会失效。
• 性能下降：额外的网络请求会增加页面加载时间，重复解析执行JS代码也会占用CPU资源。
• 版本兼容问题：如果后续Angular升级了rxjs版本，而动态模块加载的是旧版本，可能出现API不一致导致的难以排查的bug。

所以除非万不得已，强烈建议优先采用复用已有依赖的方案。

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