Angular components name becomes unreadable also non maintainable for larger project. Usually we use relative paths to import components like this ("../../../something"
), which is not suitable for project that has many nested routes.
import { JobInformationService } from '../../../services/job-information.service';
import { ControlBarComponent } from '../../components/control-bar/control-bar.component';
We can solve this problem by defining path aliases, we can configure this in tsconfig.json
file in the root directory.
In the compilerOptions section we can add two things
add this line:
"baseUrl": "./src",
then also add these, here choose the path and name based on your projects requirement. You can add as many as you want.
"paths": {
"@components/*" : ["app/components/*"],
"@pages/*" : ["app/pages/*"],
}
Add this to your tsconfig.json
file
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@components/*" : ["app/components/*"],
"@pages/*" : ["app/pages/*"],
}
},
Now you can import your components, services, etc. directly using @definedname
, for example you can now use like this
import { JobInformationService } from '@services/job-information.service';
import { ControlBarComponent } from '@components/control-bar/control-bar.component';
Top comments (2)
this is a good clean format but do we really need this though? with all the modern IDEs, imports are automatically taken care of. It would be better that the angular team enables this by default instead of the devs to configure this.
but yes, I agree it is easy on the eyes.
I definitely agree with you. This is for someone who really need this to implement on their codebase. As you know, some auto imports are horrible
And it will be amazing if the core team take care of these small things.