A short way to import components and modules
I used @ angular / cli to build my app. when the size of my application grows, it becomes rather difficult to specify the import paths for the components / modules / scss used
for example, if the component structure has gone deep enough. for import we have to mention import {something} from '../../../../someComponent'
.
Is there a way to define them somewhere how the schema can be defined
eg:
Schema.json
{
"someComponent":"../../../../someComponent',
"otherComponent:"../../"
}
and we can directly import as import {someComponent} from 'someComponent;
and import easily anywhere
Is there any method.
source to share
paths
can be added to tsconfig.json
:
{
"compilerOptions": {
...,
"paths": {
...,
"@app/*": ["app/*"],
"@components/*": ["components/*"]
}
}
}
Then import absolutely from app/
or components/
instead of relative to the current file:
import {TextInputConfiguration} from "@components/configurations";
source to share
You can use the barrel in your application.
For example a component:
// heroes/folder/deep/another/deep/folder/hero.component.ts
export class HeroComponent {}
Now you can define barrel in any folder of your project that exports this module (it's called index by convention)
export * from './heroes/folder/deep/another/deep/folder/hero.component.ts'; // relative path to current folder
You can define as many barrels as you like.
You can read more in the docs
source to share