docs: add changelog for 5.2.1

PR Close #21455

.circleci/config.yml

@@ -62,7 +62,7 @@ jobs:
       # Use bazel query so that we explicitly ask for all buildable targets to be built as well
       # This avoids waiting for a build command to finish before running the first test
       # See https://github.com/bazelbuild/bazel/issues/4257
-      - run: bazel query --output=label '//packages/... union @angular//...' | xargs bazel test --config=ci
+      - run: bazel query --output=label '//modules/... union //packages/... union //tools/... union @angular//...' | xargs bazel test --config=ci
 
       - save_cache:
           key: *cache_key

.github/angular-robot.yml

@@ -0,0 +1,52 @@
+# Configuration for angular-robot
+
+# options for the merge plugin
+merge:
+  # the status will be added to your pull requests
+  status:
+    # set to true to disable
+    disabled: false
+    # the name of the status
+    context: "ci/angular: merge status"
+    # text to show when all checks pass
+    successText: "All checks passed!"
+    # text to show when some checks are failing
+    failureText: "The following checks are failing:"
+
+  # comment that will be added to a PR when there is a conflict, leave empty or set to false to disable
+  mergeConflictComment: "Hello? Don't want to hassle you. Sure you're busy. But this PR has some merge conflicts that you probably ought to resolve.
+\nThat is... if you want it to be merged someday..."
+
+  # label to monitor
+  mergeLabel: "PR action: merge"
+
+  # list of checks that will determine if the merge label can be added
+  checks:
+    # whether the PR shouldn't have a conflict with the base branch
+    noConflict: true
+    # list of labels that a PR needs to have, checked with a regexp (e.g. "PR target:" will work for the label "PR target: master")
+    requiredLabels:
+      - "PR target:"
+      - "cla: yes"
+
+    # list of labels that a PR shouldn't have, checked after the required labels with a regexp
+    forbiddenLabels:
+      - "PR target: TBD"
+      - "cla: no"
+
+    # list of PR statuses that need to be successful
+    requiredStatuses:
+      - "continuous-integration/travis-ci/pr"
+      - "code-review/pullapprove"
+      - "ci/circleci: build"
+      - "ci/circleci: lint"
+
+    # the comment that will be added when the merge label is added despite failing checks, leave empty or set to false to disable
+    # {{MERGE_LABEL}} will be replaced by the value of the mergeLabel option
+    # {{PLACEHOLDER}} will be replaced by the list of failing checks
+    mergeRemovedComment: "I see that you just added the `{{MERGE_LABEL}}` label. It won't do anything good though, because the following checks are still failing:
+  \n{{PLACEHOLDER}}
+  \n
+  \n**If you want your PR to be merged, it has to pass all the CI checks.**
+  \n
+  \nIf you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help."

.pullapprove.yml

@@ -10,11 +10,11 @@
 # brocco - Mike Brocchi
 # chuckjaz - Chuck Jazdzewski
 # filipesilva - Filipe Silva
-# Foxandxss - Jesús Rodríguez
 # gkalpak - George Kalpakas
 # hansl - Hans Larsen
 # IgorMinar - Igor Minar
 # jasonaden - Jason Aden
+# kapunahelewong - Kapunahele Wong
 # kara - Kara Erickson
 # matsko - Matias Niemelä
 # mhevery - Misko Hevery
@@ -91,7 +91,7 @@ groups:
     users:
       - alexeagle #primary
       - chuckjaz
-      - IgorMinar
+      - IgorMinar #fallback
       - vikerman #fallback
 
   build-and-ci:
@@ -127,8 +127,9 @@ groups:
       files:
         - "packages/core/*"
     users:
-      - chuckjaz #primary
+      - mhevery #primary
-      - mhevery
+      - chuckjaz
+      - kara
       - vicb
       - IgorMinar #fallback
 
@@ -139,7 +140,6 @@ groups:
         - "packages/platform-browser/animations/*"
     users:
       - matsko #primary
-      - chuckjaz #fallback
       - mhevery #fallback
       - IgorMinar #fallback
 
@@ -171,6 +171,7 @@ groups:
       - hansl
       - filipesilva #fallback
       - brocco #fallback
+      - IgorMinar #fallback
 
   compiler-cli:
     conditions:
@@ -216,9 +217,8 @@ groups:
         - "packages/common/http/*"
         - "packages/http/*"
     users:
-      - vikerman #primary
+      - alxhub #primary
-      - alxhub
+      - IgorMinar
-      - IgorMinar #fallback
       - mhevery #fallback
 
   language-service:
@@ -237,7 +237,7 @@ groups:
       files:
         - "packages/router/*"
     users:
-      - jasonaden
+      - jasonaden #primary
       - vicb
       - IgorMinar #fallback
       - mhevery #fallback
@@ -268,8 +268,7 @@ groups:
         - "packages/platform-server/*"
     users:
       - vikerman #primary
-      # needs secondary
+      - alxhub #secondary
-      - alxhub
       - vicb
       - IgorMinar #fallback
       - mhevery #fallback
@@ -327,11 +326,11 @@ groups:
           - "aio/content/navigation.json"
           - "aio/content/license.md"
     users:
+      - kapunahelewong
       - stephenfluin
-      - Foxandxss
       - petebacondarwin
       - gkalpak
-      - IgorMinar #fallback
+      - IgorMinar
       - mhevery #fallback
 
   angular.io-marketing:
@@ -345,5 +344,5 @@ groups:
       - stephenfluin
       - petebacondarwin
       - gkalpak
-      - IgorMinar #fallback
+      - IgorMinar
       - mhevery #fallback

CHANGELOG.md

@@ -1,3 +1,26 @@
+<a name="5.2.1"></a>
+## [5.2.1](https://github.com/angular/angular/compare/5.2.0...5.2.1) (2018-01-17)
+
+
+### Bug Fixes
+
+* **animations:** fix increment/decrement aliases example ([#18323](https://github.com/angular/angular/issues/18323)) ([48c1898](https://github.com/angular/angular/commit/48c1898))
+* **benchpress:** should still support selenium_webdriver < 3.6.0 ([#21477](https://github.com/angular/angular/issues/21477)) ([3c6a506](https://github.com/angular/angular/commit/3c6a506))
+* **common:** set correct timezone for ISO8601 dates in Safari ([#21506](https://github.com/angular/angular/issues/21506)) ([8e9cd57](https://github.com/angular/angular/commit/8e9cd57)), closes [#21491](https://github.com/angular/angular/issues/21491)
+* **compiler:** cache external reference resolution ([#21359](https://github.com/angular/angular/issues/21359)) ([c32e833](https://github.com/angular/angular/commit/c32e833))
+* **compiler:** make `.ngsummary.json` files idempotent ([#21448](https://github.com/angular/angular/issues/21448)) ([a931a41](https://github.com/angular/angular/commit/a931a41))
+* **core:** fix chained http call ([#20924](https://github.com/angular/angular/issues/20924)) ([54e7576](https://github.com/angular/angular/commit/54e7576)), closes [#20921](https://github.com/angular/angular/issues/20921)
+* **language-service:** Clear caches when program changes ([#21337](https://github.com/angular/angular/issues/21337)) ([cc9419d](https://github.com/angular/angular/commit/cc9419d)), closes [#19405](https://github.com/angular/angular/issues/19405)
+* **service-worker:** properly handle invalid hashes in all scenarios ([#21288](https://github.com/angular/angular/issues/21288)) ([51eb3d4](https://github.com/angular/angular/commit/51eb3d4))
+
+
+### Features
+
+* **core:** add binding name to content changed error ([#20352](https://github.com/angular/angular/issues/20352)) ([4556532](https://github.com/angular/angular/commit/4556532))
+* **forms:** handle string with and without line boundary on pattern validator ([#19256](https://github.com/angular/angular/issues/19256)) ([75f8522](https://github.com/angular/angular/commit/75f8522))
+
+
+
 <a name="5.2.0"></a>
 # [5.2.0](https://github.com/angular/angular/compare/5.2.0-rc.0...5.2.0) (2018-01-10)
 
@@ -9,6 +32,7 @@
 * **benchpress:** work around missing events from Chrome 63 ([#21396](https://github.com/angular/angular/issues/21396)) ([fa03ae1](https://github.com/angular/angular/commit/fa03ae1))
 * **common:** export currencies via `getCurrencySymbol` ([#20983](https://github.com/angular/angular/issues/20983)) ([fecf768](https://github.com/angular/angular/commit/fecf768))
 
+Note: Due to an animation fix back in 5.1.1 ([c2b3792](https://github.com/angular/angular/commit/c2b3792a3b5fa5215fe2ef7e0ac6511086ffe4c1)) which allows for nested :leave queries to work within animation sequences, all elements that are dynamically inserted (*ngIf, *ngFor, etc…) now contain the special CSS class: “ng-star-inserted”. This may cause failures within unit tests if there are any assertions that match against element.className directly. (An easy fix for this is to match using a regular expression instead of asserting the className string directly.)
 
 <a name="5.2.0-rc.0"></a>
 # [5.2.0-rc.0](https://github.com/angular/angular/compare/5.2.0-beta.1...5.2.0-rc.0) (2018-01-04)

aio/.angular-cli.json

@@ -62,6 +62,9 @@
     "styleExt": "scss",
     "component": {
       "inlineStyle": true
+    },
+    "build": {
+      "namedChunks": true
     }
   }
 }

aio/README.md

@@ -68,6 +68,11 @@ The content is written in markdown.
 All other content is written using markdown in text files, located in the `angular/aio/content` folder.
 More specifically, there are sub-folders that contain particular types of content: guides, tutorial and marketing.
 
+* **Code examples**: code examples need to be testable to ensure their accuracy.
+Also, our examples have a specific look and feel and allow the user to copy the source code. For larger
+examples they are rendered in a tabbed interface (e.g. template, HTML, and TypeScript on separate
+tabs). Additionally, some are live examples, which provide links where the code can be edited, executed, and/or downloaded. For details on working with code examples, please read the [Code snippets](https://angular.io/guide/docs-style-guide#code-snippets), [Source code markup](https://angular.io/guide/docs-style-guide#source-code-markup), and [Live examples](https://angular.io/guide/docs-style-guide#live-examples) pages of the [Authors Style Guide](https://angular.io/guide/docs-style-guide).
+
 We use the [dgeni](https://github.com/angular/dgeni) tool to convert these files into docs that can be viewed in the doc-viewer.
 
 The [Authors Style Guide](https://angular.io/guide/docs-style-guide) prescribes guidelines for

aio/content/examples/bootstrapping/bs-config.1.json

@@ -0,0 +1,8 @@
+{
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    }
+  }
+}

aio/content/examples/bootstrapping/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('feature-modules App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});

aio/content/examples/bootstrapping/plnkr.json

@@ -0,0 +1,11 @@
+{
+  "description": "Bootstrapping",
+  "basePath": "src/",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "open": "app/app.component.ts",
+  "tags": ["ngmodules"]
+}

aio/content/examples/bootstrapping/src/app/app.component.html

@@ -0,0 +1,3 @@
+<h1>
+  {{title}}
+</h1>

aio/content/examples/bootstrapping/src/app/app.component.spec.ts

@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

aio/content/examples/bootstrapping/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app works!';
+}

aio/content/examples/bootstrapping/src/app/app.module.ts

@@ -0,0 +1,34 @@
+// #docplaster
+// #docregion whole-ngmodule
+
+// imports
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+// #docregion directive-import
+import { ItemDirective } from './item.directive';
+// #enddocregion directive-import
+
+
+// @NgModule decorator with its metadata
+@NgModule({
+// #docregion declarations
+  declarations: [
+    AppComponent,
+    ItemDirective
+  ],
+  // #enddocregion declarations
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+
+// #enddocregion whole-ngmodule

aio/content/examples/bootstrapping/src/app/item.directive.spec.ts

@@ -0,0 +1,8 @@
+import { ItemDirective } from './item.directive';
+
+describe('ItemDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ItemDirective();
+    expect(directive).toBeTruthy();
+  });
+});

aio/content/examples/bootstrapping/src/app/item.directive.ts

@@ -0,0 +1,15 @@
+// #docplaster
+// #docregion directive
+
+
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[appItem]'
+})
+export class ItemDirective {
+// code goes here
+  constructor() { }
+
+}
+// #enddocregion directive

aio/content/examples/bootstrapping/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>NgmoduleDemo</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

aio/content/examples/bootstrapping/src/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/feature-modules/e2e/app.e2e-spec.ts

@@ -0,0 +1,17 @@
+import { AppPage } from './app.po';
+
+describe('feature-modules App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});
+
+
+

aio/content/examples/feature-modules/example-config.json

@@ -0,0 +1,4 @@
+{
+  "build": "build:cli",
+  "run": "serve:cli"
+}

aio/content/examples/feature-modules/plnkr.json

@@ -0,0 +1,11 @@
+{
+  "description": "Feature Modules",
+  "basePath": "src/",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "open": "app/app.component.ts",
+  "tags": ["feature modules"]
+}

aio/content/examples/feature-modules/src/app/app.component.html

@@ -0,0 +1,9 @@
+<!-- #docplaster -->
+<!-- #docregion app-component-template -->
+<h1>
+  {{title}}
+</h1>
+
+<!-- add the selector from the CustomerDashboardComponent -->
+<app-customer-dashboard></app-customer-dashboard>
+<!-- #enddocregion app-component-template -->

aio/content/examples/feature-modules/src/app/app.component.spec.ts

@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

aio/content/examples/feature-modules/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app works!';
+}

aio/content/examples/feature-modules/src/app/app.module.ts

@@ -0,0 +1,27 @@
+// #docplaster
+// #docregion app-module
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+// import the feature module here so you can add it to the imports array below
+import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';
+
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    CustomerDashboardModule // add the feature module here
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+// #enddocregion app-module

aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts

@@ -0,0 +1,34 @@
+// #docplaster
+// #docregion customer-dashboard
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// #enddocregion customer-dashboard
+// #docregion customer-dashboard-component
+// import the new component
+import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
+// #enddocregion customer-dashboard-component
+
+
+// #docregion customer-dashboard-component
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    CustomerDashboardComponent
+  ],
+  // #enddocregion customer-dashboard-component
+  // #docregion component-exports
+  exports: [
+    CustomerDashboardComponent
+  ]
+  // #enddocregion component-exports
+  // #docregion customer-dashboard-component
+})
+
+// #enddocregion customer-dashboard-component
+
+// #docregion customer-dashboard
+export class CustomerDashboardModule { }
+
+// #enddocregion customer-dashboard

aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html

@@ -0,0 +1,7 @@
+
+<!-- #docplaster -->
+<!-- #docregion feature-template -->
+<p>
+  customer-dashboard works!
+</p>
+<!-- #enddocregion feature-template -->

aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomerDashboardComponent } from './customer-dashboard.component';
+
+describe('CustomerDashboardComponent', () => {
+  let component: CustomerDashboardComponent;
+  let fixture: ComponentFixture<CustomerDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomerDashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomerDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

aio/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-customer-dashboard',
+  templateUrl: './customer-dashboard.component.html',
+  styleUrls: ['./customer-dashboard.component.css']
+})
+export class CustomerDashboardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

aio/content/examples/feature-modules/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Feature Modules</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

aio/content/examples/feature-modules/src/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/lazy-loading/e2e/app.e2e-spec.ts

@@ -0,0 +1,47 @@
+import { AppPage } from './app.po';
+import { browser, element, by } from 'protractor';
+
+
+describe('providers App', () => {
+  let page: AppPage;
+  const buttons = element.all(by.css('button'));
+  const customersButton = buttons.get(0);
+  const ordersButton = buttons.get(1);
+  const homeButton = buttons.get(2);
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Lazy loading feature modules');
+  });
+
+  describe('Customers list', function() {
+    beforeEach(function() {
+      customersButton.click();
+    });
+
+    it('should show customers list when the button is clicked', function() {
+        let customersMessage = element(by.css('app-customer-list > p'));
+        expect(customersMessage.getText()).toBe('customer-list works!');
+    });
+
+  });
+
+  describe('Orders list', function() {
+    beforeEach(function() {
+      ordersButton.click();
+    });
+
+    it('should show orders list when the button is clicked', function() {
+        let ordersMessage = element(by.css('app-order-list > p'));
+        expect(ordersMessage.getText()).toBe('order-list works!');
+    });
+
+  });
+
+});
+
+

aio/content/examples/lazy-loading/example-config.json

@@ -0,0 +1,4 @@
+{
+  "build": "build:cli",
+  "run": "serve:cli"
+}

aio/content/examples/lazy-loading/plnkr.json

@@ -0,0 +1,11 @@
+{
+  "description": "Lazy Loading Feature Modules",
+  "basePath": "src/",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "open": "app/app.component.ts",
+  "tags": ["lazy loading"]
+}

aio/content/examples/lazy-loading/src/app/app-routing.module.ts

@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion app-routing-module
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+
+// #docregion const-routes
+const routes: Routes = [
+  {
+    path: 'customers',
+    loadChildren: 'app/customers/customers.module#CustomersModule'
+  },
+  {
+    path: 'orders',
+    loadChildren: 'app/orders/orders.module#OrdersModule'
+  },
+  {
+    path: '',
+    redirectTo: '',
+    pathMatch: 'full'
+  }
+];
+// #enddocregion const-routes
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes)
+  ],
+  exports: [RouterModule],
+  providers: []
+})
+export class AppRoutingModule { }
+// #enddocregion app-routing-module

aio/content/examples/lazy-loading/src/app/app.component.html

@@ -0,0 +1,13 @@
+<!-- #docplaster -->
+<!-- #docregion app-component-template -->
+<h1>
+  {{title}}
+</h1>
+
+<button routerLink="/customers">Customers</button>
+<button routerLink="/orders">Orders</button>
+<button routerLink="">Home</button>
+
+<router-outlet></router-outlet>
+
+<!-- #enddocregion app-component-template -->

aio/content/examples/lazy-loading/src/app/app.component.spec.ts

@@ -0,0 +1,36 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

aio/content/examples/lazy-loading/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Lazy loading feature modules';
+}

aio/content/examples/lazy-loading/src/app/app.module.ts

@@ -0,0 +1,22 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { AppRoutingModule } from './app-routing.module';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    AppRoutingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

aio/content/examples/lazy-loading/src/app/customers/customer-list/customer-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  customer-list works!
+</p>

aio/content/examples/lazy-loading/src/app/customers/customer-list/customer-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomerListComponent } from './customer-list.component';
+
+describe('CustomerListComponent', () => {
+  let component: CustomerListComponent;
+  let fixture: ComponentFixture<CustomerListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomerListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomerListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

aio/content/examples/lazy-loading/src/app/customers/customer-list/customer-list.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-customer-list',
+  templateUrl: './customer-list.component.html',
+  styleUrls: ['./customer-list.component.css']
+})
+export class CustomerListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

aio/content/examples/lazy-loading/src/app/customers/customers-routing.module.ts

@@ -0,0 +1,22 @@
+// #docplaster
+// #docregion customers-routing-module
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CustomerListComponent } from './customer-list/customer-list.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CustomerListComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class CustomersRoutingModule { }
+// #enddocregion customers-routing-module

aio/content/examples/lazy-loading/src/app/customers/customers.module.ts

@@ -0,0 +1,16 @@
+// #docplaster
+// #docregion customers-module
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CustomersRoutingModule } from './customers-routing.module';
+import { CustomerListComponent } from './customer-list/customer-list.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CustomersRoutingModule
+  ],
+  declarations: [CustomerListComponent]
+})
+export class CustomersModule { }
+// #enddocregion customers-module

aio/content/examples/lazy-loading/src/app/orders/order-list/order-list.component.html

@@ -0,0 +1,3 @@
+<p>
+  order-list works!
+</p>

aio/content/examples/lazy-loading/src/app/orders/order-list/order-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderListComponent } from './order-list.component';
+
+describe('OrderListComponent', () => {
+  let component: OrderListComponent;
+  let fixture: ComponentFixture<OrderListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

aio/content/examples/lazy-loading/src/app/orders/order-list/order-list.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-order-list',
+  templateUrl: './order-list.component.html',
+  styleUrls: ['./order-list.component.css']
+})
+export class OrderListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

aio/content/examples/lazy-loading/src/app/orders/orders-routing.module.ts

@@ -0,0 +1,28 @@
+// #docplaster
+// #docregion orders-routing-module
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+// #docregion orders-routing-module-detail
+import { OrderListComponent } from './order-list/order-list.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: OrderListComponent
+  }
+];
+
+// #enddocregion orders-routing-module-detail
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class OrdersRoutingModule { }
+// #enddocregion orders-routing-module

aio/content/examples/lazy-loading/src/app/orders/orders.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { OrdersRoutingModule } from './orders-routing.module';
+import { OrderListComponent } from './order-list/order-list.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    OrdersRoutingModule
+  ],
+  declarations: [OrderListComponent]
+})
+export class OrdersModule { }

aio/content/examples/lazy-loading/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Lazy loading feature modules</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

aio/content/examples/lazy-loading/src/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);