Angular 10：路径映射在导入时在 VSCode 中显示错误

Posted 2023-02-16

【中文标题】Angular 10：路径映射在导入时在 VSCode 中显示错误

【英文标题】：Angular 10: Path Mapping shows error in VSCode when import

【发布时间】：2020-10-23 17:44:05

【问题描述】：

所以我将 Angular 8.2（项目模板）中的一个项目更新到版本 10，并按照 https://update.angular.io/ 的说明进行操作，一切正常，但是当实施路径映射时，痛苦开始了，我到处都收到这个错误：

Cannot find module '@environments/environment' or its corresponding type declarations.ts(2307)

并且此错误适用于路径中声明的@environments和@modules，其他没有显示任何错误，因为它们没有被使用。 p>

目前使用ng build时项目正在正确构建，尚未尝试ng build --prod，没有出现错误但Visual Studio Code（ v1.46.1) 正在向我显示有错误的导入，这是我拥有的：

src/tsconfig.json

  "files": [],
  "references": [
    
      "path": "./tsconfig.app.json"
    ,
    
      "path": "./e2e/tsconfig.json"
    
  ]

src/tsconfig.app.json

  "extends": "./tsconfig.base.json",
  "compilerOptions": 
    "outDir": "./lw/app",
    "types": []
  ,
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"],
  "exclude": ["src/test.ts", "src/**/*.spec.ts"]

src/tsconfig.base.json

  "compileOnSave": false,
  "compilerOptions": 
    "baseUrl": "src",
    "outDir": "./dist/lw",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "emitDecoratorMetadata": true,
    "noImplicitAny": false,
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": 
      "@angular/*": ["./node_modules/@angular/*"],
      "@assets/*": ["assets/*"],
      "@environments/*": ["environments/*"],
      "@api/*": ["app/api/*"],
      "@components/*": ["app/components/*"],
      "@login/*": ["app/login/*"],
      "@models/*": ["app/models/*"],
      "@pages/*": ["app/pages/*"],
      "@services/*": ["app/services/*"],
      "@shared/*": ["app/shared/*"]
    
  ,
  "angularCompilerOptions": 
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    "strictInjectionParameters": true
  

注意：已尝试使用 "baseUrl": "src" 和 "baseUrl": "./src" 和 "baseUrl": "./"，但没有任何变化。

构建结果

$ ng build
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk polyfills polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered]
chunk polyfills-es5 polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered]
chunk main main-es2015.js, main-es2015.js.map (main) 12.2 kB [initial] [rendered]
chunk main main-es5.js, main-es5.js.map (main) 14.8 kB [initial] [rendered]
chunk main main-es2015.js, main-es2015.js.map (main) 12.2 kB [initial] [rendered]
chunk main main-es5.js, main-es5.js.map (main) 14.8 kB [initial] [rendered]
chunk styles styles-es2015.js, styles-es2015.js.map (styles) 928 kB [initial] [rendered]
chunk styles styles-es5.js, styles-es5.js.map (styles) 930 kB [initial] [rendered]
chunk runtime runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk runtime runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk vendor vendor-es2015.js, vendor-es2015.js.map (vendor) 2.16 MB [initial] [rendered]
chunk vendor vendor-es5.js, vendor-es5.js.map (vendor) 2.51 MB [initial] [rendered]
chunk scripts scripts.js, scripts.js.map (scripts) 167 kB [entry] [rendered]
Date: 2020-07-03T02:50:44.017Z - Hash: aa2180f982b4b754ebb6 - Time: 8621ms

VSCode 信息

Version: 1.46.1 (user setup)
Commit: cd9ea6488829f560dc949a8b2fb789f3cdc05f5d
Date: 2020-06-17T21:13:20.174Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363

Angular CLI

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.1
Node: 12.18.1
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.1
@angular-devkit/build-angular     0.1000.1
@angular-devkit/build-optimizer   0.1000.1
@angular-devkit/build-webpack     0.1000.1
@angular-devkit/core              10.0.1
@angular-devkit/schematics        10.0.1
@angular/cli                      10.0.1
@ngtools/webpack                  10.0.1
@schematics/angular               10.0.1
@schematics/update                0.1000.1
rxjs                              6.5.5
typescript                        3.9.6
webpack                           4.43.0

这里还有一张我的项目组织方式的图片

还有一件非常奇怪的事情发生，例如我有 2 个服务（我在每个服务中都有问题）一个 CityService（正在使用）和 ColorService（未使用），CityService 没有显示任何错误，我可以访问模块定义（F12），但在具有相同结构的 ColorService 中存在问题出现并显示为红色。

【问题讨论】：

你有没有解决这个问题我也面临同样的问题。

【参考方案1】：

我通过以下更改解决了这个问题。

只需更改tsconfig.app.json和tsconfi.app.json中extends("extends": "../tsconfig.json",)的路径

将tsconfig.base.json中的所有代码复制到tsconfig.json文件中。

下面是tsconfig.json文件的代码。

  "compileOnSave": false,
  "compilerOptions": 
    "baseUrl": "./",
    "downlevelIteration": true,
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "strict": false,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": 
      "@app-models": [
        "src/app/model/index"
      ],     
      "@app-core": [
        "src/app/core/index"
      ],
      "@app-shared": [
        "src/app/shared/index"
      ]
    
  

A) 如果您有一个活动的 ng serve，请重新启动 ng serve

CTRL + C
ng serve

B) 如果您没有有效的 ng 服务，请执行以下操作：

Command + Shift + P
Search for "TypeScript: Restart TS Server"
Hit enter

【讨论】：

我重新启动了 TS Server 并没有帮助。但请记住，一定要重新启动 VS Code。现在可以了，谢谢！

【参考方案2】：

请尝试更改

'环境/环境'

到

'src/environments/environment'

【讨论】：

仍然无法正常工作，这没有任何改变。

一直在尝试，但似乎是 Visual Studio Code 问题