Summary: I am encountering error TS2307 while trying to import a file using an alias path configured in tsconfig.json, despite believing the path is correct.
The structure of directories in my Angular/nx/TypeScript project appears as follows:
project
|- libs
| |- aaa
| |- bbb
| |- src
| | |- lib
| | | |- ccc
| | | |- components
| | | |- ddd
| | | |- ddd.component.ts
| | |- index.ts
| |- tsconfig.json
|- tsconfig.base.json
tsconfig.base.json includes global paths defined like this:
{
...
"compilerOptions": {
"rootDir": ".",
...
"baseUrl": ".",
"paths": {
...
"@myproject/aaa/bbb": [
"libs/aaa/bbb/src/index.ts"
],
...
This setup works correctly - I can import @myproject/aaa/bbb and access anything exported from index.ts. For example, if I export DddComponent (defined in ddd.component.ts) from index.ts, I can use
import {DddComponent} from '@myproject/aaa/bbb';In tsconfig.json, my intention was to introduce aliases locally within the aaa/bbb module. With these aliases, it should be possible to directly reference any files:
{
"extends": "../../../tsconfig.base.json",
...
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
...
"@lib/ccc/*": [
"./src/lib/ccc/*"
],
...
Now, in index.ts, when I write
import {DddComponent} from './lib/ccc/components/ddd/ddd.component';everything is fine. However, I prefer using my locally defined alias:
import {DddComponent} from '@lib/ccc/components/ddd/ddd.component';(Interestingly, even WebStorm's auto-completion suggests this format when I start typing import {DddComponent}.)
Unfortunately, using the latter import statement leads to build failure:
Error: libs/aaa/bbb/src/index.ts:1:28 - error TS2307: Cannot find module '@lib/ccc/components/ddd/ddd.component' or its corresponding type declarations.
I have a strong belief that this should work, however, it currently does not and the reason eludes me. Is there a way to make my alias function as intended?