Nx中Angular库嵌套引用时出现CommonModule导入及NG6002错误

问题说明 #

在Nx monorepo环境下搭建EmeraldIcon和EmeraldButton两个Angular库，Button库依赖导入Icon库的EmeraldIconModule，两个库单独构建均成功，但执行nx serve demo-app启动demo应用时出现两个核心错误：

• NG3004：提示无法导入CommonModule，该符号未从@angular/common导出；
• NG6002：EmeraldButtonModule已加入AppModule的imports数组，但无法解析为NgModule类。

单独引入Icon库，或引入未依赖Icon库的Button库时，应用可正常运行。

相关代码 #

EmeraldIcon库模块代码 #

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EmeraldIconComponent } from './emerald-icon/emerald-icon.component';

@NgModule({
  imports: [CommonModule],
  declarations: [EmeraldIconComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  exports: [EmeraldIconComponent],
})
export class EmeraldIconModule {}

EmeraldButton库模块代码 #

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EmeraldButtonComponent } from './emerald-button/emerald-button.component';
import { EmeraldIconModule } from '@emerald-ngmaterial/emerald-icon';

@NgModule({
  imports: [CommonModule, EmeraldIconModule],
  declarations: [EmeraldButtonComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  exports: [EmeraldButtonComponent],
})
export class EmeraldButtonModule {}

复现步骤 #

• 创建两个Angular库（A为Button库，B为Icon库）；
• 在库A的Module中导入库B的Module；
• 在Angular应用的AppModule中导入库A的Module；
• 在应用组件中使用库A的组件；
• 执行命令nx serve demo-app。

环境信息 #

• Node: 18.14.0
• OS: darwin arm64
• npm: 9.3.1
• nx: 14.1.9
• @nrwl/angular: 14.1.9
• TypeScript: 4.6.4

错误日志 #

Error: libs/emerald-button/src/lib/emerald-button.module.ts:7:13 - error NG3004: Unable to import class CommonModule.
  The symbol is not exported from /Users/SKumar51/Documents/Emerald/Library/emerald-mono-ngmaterial/node_modules/@angular/common/common.d.ts (module '@angular/common').

7   imports: [CommonModule,
              ~~~~~~~~~~~~

  libs/emerald-button/node_modules/@angular/common/common.d.ts:118:1
    118 export declare class CommonModule {
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    119     static ɵfac: i0.ɵɵFactoryDeclaration<CommonModule, never>;
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    ... 
    121     static ɵinj: i0.ɵɵInjectorDeclaration<CommonModule>;
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    122 }
        ~
    The class is declared here.


Error: libs/emerald-button/src/lib/emerald-button.module.ts:14:14 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

14 export class EmeraldButtonModule {}

✖ Failed to compile.

解决方法 #

1. 修正库的TypeScript路径映射 #

确保Button库的tsconfig.lib.json中，compilerOptions.paths正确配置内部库的引用路径，避免错误指向node_modules中的文件：

"compilerOptions": {
  "paths": {
    "@emerald-ngmaterial/emerald-icon": ["../emerald-icon/src/index.ts"]
  }
}

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

执行以下命令清理缓存、重置Nx并重新安装依赖：

rm -rf node_modules
rm package-lock.json
npm install
nx reset

3. 检查public-api.ts导出配置 #

确保两个库的public-api.ts都正确导出对应的NgModule：

• Icon库public-api.ts：

export * from './lib/emerald-icon.module';
export * from './lib/emerald-icon/emerald-icon.component';

• Button库public-api.ts：

export * from './lib/emerald-button.module';
export * from './lib/emerald-button/emerald-button.component';

4. 开启应用的符号链接保留 #

在应用的angular.json的build配置中添加preserveSymlinks选项，解决模块解析时的符号链接问题：

"architect": {
  "build": {
    "options": {
      "preserveSymlinks": true
    }
  }
}

5. 验证TypeScript版本兼容性 #

当前TypeScript 4.6.4与Angular 14.x（对应Nx 14.1.9）理论兼容，若仍有问题，可尝试将TypeScript升级至4.7.x版本（需符合Angular官方支持范围），并确保所有依赖包版本一致。

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