CODEWITHSUNDEEP
angulartypescripttsconfig
gs_it
gs_it

Reputation: 103

Path aliases for Angular library project not wokring

I am trying to implement an Angular library with ui elements. The library is a monorepo which then published like this

@lib/core
@lib/i18n
@lib/ui

The development is beeing done under Storybook.

This is my structure.

projects
    lib
        core
        i18n
        ui
tsconfig.json

Components inside ui directory have dependencies in the core and i18n directories.

The parent tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": [
      "es2018",
      "dom"
    ],
      "paths": {
        "@lib/core": ["projects/lib/core/src/*"],
        "@lib/i18n": ["projects/lib/i18n"]
    }
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Files from i18n directory are resolved correctly and i can ctrl+click them (using phpstorm) to move to the files.

Files form @lib/core throw these errors during compilation

ERROR in /path/to/project/projects/lib/ui/src/lib/widgets/help/components/widget-button/cl-widget-button.component.ts
TS2307: Cannot find module '@lib/core' or its corresponding type declarations.

Also the structure of core directory

Also the structure of core directory

public-api.ts is my entry point including all the exports

// index.ts
export * from './public-api.ts';

The reason i am using type aliases is to emulate the production like imports where all the packages will be installed through npm separately.

If i use the relative path (../../../../path/to/core) then everyting builds and runs as it should but in production this path does not exists, of course.

What i tryed:

I am starting to beleive that i can't make an alias of a stucture like that.

What am i missing here?

Upvotes: 2

Views: 2472

Answers (1)

Sergey Andreev
Sergey Andreev

Reputation: 1488

I can provide my solution

  1. In root tsconfig.json put this:
    "paths": {
      "@lib/core": [
        "dist/lib/core", // it depends on your library name
        "dist/core"
      ],
      ...
    }
  1. Add command in package.json like this
"start:storybook": "ng build lib && ng serve storybook"

Upvotes: 1

Related Questions