Repository navigation
VSCode Angular 9 Auto-Import for Custom Libraries #37222
Description
Activity
Does this reproduce in the latest VS Code insiders build with all extensions disabled?
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.0To 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 packProceed 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.tgzWhen 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';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
Reacted by Christopher Ebejermarcusingogo, 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 ?
Reacted by Joseph, Gunjan and Habib MokniReacted by BmoreChristopher Ebejer (@chrisebejermt) I got the same issue, adding the code to tsconfig.json works for me!! 😄
"typeRoots": [
"node_modules"
]Works for me thanks Christopher Ebejer (@chrisebejermt)
For Angular 13, below solution worked for me:
Add this in tsconfig.json under compilerOptions."typeRoots": ["node_modules/@angular/material"]This solution works, but it also yields a design time error in VS code:
'Cannot find type definition file for
esm2020'Reacted by Ravi Sisodia
TS Template added by Matt Bierner (@mjbvz)
TypeScript Version: 3.8.3
Search Terms
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 --savecommand.VSCode is unable to auto-import components or classes defined in this package.
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?