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.

Answer 1

We had the same error when trying to serve an app. It turned out there was a node_modules folder in the folder with the library. That can happen if you npm install inside the folder where the package.json of the library is instead of the root folder. Deleting it solved the problem.

Answer 2

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