Angular 10: Path Mapping shows error in VSCode when import

Question

So I updated a project that was in Angular 8.2 (a project template) to version 10 and followed the instructions from https://update.angular.io/ and everything was ok, but when implemented Path Mapping the pain started, I'm getting this error everywhere:

Cannot find module '@environments/environment' or its corresponding type declarations.ts(2307)

And this error applies to @environments and @modules, which are declared in paths, the others does not show any error cause they are not in use.

Right now the project is building correctly when use ng build, haven't tried ng build --prod, no errors appear but Visual Studio Code (v1.46.1) is showing me the imports with errors, this is that I have:

src/tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./e2e/tsconfig.json"
    }
  ]
}

src/tsconfig.app.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./lw/app",
    "types": []
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"],
  "exclude": ["src/test.ts", "src/**/*.spec.ts"]
}

src/tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/lw",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "emitDecoratorMetadata": true,
    "noImplicitAny": false,
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
      "@angular/*": ["./node_modules/@angular/*"],
      "@assets/*": ["assets/*"],
      "@environments/*": ["environments/*"],
      "@api/*": ["app/api/*"],
      "@components/*": ["app/components/*"],
      "@login/*": ["app/login/*"],
      "@models/*": ["app/models/*"],
      "@pages/*": ["app/pages/*"],
      "@services/*": ["app/services/*"],
      "@shared/*": ["app/shared/*"]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    "strictInjectionParameters": true
  }
}

NOTE: Have tried with "baseUrl": "src" and "baseUrl": "./src" and "baseUrl": "./" and nothing change.

Build Result

$ ng build
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 12.2 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 14.8 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 12.2 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 14.8 kB [initial] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 928 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 930 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.16 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 2.51 MB [initial] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 167 kB [entry] [rendered]
Date: 2020-07-03T02:50:44.017Z - Hash: aa2180f982b4b754ebb6 - Time: 8621ms

VSCode info

Version: 1.46.1 (user setup)
Commit: cd9ea6488829f560dc949a8b2fb789f3cdc05f5d
Date: 2020-06-17T21:13:20.174Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363

Angular CLI

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.1
Node: 12.18.1
OS: win32 x64

Angular: 10.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.1
@angular-devkit/build-angular     0.1000.1
@angular-devkit/build-optimizer   0.1000.1
@angular-devkit/build-webpack     0.1000.1
@angular-devkit/core              10.0.1
@angular-devkit/schematics        10.0.1
@angular/cli                      10.0.1
@ngtools/webpack                  10.0.1
@schematics/angular               10.0.1
@schematics/update                0.1000.1
rxjs                              6.5.5
typescript                        3.9.6
webpack                           4.43.0

Also here is a picture of how my project is organized

Also one really weird thing that happens is for example I have 2 Services (I'm having the problems in every Service) one CityService (which is in use) and ColorService (which is not in use), CityService is not showing any error and I can access the module definition (F12), but in ColorService with the same structure the problems appear and are in red.

Answer 1

I have resolved this with below changes.

1. Copy all code the from tsconfig.base.json or tsconfig.app.json to tsconfig.json file and remove tsconfig.base.json or tsconfig.app.json.

2. Change the path of tsconfig.app.json or tsconfig.base.json extends to

    {
    "extends": "../tsconfig.json" 
    ...
    }
   

Below is the code of tsconfig.json file.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "strict": false,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "@app-models": [
        "src/app/model/index"
      ],     
      "@app-core": [
        "src/app/core/index"
      ],
      "@app-shared": [
        "src/app/shared/index"
      ]
    }
  }
}

A) If you have an active ng serve, restart the ng serve

CTRL + C
ng serve

B) If you don't have an active ng serve, do this:

Command + Shift + P
Search for "TypeScript: Restart TS Server"
Hit enter