short way to import components and modules

Question

I used @angular/cli to create my app. when my app size increases it becomes quite difficult to mention the paths of imports for components/modules/scss used

for example, if a component structure went deep enough. to import we have to mention import {something} from '../../../../someComponent' goes on.

Is there a way we can define them somewhere like a schema can be defined

for example:

Schema.json

{
"someComponent":"../../../../someComponent',
 "otherComponent:"../../"
}

and we can directly import as import {someComponent} from 'someComponent; and can be imported easily anywhere

Is there any method like this.

Possible duplicate of [Avoiding relative paths in Angular CLI](http://stackoverflow.com/questions/41460810/avoiding-relative-paths-in-angular-cli) — jonrsharpe, May 16 '17 at 17:21
I've never tried, the style file is created in the same place as the component class so it's just `'./whatever.component.scss'`. — jonrsharpe, May 16 '17 at 17:24
yeah, I tried that too but not working. I am trying to avoid redefining variables. now I created a shared scss and importing it wherever required. but it is also making me mad when application goes deeper — Sibiraj, May 16 '17 at 17:27
Related question https://stackoverflow.com/questions/42749973/es6-import-using-at-sign-in-path-in-a-vue-js-project — Estus Flask, May 16 '17 at 17:52

score 3 · Accepted Answer · answered May 30 '17 at 18:01

paths can be added in 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";

score 1 · Answer 2 · answered May 18 '17 at 18:37

You can use barrel in your app.

For example you component:

// heroes/folder/deep/another/deep/folder/hero.component.ts
export class HeroComponent {}

Now you can define barrel in any folder of your project, which exports this module (it is 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 want.

You can read more in docs

short way to import components and modules

2 Answers2