Angular 11 tsconfig 路径别名无法识别

问题描述

我正在使用 Angular 11 并尝试使用像 import {smthg} from '@common' 这样的短导入而不是 import {smthg} from '../../../common'

但我总是在 IDEA 中遇到错误：TS2307: Cannot find module '@common' or its corresponding type declarations.

尝试编译 .ts 文件 (ng serve) 时在控制台中出现同样的错误

有趣的是，当我在导入中添加 /index 时，IDEA 停止诅咒，但错误并没有在控制台中消失

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 错误：

控制台 tsc 错误：

版本：

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

解决方法

事实证明，angular 引擎允许根据 tsconfig 中“路径”中指定的内容为路径创建别名。

但是为了能够访问模块的子文件夹以及从模块顶层的 index.ts 导出的内容，您需要像这样指定“路径”：

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

我遇到了同样的问题。我试图将使用 Angular 10 制作的项目迁移到 Angular 11，以处理 ./src/app 文件夹，但这没有用...

但是在一个新项目中，我让路径别名以这种方式工作：

更新您的 Angular cli：

PS C:\Projects> npm uninstall --g @angular/cli
PS C:\Projects> npm i --g @angular/cli

创建一个新项目，将 strict mode 设置为 true：

PS C:\Projects> ng new <<name-project>>
PS C:\Projects> cd <<name-project>>

当 CLI 结束时，编辑 tsconfig.app.json 如下：

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
    "extends": "./tsconfig.json","compilerOptions": {
        "outDir": "./out-tsc/app","types": [],// ADD THIS ↓↓↓
        "baseUrl": "./","paths": {
            "@tool/*": [ "src/app/tool/*" ],"@models/*": [ "src/app/models/*" ],"@services/*": [ "src/app/services/*" ],"@components/*": [ "src/app/components/*" ],"@interfaces/*": [ "src/app/interfaces/*" ]
        }
        // ADD THIS ↑↑↑
    },"files": [
        "src/main.ts","src/polyfills.ts"
    ],"include": [
        "src/**/*.d.ts"
    ]
}

...和 tsconfig.json 如下：

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
    "compileOnSave": false,"compilerOptions": {
        "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": {
        "enableI18nLegacyMessageIdFormat": false,"strictInjectionParameters": true,"strictInputAccessModifiers": true,"strictTemplates": true
    }
}

...最后，编辑 tsconfig.spec.json 如下：

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
    "extends": "./tsconfig.json","compilerOptions": {
        "outDir": "./out-tsc/spec","types": [
            "jasmine"
        ],"baseUrl": "./","@interfaces/*": [ "src/app/interfaces/*" ]
        }
    },"files": [
        "src/test.ts","include": [
        "src/**/*.spec.ts","src/**/*.d.ts"
    ]
}

首先，您需要重新启动代码编辑器，以确保 linter 没有问题。

我遇到了类似的问题，在我的情况下，配置是正确的，但当时由于缺乏经验我不知道这一点，所以我一直在尝试我能找到的不同解决方案。事实证明，问题是在 IDE 重新启动之前，linter 无法看到配置更改（添加的路径定义）。

aliases angular angular angular11 tsconfig typescript typescript typescript