Angular JS项目中是否可以使用Angular 10类库？

Angular 10 基于 Ivy 编译体系运行，和 AngularJS（1.x）的依赖注入、变更检测逻辑完全不兼容，无法直接引入类库文件复用，以下是两种可落地的实现方案： #

方案1：将Angular 10类库编译为独立UMD包 #

• 操作步骤：
  • 把需要复用的Angular 10类库单独抽离为Angular Library项目，在angular.json中配置构建输出格式为UMD/IIFE，按需将Angular核心依赖打包进bundle，避免AngularJS侧重复引入依赖
  • 构建命令参考：ng build your-lib-name --configuration production --output-hashing none
  • 在AngularJS项目的入口HTML中引入构建生成的.js文件，类库暴露的全局变量可直接在AngularJS的控制器、服务中调用
• 注意事项：
  • 如果类库依赖Angular 10的注入体系，需要在bundle中额外暴露初始化方法，在AngularJS侧调用时手动完成类实例化，不要依赖Angular 10的注入器
  • 涉及DOM操作的类库要规避和AngularJS的$digest循环冲突，类库内部变更需要同步到AngularJS侧时，手动调用$scope.$apply()触发更新

方案2：基于现有iframe通信机制做跨上下文调用 #

• 操作步骤：
  • 你已经通过iframe嵌入了Angular 10页面，可以直接把类库方法挂载到iframe的window对象上，或者通过postMessage封装统一的调用入口
  • 在AngularJS侧封装专用服务，将类库方法调用转换为postMessage请求，监听iframe返回结果后通过Promise返回给调用方
  • 示例代码参考：

    // Angular 10 侧代码：监听postMessage请求
    window.addEventListener('message', (e) => {
      if (e.data.type === 'callNg10Lib') {
        const result = yourLibInstance[e.data.method](e.data.params);
        e.source.postMessage({
          type: 'ng10LibRes',
          requestId: e.data.requestId,
          data: result
        }, e.origin);
      }
    })
    

    // AngularJS 侧封装调用服务
    angular.module('yourApp').service('ng10LibService', ['$q', ($q) => {
      const ng10Iframe = document.getElementById('your-ng10-iframe');
      return {
        invoke: (methodName, params) => {
          const defer = $q.defer();
          const requestId = Math.random().toString(36).slice(2);
          const resListener = (e) => {
            if (e.data.type === 'ng10LibRes' && e.data.requestId === requestId) {
              window.removeEventListener('message', resListener);
              defer.resolve(e.data.data);
            }
          };
          window.addEventListener('message', resListener);
          ng10Iframe.contentWindow.postMessage({
            type: 'callNg10Lib',
            requestId: requestId,
            method: methodName,
            params: params
          }, '*'); // 生产环境请替换为iframe实际的源地址
          return defer.promise;
        }
      }
    }])
    

• 优势：无需单独打包类库，直接复用现有Angular 10项目的运行环境，不会出现版本依赖冲突

选型参考：如果类库是无DOM依赖的工具类，优先选择方案1，调用性能更高；如果类库涉及UI组件或依赖Angular 10的运行时能力，优先选择方案2，改造成本更低。

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