.spec 文件中无法识别 Angular 8+ tsconfig 路径别名

Posted 2023-03-08

【中文标题】.spec 文件中无法识别 Angular 8+ tsconfig 路径别名

【英文标题】：Angular 8+ tsconfig Path Aliases not Recognized in .spec files

【发布时间】：2020-01-27 02:05:18

【问题描述】：

我正在进行一些 Angular 测试，但我的规范文件无法识别我的路径，并且它们在 VS Code 中给了我一个红色波浪线导入警告（并显示在问题中）尽管它们以其他方式工作（测试作品等）。我假设这是一个 tsconfig 问题，而不是一个 linting 问题，因为它给我的错误是：Cannot find module '@feature/<reference path>.<file type>'.ts(2307)

它在功能上对我影响不大，但很烦人（并且会杀死自动导入）。

tsconfig.json：

    "compileOnSave": false,
    "compilerOptions": 
        "module": "esnext",
        "outDir": "./dist/out-tsc",
        "strictNullChecks": true,
        "noImplicitAny": false,
        "noImplicitThis": true,
        "alwaysStrict": false,
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowJs": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "target": "es2015",
        "types": [
            "node",
            "arcgis-js-api",
            "jest"
        ],
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom",
            "esnext.asynciterable"
        ],
        "baseUrl": ".",
        "paths": 
            "core-js/es6/*": [
                "node_modules/core-js/es/*"
            ],
            "core-js/es7/reflect": [
                "node_modules/core-js/proposals/reflect-metadata"
            ],
            "@core/*": [
                "src/app/core/*"
            ],
            "@shared/*": [
                "src/app/shared/*"
            ],
            "@feature/*": [
                "src/app/feature/*"
            ],
            "@test/*": [
                "src/test/*"
            ],
            "@/*": [
                "src/*"
            ]
        
    ,
    "files": [
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "**/*.d.ts"
    ]

tsconfig.spec.json 和 tsconfig.app.json 路径（注意来自 angular-cli 的标准文件夹结构）：

    "extends": "../tsconfig.json",
    "compilerOptions": 
        "outDir": "../out-tsc/spec"
    

angular.json

...
            "test": 
                "builder": "@angular-builders/jest:run",
                "options": 
                    "tsConfig": "src/tsconfig.spec.json",
                    "no-cache": true,
                    "polyfills": "src/polyfills.ts",
                    "configPath": "./jest.config.js",
                    "styles": [
                        "node_modules/font-awesome/css/font-awesome.css",
                        "src/styles.scss"
                    ],
                    "scripts": [],
                    "assets": [
                        "src/favicon.ico",
                        "src/assets",
                        "src/manifest.json",
                    ],
                    "stylePreprocessorOptions": 
                        "includePaths": [
                            "src"
                        ]
                    
                
            ,
            "lint": 
                "builder": "@angular-devkit/build-angular:tslint",
                "options": 
                    "tsConfig": [
                        "src/tsconfig.app.json",
                        "src/tsconfig.spec.json"
                    ],
                    "exclude": [
                        "**/node_modules/**"
                    ]
                
            
...

版本：

Angular CLI: 8.3.6
Node: 12.3.1
OS: win32 x64
Angular: 8.2.8
... animations, common, compiler, compiler-cli, core, forms     
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.6
@angular-devkit/build-angular     0.803.6
@angular-devkit/build-optimizer   0.803.6
@angular-devkit/build-webpack     0.803.6
@angular-devkit/core              8.3.6
@angular-devkit/schematics        8.3.6
@angular/cli                      8.3.6
@angular/pwa                      0.803.6
@ngtools/webpack                  8.3.6
@schematics/angular               8.3.6
@schematics/update                0.803.6
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

【问题讨论】：

确保您的tsconfig.spec.json 扩展了您提供paths 的配置。或者将这些路径放在这个配置中

如上所示，` "extends": "../tsconfig.json",` 我正在扩展它。此外，我尝试将路径直接放入；好像没什么区别。

如果问题只是关于 VSCode 并且尽管一切正常，那么值得在 VSCode github 中创建一个问题

@MapLion 将您的打字稿版本降级为typescript": "3.4.5"

@Sergey 我不认为这是 VSCode 问题；我认为这是一个 typescript/tsconfig 问题，但我想先联系社区，然后再用比任何事情都更烦人的东西来解决问题。

【参考方案1】：

我想这个问题与您的 files 和 include 配置有关。当我包含您相当有限的一组 files 和 include 模式时，我立即看到了您描述的相同问题，原因很简单，并非我的所有文件都与 *.d.ts 匹配。

要查看这是否是导致您出现问题的原因（或者如果您知道您的文件与 *.d.ts 不匹配），我建议您首先删除您的 files 和 include 部分，保存tsconfig.json并在VS Code中重启TS服务器。

不知道的可以在VS Code中重启TS服务器，打开命令面板(Ctrl+Shift+P kbd> 或 ⌘+Shift+P 或只是 F1) 在 .ts 文件中并键入 @987654332 @ 并选择该命令。

如果是适合您的解决方案，那么您只需要考虑在files 和include 中您真正需要什么。 documentation 应该在这方面有所帮助。

最大的收获：您不需要其中任何一个：

如果“files”和“include”都未指定，编译器默认包含包含目录和子目录中的所有 TypeScript（.ts、.d.ts 和 .tsx）文件，除了那些使用“exclude”排除的文件“ 财产。如果 allowJs 设置为 true，则还包括 JS 文件（.js 和 .jsx）。

如果您确实需要这种特殊性，您可能只需将*.ts 和\或*.tsx 模式添加到您的include 模式即可解决问题。

希望对你有帮助！

【讨论】：

谢谢先生。你成就了我的一天，是我的第一个赏金。我还不完全理解这种行为，但我很高兴能解决它。

我很高兴有帮助！回复：files 和 include 的行为：默认情况下，所有 Typescript 文件都包含在内，除非您通过命令行或 tsconfig.json 传递特定文件列表，或通过 include 包含模式。您还可以通过exclude 在tsconfig.json 中排除特定模式。

这帮助我解决了自己的问题。我的与我在 TS/JS 中使用的 webpack 路径别名有关，这些路径需要通知 Typescript 系统，否则找不到它们。我的解决方法是将每个 webpack 别名的“路径”添加到 tsconfig.json 文件中。

【参考方案2】：

就我而言，我忘记根据我的项目设置jest.config.js 文件。

tsconfig.ts
...
"@app/*": ["src/app/*"],
...

和

jest.config.js

module.exports = 
    moduleNameMapper: 
        "@app/(.*)$": "<rootDir>/src/app/$1"
     
;

参考：https://jestjs.io/docs/en/configuration#modulenamemapper-objectstring-string--arraystring

【参考方案3】：

tsconfig.ts

  "compilerOptions": 
    ....
    "paths": 
      "@app1/*" : ["src/*"]
    
  

packages.json

  "jest": 
    ...
    "rootDir": "src",
    "moduleNameMapper": 
      "@app1/(.*)$": "<rootDir>/$1"