在Angular类库中引入ng-lightning触发构建错误

这个问题我之前在开发Angular类库时也遇到过，本质是AOT编译过程中无法正确解析ng-lightning组件的模块归属，加上类库的依赖配置和构建细节没处理到位。下面是一步步的解决方案：

1. 调整依赖声明，将ng-lightning设为peer依赖 #

类库不应该把第三方依赖打包到自身产物中，而是由使用类库的宿主应用提供对应的依赖版本。这样既避免版本冲突，也能让Angular CLI正确识别模块的归属关系。

修改projects/some-lib/package.json，把ng-lightning从dependencies移到peerDependencies：

{
  "peerDependencies": {
    "@angular/common": "^14.0.0",
    "@angular/core": "^14.0.0",
    "ng-lightning": "^9.0.0" // 替换为你实际使用的ng-lightning版本
  }
}

2. 修正NglModule的导入路径 #

检查ng-lightning的官方文档，正确的导入方式是直接从ng-lightning包导入，而非子路径。修改你的类库模块文件：

import { NgModule } from '@angular/core';
import { SomeLibComponent } from './some-lib.component';
import { NglModule } from 'ng-lightning'; // 修正导入路径

@NgModule({
  imports: [
    NglModule.forRoot(),
  ],
  declarations: [SomeLibComponent],
  exports: [SomeLibComponent]
})
export class SomeLibModule { }

3. 配置构建允许CommonJS依赖 #

ng-lightning属于CommonJS模块，Angular CLI默认会限制这类依赖的解析，导致AOT编译失败。需要在angular.json的类库构建配置中添加允许该依赖的声明：

找到你的类库项目（如projects/some-lib）的architect->build->options节点，添加：

"allowedCommonJsDependencies": [
  "ng-lightning"
]

完整的配置片段示例：

{
  "projects": {
    "some-lib": {
      "architect": {
        "build": {
          "options": {
            // 其他原有配置...
            "allowedCommonJsDependencies": [
              "ng-lightning"
            ]
          }
        }
      }
    }
  }
}

4. 清理缓存并重新构建 #

完成上述配置后，清理Angular的缓存确保配置生效，再重新构建类库：

ng clean
ng build some-lib

额外说明：如果使用Angular 12+版本，类库默认启用IVY编译器，确保你的ng-lightning版本（9+）支持IVY。若仍有问题，可以在tsconfig.lib.json的angularCompilerOptions中显式添加"enableIvy": true（Angular 12+通常默认已开启）。

测试时，在宿主应用中同时安装你的类库和ng-lightning，导入SomeLibModule后就能正常使用组件内的ngl-badge了。

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