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. — jitender
– jitender, Commented Sep 19, 2019 at 9:51

Tony · Accepted Answer · 2019-09-19 10:49:56Z

3

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"
    ]
  }
}

answered Sep 19, 2019 at 10:49

Tony

20.3k7 gold badges42 silver badges62 bronze badges

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

Comments

Gui Brunow · Accepted Answer · 2020-07-29 16:05:59Z

2

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/*"]
}

answered Jul 29, 2020 at 16:05

Gui Brunow

3214 silver badges11 bronze badges

Comments

jitender · Accepted Answer · 2019-09-19 10:31:46Z

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, 2019 at 10:31

answered Sep 19, 2019 at 9:52

jitender

10.4k1 gold badge21 silver badges49 bronze badges

2 Comments

nehalist Over a year ago

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)

jitender Over a year ago

@nehalist i have found something related to your query stackoverflow.com/a/54982488/5621827 hope this will solve your problem

Richie · Accepted Answer · 2021-01-25 10:49:08Z

0

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

answered Jan 25, 2021 at 10:49

Richie

5846 silver badges10 bronze badges

1 Comment

Nico Haase Over a year ago

Please add some explanation to your answer such that others can learn from it

Vijay Sharma · Accepted Answer · 2021-04-21 11:10:26Z

0

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.

answered Apr 21, 2021 at 11:10

Vijay Sharma

8318 silver badges16 bronze badges

Collectives™ on Stack Overflow

Import paths in Angular library

5 Answers 5

Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related