Path aliases for Angular library project not wokring

Question

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

i18n directory does not contain a src folder.

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

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:

rootDirs typescript option without any luck.
"@lib/core/*": ["projects/lib/core/src/*"], in paths without any luck.
Place the paths options in a different tsconfig file, example inside ui/tsconfig.json without any luck. In fact in this case the i18n stoped working also.

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

What am i missing here?

user_8427699 · Answer

I can provide my solution

In root tsconfig.json put this:

    "paths": {
      "@lib/core": [
        "dist/lib/core", // it depends on your library name
        "dist/core"
      ],
      ...
    }

Add command in package.json like this

"start:storybook": "ng build lib && ng serve storybook"

Path aliases for Angular library project not wokring

1 Answers