Angular独立组件库导入报错NG1010：组件无法静态分析

这个错误是因为Angular编译器无法静态识别你从组件库导入的独立组件，核心问题出在组件库的打包配置或导出方式上，以下是具体解决步骤：

• 检查组件库的package.json配置
  确保package.json里的关键入口字段指向正确的编译产物，示例配置：

  {
    "name": "your-library",
    "version": "1.0.0",
    "main": "./dist/your-library/fesm2020/your-library.mjs",
    "module": "./dist/your-library/fesm2020/your-library.mjs",
    "es2020": "./dist/your-library/fesm2020/your-library.mjs",
    "typings": "./dist/your-library/your-library.d.ts",
    "peerDependencies": {
      "@angular/common": "^16.0.0",
      "@angular/core": "^16.0.0"
    }
  }
  

  重点保证typings字段存在且路径正确，这是编译器识别组件类型的关键。

• 修正组件库的TypeScript配置
  打开库的tsconfig.lib.json，确保以下配置正确：

  {
    "compilerOptions": {
      "strictMetadataEmit": true
    },
    "angularCompilerOptions": {
      "enableIvy": true,
      "skipTemplateCodegen": false,
      "strictInjectionParameters": true
    }
  }
  

  strictMetadataEmit确保生成可被静态分析的元数据，enableIvy是独立组件的必需配置。

• 规范组件的导出方式
  在库的入口文件（通常是public_api.ts）中，直接静态导出独立组件，禁止动态导出或条件导出：

  // public_api.ts
  export { YourStandaloneButtonComponent } from './lib/standalone-button/standalone-button.component';
  export { YourStandaloneCardComponent } from './lib/standalone-card/standalone-card.component';
  

• 重新打包并重装组件库
  清理旧的编译产物，重新构建打包：

  # 清理dist目录
  rm -rf dist
  # 重新编译库
  ng build your-library
  # 生成新的tgz包
  cd dist/your-library && npm pack
  

  然后在目标Angular应用中，卸载旧包并安装新生成的tgz文件：

  npm uninstall your-library
  npm install ../path/to/your-library-1.0.0.tgz
  

• 检查目标应用的导入代码
  确保导入组件的方式是直接引用，避免使用默认导出或间接导入：

  // 正确写法
  import { YourStandaloneButtonComponent } from 'your-library';
  
  @Component({
    selector: 'app-demo',
    imports: [CommonModule, YourStandaloneButtonComponent],
    template: '<your-standalone-button></your-standalone-button>'
  })
  export class DemoComponent {}
  

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