Angular 10: Import using module alias not resolved / Path Mapping not recognised in VSCode

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.

did you get solution for this I am also facing same issue.

Shubhi Sood
– Shubhi Sood

2020-09-11 11:48:00 +00:00
Commented Sep 11, 2020 at 11:48 — Shubhi Sood
– Shubhi Sood, Commented Sep 11, 2020 at 11:48

Bhadresh Patel · Accepted Answer · 2022-04-28 09:46:49Z

4

I have resolved this with below changes.

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

edited Apr 28, 2022 at 9:46

answered Dec 5, 2020 at 18:33

Bhadresh Patel

2,09019 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

maniek099 Over a year ago

I restarted TS Server and it didn't help. But remember, be sure to restart VS Code. Now it works, thanks!

michal.materowski Over a year ago

After investigating a lot of other solutions this did the trick for me. Running tsc resolved all the modules correctly, but I was still getting ts compiler error in VS code until I renamed tsconfig.base.json to tsconfig.json.

BarretV Over a year ago

thank you TypeScript: Restart TS Server is what fixed everything for me. didn't have to do any changes other than that

surendra kumar · Accepted Answer · 2020-07-03 04:46:24Z

1

Please try to change

'environments/environment'

To

'src/environments/environment'

answered Jul 3, 2020 at 4:46

surendra kumar

1,78012 silver badges15 bronze badges

2 Comments

Xiurik Over a year ago

still not working man, this didn't make any change.

Xiurik Over a year ago

Been trying but seems to be a Visual Studio Code issue

Swapnil Mhaske · Accepted Answer · 2022-11-28 09:25:17Z

0

There is one more scenario similar to the question being asked. Its not same as OP though. I am just posting the Q and A here.

On angular 13, If you rename some files which are imported or rename the export class then sometimes the angular cli stops recognizing the imports with @features etc...

Tried few different things. But then just thought of deleting the .angular folder in root as its something new used for caching. And then again did npm start. Now it started recognizing the renamed imports.

answered Nov 28, 2022 at 9:25

Swapnil Mhaske

3657 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular 10: Import using module alias not resolved / Path Mapping not recognised in VSCode

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related