Angular 8+ tsconfig 路徑別名在.spec 文件中無法識別

Question

我正在進行一些 Angular 測試，我的規范文件將無法識別我的路徑，並且它們在 VS 代碼中給了我一個紅色波浪線導入警告（並出現在問題中），盡管它們以其他方式工作（測試工作等） .)。 我假設這是一個 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 服務器。

對於那些不知道的人，您可以通過在.ts文件中打開命令面板（ Ctrl + Shift + P或⌘ + Shift + P或只是F1 ）並鍵入Restart TS並選擇它來在 VS Code 中重新啟動 TS 服務器命令。

如果那是您的解決方案，那么您只需要考慮files並include . 文檔應該在這方面有所幫助。

最大的收獲：你不需要它們中的任何一個：

如果“文件”和“包含”都未指定，則編譯器默認包含包含目錄和子目錄中的所有 TypeScript（.ts、.d.ts 和 .tsx）文件，但使用“排除”屬性排除的文件除外。 如果 allowJs 設置為 true，則還包括 JS 文件（.js 和 .jsx）。

如果您確實需要這種特殊性，您可能只需將*.ts和\或*.tsx模式添加到您的include模式即可解決問題。

我希望這會有所幫助！

Answer 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

Answer 3

tsconfig.ts

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

包。json

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