Import paths in Angular library

Question

To shorten my import paths within my library I've added

"paths": {
  "@services": ["lib/services"]
}

to my tsconfig.lib.json. My directory structure is mostly default, with having multiple projects consuming one library:

projects
  library/
    src/
      lib/
        services/
          index.ts
    tsconfig.lib.json
  [projects...]

I want to use imports like

import {service} from "@services";

just within my library - but so far I'm getting a "Cannot find module @services" error.

I guess the path is incorrect - but I can't figure out how to fix that. Anyone got an idea?

edit: Used baseUrl: "src" - this works for building, but not when starting one of the projects with ng serve (due to the same error, "cannot find module"). (no aot flag used)

Thanks.

did you add baseurl bcs as per documentation [base url must be specified if "paths" is.](https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping) — jitender, Sep 19 '19 at 09:51

score 2 · Answer 1 · answered Sep 19 '19 at 10:49

Refer to this tsconfig.json. Make sure this config file live at the same level of your src folder

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "paths": {
      "@app/*": [ "src/app/*" ],
      "@core/*": [ "src/app/core/*" ],
      "@environments/*": [ "src/environments/*" ],
      "@shared/*": [ "src/app/shared/*" ]
    },
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

score 2 · Answer 2 · answered Jul 29 '20 at 16:05

I've spent the past couple of day struggling with the same issue and found a solution, for Angular 10 at least.

On tsconfig.lib.json you must define baseUrl like jitender mentioned. Paths need to be relative to where tsconfig.lib.json is located.

Here are two options that worked for me:

"baseUrl": "./",
"paths": {
  "@services/*": ["src/lib/services/*"]
}

and

"baseUrl": "src/lib",
"paths": {
  "@services/*": ["services/*"]
}

jitender · Answer 3 · 2019-09-19T10:31:46.337

0

Did you add baseurl bcs as per documentation base url must be specified if "paths" is.?

you will need to update path in tsconfig.json as well something like

"baseUrl":"./",
 "paths:"{
 "@services/*":["projects/ng-otp-input/src/lib/services"],
...
}

Also you will need to add same config in tsconfig.lib.json For more info Refer to this SO post

edited Sep 19 '19 at 10:31

answered Sep 19 '19 at 09:52

jitender

10,238
1
18
44

Used `baseUrl: "src"` - this works for building, but not when starting one of the projects with `ng serve` (due to the same error, "cannot find module"). (no aot flag used) – nehalist Sep 19 '19 at 09:59
@nehalist i have found something related to your query https://stackoverflow.com/a/54982488/5621827 hope this will solve your problem – jitender Sep 19 '19 at 10:17

score 0 · Answer 4 · answered Jan 25 '21 at 10:49

0

add "importHelpers": true, to your ts config too.

answered Jan 25 '21 at 10:49

Richie

570
6
10

1

Please add some explanation to your answer such that others can learn from it – Nico Haase Jan 25 '21 at 15:42

score 0 · Answer 5 · answered Apr 21 '21 at 11:10

In Angulare 10. We should add in tsconfig.base.json.

"paths": {
  "@services/*": ["src/lib/services/*"]
}

Note: When you make changes then every time you should rebuild your project, Otherwise if use @service it will through error. because if faced multiple times.

Import paths in Angular library

5 Answers5