I'm trying to set up Angular to understand paths in order to avoid using relative paths when importing files.
However, despite my efforts, it doesn't seem to be working. Here is my code snippet:
//tsconfig.app.json
"compilerOptions":{
//lot of things . If it matter moduleResolution is set to node
"baseUrl": ".",
"paths": {
"@modules": ["app/modules/"]
...
},
}
//in a component:
import { X } from '@modules/Y/component/index'
When running ng serve, the console outputs an error stating:
Cannot find module '@modules/Y/component/index'.Currently, I can achieve this with relative path imports like
import { X } from ../../../modules/Y/component/indexIt seems like my tsconfig.app.json or tsconfig.json file (or maybe both) are incorrect. Unfortunately, I haven't been able to find a good tutorial online that addresses this issue specifically for an Angular app.
My current setup includes Angular 4 with basic associated tools like TypeScript 2.3.3, Angular-CLI 1.0.6, and webpack integration.
If you could help me identify the problem or point me towards a helpful document or tutorial on how to correctly configure paths in Angular, I would greatly appreciate it. None of the solutions I've found on Stack Overflow or GitHub have worked for me so far.
NOTE: The project architecture looks like this
project
|
-tsconfig.json //had try things on this one too but does nothing.
-src/
|
-tsconfig.app.json
-app/
|
-modules
-othersFolder