Question

20

How to find the reason of Cannot find module for nrwl modules?

rated 0 times [ 25] [ 5] / answers: 1 / hits: 26530 / 6 Years ago, thu, august 30, 2018, 12:00:00

I use nrwl.io in my project.

I created several libs:

ng g lib rest //ok

ng g lib services //ok

ng g lib models //created ok, but Cannot find module  later on!

All of these libs were successfully created, but when I try to import my models lib I see error Cannot find module:

import { ModelA, ModelB } from '@myproj/models'; //Cannot find module '@myproj/models'

The question is: How and where I can check if my '@myproj/models' was properly registered?

P.S. I can see models module in nx.json, angular.json and tsconfig.json. And I can see no difference with other modules.

P.P.S. I use @nrwl/nx: 6.1.0 and @nrwl/schematics: 6.1.0

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

reina

Add To Favorites

Follow

Total Points: 241

Total Questions: 82

Total Answers: 94

Location: New Caledonia

Member since Thu, Mar 23, 2023

1 Year ago

answered 6 Years ago ellisw · Accepted Answer

I also had the same issue. Created a library and tried to use it in multiple projects.
First make sure your library is added in main tsconfig.json -> paths property.

paths: {

  @projectName/LibraryName1: [libs/LibraryName1/src/index.ts],

  @projectName/LibraryName2: [libs/LibraryName2/src/index.ts],

  ....

}

Then you must have your project added in your main angular.json file.

projects: {

   LibraryName1: {

   root: libs/LibraryName1,

   sourceRoot: libs/LibraryName1/src,

   projectType: library,

   prefix: projectName,

   projectType: library

   ...

  }

}

Then obviously check tsconfig.json file for that app in which you are going to use lib. The key is to remove paths property. Because you already added in main tsconfig.json (in my case I used nrwl (a technique for managing multiple apps)).

Now you should be able to reference any of your lib projects like so :

import { class1,class2 } from '@projectName/libraryName1';

Don't forget to export your classes (assuming you have models library ) using index.ts like so :

export * from './lib/class1';

export * from './lib/class2';

Or
If you have any UI library that have components. You should create a module add those components in it and then export it using index.ts
The module file should be in lib folder. e.g

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { NumberOnlyDirective } from './directives/number-only.directive';



@NgModule({

imports: [CommonModule],

declarations: [NumberOnlyDirective],

exports: [NumberOnlyDirective]

})

export class UiModule {}

index.ts file for UI library

export * from './lib/ui.module';

Add UI module's reference in your project app.module.ts

import { UiModule } from '@projectName/LibraryName1';

in imports also

 imports: [

BrowserModule,

FormsModule,

ReactiveFormsModule,

HttpClientModule,

NgxPaginationModule,

Ng2OrderModule,

Ng2SearchPipeModule,

AngularEditorModule,

RichTextEditorAllModule,

NgxPrintModule,

DevExpressModule,

UiModule

...

],