diff --git a/public/docs/_examples/cb-barrels/e2e-spec.js b/public/docs/_examples/cb-barrels/e2e-spec.js
new file mode 100644
index 0000000000..a109efb5a8
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/e2e-spec.js
@@ -0,0 +1,110 @@
+describe('Tutorial', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  function getPageStruct() {
+    hrefEles = element.all(by.css('my-app a'));
+
+    return {
+      hrefs: hrefEles,
+      myDashboardHref: hrefEles.get(0),
+      myDashboardParent: element(by.css('my-app my-dashboard')),
+      topHeroes: element.all(by.css('my-app my-dashboard .module.hero')),
+
+      myHeroesHref: hrefEles.get(1),
+      myHeroesParent: element(by.css('my-app my-heroes')),
+      allHeroes: element.all(by.css('my-app my-heroes li')),
+
+      heroDetail: element(by.css('my-app my-hero-detail'))
+    }
+  }
+
+  it('should be able to see the start screen', function () {
+    var page = getPageStruct();
+    expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
+    expect(page.myDashboardHref.getText()).toEqual("Dashboard");
+    expect(page.myHeroesHref.getText()).toEqual("Heroes");
+  });
+
+  it('should be able to see dashboard choices', function () {
+    var page = getPageStruct();
+    expect(page.topHeroes.count()).toBe(4, "should be 4 dashboard hero choices");
+  });
+
+  it('should be able to toggle the views', function () {
+    var page = getPageStruct();
+
+    expect(page.myDashboardParent.element(by.css('h3')).getText()).toEqual('Top Heroes');
+    page.myHeroesHref.click().then(function() {
+      expect(page.myDashboardParent.isPresent()).toBe(false, 'should no longer see dashboard element');
+      expect(page.allHeroes.count()).toBeGreaterThan(4, "should be more than 4 heroes shown");
+      return page.myDashboardHref.click();
+    }).then(function() {
+      expect(page.myDashboardParent.isPresent()).toBe(true, 'should once again see the dashboard element');
+    });
+
+  });
+
+  it('should be able to edit details from "Dashboard" view', function () {
+    var page = getPageStruct();
+    expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
+    var heroEle = page.topHeroes.get(3);
+    var heroDescrEle = heroEle.element(by.css('h4'));
+    var heroDescr;
+    return heroDescrEle.getText().then(function(text) {
+      heroDescr = text;
+      return heroEle.click();
+    }).then(function() {
+      return editDetails(page, heroDescr, '-foo');
+    }).then(function() {
+      expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
+      expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
+    });
+  });
+
+  it('should be able to edit details from "Heroes" view', function () {
+    var page = getPageStruct();
+    expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be present');
+    var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
+    var heroEle, heroDescr;
+    page.myHeroesHref.click().then(function() {
+      expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
+      expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
+      expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present');
+      heroEle = page.allHeroes.get(2);
+      return heroEle.getText();
+    }).then(function(text) {
+      // remove leading 'id' from the element
+      heroDescr = text.substr(text.indexOf(' ')+1);
+      return heroEle.click();
+    }).then(function() {
+      expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible');
+      return viewDetailsButtonEle.click();
+    }).then(function() {
+      return editDetails(page, heroDescr, '-bar');
+    }).then(function() {
+      expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be back');
+      expect(heroEle.getText()).toContain(heroDescr + '-bar');
+      expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should again NOT be present');
+    });
+  });
+
+  function editDetails(page, origValue, textToAdd) {
+    expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
+    expect(page.myHeroesParent.isPresent()).toBe(false, 'myHeroes element should NOT be present');
+    expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details');
+    var inputEle = page.heroDetail.element(by.css('input'));
+    expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
+    var backButtonEle = page.heroDetail.element(by.css('button'));
+    expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
+    var detailTextEle = page.heroDetail.element(by.css('div h2'));
+    expect(detailTextEle.getText()).toContain(origValue);
+    return sendKeys(inputEle, textToAdd).then(function () {
+      expect(detailTextEle.getText()).toContain(origValue + textToAdd);
+      return backButtonEle.click();
+    });
+  }
+
+});
diff --git a/public/docs/_examples/cb-barrels/ts/app/app.component.css b/public/docs/_examples/cb-barrels/ts/app/app.component.css
new file mode 100644
index 0000000000..246b8c875b
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/app.component.css
@@ -0,0 +1,28 @@
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #607D8B;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+nav a.router-link-active {
+  color: #039be5;
+}
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-barrels/ts/app/app.component.ts b/public/docs/_examples/cb-barrels/ts/app/app.component.ts
new file mode 100644
index 0000000000..926eafc1c9
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/app.component.ts
@@ -0,0 +1,30 @@
+// #docregion imports
+import { Component } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
+import { HeroesComponent, HeroDetailComponent, HeroService } from './heroes';
+import { DashboardComponent } from './dashboard.component';
+
+@Component({
+// #enddocregion
+  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: [HeroService]
+})
+@RouteConfig([
+  // {path: '/', redirectTo: ['Dashboard'] },
+  {path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true},
+  {path: '/heroes', name: 'Heroes', component: HeroesComponent},
+  {path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
+])
+export class AppComponent {
+  title = 'Tour of Heroes - Barrels';
+}
diff --git a/public/docs/_examples/cb-barrels/ts/app/dashboard.component.css b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.css
new file mode 100644
index 0000000000..82349dc658
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.css
@@ -0,0 +1,60 @@
+[class*='col-'] {
+  float: left;
+}
+*, *:after, *:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+h3 {
+  text-align: center; margin-bottom: 0;
+}
+[class*='col-'] {
+  padding-right: 20px;
+  padding-bottom: 20px;
+}
+[class*='col-']:last-of-type {
+  padding-right: 0;
+}
+.grid {
+  margin: 0;
+}
+.col-1-4 {
+  width: 25%;
+}
+.module {
+  padding: 20px;
+  text-align: center;
+  color: #eee;
+  max-height: 120px;
+  min-width: 120px;
+  background-color: #607D8B;
+  border-radius: 2px;
+}
+h4 {
+  position: relative;
+}
+.module:hover {
+  background-color: #EEE;
+  cursor: pointer;
+  color: #607d8b;
+}
+.grid-pad {
+  padding: 10px 0;
+}
+.grid-pad > [class*='col-']:last-of-type {
+  padding-right: 20px;
+}
+@media (max-width: 600px) {
+  .module {
+    font-size: 10px;
+    max-height: 75px; }
+}
+@media (max-width: 1024px) {
+  .grid {
+    margin: 0;
+  }
+  .module {
+    min-width: 60px;
+  }
+}
diff --git a/public/docs/_examples/cb-barrels/ts/app/dashboard.component.html b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.html
new file mode 100644
index 0000000000..dfec651c4a
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.html
@@ -0,0 +1,8 @@
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+  <div *ngFor="let hero of heroes" class="col-1-4" (click)="gotoDetail(hero)">
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>
diff --git a/public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts
new file mode 100644
index 0000000000..1239207374
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/dashboard.component.ts
@@ -0,0 +1,25 @@
+// #docregion imports
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router-deprecated';
+import { Hero, HeroService } from './heroes';
+
+@Component({
+// #enddocregion
+  selector: 'my-dashboard',
+  templateUrl: 'app/dashboard.component.html',
+  styleUrls: ['app/dashboard.component.css']
+})
+export class DashboardComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService, private _router: Router) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5));
+  }
+
+  gotoDetail(hero: Hero) {
+    let link = ['HeroDetail', { id: hero.id }];
+    this._router.navigate(link);
+  }
+}
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.css b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.css
new file mode 100644
index 0000000000..b5ab6e6e0b
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.css
@@ -0,0 +1,29 @@
+label {
+  display: inline-block;
+  width: 3em;
+  margin: .5em 0;
+  color: #607D8B;
+  font-weight: bold;
+}
+input {
+  height: 2em;
+  font-size: 1em;
+  padding-left: .4em;
+}
+button {
+  margin-top: 20px;
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer; cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #ccc; 
+  cursor: auto;
+}
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html
new file mode 100644
index 0000000000..deb47fb3e5
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.html
@@ -0,0 +1,10 @@
+<div *ngIf="hero">
+  <h2>{{hero.name}} details!</h2>
+  <div>
+    <label>id: </label>{{hero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="hero.name" placeholder="name"/>
+  </div>
+  <button (click)="goBack()">Back</button>
+</div>
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts
new file mode 100644
index 0000000000..c945a8f6dd
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts
@@ -0,0 +1,27 @@
+// #docregion imports
+import { Component, OnInit } from '@angular/core';
+import { RouteParams } from '@angular/router-deprecated';
+import { HeroService, Hero } from '../shared';
+
+@Component({
+// #enddocregion
+  selector: 'my-hero-detail',
+  templateUrl: 'app/heroes/hero-detail/hero-detail.component.html',
+  styleUrls: ['app/heroes/hero-detail/hero-detail.component.css']
+})
+export class HeroDetailComponent implements OnInit {
+  hero: Hero;
+
+  constructor(private heroService: HeroService,
+    private routeParams: RouteParams) {
+  }
+
+  ngOnInit() {
+    let id = +this.routeParams.get('id');
+    this.heroService.getHero(id).then(hero => this.hero = hero);
+  }
+
+  goBack() {
+    window.history.back();
+  }
+}
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts
new file mode 100644
index 0000000000..e7552e28b4
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/hero-detail/index.ts
@@ -0,0 +1,2 @@
+// #docregion
+export * from './hero-detail.component';
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.css b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.css
new file mode 100644
index 0000000000..35e45af98d
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.css
@@ -0,0 +1,59 @@
+.selected {
+  background-color: #CFD8DC !important;
+  color: white;
+}
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.heroes li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
+.heroes .text {
+  position: relative;
+  top: -3px;
+}
+.heroes .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.html b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.html
new file mode 100644
index 0000000000..6a973bb007
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.html
@@ -0,0 +1,14 @@
+<div>
+  <h2>My Heroes</h2>
+  <ul class="heroes">
+    <li *ngFor="let hero of heroes"
+      [class.selected]="hero === selectedHero"
+      (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </li>
+  </ul>
+  <div *ngIf="selectedHero">
+    <h2>{{selectedHero.name | uppercase}} is my hero</h2>
+    <button (click)="gotoDetail()">View Details</button>
+  </div>
+</div>
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.ts
new file mode 100644
index 0000000000..6e3b2848f2
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/heroes.component.ts
@@ -0,0 +1,33 @@
+// #docregion imports
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router-deprecated';
+import { HeroService, Hero } from './shared';
+import { HeroDetailComponent } from './hero-detail'
+
+@Component({
+// #enddocregion
+  selector: 'my-heroes',
+  templateUrl: 'app/heroes/heroes.component.html',
+  styleUrls: ['app/heroes/heroes.component.css'],
+  directives: [HeroDetailComponent]
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+
+  constructor(private heroService: HeroService, private router: Router) { }
+
+  getHeroes() {
+    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+  }
+
+  gotoDetail() {
+    this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
+  }
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  onSelect(hero: Hero) { this.selectedHero = hero; }
+}
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/index.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/index.ts
new file mode 100644
index 0000000000..45fa911acd
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/index.ts
@@ -0,0 +1,4 @@
+// #docregion
+export * from './hero-detail';
+export * from './heroes.component';
+export * from './shared';
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.model.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.model.ts
new file mode 100644
index 0000000000..ce714d1c00
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+export class Hero {
+  id: number;
+  name: string;
+}
+
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.service.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.service.ts
new file mode 100644
index 0000000000..11d60b97a6
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/hero.service.ts
@@ -0,0 +1,17 @@
+// #docregion imports
+import { Injectable } from '@angular/core';
+import { HEROES }     from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+// #enddocregion
+  getHeroes() {
+    return Promise.resolve(HEROES);
+  }
+
+	getHero(id: number) {
+    return Promise.resolve(HEROES).then(
+      heroes => heroes.filter(hero => hero.id === id)[0]
+    );
+  }
+}
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/shared/index.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/index.ts
new file mode 100644
index 0000000000..27516fdedd
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './hero.model';
+export * from './hero.service';
diff --git a/public/docs/_examples/cb-barrels/ts/app/heroes/shared/mock-heroes.ts b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/mock-heroes.ts
new file mode 100644
index 0000000000..80d661a439
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/heroes/shared/mock-heroes.ts
@@ -0,0 +1,17 @@
+// #docregion imports
+import { Hero } from './hero.model';
+
+export var HEROES: Hero[] = [
+// #enddocregion
+
+  {"id": 11, "name": "Mr. Nice"},
+  {"id": 12, "name": "Narco"},
+  {"id": 13, "name": "Bombasto"},
+  {"id": 14, "name": "Celeritas"},
+  {"id": 15, "name": "Magneta"},
+  {"id": 16, "name": "RubberMan"},
+  {"id": 17, "name": "Dynama"},
+  {"id": 18, "name": "Dr IQ"},
+  {"id": 19, "name": "Magma"},
+  {"id": 20, "name": "Tornado"}
+];
diff --git a/public/docs/_examples/cb-barrels/ts/app/main.ts b/public/docs/_examples/cb-barrels/ts/app/main.ts
new file mode 100644
index 0000000000..09288fb174
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/app/main.ts
@@ -0,0 +1,11 @@
+// #docregion imports
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
+import { HeroService } from './heroes';
+import { AppComponent } from './app.component';
+
+bootstrap(AppComponent, [
+// #enddocregion
+  ROUTER_PROVIDERS,
+  HeroService
+]);
diff --git a/public/docs/_examples/cb-barrels/ts/example-config.json b/public/docs/_examples/cb-barrels/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/cb-barrels/ts/index.html b/public/docs/_examples/cb-barrels/ts/index.html
new file mode 100644
index 0000000000..a09ff8c91f
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Angular 2 Tour of Heroes - Barrels</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <!--#docregion packages  -->
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.config({
+        packages: {
+          'app/heroes': {main: 'index.js', defaultExtension: 'js'},
+          'app/heroes/hero-detail': {main: 'index.js', defaultExtension: 'js'},
+          'app/heroes/shared': {main: 'index.js', defaultExtension: 'js'}
+        }
+      });
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+    <!--#enddocregion packages  -->
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+</html>
diff --git a/public/docs/_examples/cb-barrels/ts/plnkr.json b/public/docs/_examples/cb-barrels/ts/plnkr.json
new file mode 100644
index 0000000000..5f0eca25e7
--- /dev/null
+++ b/public/docs/_examples/cb-barrels/ts/plnkr.json
@@ -0,0 +1,8 @@
+{
+  "description": "Cookbook: Barrels",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags": ["cookbook", "barrels"]
+}
diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json
index 9b2545ec5e..9113b5d0ff 100644
--- a/public/docs/dart/latest/cookbook/_data.json
+++ b/public/docs/dart/latest/cookbook/_data.json
@@ -12,6 +12,12 @@
     "hide": true
   },
 
+  "barrels": {
+    "title": "Creating Barrels",
+    "intro": "Use a barrel to import from a single module that consolidate many related modules",
+    "hide": true
+  },
+
   "component-communication": {
     "title": "Component Interaction",
     "intro": "Share information between different directives and components"
diff --git a/public/docs/dart/latest/cookbook/barrels.jade b/public/docs/dart/latest/cookbook/barrels.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/dart/latest/cookbook/barrels.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json
index 2d9ada59f1..08ea9eb0b8 100644
--- a/public/docs/js/latest/cookbook/_data.json
+++ b/public/docs/js/latest/cookbook/_data.json
@@ -11,6 +11,11 @@
     "intro": "Learn how Angular 1 concepts and techniques map to Angular 2"
   },
 
+  "barrels": {
+    "title": "Creating Barrels",
+    "intro": "Use a barrel to import from a single module that consolidate many related modules"
+  },
+
   "component-communication": {
     "title": "Component Interaction",
     "intro": "Share information between different directives and components"
diff --git a/public/docs/js/latest/cookbook/barrels.jade b/public/docs/js/latest/cookbook/barrels.jade
new file mode 100644
index 0000000000..6778b6af28
--- /dev/null
+++ b/public/docs/js/latest/cookbook/barrels.jade
@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index a90160de7b..b3d8131c18 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -11,6 +11,11 @@
     "intro": "Learn how Angular 1 concepts and techniques map to Angular 2"
   },
 
+  "barrels": {
+    "title": "Creating Barrels",
+    "intro": "Use a barrel to import from a single module that consolidate many related modules"
+  },
+
   "component-communication": {
     "title": "Component Interaction",
     "intro": "Share information between different directives and components"
diff --git a/public/docs/ts/latest/cookbook/barrels.jade b/public/docs/ts/latest/cookbook/barrels.jade
new file mode 100644
index 0000000000..be113555ed
--- /dev/null
+++ b/public/docs/ts/latest/cookbook/barrels.jade
@@ -0,0 +1,106 @@
+include ../_util-fns
+
+<a id="top"></a>
+:marked
+  This cookbook contains recipes for creating barrels to simplify file imports. In Angular 2 apps, we frequently find
+  ouselves importing multiple files together (for example, in the tutorial app, the hero component and the hero service
+  are both frequently imported together into other components). We can create a single export that contains them both
+  so they can be easily imported together. This is called a barrel.
+
+<a id="toc"></a>
+:marked
+  ## Table of contents
+
+  [Creating a barrel](#creating-a-barrel)
+
+  [Importing a barrel](#importing-a-barrel)
+
+:marked
+  **See the [live example](/resources/live-examples/cb-barrels/ts/plnkr.html)**.
+
+.l-main-section
+<a id="creating-a-barrel"></a>
+:marked
+  ## Creating a barrel
+
+  The `Hero` model, `HeroDetailComponent`, `HeroesComponent`, and `HeroService` are all frequently used together.
+  It would make things easier if we could import them all together. To make this possible, each of them
+  is moved into a `heroes` directory and organized into sub-directories with their supporting files:
+
+.filetree
+  .file heroes
+  .children
+    .file heroes.component.css
+    .file heroes.component.html
+    .file heroes.component.ts
+    .file hero-detail
+    .children
+      .file hero-detail.component.css
+      .file hero-detail.component.html
+      .file hero-detail.component.ts
+    .file shared
+    .children
+      .file hero.service.ts
+      .file hero.ts
+      .file mock-heroes.ts
+
+:marked
+  Since there are two exportable items in the shared folder, an `index.ts` file is created in that
+  folder, and then each of the files in that folder are imported and re-exported. This is our first
+  barrel. Since `mock-heroes.ts` is not used outside of the barrel it is not re-exported:
++makeExample('cb-barrels/ts/app/heroes/shared/index.ts', '', 'app/heroes/shared/index.ts')
+
+:marked
+  Even though there is only a single exportable item in the hero-detail folder, a barrel is
+  created in that folder so that all our imports are consistent, rather than some importing
+  barrels like this:
+
+  (`import { ... } from './shared'`)
+
+  and  others importing files like this:
+
+  `import { ... } from './hero-detail/hero-detail.component'`
++makeExample('cb-barrels/ts/app/heroes/hero-detail/index.ts', '', 'app/heroes/hero-detail/index.ts')
+
+:marked
+  Our final barrel is in the heroes folder and it consolidates each of the other barrels into one.
+  An `index.ts` file is created in the heroes folder and then the components and barrels we just
+  created are all imported and re-exported:
++makeExample('cb-barrels/ts/app/heroes/index.ts', '', 'app/heroes/index.ts')
+
+:marked
+  The SystemJs module loader is not yet able to identify our new barrels, so
+  they are added manually as packages in index.html.
++makeExample('cb-barrels/ts/index.html', 'packages', 'index.html')
+
+:marked
+  The files inside the barrels can now be imported through a single import.
+
+<a id="importing-a-barrel"></a>
+:marked
+  ## Importing a barrel
+  The app component imports the `HeroesComponent`, `HeroDetailComponent`, and `HeroService` with a
+  single import:
++makeExample('cb-barrels/ts/app/app.component.ts', 'imports', 'app/app.component.ts')
+
+:marked
+  The dashboard component imports `Hero` and `HeroService` with a single import:
++makeExample('cb-barrels/ts/app/dashboard.component.ts', 'imports', 'app/dashboard.component.ts')
+
+:marked
+  The `main.ts` bootstrap file imports `HeroService`:
++makeExample('cb-barrels/ts/app/main.ts', 'imports', 'app/main.ts')
+
+.alert.is-helpful
+  :marked
+    Do not attempt to reference the barrel index file from within the barrel.
+    These files are still imported individually as shown below.
+
+:marked
+  The `HeroDetailComponent` is updated to import the `HeroService` and `Hero` model from the
+  `shared` barrel.
++makeExample('cb-barrels/ts/app/heroes/hero-detail/hero-detail.component.ts', 'imports', 'app/heroes/hero-detail/hero-detail.component.ts')
+
+:marked
+  And finally, the `HeroesComponent` imports the the `HeroDetailComponent` from it's barrel:
++makeExample('cb-barrels/ts/app/heroes/heroes.component.ts', 'imports', 'app/heroes/heroes.component.ts')