Angular 11 tsconfig 路径别名无法识别

Question

我正在使用 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"
  ]
}

想法错误：

控制台 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

Answer 1

我遇到过同样的问题。我试图将使用 Angular 10 制作的项目迁移到 Angular 11，复制该./src/app文件夹，但这不起作用......

\n

但在一个新项目中，我以这种方式使用路径别名：

\n

\n
• 更新你的角度 cli：
\n

\n

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

\n

\n
• 创建一个新项目，将严格模式设置为true：
\n

\n

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

\n

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

\n

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

\n

\n
• ...tsconfig.json如下：
\n

\n

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

\n

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

\n

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

\n

Answer 2

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

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

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