[英]Angular 8+ tsconfig Path Aliases not Recognized in .spec files
I am working on some Angular testing and my spec files will not recognize my paths and they give me a red squiggle import warning in VS Code (and show up in Problems) despite the fact that they work in every other way (testing works, etc.).我正在进行一些 Angular 测试,我的规范文件将无法识别我的路径,并且它们在 VS 代码中给了我一个红色波浪线导入警告(并出现在问题中),尽管它们以其他方式工作(测试工作等) .)。 I am assuming this is a tsconfig issue and not a linting issue as the error it gives me is: Cannot find module '@feature/<reference path>.<file type>'.ts(2307)
我假设这是一个 tsconfig 问题,而不是 linting 问题,因为它给我的错误是: Cannot find module '@feature/<reference path>.<file type>'.ts(2307)
It functionally doesn't affect me much, but it is annoying (and kills automatic imports).它在功能上对我影响不大,但很烦人(并且会杀死自动导入)。
tsconfig.json: 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 and tsconfig.app.json paths (note standard folder structure from angular-cli): tsconfig.spec.json 和 tsconfig.app.json 路径(注意来自 angular-cli 的标准文件夹结构):
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec"
}
}
angular.json 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/**"
]
}
}
...
Versions:版本:
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
I imagine the issue is related to your files
and include
configuration.我想这个问题与您的files
和include
配置有关。 When I included your rather limited set of files
and include
patterns I instantly saw the same issue you describe for the simple reason that not all of my files match *.d.ts
.当我包含您相当有限的files
集并include
模式时,我立即看到了您描述的相同问题,原因很简单,并非我的所有文件都匹配*.d.ts
。
To see if this is what is causing the issue for you (or if you know that you have files not matched by *.d.ts
), I'd recommend starting by simply removing your files
and include
sections, saving tsconfig.json
and restarting the TS server in VS Code.要查看这是否是导致您出现问题的原因(或者如果您知道您的文件与*.d.ts
不匹配),我建议您首先删除您的files
并include
部分,保存tsconfig.json
和在 VS Code 中重新启动 TS 服务器。
For those that don't know, you can restart the TS server in VS Code by opening the Command Palette ( Ctrl + Shift + P or ⌘ + Shift + P or just F1 ) within a .ts
file and typing Restart TS
and selecting that command.对于那些不知道的人,您可以通过在.ts
文件中打开命令面板( Ctrl + Shift + P或⌘ + Shift + P或只是F1 )并键入Restart TS
并选择它来在 VS Code 中重新启动 TS 服务器命令。
If that is the solution for you, then you just need to think about what you actually need in files
and include
.如果那是您的解决方案,那么您只需要考虑files
并include
. The documentation should help on that front. 文档应该在这方面有所帮助。
The biggest takeaway: you don't need either of them:最大的收获:你不需要它们中的任何一个:
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.如果“文件”和“包含”都未指定,则编译器默认包含包含目录和子目录中的所有 TypeScript(.ts、.d.ts 和 .tsx)文件,但使用“排除”属性排除的文件除外。 JS files (.js and.jsx) are also included if allowJs is set to true.如果 allowJs 设置为 true,则还包括 JS 文件(.js 和 .jsx)。
If you do need that specificity, you may just need to add *.ts
and\or *.tsx
patterns to your include
patterns to solve the issue.如果您确实需要这种特殊性,您可能只需将*.ts
和\或*.tsx
模式添加到您的include
模式即可解决问题。
I hope that helps!我希望这会有所帮助!
In my case, I forgot to setup jest.config.js
file according of my project.就我而言,我忘记根据我的项目设置jest.config.js
文件。
tsconfig.ts
...
"@app/*": ["src/app/*"],
...
and和
jest.config.js
module.exports = {
moduleNameMapper: {
"@app/(.*)$": "<rootDir>/src/app/$1"
}
};
Reference: https://jestjs.io/docs/en/configuration#modulenamemapper-objectstring-string--arraystring参考: https://jestjs.io/docs/en/configuration#modulenamemapper-objectstring-string--arraystring
tsconfig.ts tsconfig.ts
{
"compilerOptions": {
....
"paths": {
"@app1/*" : ["src/*"]
}
}
}
packages.json包。json
"jest": {
...
"rootDir": "src",
"moduleNameMapper": {
"@app1/(.*)$": "<rootDir>/$1"
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.