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

Question

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"

Answer 1

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
...
],