通过NPM引入的TypeScript自定义WebComponent在Angular中无法加载

算力阿峰

2026-9-28

解决方案

你当前的问题核心是npm包的入口配置、打包产物的副作用声明有问题，导致Angular加载时没有执行自定义元素的注册逻辑，所以没有报错也不渲染，可按以下步骤排查修正：

第一步：修正npm包的package.json配置
你现在rollup已经把产物打包到dist目录，但没有在包的package.json中声明正确的入口，同时需要标记代码有副作用避免被tree-shake移除：
```
{
  "name": "@kireapp/viewer-test",
  "main": "dist/hello-world-element.js",
  "module": "dist/hello-world-element.js",
  "typings": "dist/hello-world-element.d.ts",
  "sideEffects": true
}
```
另外在你的npm包的tsconfig.json的compilerOptions中添加"declaration": true，用来生成TS类型声明文件。
第二步：修正Angular项目中的引入路径
你之前引入的是包内的源码TS文件，Angular默认不会编译node_modules下的TS文件，因此注册逻辑没有执行，把引入语句改成：
```
import '@kireapp/viewer-test';
```
第三步：验证自定义元素是否注册成功
引入后在浏览器控制台执行customElements.get('hello-world')，如果返回的是HelloWorldElement类，说明注册成功；如果返回undefined，就检查你npm包打包后的dist目录下的js文件，确认是否存在customElements.define('hello-world', HelloWorldElement)这段代码，要是不存在就是rollup打包时被tree-shake移除了，可以在rollup配置中添加treeshake: false关闭摇树优化：
```
export default merge(baseConfig, {
  input: './out-tsc/src/hello-world-element.js',
  output: {
    dir: 'dist'
  },
  treeshake: false
});
```
第四步：核对Angular的Schema配置
如果你是在惰性加载的子模块中使用该自定义元素，需要把CUSTOM_ELEMENTS_SCHEMA添加到对应子模块的schemas数组中，不能仅在AppModule中声明。