Angular 12自定义库集成PrimeNG 12后自动编译报错求助

问题场景 #

主项目已安装PrimeNG 12.2.3，自定义Angular 12库将PrimeNG配置到peerDependencies中，构建库和主项目后执行ng serve正常，但自动编译保存时触发以下错误：

./src/app/app.module.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Symbol Fieldset declared in .../src/main/ngfrontend/ngerp-libraries/node_modules/primeng/fieldset/fieldset.d.ts is not exported from primeng/fieldset (import into .../ngerp-v2/src/app/utils/modules/dynamic-file-import/components/import-matching/import-matching.component.ts)

解决方案 #

1. 配置库的ng-package.json允许非peer依赖 #

在自定义库的ng-package.json中添加allowedNonPeerDependencies，明确指定PrimeNG相关包，避免构建时错误处理依赖：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/your-library-name",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "allowedNonPeerDependencies": ["primeng", "primeicons"]
}

2. 清理依赖缓存并重新安装 #

• 删除主项目和自定义库的node_modules文件夹
• 删除主项目的package-lock.json（或yarn.lock）文件
• 主项目执行npm install重新安装依赖
• 重新构建自定义库：ng build your-library-name

3. 主项目添加TypeScript路径映射 #

在主项目的tsconfig.json中配置路径映射，强制PrimeNG导入指向主项目本地依赖，避免库的依赖干扰：

"compilerOptions": {
  // 其他配置...
  "paths": {
    "primeng/*": ["./node_modules/primeng/*"],
    "primeicons/*": ["./node_modules/primeicons/*"]
  }
}

4. 检查组件导入方式 #

确保库中组件使用完整路径导入PrimeNG模块，避免简写导入导致的解析错误：

// 正确写法
import { FieldsetModule } from 'primeng/fieldset';

// 避免这种写法
// import { FieldsetModule } from 'primeng';

5. 移除库的本地PrimeNG依赖（可选） #

如果自定义库的devDependencies中安装了PrimeNG，可能导致主项目依赖解析混淆，可移除devDependencies中的primeng和primeicons，开发阶段直接依赖主项目的PrimeNG包。

验证 #

1. 重新构建自定义库并更新主项目中的库引用
2. 启动主项目：ng serve
3. 修改任意组件并保存，确认自动编译无报错

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