Build error 'Module not found' when importing local library in Angular

Question

I'm trying to generate a library for an api client auto-generated with Swagger and use it locally from within my app in Angular7, but I'm not able to make it work :-(

The library is genererated and imported correctly in the app, no warnings / errors in VSCode, but when I run ng build command in the app it throws these errors:

ERROR in ./src/app/diary/diary-data.service.ts
Module not found: Error: Can't resolve 'lib-diary-shoot-api-client/lib/api/api' in 'D:\DANI\vscode\dairy-shoot\src\app\diary'
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'lib-diary-shoot-api-client/public_api' in 'D:\DANI\vscode\dairy-shoot\src\app'

I have tried copying the api client auto-generated with Swagger into my app and it works perfectly, so I discard any problems with the code.

I think it has to be something that I'm doing wrong or missing when encapsulating the code in the library or importing it manually from my app.

I try to reproduce it step-by-step:

1. Created the library with angular-cli

2. Copied api client files into /lib folder

3. Exported internal files in index.ts:

    export * from './api/api';
    export * from './model/models';
    export * from './variables';
    export * from './configuration';
    export * from './api.module';

4. Generated library with angular-cli

5. Copied the /dist/lib files into app

6. Added the path for the library in app ts.config:

    "paths": {
      "lib-diary-shoot-api-client": [
        "./src/lib-diary-shoot-api-client"
      ]
    }

7. Added the import in app.module:

    import { ApiModule } from 'lib-diary-shoot-api-client/public_api';

I really appreciate any help on this. I have followed many tutorials but almost all of them focus on npm publication instead of local use and they don't give many details on the later.

Thanks in advance!

---

EDIT 1: I have found that even with the sample library that ng-cli generates I get the same error when trying to import a service from the library in a service of the app.

If I import the library module in the app module and put the library component tag in the app template it works, the page is rendered correctly with the "it works" message of the library component.

So it seems that the problem is only with services.

Maybe there is a problem with the exports or injectors?

The code looks fine with no warnings / errors in VSCode but when I run the ng build command it throws the same error as above:

ERROR in ./src/app/diary/diary.module.ts
Module not found: Error: Can't resolve 'libs/diary-shoot-client-lib/public_api' in 'D:\DANI\vscode\dairy-shoot\src\app\diary'
ERROR in ./src/app/diary/diary-data.service.ts
Module not found: Error: Can't resolve 'libs/diary-shoot-client-lib/public_api' in 'D:\DANI\vscode\dairy-shoot\src\app\diary'

I have followed the official guides:

https://angular.io/guide/creating-libraries

https://github.com/angular/angular-cli/wiki/stories-create-library#using-your-library-inside-your-apps

Version of Angular CLI:

Angular CLI: 7.0.7
Node: 8.11.0
OS: win32 x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.10.7
@angular-devkit/build-angular      0.10.7
@angular-devkit/build-ng-packagr   0.10.7
@angular-devkit/build-optimizer    0.10.7
@angular-devkit/build-webpack      0.10.7
@angular-devkit/core               7.0.7
@angular-devkit/schematics         7.0.7
@angular/cli                       7.0.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.0.7
@schematics/angular                7.0.7
@schematics/update                 0.10.7
ng-packagr                         4.7.1
rxjs                               6.3.3
typescript                         3.1.6
webpack                            4.19.1

Answer 1

I have found the error, two simple mistakes:

1. Import statement:

This DOES NOT work:

import { DiaryShootClientLibService } from 'libs/diary-shoot-client-lib/public_api';

This DOES work:

import { DiaryShootClientLibService } from 'libs/diary-shoot-client-lib';

The VSCode was suggesting me the first import, the correct is the second.

2. Copying files

ALL files in the /dist/ folder have to be manually copied to the app in which you want to use the library

I was missing the es and fesm folders, only copying the ts files is not enough.

With these two changes it works! :-)

Answer 2

Adding one of index.ts file and exporting everything from public_api.ts or public-api.ts should not include additional path as ../public_api while auto importing in VsCode.

Example of public_api.ts

    /*
     * Public API Surface of @myProject/lib1
     */

      export * from './lib/xxx/abc';
      export * from './lib/xxx/bcd';

Example of index.ts

    /**
     * Helps to get rid of `/public_api` while auto importing from lib.
     */

     export * from './public_api';