Angular 8+ tsconfig Path Aliases not Recognized in .spec files

Question

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

Answer 1

I imagine the issue is related to your files and include configuration. 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 .

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.

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.

If that is the solution for you, then you just need to think about what you actually need in files and 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. JS files (.js and.jsx) are also included if allowJs is set to true.

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.

I hope that helps!

Answer 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

Answer 3

tsconfig.ts

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

packages.json

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