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.). 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)
It functionally doesn't affect me much, but it is annoying (and kills automatic imports).
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):
{
"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/**"
]
}
}
...
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
In my case, I forgot to setup jest.config.js
file according of my project.
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
tsconfig.ts
{
"compilerOptions": {
....
"paths": {
"@app1/*" : ["src/*"]
}
}
}
packages.json
"jest": {
...
"rootDir": "src",
"moduleNameMapper": {
"@app1/(.*)$": "<rootDir>/$1"
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With