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"

Scorn

You can try the --traceResolution option to tsc, though this won't tell you about Angular-specific module resolution behavior if there is any (which I'm not familiar with). – Anchovy

Have you found any fix to this? – Teratology

@SCRATK I don't really remember now, but I guess no. I just re-built project from scratch and it works – Scorn

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

Yingyingkow

To save anyone the pain I just went through: if everything looks correct, just try restarting VS Code. In my case, that was all that was needed. – Alcibiades

@PatrickMichaelsen after checking all my settings several times and tweaking everything, thanks to your comment I didn't waste anymore time. – Lampley

Answer 2

In my case it was because I was dumb and didn't restart my TypeScript server in VS Code:

CMD / CTRL + SHIFT + P
>TypeScript: Restart TS Server

Carmarthenshire

Who knows that this also requires lol. Thank you for your answer. – Vernice

I think this answer should be the accepted one, this one helped me solve the problem. – Nafis

Thanks, got the same issue... – Guess

I had to kill the app and reopen (macOs) – Frigging

Answer 3

I also encountered this issue.

Assume the project is named "project1" and the library is named "libray1" (so we're trying to reference the module "@project1/library1"). Referencing the NRWL NX generated library modules works fine from non-Angular (in my particular case Ionic/Angular) contexts, but caused the "Cannot find module" error from Angular apps within the monorepo.

The problem occurred because the Angular application was looking for the barrel file (index.ts) in the location "project1/libs/library1", whereas NX puts the barrel one level down in "project1/libs/library1/src".

The (slightly annoying) solution is to create an additional index.ts file at the "project1/libs/library1" location with the following content:

export * from './src';

This ensures that the code works from all contexts, and is a fix-once solution (for each new library you generate) as opposed to having to add an explcit reference to the package.json file of each Angular app in the repo.

Intinction

You are an Enlighten Being descended from Mount Olympus. Thank you! – Towroy

Answer 4

In case anyone is experiencing this and mentioned solutions didn't help, here's how I fixed it.

• After a while I realized that I could import fine in other places, only the app I was trying had the issue
• This lead me to check tsconfig of the app
• I found that I had set baseUrl: true in tsconfig, which was the reason why the import couldn't be resolved.

TLDR: Remove baseUrl setting from tsconfig.

Hartsell

Answer 5

I had the same issue when I was trying to create new lib. I removed the node_modules and reinstall it back. It fixed the issue

Fragile

Answer 6

This is the answer for anyone who integrated nx to an existing monorepo and got this error.

You need to add root tsconfig.base.json to your application tsconfig.json using something like

{
...

 "extends": "../../tsconfig.base.json",

....
}

Chare

Answer 7

While you import something using @model/something, editor will automatically add a full path to the module (in my case). so this is what I had to do to get the import '@' working.

• delete the editor added full path import. keep only the one you are typing- ie; with @project/models.
• turn the server off and ng serve again.

Ingraft

Answer 8

This is where using --parent-module=apps/myapp/src/app/app.module.ts comes in when creating a lib.

One of the things that flag does is modify the tsconfig.app.json and adds "../../libs/mylib/src/index.ts to the includes which tells TS to use the module.

Ostrom