The import statements in Angular 2 can get pretty cumbersome if you're using a lot of services, models, directives etc in any specific component.

Looking at the basic "QuickStart", the app.component.ts doesn't seem very obtuse.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>Quickstart</h1>'
})
export class AppComponent { }

However, looking at the Tour of Heroes example:

import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

import { HeroService } from './hero.service';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <nav>
      <a [routerLink]="['Dashboard']">Dashboard</a>
      <a [routerLink]="['Heroes']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [
    ROUTER_PROVIDERS,
    HeroService
  ]
})
.
.
.

You can see how as additional parts of the application are adding to the import area, especially if a clean / readable code approach is taken.

In a recent project, adding the Material Design 2 components caused what I call "import noise" so I used barrel to organize and reduce the impact.

import noise - this is an issue seen in languages where there are dependencies that need to be "imported", "required", or "included" and the first (1 - n) lines are non functional code.

Barrels

In the Angular 2 docs, a barrel is defined as:

"A barrel is a way to rollup exports from several modules into a single convenience module. The barrel itself is a module file that re-exports selected exports of other modules."

Material Design Example

Adding all of the components of material design takes the quickstart app.component.ts to this:

import {Component} from '@angular/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';
import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav';
import {MdToolbar} from '@angular2-material/toolbar';
import {MdButton} from '@angular2-material/button';
import {MdCheckbox} from '@angular2-material/checkbox';
import {MdRadioButton} from '@angular2-material/radio';
import {MdRadioDispatcher} from '@angular2-material/radio/radio_dispatcher';
import {MdSpinner} from '@angular2-material/progress-circle';
import {MdProgressBar} from '@angular2-material/progress-bar';
import {MD_CARD_DIRECTIVES} from '@angular2-material/card';
import {MD_INPUT_DIRECTIVES} from '@angular2-material/input';
import {MD_LIST_DIRECTIVES} from '@angular2-material/list';

@Component({
  moduleId: __moduleName,
  selector: 'my-app',
  providers: [ROUTER_PROVIDERS, MdRadioDispatcher, MdRadioButton],
  templateUrl: 'devsticky.component.html',
  styleUrls: ['devsticky.component.css'],
  directives: [ROUTER_DIRECTIVES, 
    MD_SIDENAV_DIRECTIVES,
    MD_CARD_DIRECTIVES,
    MdToolbar,
    MdButton,
    MdCheckbox,
    MdRadioButton,
    MdSpinner,
    MD_INPUT_DIRECTIVES,
    MD_LIST_DIRECTIVES,
    MdProgressBar],
  pipes: []
})
@RouteConfig([
])

That's 12 lines of just import noise. Quick fix is to create another file, in this case it'll live in a folder called /material-design named index.ts

Simply take all of the related modules and move the import statements from the app.component.ts file and mark them as "export * from"

export * from '@angular2-material/toolbar';
export * from '@angular2-material/button';
export * from '@angular2-material/checkbox';
export * from '@angular2-material/sidenav';
export * from '@angular2-material/radio';
export * from '@angular2-material/progress-circle';
export * from '@angular2-material/progress-bar';
export * from '@angular2-material/input';
export * from '@angular2-material/list';
export * from '@angular2-material/card';
export * from '@angular2-material/radio/radio_dispatcher';

This is an import/export of the module. Now go back to the app.component.ts file and just add

import {MdButton, MdCheckbox, MdRadioButton, MdRadioDispatcher, MdToolbar, MdSpinner, MdProgressBar, MD_CARD_DIRECTIVES, MD_INPUT_DIRECTIVES, MD_LIST_DIRECTIVES, MD_SIDENAV_DIRECTIVES} from './material-design';

This takes the 12 lines to one really long line; which could be reduced further.

import * as md from './material-design';

That's pretty reduced! The * as md imports all of the modules and aliases as md. Depending on your editor, errors/warnings may show in the directives: portion of the component because it cannot find MD_SIDENAV_DIRECTIVES for instance.

Fix is to add the alias -> md.MD_SIDENAV_DIRECTIVES to this and any of the material design dependencies being used.

Using barrels will help make your code readable and maintainable. The Angular 2 source heavily uses these, browse through the code and you'll see this in places like @angular/core.

Enjoy.