Angular16自定义独立组件UI库引入报错：Cannot read properties of undefined (reading 'ɵcmp')

排查方向与修复步骤 #

1. 核对库的构建配置 #

• 打开angular.json，检查库的build配置：projects.[你的库名].architect.build.options里得有"outputPath": "dist/[你的库名]"，同时tsconfig.lib.json的compilerOptions.outDir要对应到正确的dist子目录。
• 再看public-api.ts导出的所有独立组件，每个都得加standalone: true元数据，必要的依赖模块（比如CommonModule）也不能漏导。

2. 修正库的导出链 #

• 根目录的index.ts别去导dist下的文件，直接导源码里的public-api.ts就行，正确写法是：

  export * from './projects/[你的库名]/src/public-api';
  

  （毕竟构建后的文件会由npm自动处理，不管是本地开发还是通过Git引入，都得用源码路径导出）

3. 检查应用里的导入路径 #

• 导入库组件时，要用库的包名，别写相对路径。比如：

  import { 你的独立组件 } from '@你的组织名/你的库名';
  

• 如果是通过Git URL直接加到package.json里的，要么确保库的dist目录已经提交到Git，要么在应用的package.json里加个postinstall脚本，让它装完包自动构建库：

  "scripts": {
    "postinstall": "cd node_modules/[你的库名] && npm run build"
  }
  

4. 清缓存重新构建 #

• 先清掉Angular缓存和依赖，再重新安装：

  ng cache clean
  rm -rf node_modules package-lock.json
  npm install
  

• 然后分别重新构建库和应用：

  # 到库的目录执行
  npm run build
  # 回到应用目录执行
  ng build
  

5. 确认组件的依赖注入没问题 #

• 如果库的组件依赖服务，要么给服务加providedIn: 'root'，要么在组件的providers数组里声明服务，别因为服务没初始化导致组件实例化失败。

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