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

Question

我正在进行一些 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

Answer 1

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

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

对于那些不知道的人，您可以通过打开命令面板(Ctrl+Shift+P 或 ⌘+Shift+P 或只是 F1) .ts文件并输入 Restart TS并选择该命令。

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

最大的收获:您不需要它们中的任何一个:

If the "files" and "include" are both left unspecified, the compiler defaults to including all TypeScript (.ts, .d.ts and .tsx) files in the containing directory and subdirectories except those excluded using the "exclude" property. JS files (.js and .jsx) are also included if allowJs is set to true.

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

希望对您有所帮助!