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"

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). — Matt McCutchen, Aug 30 '18 at 15:30
@SCRATK I don't really remember now, but I guess no. I just re-built project from scratch and it works — S Panfilov, Jun 17 '19 at 11:19

score 19 · Answer 1 · answered May 31 '20 at 13:58

19

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

answered May 31 '20 at 13:58

Amos

1,154
1
16
35

1

Who knows that this also requires lol. Thank you for your answer. – Arjun Sep 28 '20 at 10:09
I think this answer should be the accepted one, this one helped me solve the problem. – MarshHawk Feb 15 '21 at 19:26
Thanks, got the same issue... – dbrrt Sep 18 '21 at 17:38
I had to kill the app and reopen (macOs) – arodjabel Sep 07 '22 at 18:21

score 13 · Accepted Answer · answered Nov 01 '19 at 11:29

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

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. — Patrick Michaelsen, Jan 31 '20 at 23:37
@PatrickMichaelsen after checking all my settings several times and tweaking everything, thanks to your comment I didn't waste anymore time. — Derked, Jun 01 '21 at 17:11

score 4 · Answer 3 · answered Feb 28 '20 at 00:25

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.

You are an Enlighten Being descended from Mount Olympus. Thank you! — brando, Aug 24 '20 at 15:34

score 2 · Answer 4 · answered Mar 11 '22 at 17:19

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.

score 1 · Answer 5 · edited Nov 19 '22 at 12:28

1

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

edited Nov 19 '22 at 12:28

Achintha Isuru

2,662
18
24

answered Nov 26 '21 at 04:46

SKL

1,243
4
32
53

Achintha Isuru · Answer 6 · 2022-11-19T12:27:43.370

1

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",

....
}

edited Nov 19 '22 at 12:27

answered Nov 17 '22 at 13:03

Achintha Isuru

2,662
18
24

score 0 · Answer 7 · answered Sep 23 '18 at 05:48

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.

score -1 · Answer 8 · answered Sep 14 '18 at 16:00

-1

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.

answered Sep 14 '18 at 16:00

Jedediah Smith

558
4
10

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

8 Answers8