如何在Angular项目中配置实现TypeScript编写WebComponents的自动转译

1. 新增WebComponents专属TS编译配置 #

在src/app/web-components目录下新建tsconfig.web-components.json文件，配置如下：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "outDir": "./",
    "rootDir": "./",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": false,
    "experimentalDecorators": true
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

上述配置会把同目录下的TS文件直接编译为JS输出到当前文件夹，兼容你之前的引用路径。

2. 集成到Angular构建流程 #

打开项目根目录的angular.json，找到对应项目的配置节点projects.<你的项目名>.architect，新增一个编译WebComponents的任务：

"build:web-components": {
  "builder": "@angular-devkit/build-angular:execute-command",
  "options": {
    "command": "npx",
    "args": ["tsc", "-p", "src/app/web-components/tsconfig.web-components.json"]
  }
}

然后修改原有build和serve任务的前置依赖，让每次执行ng build/ng serve前自动触发WebComponents的TS编译：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 原有配置保留不变
  },
  "dependsOn": ["build:web-components"] // 新增这行
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    // 原有配置保留不变
  },
  "dependsOn": ["build:web-components"] // 新增这行
}

3. 配置开发时自动转译&热重载 #

修改根目录package.json的scripts节点，把启动命令改成同时监听TS文件变更：

"scripts": {
  // 原有其他脚本保留
  "start": "npx tsc -p src/app/web-components/tsconfig.web-components.json --watch & ng serve",
  "build": "ng build"
}

之后执行npm start启动开发服务即可：修改WebComponents的TS文件时会自动转译为JS，Angular监听到JS变更后会自动重载应用，和你之前的开发流程完全兼容。

可选优化 #

• 如果不需要提交编译后的JS文件，可在根目录.gitignore中添加src/app/web-components/**/*.js（需要保留的原有JS可单独排除）
• 如需自定义元素的TS类型提示，可在src/app/web-components下新增custom-elements.d.ts，按如下格式声明即可：

declare global {
  interface HTMLElementTagNameMap {
    // 替换为你自己的自定义元素标签和对应类名
    "my-custom-btn": MyCustomBtn;
  }
}

• 如果你之前没有配置自定义元素识别，记得在app.module.ts的@NgModule配置中添加schemas: [CUSTOM_ELEMENTS_SCHEMA]，避免Angular模板识别报错。

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