Nx: [Nx Angular] VSCode display error 'cannot find module ...' when import Nx library

[nhaancs]

Current Behavior

I have a workspace named nhaancs. Inside my workspace has:

• 1 application named web-portal
• 1 library named models, which have a model named UserModel, exported in the index.ts file.

Inside apps/web-portal/src/app:

• Import UserModel in AppComponent by the following: import {UserModel} from '@nhaancs/models' => It's OK
• Create a service named UserService (use providedIn: 'root', not provided in providers array) and import UserModel like above => The code compiled success, app still working but VSCode display error Cannot find module '@nhaancs/models' or its corresponding type declarations.
• Import UserSevice in providers array of AppModule, the error is gone.

Expected Behavior

VSCode do not display the error even the service is not imported into app module's providers.

Steps to Reproduce

• Create workspace: npx create-nx-workspace@latest
• Input workspace name nhaancs
• Choose create with an Angular application
• Input application name web-portal
• Finish create workspace with other default values
• Use Nx extension for VSCode to create an Angular library named models
• Inside models create an empty class named UserModel and export it in index.ts
• In file apps/src/app/app.component.ts, import UserModel: import {UserModel} from '@nhaancs/models' => It's OK.
• In apps/src/app, run command ng g s user --skipTests to create user.service.ts file
• In file apps/src/app/user.service.ts, import UserModel: import {UserModel} from '@nhaancs/models' => VSCode display error Cannot find module '@nhaancs/models' or its corresponding type declarations. (Even The code compiled success, app still working)
• In file apps/src/app/app.module.ts, import UserService to providers array => the error in apps/src/app/user.service.ts file is gone

@NgModule({
  ...
  providers: [UserService], // <<< here
  ...
})
export class AppModule {}

Failure Logs

Environment

@nrwl/angular : 10.0.6
  @nrwl/cli : 10.0.6
  @nrwl/cypress : 10.0.6
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 10.0.6
  @nrwl/linter : Not Found
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 10.0.6
  @nrwl/web : Not Found
  @nrwl/workspace : 10.0.6
  typescript : 3.9.7

[fbaba-nibtravel]

@nhaancs have you checked if your tsconfig > path contains the name you're expecting?
Also, I have been experiencing a lot of inconsistencies due to TSLint extension for VSCode. Sometimes I need to restart VSCode to get the correct intellisense

[nhaancs]

@nhaancs have you checked if your tsconfig > path contains the name you're expecting?
Also, I have been experiencing a lot of inconsistencies due to TSLint extension for VSCode. Sometimes I need to restart VSCode to get the correct intellisense

Yes, the paths is correct

[drakenfly]

This may be related to #3409

[nhaancs]

This may be related to #3409

I think the situation is quite different. The errors only happen in the file that not a component.

[aciccarello]

I was seeing this because the version of VS Code on my work machine was using an outdated version of TypeScript by default. Telling VS Code to use the workspace version of TS (3.9) fixed the issue for me. I found this solution from the Angular CLI issues.

this is a duplicate of #8138 and was addressed in version 10 via #17586.

The fix requires TypeScript 3.9 which leverages the usage of the new "solutions style" tsconfig files. You can read about this here https://devblogs.microsoft.com/typescript/announcing-typescript-3-9-rc/#solution-style-tsconfig

_Originally posted by @alan-agius4 in https://github.com/angular/angular-cli/issues/17873#issuecomment-640572787_

[FrozenPandaz]

Ah, let me explain what is happening here.

The editor will traverse upwards from the file that you have open to find a file named tsconfig.json (it must be exactly this). In Nx 10 (and Angular CLI 10), that file is a solution tsconfig.json which means it references other tsconfig files such as the tsconfig.app.json. The tsconfig.app.json only includes the main.ts and the polyfills.ts to limit what get's typechecked during the build. This issue is actually specific to Angular apps in Nx because in our React and Node apps, our tsconfig.app.json includes all .ts files. An ugly solution to this issue is maybe to include all .ts files in Angular apps as well but I'll think on it for a bit.

[brendanalexdr]

I get this error just implementing the Nx example for shared code: https://nx.dev/angular/tutorial/07-share-code

[nestorvanz]

A solution for this is restore the tsconfig.json of the project (angular app) to the latest version before the update. It seems like the "circular" reference is causing the problem here.

The tsconfig.json now looks like this.

{
  "extends": "../../../tsconfig.base.json",
  "compilerOptions": {
    "types": ["node", "jest"]
  }
}

[nhaancs]

A solution for this is restore the tsconfig.json of the project (angular app) to the latest version before the update. It seems like the "circular" reference is causing the problem here.

The tsconfig.json now looks like this.

{
  "extends": "../../../tsconfig.base.json",
  "compilerOptions": {
    "types": ["node", "jest"]
  }
}

@nestorvanz Unfortunately, this solution is not working for me

[nhaancs]

Ah, let me explain what is happening here.

The editor will traverse upwards from the file that you have open to find a file named tsconfig.json (it must be exactly this). In Nx 10 (and Angular CLI 10), that file is a solution tsconfig.json which means it references other tsconfig files such as the tsconfig.app.json. The tsconfig.app.json only includes the main.ts and the polyfills.ts to limit what get's typechecked during the build. This issue is actually specific to Angular apps in Nx because in our React and Node apps, our tsconfig.app.json includes all .ts files. An ugly solution to this issue is maybe to include all .ts files in Angular apps as well but I'll think on it for a bit.

@FrozenPandaz do we have any better solutions for this issue

[FrozenPandaz]

A solution for this is restore the tsconfig.json of the project (angular app) to the latest version before the update.

That is a solution. However, I would not recommend it because it re-introduces with having a single tsconfig for both runtime and tests.

It seems like the "circular" reference is causing the problem here.

Can you elaborate on the "circular" reference?

@FrozenPandaz do we have any better solutions for this issue

A preferable solution would possibly look something like:

1. Create a apps/app1/tsconfig.all.json or apps/app1/tsconfig.base.json (name pending)
2. Include all ts files via "include": ["**/*.ts"]
3. Add it as the _last_ reference in apps/app1/tsconfig.json
4. Files included into other tsconfig.*.json will still use those files. Files