CODEWITHSUNDEEP
angulartypescript
nehalist
nehalist

Reputation: 1496

Import paths in Angular library

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.

Upvotes: 1

Views: 11644

Answers (5)

Vijay Sharma
Vijay Sharma

Reputation: 831

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.

Upvotes: 0

Richie
Richie

Reputation: 586

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

Upvotes: 0

Gui Brunow
Gui Brunow

Reputation: 321

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

Upvotes: 2

Tony
Tony

Reputation: 20092

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

Upvotes: 2

jitender
jitender

Reputation: 10429

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

Upvotes: 0

Related Questions