Angular项目中如何将指定TS模块单独打包或嵌入主包？

方案一：将模块单独编译输出到assets目录 #

这种方式保留你原有的addModule('my-compiled-processor.js')调用逻辑，通过构建流程自动完成TypeScript编译并将产物放到assets文件夹。

1. 创建单独的TypeScript配置文件
   在项目根目录新建tsconfig.processor.json，指定编译规则和目标模块：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext", // 匹配动态加载的模块格式要求
    "outDir": "./src/assets", // 输出到assets目录
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/my-processor.ts"] // 仅编译目标模块
}

2. 修改angular.json绑定编译任务
   在项目的angular.json中新增编译处理器模块的任务，并让build任务依赖它，确保每次构建自动执行编译：

"architect": {
  "compile-processor": {
    "builder": "@angular-devkit/build-angular:tsc",
    "options": {
      "tsConfig": "./tsconfig.processor.json"
    }
  },
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      // 原有build配置...
    },
    "dependsOn": ["compile-processor"] // 构建前先执行处理器编译
  }
}

之后执行ng build或ng serve时，my-processor.ts会自动编译为src/assets/my-compiled-processor.js，无需手动操作。

方案二：将编译后的模块以字符串嵌入主包 #

如果不想单独输出文件，可将编译后的JS代码作为字符串打包进主包，直接传入addModule。

1. 安装依赖
   需要用到raw-loader和ts-loader处理TypeScript文件并转为字符串：

npm install raw-loader ts-loader --save-dev

2. 添加自定义Webpack配置
   在项目根目录新建webpack.config.js，配置规则处理目标模块：

module.exports = {
  module: {
    rules: [
      {
        test: /my-processor\.ts$/,
        use: ['raw-loader', 'ts-loader'], // 先编译TS为JS，再转为字符串
        exclude: /node_modules/
      }
    ]
  }
};

3. 修改angular.json启用自定义Webpack
   在build配置中引入自定义Webpack配置：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 原有build配置...
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    }
  }
}

4. 在代码中导入并使用
   直接将模块内容作为字符串导入，传入addModule：

import processorCode from './my-processor.ts';

// 调用addModule时传入字符串形式的编译后代码
await addModule(processorCode);

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