How to enable auto import for custom Angular library in WebStorm / PhpStorm?

Question

I'm trying to create an Angular 9 library with some components and classes I use in different projects. What I did:

1. ng new my-lib-project --create-application=false
2. cd my-lib-project
3. ng generate library my-lib --prefix lb
4. I created a test-class.ts file in projects/my-lib/src/lib/ with an easy LibTestClass definition (see below)
5. I added the line export * from './lib/test-class'; to the public-api.ts file.
6. I called ng build my-lib and copied the result to myOtherProject/node_modules/

Problem: when I type const test = new LibTestClass(); in the app.component.ts file of the myOtherProject, PhpStorm does not show the import hint to easily add the import line for TestClass. How can I make this auto import work for my custom library?

Further information:

• IDE: PhpStorm 2020.1.1
• OS: MacOS
• Angular: 9.1.6
• my-lib is not released to npm

test-class.ts:

export class LibTestClass {

  private test = '';

  constructor() {}
}

Answer 1

Thanks to @lena I found the answer: In order to enable import hints for your Angular library you have to install a (local) dependency to your library build. In my case the solution is:

npm install --save ../my-lib-project/dist/my-lib

This creates a link to the local build of your library and is updated automatically when you build your library. I recommend to use ng build --watch in development.