Dfyjkt

I keep having this issue and I am unsure whether it is a problem with VS Code, Angular Cli or something else.
Basically if I create a component and then inject a service reference. In VS Code it might insert that reference like this:

import QuestionService from 'src/app/core/data/question.service';

And it will come back with an error like:

src/app/widget/questions/questions.component.ts(5,33): error TS2307: Cannot find module 'src/app/core/data/question.service'.

But if I change it to:

import QuestionService from '../../core/data/question.service';

it will work fine. The only issue I have with doing it that way, is that I have to manually change each service reference and they are not always the same path (because it's relative).

Has anyone had this issue before? How do I solve it?

One way for solving this out is using a shorter alias name using the ts.config.
You can then point to any directory in your project and give it a custom namespace. Any name will work, but watch out for name collisions with existing node packages, i.e. @angular, @ngrx, etc. The end result looks like…

import MyService from '@services/my.service';

import HelloWorldComponent from '@components/hello-world.component';

// tsconfig.json in the root dir

 "compileOnSave": false,
 "compilerOptions": 

// omitted...

 "baseUrl": "src",
 "paths": 
 "@services/*": ["app/path/to/services/*"],
 "@components/*": ["app/somewhere/deeply/nested/*"],
 "@environments/*": ["environments/*"]