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.

not sure but seems similar issue stackoverflow.com/q/49795010/5043867 — Pardeep Jain
– Pardeep Jain, Commented May 2, 2018 at 8:59
maybe set "baseUrl": "./src" and paths relate to it wiil get it to work, it origin to be "./" , but my is not work, I don't know why! — Cheney
– Cheney, Commented Apr 27, 2019 at 15:05

mode777 · Accepted Answer · 2018-05-02 11:22:19Z

9

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.

answered May 2, 2018 at 11:22

mode777

3,2372 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

roberto tomás Over a year ago

strangely, Ive got a configuration where this does not work either, in angular 5.

trungvose Over a year ago

I have many projects created by angular-cli (a tsconfig.json file in your root and a tsconfig.app.json file in your src folder ). I don't have to modify the tsconfig.app.json on my projects folder. I added all the necessary I need to the tsconfig.json file on the root folder and it works fine.

Collectives™ on Stack Overflow

Using path mapping in tsconfig with Angular CLI

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related