Why my path for import @angular/core is different to online tutorial?

Question

Let say I have following component:

@Component({})
export class ServerComponent {

}

When typing @Component, Visual Studio Code suggest me to auto import @angular/core module. I accepted and get this import:

import { Component } from "../../../node_modules/@angular/core";

When I watch online courses, I see when the mentor perfomed the same actions he got much shorter path:

import { Component } from "@angular/core";

My app work OK for both paths, but I want to know how this happen, just for curious.

Questions:

My enviroment:

Mentor's environment:

@TuyenPham These sort of issues usually occurs before of your app config defined under tsconfig.json. Quick review on this file will give your answer — CrazyMac, Jul 18 '18 at 18:09
This seems to be a new problem with vscode: https://twitter.com/elmd_/status/1019585069302808576?s=19 — DeborahK, Jul 18 '18 at 18:48
This question is answered here: https://stackoverflow.com/a/35162380/3885927 — user3885927, Nov 27 '19 at 01:14
Possible duplicate of [Angular2 & TypeScript importing of node\_modules](https://stackoverflow.com/questions/35159872/angular2-typescript-importing-of-node-modules) — user3885927, Nov 27 '19 at 01:15

score 1 · Answer 1 · answered Jul 18 '18 at 17:59

Take a look at the tsconfig.json in your main path.

There is (or can be) shortcuts defined for the imports. It looks like

"paths": {
      "@modules/*": ["app/modules/*"],
      "@core/*": ["app/core/*"],
      "@shared/*": ["app/shared/*"]
    }

With that everything that is in app/modules/MyModule/SomeComponent could be imported as @modules/MyModule/SomeComponent

warm regards

score 0 · Answer 2 · answered Jul 18 '18 at 17:59

Answers

This is just absolute path difference the way visual studio works is it has the node_modules under the project folder added to your workspace ,so it will suggest you absolute path for the node_modules ,in your case @angular/core. In the tutorials you see or generally we just provide the @angular/core import because at runtime angular complier will resolve the path to absolute path ie..,'../../../node_modules/@angular/core'.
There is no config control over to explicitly define this ,its rather the angular compiler behavior or the way angular ecosystem is built because post compilation all he modules gets invoked and injected on the main component.
No it wont affect any behavior of your app.

2 Answers2