Angular 11 tsconfig Path Aliases not Recognized

Question

I am working with Angular 11 and trying to use short imports like import {smthg} from '@common' instead of import {smthg} from '../../../common'

But I always get errors in IDEA: TS2307: Cannot find module '@common' or its corresponding type declarations.

And same error in console when trying to compile .ts files (ng serve)

Interestingly, when I add /index to the import, then IDEA stops cursing, but the error does not disappear in the console

myAngularProject
│   package.json
│   tsconfig.json
│   tsconfig.app.json
│   angular.json    
│
└───src
    │   main.ts
    │   index.html
    │
    └───app
        │  
        └───common
        │
        └───features

tsconfig.json:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@common/*": ["app/common/*"],
      "@features/*": ["app/features/*"],
      "@platform/*": ["app/platform/*"],
      "@env": ["environments/environment"]
    },
    "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": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

tsconfig.app.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

IDEA error:

console tsc error:

Versions:

Angular CLI: 11.0.7
Node: 14.2.0
OS: darwin x64

Angular: 11.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1100.7
@angular-devkit/core            11.0.7
@angular-devkit/schematics      11.0.7
@angular/cli                    11.0.7
@schematics/angular             11.0.7
@schematics/update              0.1100.7
rxjs                            6.6.3
typescript                      4.0.5

Answer 1

So it turned out that the angular engine allows creating aliases for paths based on what is specified in the "paths" in tsconfig.

But in order to be able to access both the subfolders of the module and what is exported from the index.ts at the top level of the module, you need to specify "paths" like this:

{
  ...
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@common/*": ["app/common/*"],
      "@common": ["app/common/index.ts"]
    }
  ...
  }
}