Angular 6/7 Consuming a custom library throws error TS2397: Cannot find module '*'

Question

I'm currently trying to upgrade my Angular 2.something project to the latest version. I had a custom angular.config file so i could build 2 app's consuming the same component 'library'. But then the epic release of Angular 6 arrived with real Angular libraries! But now i am stuck (again) trying to refactor my project to this new version.

I've come as far as building a component library (named 'core') into a DIST folder. Even Typescript is okay with this library. But when i try to build my web-app Angular CLI starts complaining that it can't find the module 'core'.

The following code snippet is the public_api.d.ts in the folder dist/core:

export { WdCoreModule } from './lib/wd-core.module';
export { wdApi } from './lib/core/wd.service';
export { ProcessTokenComponent } from './lib/core/process-token.component';
export { GroupByPipe } from './lib/core/group-by.pipe';
export { AvatarComponent } from './lib/avatar/avatar.component';
export { GameElementsModule } from './lib/game-elements/game-elements.module';
export { AchievementsComponent } from './lib/game-elements/achievements/achievements.component';
export { ModalComponentComponent } from './lib/modal-component/modal-component.component';
export { BaseModalService, BaseModalComponent } from './lib/core/basemodal.service';
export { NavMenuComponent } from './lib/nav-menu/nav-menu.component';
.... More exports ahead

I added the path to this library in my tsconfig.json

"paths": {
      "core": [
        "dist/core"
      ],
      "core/*": [
        "dist/core/*"
      ],
}

Then it's time to import Modules and components from the library 'core' into the app called 'cms'.

import { WdCoreModule } from 'core';

No errors yet! Now i'm ready to build my project with: ng serve cms This will throw the following error:

projects/cms/src/app/app.module.ts(52,30): error TS2307: Cannot find module 'core'.

I've been searching all over for a solution to this problem but i'm kinda stuck. Any coding hero who can help me?

Edit: Extra info for solution

I followed the following post to package and install my build library

https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121

The following 2 commands did the trick for me:

//package.json
"npm_pack": "cd dist/core && npm pack",
//then
npm install dist/core/core-0.0.1.tgz --save

Answer 1

You should link your build lib (the .tgz) in your packages.json. The ts.config path is only for dev time..

Answer 2

I had the same problem and found a solution that didn't require me to package the library during development

I solved it adding the paths also to the tsconfig.app.json file present in the directory of the app

{
  "compilerOptions": {
    ...
    "paths": {
      "ika-admin-lib": [
        "../dist/name-lib"
      ],
      "ika-admin-lib/*": [
        "../dist/name-lib/*"
      ]
    }
}

(more context here http://codecleane.rs/2019/07/09/fixing-error-ts2397-cannot-find-module-angular-custom-library/)

Answer 3

During development, I got the same error with the paths present in tsconfig.json. I solved it by putting the paths in the app level tsconfig under- /projects/myproject/tsconfig.app.json

      "mylib": [
        "../../dist/mylib"
      ],
      "mylib/*": [
        "../../dist/mylib/*"
      ]

I don't have a source or documentation for this or a good justification. Whatever articles I have read suggest having the paths in parent and it seems to work for them, perhaps those are for a different version. I just saw the app level tsconfig.app.json and thought of putting the paths there and trying it out, it worked. I do not know why putting the paths in parent tsconfig.json doesn't work.

Here's an excerpt from my version output-

Angular CLI: 7.2.4

Angular: 7.2.16

@angular-devkit/build-angular      0.12.4
@angular-devkit/build-ng-packagr   0.12.4
@angular-devkit/build-optimizer    0.12.4
@angular-devkit/build-webpack      0.12.4

ng-packagr  4.7.1

typescript  3.2.4

A couple of things to note-

1. The relative paths would change. In tsconfig.json, you are at the parent level and the paths look like-

    "paths": {
      "mylib": [
        "dist/mylib"
      ],
      "mylib/*": [
        "dist/mylib/*"
      ]
    }

2. If I only have the paths in the app level tsconfig.app.json, the IDE (Visual Studio Code) complains showing error and the intellisense doesn't work. To work around that, I kept the paths in the parent level tsconfig.json too.

Initially, I just wanted to comment on Maurizio Pozzobon's answer, stating I had done the same and it had worked for me during development. But being a newbie, it didn't allow me to add a comment. So, thought of writing this answer with some more info.