jeudi 26 septembre 2019

Angular 8+ tsconfig Path Aliases Show Red Squiggles in spec File Imports with Working Tests in VS Code

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.).

example imports:

import { EnvService } from '@core/services/env.service';
import { AppService } from '@core/services/app.service';

tsconfig.json paths:

...
   "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/app/test/*"]
    }
...

tsconfig.spec.json and tsconfig.app.json paths (note standard folder structure from angular-cli):

...
  "paths": {
    "core-js/es6/*": [
        "../node_modules/core-js/es/*"
    ],
    "core-js/es7/reflect": [
        "../node_modules/core-js/proposals/reflect-metadata"
    ],
    "@core/*": [
        "app/core/*"
    ],
    "@shared/*": [
        "app/shared/*"
    ],
    "@feature/*": [
        "app/feature/*"
    ],
    "@test/*": [
        "test/*"
    ]
}
...

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

Aucun commentaire:

Enregistrer un commentaire