将一个库导入到另一个库时出现“无法导入类 CommonModule”错误

Question

Em

*-图标的模块**

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 {}

Eme

-按钮模块**

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 {}

这两个库的构建成功运行。但是当我使用导入图标库的按钮库时，应用程序服务抛出错误。

[

]() 我的应用程序在以下场景下运行良好，

如果我在应用程序中单独包含图标库 如果我包含按钮库而不使用图标库

预期行为

库需要内部导入。 （另一个图书馆里面的图书馆）

重现步骤

1.创建两个库A和B 2. 在库AModule中导入库BModule 3. 在 Angular 应用程序（demo-app）的应用程序模块文件中导入库 AModule。 4. 在 Angular 应用程序组件中使用库 A 5.运行“nx服务演示应用程序”

Nx报告

NX 报告已完成 - 将其复制到问题模板中

Node : 18.14.0
   OS   : darwin arm64
   npm  : 9.3.1
   
   nx : 14.1.9
   @nrwl/angular : 14.1.9
   @nrwl/cypress : 14.1.9
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.1.9
   @nrwl/eslint-plugin-nx : 14.1.9
   @nrwl/express : Not Found
   @nrwl/jest : 14.1.9
   @nrwl/js : Not Found
   @nrwl/linter : 14.1.9
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.1.9
   @nrwl/web : Not Found
   @nrwl/workspace : 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 {}

✖ 编译失败。

我们在尝试提供应用程序时遇到了同样的错误。原来在库文件夹下有一个node_modules文件夹。如果您

Answer 1

位于库的 package.json 所在的文件夹而不是根文件夹中，则可能会发生这种情况。删除它解决了问题。

您可能在应用程序的根目录导入

Answer 2

，因此您不应将其导出到组件模块中。

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