Angular库导出独立组件时装饰器转换报错求助

问题原因 #

直接导入库的源码文件路径（而非编译后的库包），导致Angular组件的@Component装饰器语法未经过库的预编译处理，而消费项目的目标环境不支持原生JavaScript装饰器语法，从而触发错误。

解决方案 #

1. 先正确构建Angular库 #

在你的库项目根目录执行构建命令，生成适配目标环境的编译产物：

ng build your-library-name

（替换your-library-name为实际的库名称，对应angular.json中的项目名）

2. 修改导入路径 #

不要直接导入源码路径，改为导入编译后的库包名称。例如：

// 错误写法
import { FormErrorComponent } from 'myLib/projects/form-error/src/public-api';

// 正确写法
import { FormErrorComponent } from 'myLib';

确保消费项目的package.json中已添加库的依赖：

• 本地开发可使用相对路径或file:协议：

  "dependencies": {
    "myLib": "file:../path-to-your-library/dist/myLib"
  }
  

• 发布后直接使用包名版本：

  "dependencies": {
    "myLib": "^1.0.0"
  }
  

3. 验证库的编译配置 #

检查库的tsconfig.lib.json，确保配置与目标环境兼容：

{
  "compilerOptions": {
    "target": "ES2022", // 与消费项目的target匹配或更高
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "angularCompilerOptions": {
    "enableIvy": true, // 确保启用Ivy，独立组件依赖Ivy
    "strictMetadataEmit": true
  }
}

为什么服务导入正常？ #

服务的@Injectable装饰器逻辑相对简单，消费项目的TypeScript编译可能临时兼容了未预编译的源码，但组件的@Component涉及模板编译、组件元数据处理等复杂逻辑，必须依赖库的预编译产物才能在目标环境中正常运行。

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