Getting "Unable to import class CommonModule" error while importing a one library into another library

Question

Nx serve throws below error when I used Icon lib inside Button lib. enter image description here

Em*-Icon's module**

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-button's module**

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

Builds of these two libraries run successfully.

But application serve throws error, when I used Button library which imported Icon Library.

[enter image description here](https://i.stack.imgur.com/1KbX9.png)

My app works fine below scenarios,

If I include Icon library alone in app If I include Button library without using Icon library

Expected Behavior Libraries need to be imported internally. (Library inside another library)enter image description here

Steps to Reproduce 1.Create two libaries A & B 2. Import Library BModule inside Library AModule 3. Import Library AModule in your App Module file of Angular app(demo-app). 4. Use Library A in your Angular app components 5. do run 'nx serve demo-app'

Nx Report

NX Report complete - copy this into the issue template

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

Failure Logs

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.

score 0 · Answer 1 · answered Apr 24 '23 at 08:35

0

You probably import CommonModule at the root of your application so you shouldn't export it in your Component Module.

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

answered Apr 24 '23 at 08:35

Wandrille

6,267
3
20
43

I am not exporting CommonModule, only importing it. If I didnt import CommonModule in Library's component Module, while building library it throws error for all directives in template file – sathish Apr 24 '23 at 10:16
From what I see, you export it here: `exports: [CommonModule, EmeraldButtonComponent],` – Wandrille Apr 24 '23 at 10:38
Oh yes, I just added it to check whether this error "Unable to import class CommonModule." getting fixed or not. Getting same error even after removing it. I updated the code in question now. – sathish Apr 24 '23 at 11:04
What's the error log when you remove it ? – Wandrille Apr 24 '23 at 11:14
getting same failure log mentioned in the question .ERROR in libs/emerald-button/src/lib/emerald-button.module.ts:8:4 - 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'). – sathish Apr 24 '23 at 11:28

Getting "Unable to import class CommonModule" error while importing a one library into another library

1 Answers1