Using path mapping in tsconfig with Angular CLI

Question

I want to use path-mapping to directly reference a library which sits in the same directory structure as my angular application.

Structure:

mycompany-mylib/
src/
tsconfig.json

I've added the following to my tsconfig.json

{      
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
        "@mycompany/mylib": ["mycompany-mylib/lib/src/public_api"],
    }
  }
}

This configuration seems to be correct and Typescript can resolve these paths as I get no errors and full intellisense in Visual Studio Code.

For example:

import { UserClientModule } from '@mycompany/mylib'

However when I run ng serve or ng serve --aot I get an error, that the module was not found (My AngularCLI Version is 1.7.4 ):

ERROR in src/app/core/components/user-profile/user-profile.component.ts(5,43): error TS2307: Cannot find module '@mycompany/mylib'.

This technique should work as there are several blog posts and github issues referencing it. I just can't see what I'm doing wrong. I can fix this in webpack by providing an alias configuraton, but since there is no webpack.config.js in angular cli, I can't do that.

Answer 1

I was able to fix it myself. Angular CLI, by default, uses another config: ./src/tsconfig.app.json , I added my configuration there too and slightly modified the paths like this:

{      
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
        "@mycompany/mylib": ["../mycompany-mylib/lib/src/public_api"],
    }
  }
}

It now compiles fine, as long is there is not a node_modules folder in mycompany-mylib . I would still thankfull for a solution to this.