如何修改ng build脚本，同步编译iframe的TypeScript文件？

有两种简单的方法可以实现需求，确保新人仅运行ng build（或npm run build）就能自动编译iframe的TS文件：

方法1：利用npm预执行钩子（最推荐） #

npm会自动执行以pre开头的脚本，对应同名命令。你可以通过添加prebuild脚本，让它在build命令执行前先完成iframe的TS编译：

1. 在项目根目录创建独立的tsconfig.iframe.json，配置编译规则（重点确保输出目录指向assets，让Angular构建时能自动复制到dist）：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "outDir": "./assets",
    "rootDir": "./src/iframe-src", // 你的iframe TS文件存放目录
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/iframe-src/**/*.ts"]
}

2. 修改package.json的scripts字段：

{
  "scripts": {
    "prebuild": "tsc -p ./tsconfig.iframe.json",
    "build": "ng build"
  }
}

这样不管是运行npm run build，还是新人直接执行ng build（若他们习惯通过npm脚本调用），都会先执行prebuild里的TS编译，再启动Angular构建。

如果新人习惯直接敲ng build而非npm脚本，可补充配置：

"scripts": {
  "ng": "npm run prebuild && ng"
}

之后新人运行ng build时，会自动先执行TS编译，再执行原生Angular构建。

方法2：直接串联编译命令 #

把build脚本改成按顺序执行TS编译和Angular构建：

{
  "scripts": {
    "build": "tsc -p ./tsconfig.iframe.json && ng build"
  }
}

这种方法更直接，但仅当新人运行npm run build时才会触发TS编译；若他们直接用ng build命令，编译步骤会被跳过，因此更推荐方法1。

注意事项 #

• 务必保证tsconfig.iframe.json的outDir指向assets目录，这样编译后的JS文件会被Angular构建自动复制到dist/assets，确保iframe能正确加载。
• 独立的tsconfig配置可以隔离iframe和主项目的TS规则，避免依赖或编译选项冲突。

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