I have a project created with AngularCLI.
- AngularCLI - version 1.6.7
- Angular - version 5.1.1
- TypeScript - version 2.5.3
- WebPack - version 3.1.0
After going through the documentation for TSConfig module resolution I wanted to create custom mapping to avoid long relative paths .
I've also checked this SO question but it didn't help me either:
How to avoid imports with very long relative paths in Angular 2?
(Using Visual Studio Code)
My project structure is like:
node_modules
src
|__ app
|__ utilities
|__ services
|__ event.service.ts
tsconfig.json
My tsconfig.json:
{
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": ".",
"paths": {
"@services/*": [
"src/app/utilities/services/*"
]
},
"sourceMap": true,
"declaration": false,
"moduleResolution": "node"
}
I've tried many different combinations but I can't get my import to work like:
import { EventService } from '@services/event.service';
It always gives me an error Cannot find module @services/event.service
But if I import it with relative path it works perfectly, so can anyone tell me what am I doing wrong with these custom mappings ?
Edit: I've managed to get it to work by changing
"moduleResolution": "node" to "moduleResolution": "classic"
however then "@angular/core" or any other "@angular" modules stop working. I've ran into this github issue and I am unsure if there's a workaround at the moment: https://github.com/Microsoft/TypeScript/issues/5039
