Repository navigation
VSCode Angular 9 Auto-Import for Custom Libraries #37222
Description
TS Template added by Matt Bierner (@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?
Activity
mjbvz commentedon Mar 4, 2020
Does this reproduce in the latest VS Code insiders build with all extensions disabled?
chrisebejermt commentedon Mar 4, 2020
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 commentedon Mar 4, 2020
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 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.
If the following line is added manually, the error goes removed and the application works perfectly.
import { AngularLibraryService } from 'angular-library';marcusingogo commentedon Mar 4, 2020
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 commentedon Mar 9, 2020
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.
Can you please try it out and see if it works on your project as well ?
josephjsf2 commentedon Mar 11, 2020
Christopher Ebejer (@chrisebejermt) I got the same issue, adding the code to tsconfig.json works for me!! 😄
marcusingogo commentedon Mar 13, 2020
Works for me thanks Christopher Ebejer (@chrisebejermt)
rutpshah commentedon Jun 12, 2022
For Angular 13, below solution worked for me:
Add this in tsconfig.json under compilerOptions.
"typeRoots": ["node_modules/@angular/material"]kobi2294 commentedon Aug 20, 2023
This solution works, but it also yields a design time error in VS code:
'Cannot find type definition file for
esm2020'