VSCode Angular 9 Auto-Import for Custom Libraries

[chrisebejermt]

TS Template added by @mjbvz

TypeScript Version: 3.8.3

Search Terms

• angular

---

I'm currently building an Angular 9 Library using VSCode (version 1.42.1 on MAC OS). I followed the Angular Tutorial on how to create libraries - https://angular.io/guide/creating-libraries.

I also added schematics to the angular package, I'm currently having problems when I add the Library to Angular Application using the ng add ~/projects/my-library-0.01.tgz --save command.

VSCode is unable to auto-import components or classes defined in this package.

Cannot find name 'MyService'.

If I manually add import { MyService } from 'my-library' this works fines.

Is there a reason why the auto-import is not working for custom angular libraries?

[mjbvz]

Does this reproduce in the latest VS Code insiders build with all extensions disabled?

[chrisebejermt]

Good afternoon. Just installed VS Code insiders and ran it with all extensions disabled (actually being a new installation - no extensions installed). The same thing issue replicated.

Version: 1.43.0-insider
Commit: 3943d614597f9f7c384846613d417e97ea6d5ab4
Date: 2020-03-03T21:13:27.328Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 19.3.0

[chrisebejermt]

To replicate the issue I executed the following commands:

-mkdir angular-test
-cd angular-test
-ng n angular-workspace --createApplication=false --skipGit=true
-cd angular-workspace
-ng g library angular-library
-ng build angular-library --prod
-cd dist/angular-library
-npm pack

Proceed to a new Project Folder
-mkdir angular-project
-cd angular-project
-ng n my-application --skipGit=true
-npm i ~/Projects/angular-test/angular-workspace/dist/angular-library/angular-library-0.0.1.tgz

When that is complete, I try to use AngularLibraryService which is the angular library in one of the application components and the following error is prompted.

Cannot find name 'AngularLibraryService'.

If the following line is added manually, the error goes removed and the application works perfectly.

import { AngularLibraryService } from 'angular-library';

[marcusingogo]

Our dev team (5 people) also has this issue and has had it for sometime across multiple versions of vsc

This is specific to angular libraries, in the same work space auto imports work fine for the app (src/app) but when working in the library (projects/libraryname/src) auto imports comes up with no suggestion

[chrisebejermt]

@marcusingogo, after a number of days searching the web, I found that by adding the following code to the tsconfig.json should resolve the auto-import suggestion.

"typeRoots": [
   "node_modules"
 ]

Can you please try it out and see if it works on your project as well ?

[josephjsf2]

@chrisebejermt I got the same issue, adding the code to tsconfig.json works for me!! 😄

[marcusingogo]

"typeRoots": [
"node_modules"
]

Works for me thanks @chrisebejermt

[rutpshah]

For Angular 13, below solution worked for me:
Add this in tsconfig.json under compilerOptions.

"typeRoots": ["node_modules/@angular/material"]

[kobi2294]

This solution works, but it also yields a design time error in VS code:

'Cannot find type definition file for esm2020'