docs: add changelog for 5.0.0-beta.3

This commit adds support for setting default `updateOn` values
in `FormGroups` and `FormArrays`. If you set `updateOn` to
’blur’` at the group level, all child controls will default to `’blur’`,
unless the child has explicitly specified a different `updateOn` value.

```
const c = new FormGroup({
   one: new FormControl()
}, {updateOn: blur});
```

 It's worth noting that parent groups will always update their value and
validity immediately upon value/validity updates from children. In other
words, if a group is set to update on blur and its children are individually
set to update on change, the group will still update on change with its
children; its default value will simply not be used.

.circleci/config.yml

@@ -42,7 +42,7 @@ jobs:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
 
       - run: bazel run @build_bazel_rules_typescript_node//:bin/npm install
-      - run: bazel build ...
+      - run: bazel build packages/...
       - save_cache:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
           paths:

.pullapprove.yml

@@ -69,8 +69,8 @@ groups:
           - "*.lock"
           - "tools/*"
         exclude:
-          - "tools/@angular/tsc-wrapped/*"
           - "tools/public_api_guard/*"
+          - "tools/ngc-wrapped/*"
           - "aio/*"
     users:
       - IgorMinar #primary
@@ -136,8 +136,9 @@ groups:
   compiler-cli:
     conditions:
       files:
-        - "tools/@angular/tsc-wrapped/*"
+        - "packages/tsc-wrapped/*"
         - "packages/compiler-cli/*"
+        - "tools/ngc-wrapped/*"
     users:
       - alexeagle
       - chuckjaz

.travis.yml

@@ -53,9 +53,10 @@ env:
     - CI_MODE=browserstack_required
     - CI_MODE=saucelabs_optional
     - CI_MODE=browserstack_optional
-    - CI_MODE=docs_test
+    - CI_MODE=aio_tools_test
     - CI_MODE=aio
-    - CI_MODE=aio_e2e
+    - CI_MODE=aio_e2e AIO_SHARD=0
+    - CI_MODE=aio_e2e AIO_SHARD=1
     - CI_MODE=bazel
 
 matrix:
@@ -63,7 +64,6 @@ matrix:
   allow_failures:
     - env: "CI_MODE=saucelabs_optional"
     - env: "CI_MODE=browserstack_optional"
-    - env: "CI_MODE=aio_e2e"
 
 before_install:
   # source the env.sh script so that the exported variables are available to other scripts later on

CHANGELOG.md

@@ -1,3 +1,126 @@
+<a name="5.0.0-beta.3"></a>
+# [5.0.0-beta.3](https://github.com/angular/angular/compare/5.0.0-beta.2...5.0.0-beta.3) (2017-08-09)
+
+
+### Bug Fixes
+
+* **animations:** revert container/queried animations accordingly during cancel ([#18516](https://github.com/angular/angular/issues/18516)) ([c0c03dc](https://github.com/angular/angular/commit/c0c03dc))
+* **animations:** support persisting dynamic styles within animation states ([#18468](https://github.com/angular/angular/issues/18468)) ([05472cb](https://github.com/angular/angular/commit/05472cb)), closes [#18423](https://github.com/angular/angular/issues/18423) [#17505](https://github.com/angular/angular/issues/17505)
+* **benchpress:** compile cleanly with TS 2.4 ([#18455](https://github.com/angular/angular/issues/18455)) ([e25b3dd](https://github.com/angular/angular/commit/e25b3dd))
+* **common:** don't recreate view when context shape doesn't change ([#18277](https://github.com/angular/angular/issues/18277)) ([685cc26](https://github.com/angular/angular/commit/685cc26)), closes [#13407](https://github.com/angular/angular/issues/13407)
+* **compiler:** cleanly compile with TypeScript 2.4 ([#18456](https://github.com/angular/angular/issues/18456)) ([7c47b62](https://github.com/angular/angular/commit/7c47b62))
+* **compiler:** ignore [@import](https://github.com/import) in multi-line css ([#18452](https://github.com/angular/angular/issues/18452)) ([1dca575](https://github.com/angular/angular/commit/1dca575)), closes [#18038](https://github.com/angular/angular/issues/18038)
+* **compiler-cli:** disable buggy expression lowering ([#18513](https://github.com/angular/angular/issues/18513)) ([ca695e0](https://github.com/angular/angular/commit/ca695e0))
+* **compiler-cli:** fix and re-enable expression lowering ([#18570](https://github.com/angular/angular/issues/18570)) ([6f2038c](https://github.com/angular/angular/commit/6f2038c)), closes [#18388](https://github.com/angular/angular/issues/18388)
+* **compiler-cli:** modified ngc to throw all errors, not just syntax ([#18388](https://github.com/angular/angular/issues/18388)) ([5651e4a](https://github.com/angular/angular/commit/5651e4a))
+* **compiler-cli:** remove minimist dependency of compiler-cli/index ([#18532](https://github.com/angular/angular/issues/18532)) ([5b7432b](https://github.com/angular/angular/commit/5b7432b))
+* **core:** fix platform-browser-dynamic ([#18576](https://github.com/angular/angular/issues/18576)) ([f0a5501](https://github.com/angular/angular/commit/f0a5501))
+* **core:** forbid destroyed views to be inserted or moved in VC ([#18568](https://github.com/angular/angular/issues/18568)) ([e54bd59](https://github.com/angular/angular/commit/e54bd59)), closes [#17780](https://github.com/angular/angular/issues/17780)
+
+### Features
+
+* **core:** Create StaticInjector which does not depend on Reflect polyfill. ([d9d00bd](https://github.com/angular/angular/commit/d9d00bd))
+* **forms:** add default updateOn values for groups and arrays ([#18536](https://github.com/angular/angular/issues/18536)) ([ff5c58b](https://github.com/angular/angular/commit/ff5c58b))
+* **forms:** add updateOn blur option to FormControls ([#18408](https://github.com/angular/angular/issues/18408)) ([333a708](https://github.com/angular/angular/commit/333a708)), closes [#7113](https://github.com/angular/angular/issues/7113)
+* **forms:** add updateOn submit option to FormControls ([#18514](https://github.com/angular/angular/issues/18514)) ([f69561b](https://github.com/angular/angular/commit/f69561b))
+
+### Performance Improvements
+
+* switch angular to use StaticInjector instead of ReflectiveInjector ([fcadbf4](https://github.com/angular/angular/commit/fcadbf4)), closes [#18496](https://github.com/angular/angular/issues/18496)
+
+
+### BREAKING CHANGES
+
+* `platformXXXX()` no longer accepts providers which depend on reflection.
+Specifically the method signature when from `Provider[]` to
+`StaticProvider[]`.
+
+Example:
+Before:
+```
+[
+  MyClass,
+  {provide: ClassA, useClass: SubClassA}
+]
+
+```
+
+After:
+```
+[
+  {provide: MyClass, deps: [Dep1,...]},
+  {provide: ClassA, useClass: SubClassA, deps: [Dep1,...]}
+]
+```
+
+NOTE: This only applies to platform creation and providers for the JIT
+compiler. It does not apply to `@Component` or `@NgModule` provides
+declarations.
+
+Benchpress note: Previously Benchpress also supported reflective
+provides, which now require static providers.
+
+DEPRECATION:
+
+- `ReflectiveInjector` is now deprecated as it will be remove. Use
+  `Injector.create` as a replacement.
+
+<a name="5.0.0-beta.2"></a>
+# [5.0.0-beta.2](https://github.com/angular/angular/compare/5.0.0-beta.1...5.0.0-beta.2) (2017-08-02)
+
+
+### Bug Fixes
+
+* **compiler:** do not consider arguments when determining recursion ([e64b54b](https://github.com/angular/angular/commit/e64b54b))
+* **compiler:** fix for element needing implicit parent placed in top-level ng-container ([381471d](https://github.com/angular/angular/commit/381471d)), closes [#18314](https://github.com/angular/angular/issues/18314)
+
+
+### Features
+
+* **forms:** add options arg to abstract controls ([ebef5e6](https://github.com/angular/angular/commit/ebef5e6))
+* **router:** add events tracking activation of individual routes ([49cd851](https://github.com/angular/angular/commit/49cd851))
+
+
+
+<a name="4.3.3"></a>
+## [4.3.3](https://github.com/angular/angular/compare/4.3.2...4.3.3) (2017-08-02)
+
+
+### Bug Fixes
+
+* **compiler:** fix for element needing implicit parent placed in top-level ng-container ([f5cbc2e](https://github.com/angular/angular/commit/f5cbc2e)), closes [#18314](https://github.com/angular/angular/issues/18314)
+
+
+
+<a name="5.0.0-beta.1"></a>
+# [5.0.0-beta.1](https://github.com/angular/angular/compare/5.0.0-beta.0...5.0.0-beta.1) (2017-07-27)
+
+
+### Bug Fixes
+
+* **animations:** export BrowserModule as apart of BrowserAnimationsModule ([#18263](https://github.com/angular/angular/issues/18263)) ([fd0cc01](https://github.com/angular/angular/commit/fd0cc01))
+* **compiler:** add equiv & disp attributes to Xliff2 ICU placeholders ([#18283](https://github.com/angular/angular/issues/18283)) ([38ec05f](https://github.com/angular/angular/commit/38ec05f)), closes [#17344](https://github.com/angular/angular/issues/17344)
+* **compiler:** allow numbers for ICU message cases in lexer ([#18095](https://github.com/angular/angular/issues/18095)) ([a3a5429](https://github.com/angular/angular/commit/a3a5429)), closes [#17799](https://github.com/angular/angular/issues/17799)
+* **core:** invoke error handler outside of the Angular Zone ([#18269](https://github.com/angular/angular/issues/18269)) ([7ae7573](https://github.com/angular/angular/commit/7ae7573)), closes [#17073](https://github.com/angular/angular/issues/17073) [#7774](https://github.com/angular/angular/issues/7774)
+* **platform-server:** don't clobber parse5 properties when setting ([#18237](https://github.com/angular/angular/issues/18237)) ([a094769](https://github.com/angular/angular/commit/a094769)), closes [#17050](https://github.com/angular/angular/issues/17050)
+* **router:** child CanActivate guard should wait for parent to complete ([#18110](https://github.com/angular/angular/issues/18110)) ([086f4aa](https://github.com/angular/angular/commit/086f4aa)), closes [#15670](https://github.com/angular/angular/issues/15670)
+* **router:** should throw when lazy loaded module doesn't define any routes ([#15001](https://github.com/angular/angular/issues/15001)) ([82923a3](https://github.com/angular/angular/commit/82923a3)), closes [#14596](https://github.com/angular/angular/issues/14596)
+* **upgrade:** ensure downgraded components are created in the Angular zone ([#18209](https://github.com/angular/angular/issues/18209)) ([43c33d5](https://github.com/angular/angular/commit/43c33d5))
+* **upgrade:** throw error if trying to get injector before setting ([#18209](https://github.com/angular/angular/issues/18209)) ([d31dc7b](https://github.com/angular/angular/commit/d31dc7b))
+
+
+### Features
+
+* **compiler:** add representation of placeholders to xliff & xmb ([b3085e9](https://github.com/angular/angular/commit/b3085e9)), closes [#17345](https://github.com/angular/angular/issues/17345)
+
+
+### Performance Improvements
+
+* latest tsickle to tree shake: abstract class methods & interfaces ([#18236](https://github.com/angular/angular/issues/18236)) ([b7a6f52](https://github.com/angular/angular/commit/b7a6f52))
+* **core:** use native addEventListener for faster rendering. ([#18107](https://github.com/angular/angular/issues/18107)) ([6279e50](https://github.com/angular/angular/commit/6279e50))
+
+
+
 <a name="4.3.2"></a>
 ## [4.3.2](https://github.com/angular/angular/compare/4.3.1...4.3.2) (2017-07-26)
 
@@ -15,6 +138,35 @@
 
 
 
+<a name="5.0.0-beta.0"></a>
+# [5.0.0-beta.0](https://github.com/angular/angular/compare/4.3.0...5.0.0-beta.0) (2017-07-19)
+
+
+### Bug Fixes
+
+* **animations:** always camelcase style property names that contain auto styles ([d22f8f5](https://github.com/angular/angular/commit/d22f8f5)), closes [#17938](https://github.com/angular/angular/issues/17938)
+* **animations:** capture cancelled animation styles within grouped animations ([23146c9](https://github.com/angular/angular/commit/23146c9)), closes [#17170](https://github.com/angular/angular/issues/17170)
+* **animations:** do not crash animations if a nested component fires CD during CD ([5db6f38](https://github.com/angular/angular/commit/5db6f38)), closes [#18193](https://github.com/angular/angular/issues/18193)
+* **animations:** make sure @.disabled works in non-animation components ([5344be5](https://github.com/angular/angular/commit/5344be5))
+* **common:** send flushed body as error instead of null ([5c62e30](https://github.com/angular/angular/commit/5c62e30)), closes [#18181](https://github.com/angular/angular/issues/18181)
+* **compiler:** ensure jit external id arguments names are unique ([95635c1](https://github.com/angular/angular/commit/95635c1))
+* **compiler-cli:** don't generate empty <target/> when extracting xliff ([65c9e13](https://github.com/angular/angular/commit/65c9e13)), closes [#15754](https://github.com/angular/angular/issues/15754)
+* **platform-server:** provide XhrFactory for HttpClient ([8076482](https://github.com/angular/angular/commit/8076482))
+* **router:** canDeactivate guards should run from bottom to top ([e20cfe1](https://github.com/angular/angular/commit/e20cfe1)), closes [#15657](https://github.com/angular/angular/issues/15657)
+* **router:** should navigate to the same url when config changes ([eb6fb5f](https://github.com/angular/angular/commit/eb6fb5f)), closes [#15535](https://github.com/angular/angular/issues/15535)
+* **router:** should run resolvers for the same route concurrently ([ad3029e](https://github.com/angular/angular/commit/ad3029e)), closes [#14279](https://github.com/angular/angular/issues/14279)
+* **router:** terminal route in custom matcher ([b399cb2](https://github.com/angular/angular/commit/b399cb2))
+* **upgrade:** allow accessing AngularJS injector from downgraded module ([a5205c6](https://github.com/angular/angular/commit/a5205c6))
+
+
+### Features
+
+* **animations:** support :increment and :decrement transition aliases ([6f45519](https://github.com/angular/angular/commit/6f45519))
+* **upgrade:** propagate touched state of NgModelController ([59c23c7](https://github.com/angular/angular/commit/59c23c7))
+* **upgrade:** support lazy-loading Angular module into AngularJS app ([30e76fc](https://github.com/angular/angular/commit/30e76fc))
+
+
+
 <a name="4.3.1"></a>
 ## [4.3.1](https://github.com/angular/angular/compare/4.3.0...4.3.1) (2017-07-19)
 

aio/.angular-cli.json

@@ -31,8 +31,9 @@
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
-        "stage": "environments/environment.stage.ts",
-        "prod": "environments/environment.prod.ts"
+        "next": "environments/environment.next.ts",
+        "stable": "environments/environment.stable.ts",
+        "archive": "environments/environment.archive.ts"
       }
     }
   ],

aio/content/examples/.gitignore

@@ -43,13 +43,9 @@ dist/
 **/app/**/*.ajs.js
 
 # aot
-**/*.ngfactory.ts
-**/*.ngsummary.json
-**/*.ngsummary.ts
-**/*.shim.ngstyle.ts
-**/*.metadata.json
-!aot/bs-config.json
-!aot/index.html
+*/aot/**/*
+!*/aot/bs-config.json
+!*/aot/index.html
 !rollup-config.js
 
 # i18n

aio/content/examples/form-validation/e2e-spec.ts

@@ -9,30 +9,20 @@ describe('Form Validation Tests', function () {
     browser.get('');
   });
 
-  describe('Hero Form 1', () => {
+  describe('Template-driven form', () => {
     beforeAll(() => {
-      getPage('hero-form-template1');
+      getPage('hero-form-template');
     });
 
-    tests();
+    tests('Template-Driven Form');
   });
 
-  describe('Hero Form 2', () => {
+  describe('Reactive form', () => {
     beforeAll(() => {
-      getPage('hero-form-template2');
+      getPage('hero-form-reactive');
     });
 
-    tests();
-    bobTests();
-  });
-
-  describe('Hero Form 3 (Reactive)', () => {
-    beforeAll(() => {
-      getPage('hero-form-reactive3');
-      makeNameTooLong();
-    });
-
-    tests();
+    tests('Reactive Form');
     bobTests();
   });
 });
@@ -48,6 +38,7 @@ let page: {
   nameInput: ElementFinder,
   alterEgoInput: ElementFinder,
   powerSelect: ElementFinder,
+  powerOption: ElementFinder,
   errorMessages: ElementArrayFinder,
   heroFormButtons: ElementArrayFinder,
   heroSubmitted: ElementFinder
@@ -64,19 +55,21 @@ function getPage(sectionTag: string) {
     nameInput: section.element(by.css('#name')),
     alterEgoInput: section.element(by.css('#alterEgo')),
     powerSelect: section.element(by.css('#power')),
+    powerOption: section.element(by.css('#power option')),
     errorMessages: section.all(by.css('div.alert')),
     heroFormButtons: buttons,
-    heroSubmitted: section.element(by.css('hero-submitted > div'))
+    heroSubmitted: section.element(by.css('.submitted-message'))
   };
 }
 
-function tests() {
+function tests(title: string) {
+
   it('should display correct title', function () {
-    expect(page.title.getText()).toContain('Hero Form');
+    expect(page.title.getText()).toContain(title);
   });
 
   it('should not display submitted message before submit', function () {
-    expect(page.heroSubmitted.isElementPresent(by.css('h2'))).toBe(false);
+    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false);
   });
 
   it('should have form buttons', function () {
@@ -130,11 +123,11 @@ function tests() {
 
   it('should hide form after submit', function () {
     page.heroFormButtons.get(0).click();
-    expect(page.title.isDisplayed()).toBe(false);
+    expect(page.heroFormButtons.get(0).isDisplayed()).toBe(false);
   });
 
   it('submitted form should be displayed', function () {
-    expect(page.heroSubmitted.isElementPresent(by.css('h2'))).toBe(true);
+    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true);
   });
 
   it('submitted form should have new hero name', function () {
@@ -142,9 +135,9 @@ function tests() {
   });
 
   it('clicking edit button should reveal form again', function () {
-    const editBtn = page.heroSubmitted.element(by.css('button'));
-    editBtn.click();
-    expect(page.heroSubmitted.isElementPresent(by.css('h2')))
+    const newFormBtn = page.heroSubmitted.element(by.css('button'));
+    newFormBtn.click();
+    expect(page.heroSubmitted.isElementPresent(by.css('p')))
       .toBe(false, 'submitted hidden again');
     expect(page.title.isDisplayed()).toBe(true, 'can see form title');
   });
@@ -159,9 +152,13 @@ function expectFormIsInvalid() {
 }
 
 function bobTests() {
-  const emsg = 'Someone named "Bob" cannot be a hero.';
+  const emsg = 'Name cannot be Bob.';
 
   it('should produce "no bob" error after setting name to "Bobby"', function () {
+    // Re-populate select element
+    page.powerSelect.click();
+    page.powerOption.click();
+
     page.nameInput.clear();
     page.nameInput.sendKeys('Bobby');
     expectFormIsInvalid();
@@ -174,8 +171,3 @@ function bobTests() {
     expectFormIsValid();
   });
 }
-
-function makeNameTooLong() {
-  // make the first name invalid
-  page.nameInput.sendKeys('ThisHeroNameHasWayWayTooManyLetters');
-}

aio/content/examples/form-validation/src/app/app.component.ts

@@ -3,10 +3,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-app',
-  template: `<hero-form-template1></hero-form-template1>
+  template: `<hero-form-template></hero-form-template>
              <hr>
-             <hero-form-template2></hero-form-template2>
-             <hr>
-             <hero-form-reactive3></hero-form-reactive3>`
+             <hero-form-reactive></hero-form-reactive>`
 })
 export class AppComponent { }

aio/content/examples/form-validation/src/app/app.module.ts

@@ -1,18 +1,26 @@
 // #docregion
 import { NgModule }      from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent }           from './app.component';
-import { HeroFormTemplateModule } from './template/hero-form-template.module';
-import { HeroFormReactiveModule } from './reactive/hero-form-reactive.module';
+import { HeroFormTemplateComponent } from './template/hero-form-template.component';
+import { HeroFormReactiveComponent } from './reactive/hero-form-reactive.component';
+import { ForbiddenValidatorDirective } from './shared/forbidden-name.directive';
+
 
 @NgModule({
   imports: [
     BrowserModule,
-    HeroFormTemplateModule,
-    HeroFormReactiveModule
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroFormTemplateComponent,
+    HeroFormReactiveComponent,
+    ForbiddenValidatorDirective
   ],
-  declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html

@@ -1,26 +1,38 @@
  <!-- #docregion -->
 <div class="container">
-  <div [hidden]="submitted">
-    <h1>Hero Form 3 (Reactive)</h1>
-    <!-- #docregion form-tag-->
-    <form [formGroup]="heroForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
-    <!-- #enddocregion form-tag-->
-      <div class="form-group">
-        <!-- #docregion name-with-error-msg -->
-        <label for="name">Name</label>
 
-        <input type="text" id="name" class="form-control"
+  <h1>Reactive Form</h1>
+
+  <form [formGroup]="heroForm" #formDir="ngForm">
+
+    <div [hidden]="formDir.submitted">
+
+      <div class="form-group">
+
+        <label for="name">Name</label>
+        <!-- #docregion name-with-error-msg -->
+        <input id="name" class="form-control"
                formControlName="name" required >
 
-        <div *ngIf="formErrors.name" class="alert alert-danger">
-          {{ formErrors.name }}
+        <div *ngIf="name.invalid && (name.dirty || name.touched)"
+             class="alert alert-danger">
+
+          <div *ngIf="name.errors.required">
+            Name is required.
+          </div>
+          <div *ngIf="name.errors.minlength">
+            Name must be at least 4 characters long.
+          </div>
+          <div *ngIf="name.errors.forbiddenName">
+            Name cannot be Bob.
+          </div>
         </div>
         <!-- #enddocregion name-with-error-msg -->
       </div>
 
       <div class="form-group">
         <label for="alterEgo">Alter Ego</label>
-        <input type="text" id="alterEgo" class="form-control"
+        <input id="alterEgo" class="form-control"
             formControlName="alterEgo"  >
       </div>
 
@@ -31,17 +43,20 @@
           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
 
-        <div *ngIf="formErrors.power" class="alert alert-danger">
-          {{ formErrors.power }}
+        <div *ngIf="power.invalid && power.touched" class="alert alert-danger">
+          <div *ngIf="power.errors.required">Power is required.</div>
         </div>
       </div>
 
       <button type="submit" class="btn btn-default"
-             [disabled]="!heroForm.valid">Submit</button>
+             [disabled]="heroForm.invalid">Submit</button>
       <button type="button" class="btn btn-default"
-             (click)="addHero()">New Hero</button>
-    </form>
-  </div>
+             (click)="formDir.resetForm({})">Reset</button>
+    </div>
+  </form>
 
-  <hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
+  <div class="submitted-message" *ngIf="formDir.submitted">
+    <p>You've submitted your hero, {{ heroForm.value.name }}!</p>
+    <button (click)="formDir.resetForm({})">Add new hero</button>
+  </div>
 </div>

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts

@@ -2,115 +2,39 @@
 // #docplaster
 // #docregion
 import { Component, OnInit }                  from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-
-import { Hero }                   from '../shared/hero';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
 
 @Component({
-  selector: 'hero-form-reactive3',
+  selector: 'hero-form-reactive',
   templateUrl: './hero-form-reactive.component.html'
 })
 export class HeroFormReactiveComponent implements OnInit {
 
   powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
 
-  hero = new Hero(18, 'Dr. WhatIsHisName', this.powers[0], 'Dr. What');
+  hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
 
-  submitted = false;
-
-  // #docregion on-submit
-  onSubmit() {
-    this.submitted = true;
-    this.hero = this.heroForm.value;
-  }
-  // #enddocregion on-submit
-// #enddocregion
-
-  // Reset the form with a new hero AND restore 'pristine' class state
-  // by toggling 'active' flag which causes the form
-  // to be removed/re-added in a tick via NgIf
-  // TODO: Workaround until NgForm has a reset method (#6822)
-  active = true;
-// #docregion class
-  // #docregion add-hero
-  addHero() {
-    this.hero = new Hero(42, '', '');
-    this.buildForm();
-  // #enddocregion add-hero
-// #enddocregion class
-
-    this.active = false;
-    setTimeout(() => this.active = true, 0);
-// #docregion
-  // #docregion add-hero
-  }
-  // #enddocregion add-hero
-
-  // #docregion form-builder
   heroForm: FormGroup;
-  constructor(private fb: FormBuilder) { }
 
+  // #docregion form-group
   ngOnInit(): void {
-    this.buildForm();
-  }
-
-  buildForm(): void {
-    this.heroForm = this.fb.group({
-      // #docregion name-validators
-      'name': [this.hero.name, [
-          Validators.required,
-          Validators.minLength(4),
-          Validators.maxLength(24),
-          forbiddenNameValidator(/bob/i)
-        ]
-      ],
-      // #enddocregion name-validators
-      'alterEgo': [this.hero.alterEgo],
-      'power':    [this.hero.power, Validators.required]
+    // #docregion custom-validator
+    this.heroForm = new FormGroup({
+      'name': new FormControl(this.hero.name, [
+        Validators.required,
+        Validators.minLength(4),
+        forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
+      ]),
+      'alterEgo': new FormControl(this.hero.alterEgo),
+      'power': new FormControl(this.hero.power, Validators.required)
     });
-
-    this.heroForm.valueChanges
-      .subscribe(data => this.onValueChanged(data));
-
-    this.onValueChanged(); // (re)set validation messages now
+    // #enddocregion custom-validator
   }
 
-  // #enddocregion form-builder
+  get name() { return this.heroForm.get('name'); }
 
-  onValueChanged(data?: any) {
-    if (!this.heroForm) { return; }
-    const form = this.heroForm;
-
-    for (const field in this.formErrors) {
-      // clear previous error message (if any)
-      this.formErrors[field] = '';
-      const control = form.get(field);
-
-      if (control && control.dirty && !control.valid) {
-        const messages = this.validationMessages[field];
-        for (const key in control.errors) {
-          this.formErrors[field] += messages[key] + ' ';
-        }
-      }
-    }
-  }
-
-  formErrors = {
-    'name': '',
-    'power': ''
-  };
-
-  validationMessages = {
-    'name': {
-      'required':      'Name is required.',
-      'minlength':     'Name must be at least 4 characters long.',
-      'maxlength':     'Name cannot be more than 24 characters long.',
-      'forbiddenName': 'Someone named "Bob" cannot be a hero.'
-    },
-    'power': {
-      'required': 'Power is required.'
-    }
-  };
+  get power() { return this.heroForm.get('power'); }
+  // #enddocregion form-group
 }
 // #enddocregion

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.module.ts

@@ -1,13 +0,0 @@
-// #docregion
-import { NgModule }            from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-
-import { SharedModule }              from '../shared/shared.module';
-import { HeroFormReactiveComponent } from './hero-form-reactive.component';
-
-@NgModule({
-  imports:      [ SharedModule, ReactiveFormsModule ],
-  declarations: [ HeroFormReactiveComponent ],
-  exports:      [ HeroFormReactiveComponent ]
-})
-export class HeroFormReactiveModule { }

aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts

@@ -6,9 +6,8 @@ import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } fr
 /** A hero's name can't match the given regular expression */
 export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
   return (control: AbstractControl): {[key: string]: any} => {
-    const name = control.value;
-    const no = nameRe.test(name);
-    return no ? {'forbiddenName': {name}} : null;
+    const forbidden = nameRe.test(control.value);
+    return forbidden ? {'forbiddenName': {value: control.value}} : null;
   };
 }
 // #enddocregion custom-validator
@@ -20,23 +19,12 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
   providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
   // #enddocregion directive-providers
 })
-export class ForbiddenValidatorDirective implements Validator, OnChanges {
+export class ForbiddenValidatorDirective implements Validator {
   @Input() forbiddenName: string;
-  private valFn = Validators.nullValidator;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    const change = changes['forbiddenName'];
-    if (change) {
-      const val: string | RegExp = change.currentValue;
-      const re = val instanceof RegExp ? val : new RegExp(val, 'i');
-      this.valFn = forbiddenNameValidator(re);
-    } else {
-      this.valFn = Validators.nullValidator;
-    }
-  }
 
   validate(control: AbstractControl): {[key: string]: any} {
-    return this.valFn(control);
+    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
+                              : null;
   }
 }
 // #enddocregion directive

aio/content/examples/form-validation/src/app/shared/hero.ts

@@ -1,9 +0,0 @@
-// #docregion
-export class Hero {
-  constructor(
-    public id: number,
-    public name: string,
-    public power: string,
-    public alterEgo?: string
-  ) {  }
-}

aio/content/examples/form-validation/src/app/shared/shared.module.ts

@@ -1,14 +0,0 @@
-// #docregion
-import { NgModule }     from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { ForbiddenValidatorDirective } from './forbidden-name.directive';
-import { SubmittedComponent }          from './submitted.component';
-
-@NgModule({
-  imports:      [ CommonModule],
-  declarations: [ ForbiddenValidatorDirective, SubmittedComponent ],
-  exports:      [ ForbiddenValidatorDirective, SubmittedComponent,
-                  CommonModule ]
-})
-export class SharedModule { }

aio/content/examples/form-validation/src/app/shared/submitted.component.ts

@@ -1,32 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { Hero } from './hero';
-
-@Component({
-  selector: 'hero-submitted',
-  template: `
-  <div *ngIf="submitted">
-    <h2>You submitted the following:</h2>
-    <div class="row">
-      <div class="col-xs-3">Name</div>
-      <div class="col-xs-9  pull-left">{{ hero.name }}</div>
-    </div>
-    <div class="row">
-      <div class="col-xs-3">Alter Ego</div>
-      <div class="col-xs-9 pull-left">{{ hero.alterEgo }}</div>
-    </div>
-    <div class="row">
-      <div class="col-xs-3">Power</div>
-      <div class="col-xs-9 pull-left">{{ hero.power }}</div>
-    </div>
-    <br>
-    <button class="btn btn-default" (click)="onClick()">Edit</button>
-  </div>`
-})
-export class SubmittedComponent {
-  @Input()  hero: Hero;
-  @Input()  submitted = false;
-  @Output() submittedChange = new EventEmitter<boolean>();
-  onClick() { this.submittedChange.emit(false); }
-}

aio/content/examples/form-validation/src/app/template/hero-form-template.component.html

@@ -0,0 +1,66 @@
+ <!-- #docregion -->
+<div class="container">
+
+  <h1>Template-Driven Form</h1>
+  <!-- #docregion form-tag-->
+  <form #heroForm="ngForm">
+  <!-- #enddocregion form-tag-->
+    <div [hidden]="heroForm.submitted">
+
+      <div class="form-group">
+        <label for="name">Name</label>
+        <!-- #docregion name-with-error-msg -->
+        <!-- #docregion name-input -->
+        <input id="name" name="name" class="form-control"
+               required minlength="4" forbiddenName="bob"
+               [(ngModel)]="hero.name" #name="ngModel" >
+        <!-- #enddocregion name-input -->
+
+        <div *ngIf="name.invalid && (name.dirty || name.touched)"
+             class="alert alert-danger">
+
+          <div *ngIf="name.errors.required">
+            Name is required.
+          </div>
+          <div *ngIf="name.errors.minlength">
+            Name must be at least 4 characters long.
+          </div>
+          <div *ngIf="name.errors.forbiddenName">
+            Name cannot be Bob.
+          </div>
+
+        </div>
+        <!-- #enddocregion name-with-error-msg -->
+      </div>
+
+      <div class="form-group">
+        <label for="alterEgo">Alter Ego</label>
+        <input id="alterEgo" class="form-control"
+               name="alterEgo" [(ngModel)]="hero.alterEgo" >
+      </div>
+
+      <div class="form-group">
+        <label for="power">Hero Power</label>
+        <select id="power" name="power" class="form-control"
+                required [(ngModel)]="hero.power" #power="ngModel" >
+          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
+        </select>
+
+        <div *ngIf="power.errors && power.touched" class="alert alert-danger">
+          <div *ngIf="power.errors.required">Power is required.</div>
+        </div>
+      </div>
+
+      <button type="submit" class="btn btn-default"
+              [disabled]="heroForm.invalid">Submit</button>
+      <button type="button" class="btn btn-default"
+              (click)="heroForm.resetForm({})">Reset</button>
+    </div>
+
+    <div class="submitted-message" *ngIf="heroForm.submitted">
+      <p>You've submitted your hero, {{ heroForm.value.name }}!</p>
+      <button (click)="heroForm.resetForm({})">Add new hero</button>
+    </div>
+  </form>
+
+</div>

aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts

@@ -0,0 +1,16 @@
+/* tslint:disable: member-ordering */
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-form-template',
+  templateUrl: './hero-form-template.component.html'
+})
+export class HeroFormTemplateComponent {
+
+  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
+
+  hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
+
+}

aio/content/examples/form-validation/src/app/template/hero-form-template.module.ts

@@ -1,14 +0,0 @@
-// #docregion
-import { NgModule }     from '@angular/core';
-import { FormsModule }  from '@angular/forms';
-
-import { SharedModule }               from '../shared/shared.module';
-import { HeroFormTemplate1Component } from './hero-form-template1.component';
-import { HeroFormTemplate2Component } from './hero-form-template2.component';
-
-@NgModule({
-  imports:      [ SharedModule, FormsModule ],
-  declarations: [ HeroFormTemplate1Component, HeroFormTemplate2Component ],
-  exports:      [ HeroFormTemplate1Component, HeroFormTemplate2Component ]
-})
-export class HeroFormTemplateModule { }

aio/content/examples/form-validation/src/app/template/hero-form-template1.component.html

@@ -1,61 +0,0 @@
- <!-- #docregion -->
-<div class="container">
-  <div [hidden]="submitted">
-    <h1>Hero Form 1 (Template)</h1>
-    <!-- #docregion form-tag-->
-    <form #heroForm="ngForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
-    <!-- #enddocregion form-tag-->
-      <div class="form-group">
-        <!-- #docregion name-with-error-msg -->
-        <label for="name">Name</label>
-
-        <input type="text" id="name" class="form-control"
-               required minlength="4" maxlength="24"
-               name="name" [(ngModel)]="hero.name"
-               #name="ngModel" >
-
-        <div *ngIf="name.errors && (name.dirty || name.touched)"
-             class="alert alert-danger">
-            <div [hidden]="!name.errors.required">
-              Name is required
-            </div>
-            <div [hidden]="!name.errors.minlength">
-              Name must be at least 4 characters long.
-            </div>
-            <div [hidden]="!name.errors.maxlength">
-              Name cannot be more than 24 characters long.
-            </div>
-        </div>
-        <!-- #enddocregion name-with-error-msg -->
-      </div>
-
-      <div class="form-group">
-        <label for="alterEgo">Alter Ego</label>
-        <input type="text" id="alterEgo" class="form-control"
-               name="alterEgo"
-               [(ngModel)]="hero.alterEgo" >
-      </div>
-
-      <div class="form-group">
-        <label for="power">Hero Power</label>
-        <select id="power" class="form-control"
-                name="power"
-                [(ngModel)]="hero.power" required
-                #power="ngModel" >
-          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
-        </select>
-
-        <div *ngIf="power.errors && power.touched" class="alert alert-danger">
-          <div [hidden]="!power.errors.required">Power is required</div>
-        </div>
-      </div>
-
-      <button type="submit" class="btn btn-default"
-             [disabled]="!heroForm.form.valid">Submit</button>
-      <button type="button" class="btn btn-default"
-             (click)="addHero()">New Hero</button>
-    </form>
-  </div>
-
-  <hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
-</div>

aio/content/examples/form-validation/src/app/template/hero-form-template1.component.ts

@@ -1,47 +0,0 @@
-/* tslint:disable: member-ordering */
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-
-import { Hero }      from '../shared/hero';
-
-@Component({
-  selector: 'hero-form-template1',
-  templateUrl: './hero-form-template1.component.html'
-})
-// #docregion class
-export class HeroFormTemplate1Component {
-
-  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
-
-  hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What');
-
-  submitted = false;
-
-  onSubmit() {
-    this.submitted = true;
-  }
-// #enddocregion class
-// #enddocregion
-  // Reset the form with a new hero AND restore 'pristine' class state
-  // by toggling 'active' flag which causes the form
-  // to be removed/re-added in a tick via NgIf
-  // TODO: Workaround until NgForm has a reset method (#6822)
-  active = true;
-// #docregion
-// #docregion class
-
-  addHero() {
-    this.hero = new Hero(42, '', '');
-// #enddocregion class
-// #enddocregion
-
-    this.active = false;
-    setTimeout(() => this.active = true, 0);
-// #docregion
-// #docregion class
-  }
-}
-// #enddocregion class
-// #enddocregion

aio/content/examples/form-validation/src/app/template/hero-form-template2.component.html

@@ -1,52 +0,0 @@
- <!-- #docregion -->
-<div class="container">
-  <div [hidden]="submitted">
-    <h1>Hero Form 2 (Template & Messages)</h1>
-    <!-- #docregion form-tag-->
-    <form #heroForm="ngForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
-    <!-- #enddocregion form-tag-->
-      <div class="form-group">
-        <!-- #docregion name-with-error-msg -->
-        <label for="name">Name</label>
-
-        <!-- #docregion name-input -->
-        <input type="text" id="name" class="form-control"
-               required minlength="4" maxlength="24" forbiddenName="bob"
-               name="name" [(ngModel)]="hero.name" >
-        <!-- #enddocregion name-input -->
-
-        <div *ngIf="formErrors.name" class="alert alert-danger">
-          {{ formErrors.name }}
-        </div>
-        <!-- #enddocregion name-with-error-msg -->
-      </div>
-
-      <div class="form-group">
-        <label for="alterEgo">Alter Ego</label>
-        <input type="text" id="alterEgo" class="form-control"
-               name="alterEgo"
-               [(ngModel)]="hero.alterEgo" >
-      </div>
-
-      <div class="form-group">
-        <label for="power">Hero Power</label>
-        <select id="power" class="form-control"
-                name="power"
-                [(ngModel)]="hero.power" required >
-          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
-        </select>
-
-        <div *ngIf="formErrors.power" class="alert alert-danger">
-          {{ formErrors.power }}
-        </div>
-      </div>
-
-      <button type="submit" class="btn btn-default"
-             [disabled]="!heroForm.form.valid">Submit</button>
-      <button type="button" class="btn btn-default"
-             (click)="addHero()">New Hero</button>
-    </form>
-  </div>
-
-  <hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
-</div>

aio/content/examples/form-validation/src/app/template/hero-form-template2.component.ts

@@ -1,99 +0,0 @@
-/* tslint:disable: member-ordering forin */
-// #docplaster
-// #docregion
-import { Component, AfterViewChecked, ViewChild } from '@angular/core';
-import { NgForm } from '@angular/forms';
-
-import { Hero }      from '../shared/hero';
-
-@Component({
-  selector: 'hero-form-template2',
-  templateUrl: './hero-form-template2.component.html'
-})
-export class HeroFormTemplate2Component implements AfterViewChecked {
-
-  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
-
-  hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What');
-
-  submitted = false;
-
-  onSubmit() {
-    this.submitted = true;
-  }
-// #enddocregion
-
-  // Reset the form with a new hero AND restore 'pristine' class state
-  // by toggling 'active' flag which causes the form
-  // to be removed/re-added in a tick via NgIf
-  // TODO: Workaround until NgForm has a reset method (#6822)
-  active = true;
-// #docregion
-
-  addHero() {
-    this.hero = new Hero(42, '', '');
-// #enddocregion
-
-    this.active = false;
-    setTimeout(() => this.active = true, 0);
-// #docregion
-  }
-
-  // #docregion view-child
-  heroForm: NgForm;
-  @ViewChild('heroForm') currentForm: NgForm;
-
-  ngAfterViewChecked() {
-    this.formChanged();
-  }
-
-  formChanged() {
-    if (this.currentForm === this.heroForm) { return; }
-    this.heroForm = this.currentForm;
-    if (this.heroForm) {
-      this.heroForm.valueChanges
-        .subscribe(data => this.onValueChanged(data));
-    }
-  }
-  // #enddocregion view-child
-
-  // #docregion handler
-  onValueChanged(data?: any) {
-    if (!this.heroForm) { return; }
-    const form = this.heroForm.form;
-
-    for (const field in this.formErrors) {
-      // clear previous error message (if any)
-      this.formErrors[field] = '';
-      const control = form.get(field);
-
-      if (control && control.dirty && !control.valid) {
-        const messages = this.validationMessages[field];
-        for (const key in control.errors) {
-          this.formErrors[field] += messages[key] + ' ';
-        }
-      }
-    }
-  }
-
-  formErrors = {
-    'name': '',
-    'power': ''
-  };
-  // #enddocregion handler
-
-  // #docregion messages
-  validationMessages = {
-    'name': {
-      'required':      'Name is required.',
-      'minlength':     'Name must be at least 4 characters long.',
-      'maxlength':     'Name cannot be more than 24 characters long.',
-      'forbiddenName': 'Someone named "Bob" cannot be a hero.'
-    },
-    'power': {
-      'required': 'Power is required.'
-    }
-  };
-  // #enddocregion messages
-}
-// #enddocregion

aio/content/examples/form-validation/src/forms.css

@@ -1,3 +1,4 @@
+
 .ng-valid[required], .ng-valid.required  {
   border-left: 5px solid #42A948; /* green */
 }

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

@@ -9,7 +9,7 @@ export class AppComponent {
   wolves = 0;
   gender = 'f';
   fly = true;
-  logo = 'https://angular.io/resources/images/logos/angular/angular.png';
+  logo = 'https://angular.io/assets/images/logos/angular/angular.png';
   count = 3;
   heroes: string[] = ['Magneta', 'Celeritas', 'Dynama'];
   inc(i: number) {

aio/content/examples/toh-pt6/aot/styles.css

@@ -1,116 +0,0 @@
-/* #docregion , quickstart, toh */
-/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-/* #enddocregion quickstart */
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-/* #enddocregion toh */
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  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: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  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.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .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;
-}
-/* #docregion toh */
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}

aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts

@@ -9,7 +9,8 @@ describe('PhoneCat Application', function() {
 
   it('should redirect `index.html` to `index.html#!/phones', function() {
     browser.get('index.html');
-    expect(browser.getLocationAbsUrl()).toBe('/phones');
+    browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine.
+    expect(browser.getCurrentUrl()).toMatch(/\/phones$/);
   });
 
   describe('View: Phone list', function() {
@@ -65,7 +66,7 @@ describe('PhoneCat Application', function() {
 
       element.all(by.css('.phones li a')).first().click();
       browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine.
-      expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
+      expect(browser.getCurrentUrl()).toMatch(/\/phones\/nexus-s$/);
     });
 
   });

aio/content/guide/aot-compiler.md

@@ -528,6 +528,11 @@ Compiling with AOT presupposes certain supporting files, most of them discussed
 
 Extend the `scripts` section of the `package.json` with these npm scripts:
 
+<code-example language="json">
+  "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+  "serve:aot": "lite-server -c bs-config.aot.json",
+</code-example>
+
 Copy the AOT distribution files into the `/aot` folder with the node script:
 
 <code-example language="none" class="code-shell">

aio/content/guide/form-validation.md

@@ -6,74 +6,49 @@
 Improve overall data quality by validating user input for accuracy and completeness.
 
 This page shows how to validate user input in the UI and display useful validation messages
-using first the Template Driven Forms and then the Reactive Forms approach.
+using both reactive and template-driven forms. It assumes some basic knowledge of the two 
+forms modules.
 
 <div class="l-sub-section">
 
-Read more about these choices in the [Forms](guide/forms)
-and the [Reactive Forms](guide/reactive-forms) guides.
+If you're new to forms, start by reviewing the [Forms](guide/forms) and 
+[Reactive Forms](guide/reactive-forms) guides.
 
 </div>
 
 
-{@a live-example}
+## Template-driven validation
 
+To add validation to a template-driven form, you add the same validation attributes as you 
+would with [native HTML form validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation). 
+Angular uses directives to match these attributes with validator functions in the framework.
 
-**Try the live example to see and download the full cookbook source code.**
+Every time the value of a form control changes, Angular runs validation and generates 
+either a list of validation errors, which results in an INVALID status, or null, which results in a VALID status.
 
-<live-example name="form-validation" embedded=true img="guide/form-validation/plunker.png">
+You can then inspect the control's state by exporting `ngModel` to a local template variable.
+The following example exports `NgModel` into a variable called `name`:
 
-</live-example>
-
-## Simple Template Driven Forms
-
-In the Template Driven approach, you arrange
-[form elements](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML) in the component's template.
-
-You add Angular form directives (mostly directives beginning `ng...`) to help
-Angular construct a corresponding internal control model that implements form functionality.
-In Template Driven forms, the control model is _implicit_ in the template.
-
-To validate user input, you add [HTML validation attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)
-to the elements. Angular interprets those as well, adding validator functions to the control model.
-
-Angular exposes information about the state of the controls including
-whether the user has "touched" the control or made changes and if the control values are valid.
-
-In this first template validation example,
-notice the HTML that reads the control state and updates the display appropriately.
-Here's an excerpt from the template HTML for a single input control bound to the hero name:
-
-<code-example path="form-validation/src/app/template/hero-form-template1.component.html" region="name-with-error-msg" title="template/hero-form-template1.component.html (Hero name)" linenums="false">
+<code-example path="form-validation/src/app/template/hero-form-template.component.html" region="name-with-error-msg" title="template/hero-form-template.component.html (name)" linenums="false">
 
 </code-example>
 
 
-
 Note the following:
 
-* The `<input>` element carries the HTML validation attributes: `required`, `minlength`, and `maxlength`.
+* The `<input>` element carries the HTML validation attributes: `required` and `minlength`. It 
+also carries a custom validator directive, `forbiddenName`. For more 
+information, see [Custom validators](guide/form-validation#custom-validators) section.
 
-* The `name` attribute of the input is set to `"name"` so Angular can track this input element and associate it
-with an Angular form control called `name` in its internal control model.
-
-* The `[(ngModel)]` directive allows two-way data binding between the input box to the `hero.name` property.
-
-* The template variable (`#name`) has the value `"ngModel"` (always `ngModel`).
-This gives you a reference to the Angular `NgModel` directive
-associated with this control that you can use _in the template_
-to check for control states such as `valid` and `dirty`.
+* `#name="ngModel"` exports `NgModel` into a local variable callled `name`. `NgModel` mirrors many of the properties of its underlying 
+`FormControl` instance, so you can use this in the template to check for control states such as `valid` and `dirty`. For a full list of control properties, see the [AbstractControl](api/forms/AbstractControl) 
+API reference.
 
 * The `*ngIf` on the `<div>` element reveals a set of nested message `divs`
-but only if there are `name` errors and
-the control is either `dirty` or `touched`.
+but only if the `name` is invalid and the control is either `dirty` or `touched`.
 
 * Each nested `<div>` can present a custom message for one of the possible validation errors.
-There are messages for `required`, `minlength`, and `maxlength`.
-
-The full template repeats this kind of layout for each data entry control on the form.
-
-{@a why-check}
+There are messages for `required`, `minlength`, and `forbiddenName`.
  
 
 <div class="l-sub-section">
@@ -82,567 +57,152 @@ The full template repeats this kind of layout for each data entry control on the
 
 #### Why check _dirty_ and _touched_?
 
-The app shouldn't show errors for a new hero before the user has had a chance to edit the value.
-The checks for `dirty` and `touched` prevent premature display of errors.
-
-Learn about `dirty` and `touched` in the [Forms](guide/forms) guide.
+You may not want your application to display errors before the user has a chance to edit the form.
+The checks for `dirty` and `touched` prevent errors from showing until the user 
+does one of two things: changes the value, 
+turning the control dirty; or blurs the form control element, setting the control to touched.
 
 </div>
 
+## Reactive form validation
 
+In a reactive form, the source of truth is the component class. Instead of adding validators through attributes in the template, you add validator functions directly to the form control model in the component class. Angular then calls these functions whenever the value of the control changes.
 
-The component class manages the hero model used in the data binding
-as well as other code to support the view.
+### Validator functions
 
+There are two types of validator functions: sync validators and async validators.  
 
-<code-example path="form-validation/src/app/template/hero-form-template1.component.ts" region="class" title="template/hero-form-template1.component.ts (class)">
+* **Sync validators**: functions that take a control instance and immediately return either a set of validation errors or `null`. You can pass these in as the second argument when you instantiate a `FormControl`.
 
-</code-example>
+* **Async validators**: functions that take a control instance and return a Promise 
+or Observable that later emits a set of validation errors or `null`. You can 
+pass these in as the third argument when you instantiate a `FormControl`. 
 
+Note: for performance reasons, Angular only runs async validators if all sync validators pass. Each must complete before errors are set.
 
+### Built-in validators
 
-Use this Template Driven validation technique when working with static forms with simple, standard validation rules.
-
-Here are the complete files for the first version of `HeroFormTemplateCompononent` in the Template Driven approach:
-
-
-<code-tabs>
-
-  <code-pane title="template/hero-form-template1.component.html" path="form-validation/src/app/template/hero-form-template1.component.html">
-
-  </code-pane>
-
-  <code-pane title="template/hero-form-template1.component.ts" path="form-validation/src/app/template/hero-form-template1.component.ts">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-
-
-## Template Driven Forms with validation messages in code
-
-While the layout is straightforward,
-there are obvious shortcomings with the way it's handling validation messages:
-
-* It takes a lot of HTML to represent all possible error conditions.
-This gets out of hand when there are many controls and many validation rules.
-
-* There's a lot of JavaScript logic in the HTML.
-
-* The messages are static strings, hard-coded into the template.
-It's easier to maintain _dynamic_ messages in the component class.
-
-In this example, you can move the logic and the messages into the component with a few changes to
-the template and component.
-
-Here's the hero name again, excerpted from the revised template
-(template 2), next to the original version:
-
-<code-tabs>
-
-  <code-pane title="hero-form-template2.component.html (name #2)" path="form-validation/src/app/template/hero-form-template2.component.html" region="name-with-error-msg">
-
-  </code-pane>
-
-  <code-pane title="hero-form-template1.component.html (name #1)" path="form-validation/src/app/template/hero-form-template1.component.html" region="name-with-error-msg">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-The `<input>` element HTML is almost the same. There are noteworthy differences:
-
-* The hard-code error message `<divs>` are gone.
-
-* There's a new attribute, `forbiddenName`, that is actually a custom validation directive.
-It invalidates the control if the user enters "bob" in the name `<input>`([try it](guide/form-validation#live-example)).
-See the [custom validation](guide/form-validation#custom-validation) section later in this page for more information
-on custom validation directives.
-
-* The `#name` template variable is gone because the app no longer refers to the Angular control for this element.
-
-* Binding to the new `formErrors.name` property is sufficient to display all name validation error messages.
-
-{@a component-class}
-
-### Component class
-The original component code for Template 1 stayed the same; however,
-Template 2 requires some changes in the component. This section covers the code
-necessary in Template 2's component class to acquire the Angular
-form control and compose error messages.
-
-The first step is to acquire the form control that Angular created from the template by querying for it.
-
-Look back at the top of the component template at the
-`#heroForm` template variable in the `<form>` element:
-
-<code-example path="form-validation/src/app/template/hero-form-template1.component.html" region="form-tag" title="template/hero-form-template1.component.html (form tag)" linenums="false">
-
-</code-example>
-
-
-
-The `heroForm` variable is a reference to the control model that Angular derived from the template.
-Tell Angular to inject that model into the component class's `currentForm` property using a `@ViewChild` query:
-
-<code-example path="form-validation/src/app/template/hero-form-template2.component.ts" region="view-child" title="template/hero-form-template2.component.ts (heroForm)" linenums="false">
-
-</code-example>
-
-
-
-Some observations:
-
-* Angular `@ViewChild` queries for a template variable when you pass it
-the name of that variable as a string (`'heroForm'` in this case).
-
-* The `heroForm` object changes several times during the life of the component, most notably when you add a new hero.
-Periodically inspecting it reveals these changes.
-
-* Angular calls the `ngAfterViewChecked()` [lifecycle hook method](guide/lifecycle-hooks#afterview)
-when anything changes in the view.
-That's the right time to see if there's a new `heroForm` object.
-
-* When there _is_ a new `heroForm` model, `formChanged()` subscribes to its `valueChanges` _Observable_ property.
-The `onValueChanged` handler looks for validation errors after every keystroke.
-
-<code-example path="form-validation/src/app/template/hero-form-template2.component.ts" region="handler" title="template/hero-form-template2.component.ts (handler)" linenums="false">
-
-</code-example>
-
-
-
-The `onValueChanged` handler interprets user data entry.
-The `data` object passed into the handler contains the current element values.
-The handler ignores them. Instead, it iterates over the fields of the component's `formErrors` object.
-
-The `formErrors` is a dictionary of the hero fields that have validation rules and their current error messages.
-Only two hero properties have validation rules, `name` and `power`.
-The messages are empty strings when the hero data are valid.
-
-For each field, the `onValueChanged` handler does the following:
-  * Clears the prior error message, if any.
-  * Acquires the field's corresponding Angular form control.
-  * If such a control exists _and_ it's been changed ("dirty")
-  _and_ it's invalid, the handler composes a consolidated error message for all of the control's errors.
-
-Next, the component needs some error messages&mdash;a set for each validated property with
-one message per validation rule:
-
-<code-example path="form-validation/src/app/template/hero-form-template2.component.ts" region="messages" title="template/hero-form-template2.component.ts (messages)" linenums="false">
-
-</code-example>
-
-
-
-Now every time the user makes a change, the `onValueChanged` handler checks for validation errors and produces messages accordingly.
-
-
-{@a improvement}
-
-
-### The benefits of messages in code
-
-Clearly the template got substantially smaller while the component code got substantially larger.
-It's not easy to see the benefit when there are just three fields and only two of them have validation rules.
-
-Consider what happens as the number of validated
-fields and rules increases.
-In general, HTML is harder to read and maintain than code.
-The initial template was already large and threatening to get rapidly worse
-with the addition of more validation message `<div>` elements.
-
-After moving the validation messaging to the component,
-the template grows more slowly and proportionally.
-Each field has approximately the same number of lines no matter its number of validation rules.
-The component also grows proportionally, at the rate of one line per validated field
-and one line per validation message.
-
-Now that the messages are in code, you have more flexibility and can compose messages more efficiently.
-You can refactor the messages out of the component, perhaps to a service class that retrieves them from the server.
-In short, there are more opportunities to improve message handling now that text and logic have moved from template to code.
-
-
-{@a formmodule}
-
-
-### _FormModule_ and Template Driven forms
-
-Angular has two different forms modules&mdash;`FormsModule` and
-`ReactiveFormsModule`&mdash;that correspond with the
-two approaches to form development. Both modules come
-from the same `@angular/forms` library package.
-
-You've been reviewing the Template Driven approach which requires the `FormsModule`.
-Here's how you imported it in the `HeroFormTemplateModule`.
-
-
-<code-example path="form-validation/src/app/template/hero-form-template.module.ts" title="template/hero-form-template.module.ts" linenums="false">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-This guide hasn't talked about the `SharedModule` or its `SubmittedComponent` which appears at the bottom of every
-form template in this cookbook.
-
-They're not germane to the validation story. Look at the [live example](guide/form-validation#live-example) if you're interested.
-
-
-</div>
-
-
-
-
-{@a reactive}
-
-
-## Reactive Forms with validation in code
-
-In the Template Driven approach, you mark up the template with form elements, validation attributes,
-and `ng...` directives from the Angular `FormsModule`.
-At runtime, Angular interprets the template and derives its _form control model_.
-
-**Reactive Forms** takes a different approach.
-You create the form control model in code. You write the template with form elements
-and `form...` directives from the Angular `ReactiveFormsModule`.
-At runtime, Angular binds the template elements to your control model based on your instructions.
-
-This allows you to do the following:
-
-* Add, change, and remove validation functions on the fly.
-* Manipulate the control model dynamically from within the component.
-* [Test](guide/form-validation#testing-considerations) validation and control logic with isolated unit tests.
-
-The following sample re-writes the hero form in Reactive Forms style.
-
-
-{@a reactive-forms-module}
-
-
-### Switch to the _ReactiveFormsModule_
-The Reactive Forms classes and directives come from the Angular `ReactiveFormsModule`, not the `FormsModule`.
-The application module for the Reactive Forms feature in this sample looks like this:
-
-<code-example path="form-validation/src/app/reactive/hero-form-reactive.module.ts" title="src/app/reactive/hero-form-reactive.module.ts" linenums="false">
-
-</code-example>
-
-
-
-The Reactive Forms feature module and component are in the `src/app/reactive` folder.
-Focus on the `HeroFormReactiveComponent` there, starting with its template.
-
-
-{@a reactive-component-template}
-
-
-### Component template
-
-Begin by changing the `<form>` tag so that it binds the Angular `formGroup` directive in the template
-to the `heroForm` property in the component class.
-The `heroForm` is the control model that the component class builds and maintains.
-
-
-<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.html" region="form-tag" title="form-validation/src/app/reactive/hero-form-reactive.component.html" linenums="false">
-
-</code-example>
-
-
-
-Next, modify the template HTML elements to match the Reactive Forms style.
-Here is the "name" portion of the template again, revised for Reactive Forms and compared with the Template Driven version:
-
-<code-tabs>
-
-  <code-pane title="hero-form-reactive.component.html (name #3)" path="form-validation/src/app/reactive/hero-form-reactive.component.html" region="name-with-error-msg">
-
-  </code-pane>
-
-  <code-pane title="hero-form-template1.component.html (name #2)" path="form-validation/src/app/template/hero-form-template2.component.html" region="name-with-error-msg">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-Key changes are:
-* The validation attributes are gone (except `required`) because
-validating happens in code.
-
-* `required` remains, not for validation purposes (that's in the code),
-but rather for css styling and accessibility.
-
-
-<div class="l-sub-section">
-
-Currently, Reactive Forms doesn't add the `required` or `aria-required`
-HTML validation attribute to the DOM element
-when the control has the `required` validator function.
-
-Until then, apply the `required` attribute _and_ add the `Validator.required` function
-to the control model, as you'll see below.
-
-</div>
-
-
-
-* The `formControlName` replaces the `name` attribute; it serves the same
-purpose of correlating the input with the Angular form control.
-
-* The two-way `[(ngModel)]` binding is gone.
-The reactive approach does not use data binding to move data into and out of the form controls.
-That's all in code.
+You can choose to [write your own validator functions](guide/form-validation#custom-validators), or you can use some of 
+Angular's built-in validators. 
 
+The same built-in validators that are available as attributes in template-driven forms, such as `required` and `minlength`, are all available to use as functions from the `Validators` class. For a full list of built-in validators, see the [Validators](api/forms/Validators) API reference.
 
+To update the hero form to be a reactive form, you can use some of the same 
+built-in validators&mdash;this time, in function form. See below:
 
 {@a reactive-component-class}
 
-
-### Component class
-
-The component class is now responsible for defining and managing the form control model.
-
-Angular no longer derives the control model from the template so you can no longer query for it.
-You can create the Angular form control model explicitly with
-the help of the `FormBuilder` class.
-
-Here's the section of code devoted to that process, paired with the Template Driven code it replaces:
-
-<code-tabs>
-
-  <code-pane title="reactive/hero-form-reactive.component.ts (FormBuilder)" path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="form-builder">
-
-  </code-pane>
-
-  <code-pane title="template/hero-form-template2.component.ts (ViewChild)" path="form-validation/src/app/template/hero-form-template2.component.ts" region="view-child">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-* Inject `FormBuilder` in a constructor.
-
-* Call a `buildForm` method in the `ngOnInit` [lifecycle hook method](guide/lifecycle-hooks#hooks-overview)
-because that's when you'll have the hero data. Call it again in the `addHero` method.
-
-<div class="l-sub-section">
-
-
-
-A real app would retrieve the hero asynchronously from a data service, a task best performed in the `ngOnInit` hook.
-
-</div>
-
-
-
-* The `buildForm` method uses the `FormBuilder`, `fb`, to declare the form control model.
-Then it attaches the same `onValueChanged` handler (there's a one line difference)
-to the form's `valueChanges` event and calls it immediately
-to set error messages for the new control model.
-
-## Built-in validators
-
-Angular forms include a number of built-in validator functions, which are functions
-that help you check common user input in forms. In addition to the built-in
-validators covered here of `minlength`, `maxlength`,
-and `required`, there are others such as `email` and `pattern`
-for Reactive Forms.
-For a full list of built-in validators,
-see the [Validators](api/forms/Validators) API reference.
-
-
-#### _FormBuilder_ declaration
-The `FormBuilder` declaration object specifies the three controls of the sample's hero form.
-
-Each control spec is a control name with an array value.
-The first array element is the current value of the corresponding hero field.
-The optional second value is a validator function or an array of validator functions.
-
-Most of the validator functions are stock validators provided by Angular as static methods of the `Validators` class.
-Angular has stock validators that correspond to the standard HTML validation attributes.
-
-The `forbiddenName` validator on the `"name"` control is a custom validator,
-discussed in a separate [section below](guide/form-validation#custom-validation).
-
-<div class="l-sub-section">
-
-Learn more about `FormBuilder` in the [Introduction to FormBuilder](guide/reactive-forms#formbuilder) section of Reactive Forms guide.
-
-</div>
-
-#### Committing hero value changes
-
-In two-way data binding, the user's changes flow automatically from the controls back to the data model properties.
-A Reactive Forms component should not use data binding to
-automatically update data model properties.
-The developer decides _when and how_ to update the data model from control values.
-
-This sample updates the model twice:
-
-1. When the user submits the form.
-1. When the user adds a new hero.
-
-The `onSubmit()` method simply replaces the `hero` object with the combined values of the form:
-
-<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="on-submit" title="form-validation/src/app/reactive/hero-form-reactive.component.ts" linenums="false">
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="form-group" title="reactive/hero-form-reactive.component.ts (validator functions)" linenums="false">
 </code-example>
 
+Note that:
 
-The `addHero()` method discards pending changes and creates a brand new `hero` model object.
+* The name control sets up two built-in validators&mdash;`Validators.required` and `Validators.minLength(4)`&mdash;and one custom validator, `forbiddenNameValidator`. For more details see the [Custom validators](guide/form-validation#custom-validators) section in this guide.
+* As these validators are all sync validators, you pass them in as the second argument. 
+* Support multiple validators by passing the functions in as an array.
+* This example adds a few getter methods. In a reactive form, you can always access any form control through the `get` method on its parent group, but sometimes it's useful to define getters as shorthands 
+for the template.
 
-<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="add-hero" title="form-validation/src/app/reactive/hero-form-reactive.component.ts" linenums="false">
+
+If you look at the template for the name input again, it is fairly similar to the template-driven example. 
+
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.html" region="name-with-error-msg" title="reactive/hero-form-reactive.component.html (name with error msg)" linenums="false">
 </code-example>
 
+Key takeaways:
+ 
+ * The form no longer exports any directives, and instead uses the `name` getter defined in 
+ the component class.
+ * The `required` attribute is still present. While it's not necessary for validation purposes, 
+ you may want to keep it in your template for CSS styling or accessibility reasons.
 
 
-Then it calls `buildForm()` again which replaces the previous `heroForm` control model with a new one.
-The `<form>` tag's `[formGroup]` binding refreshes the page with the new control model.
+## Custom validators
 
-Here's the complete reactive component file, compared to the two Template Driven component files.
+Since the built-in validators won't always match the exact use case of your application, sometimes you'll want to create a custom validator. 
 
-<code-tabs>
-
-  <code-pane title="reactive/hero-form-reactive.component.ts (#3)" path="form-validation/src/app/reactive/hero-form-reactive.component.ts">
-
-  </code-pane>
-
-  <code-pane title="template/hero-form-template2.component.ts (#2)" path="form-validation/src/app/template/hero-form-template2.component.ts">
-
-  </code-pane>
-
-  <code-pane title="template/hero-form-template1.component.ts (#1)" path="form-validation/src/app/template/hero-form-template1.component.ts">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-<div class="l-sub-section">
-
-Run the [live example](guide/form-validation#live-example) to see how the reactive form behaves,
-and to compare all of the files in this sample.
-
-</div>
-
-## Custom validation
-This cookbook sample has a custom `forbiddenNameValidator()` function that's applied to both the
-Template Driven and the reactive form controls. It's in the `src/app/shared` folder
-and declared in the `SharedModule`.
-
-Here's the `forbiddenNameValidator()` function:
+Consider the `forbiddenNameValidator` function from previous
+[examples](guide/form-validation#reactive-component-class) in 
+this guide. Here's what the definition of that function looks like:
 
 <code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="custom-validator" title="shared/forbidden-name.directive.ts (forbiddenNameValidator)" linenums="false">
 </code-example>
 
+The function is actually a factory that takes a regular expression to detect a _specific_ forbidden name and returns a validator function.
 
-
-The function is actually a factory that takes a regular expression to detect a _specific_ forbidden name
-and returns a validator function.
-
-In this sample, the forbidden name is "bob";
-the validator rejects any hero name containing "bob".
+In this sample, the forbidden name is "bob", so the validator will reject any hero name containing "bob".
 Elsewhere it could reject "alice" or any name that the configuring regular expression matches.
 
 The `forbiddenNameValidator` factory returns the configured validator function.
 That function takes an Angular control object and returns _either_
 null if the control value is valid _or_ a validation error object.
 The validation error object typically has a property whose name is the validation key, `'forbiddenName'`,
-and whose value is an arbitrary dictionary of values that you could insert into an error message (`{name}`).
+and whose value is an arbitrary dictionary of values that you could insert into an error message, `{name}`.
 
+### Adding to reactive forms
 
+In reactive forms, custom validators are fairly simple to add. All you have to do is pass the function directly 
+to the `FormControl`.
 
-### Custom validation directive
-In the Reactive Forms component, the `'name'` control's validator function list
-has a `forbiddenNameValidator` at the bottom.
-
-<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="name-validators" title="reactive/hero-form-reactive.component.ts (name validators)" linenums="false">
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="custom-validator" title="reactive/hero-form-reactive.component.ts (validator functions)" linenums="false">
 </code-example>
 
+### Adding to template-driven forms
 
+In template-driven forms, you don't have direct access to the `FormControl` instance, so you can't pass the 
+validator in like you can for reactive forms. Instead, you need to add a directive to the template.
 
-In the Template Driven example, the `<input>` has the selector (`forbiddenName`)
-of a custom _attribute directive_, which rejects "bob".
+The corresponding `ForbiddenValidatorDirective` serves as a wrapper around the `forbiddenNameValidator`.
 
-<code-example path="form-validation/src/app/template/hero-form-template2.component.html" region="name-input" title="template/hero-form-template2.component.html (name input)" linenums="false">
-</code-example>
-
-
-
-The corresponding `ForbiddenValidatorDirective` is a wrapper around the `forbiddenNameValidator`.
-
-Angular `forms` recognizes the directive's role in the validation process because the directive registers itself
-with the `NG_VALIDATORS` provider, a provider with an extensible collection of validation directives.
+Angular recognizes the directive's role in the validation process because the directive registers itself
+with the `NG_VALIDATORS` provider, a provider with an extensible collection of validators.
 
 <code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="directive-providers" title="shared/forbidden-name.directive.ts (providers)" linenums="false">
 </code-example>
 
-
-
-Here is the rest of the directive to help you get an idea of how it all comes together:
+The directive class then implements the `Validator` interface, so that it can easily integrate 
+with Angular forms. Here is the rest of the directive to help you get an idea of how it all 
+comes together:
 
 <code-example path="form-validation/src/app/shared/forbidden-name.directive.ts" region="directive" title="shared/forbidden-name.directive.ts (directive)">
 </code-example>
 
+Once the `ForbiddenValidatorDirective` is ready, you can simply add its selector, `forbiddenName`, to any input element to activate it. For example:
 
+<code-example path="form-validation/src/app/template/hero-form-template.component.html" region="name-input" title="template/hero-form-template.component.html (forbidden-name-input)" linenums="false">
 
+</code-example>
 
 
 <div class="l-sub-section">
 
-If you are familiar with Angular validations, you may have noticed
-that the custom validation directive is instantiated with `useExisting`
+You may have noticed that the custom validation directive is instantiated with `useExisting`
 rather than `useClass`. The registered validator must be _this instance_ of
 the `ForbiddenValidatorDirective`&mdash;the instance in the form with
 its `forbiddenName` property bound to “bob". If you were to replace
 `useExisting` with `useClass`, then you’d be registering a new class instance, one that
 doesn’t have a `forbiddenName`.
 
-To see this in action, run the example and then type “bob” in the name of Hero Form 2.
-Notice that you get a validation error. Now change from `useExisting` to `useClass` and try again.
-This time, when you type “bob”, there's no "bob" error message.
-
 </div>
 
+## Control status CSS classes
 
-<div class="l-sub-section">
+Like in AngularJS, Angular automatically mirrors many control properties onto the form control element as CSS classes. You can use these classes to style form control elements according to the state of the form. The following classes are currently supported:
 
-For more information on attaching behavior to elements,
-see [Attribute Directives](guide/attribute-directives).
+* `.ng-valid`
+* `.ng-invalid`
+* `.ng-pending`
+* `.ng-pristine`
+* `.ng-dirty`
+* `.ng-untouched`
+* `.ng-touched`
 
-</div>
+The hero form uses the `.ng-valid` and `.ng-invalid` classes to 
+set the color of each form control's border.
+
+<code-example path="form-validation/src/forms.css" title="forms.css (status classes)">
+
+</code-example>
 
 
-
-## Testing Considerations
-
-You can write _isolated unit tests_ of validation and control logic in Reactive Forms.
-
-_Isolated unit tests_ probe the component class directly, independent of its
-interactions with its template, the DOM, other dependencies, or Angular itself.
-
-Such tests have minimal setup, are quick to write, and easy to maintain.
-They do not require the `Angular TestBed` or asynchronous testing practices.
-
-That's not possible with Template Driven forms.
-The Template Driven approach relies on Angular to produce the control model and
-to derive validation rules from the HTML validation attributes.
-You must use the `Angular TestBed` to create component test instances,
-write asynchronous tests, and interact with the DOM.
-
-While not difficult, this takes more time, work and
-skill&mdash;factors that tend to diminish test code
-coverage and quality.
+**You can run the <live-example></live-example> to see the complete reactive and template-driven example code.**

aio/content/guide/i18n.md

@@ -408,7 +408,7 @@ This XML element represents the translation of the `<h1>` greeting tag you marke
 
 <div class="l-sub-section">
 
-Note that the translation unit `id=introductionHeader` is derived from the  _custom_ `id`](#custom-id "Set a custom id") that you set earlier, but **without the `@@` prefix** required in the source HTML.
+Note that the translation unit `id=introductionHeader` is derived from the [_custom_ `id`](#custom-id "Set a custom id") that you set earlier, but **without the `@@` prefix** required in the source HTML.
 
 </div>
 

aio/content/guide/language-service.md

@@ -0,0 +1,176 @@
+# Angular Language Service
+
+The Angular Language Service is a way to get completions, errors, 
+hints, and navigation inside your Angular templates whether they 
+are external in an HTML file or embedded in annotations/decorators 
+in a string. The Angular Language Service autodetects that you are 
+opening an Angular file, reads your `tsconfig.json` file, finds all the 
+templates you have in your application, and then provides language 
+services for any templates that you open.
+
+
+## Autocompletion
+
+Autocompletion can speed up your development time by providing you with 
+contextual possibilities and hints as you type. This example shows 
+autocomplete in an interpolation. As you type it out, 
+you can hit tab to complete.
+
+<figure>
+  <img src="generated/images/guide/language-service/language-completion.gif" alt="autocompletion">
+</figure>
+
+There are also completions within 
+elements. Any elements you have as a component selector will 
+show up in the completion list.
+
+## Error checking
+
+The Angular Language Service can also forewarn you of mistakes in your code. 
+In this example, Angular doesn't know what `orders` is or where it comes from. 
+
+<figure>
+  <img src="generated/images/guide/language-service/language-error.gif" alt="error checking">
+</figure>
+
+## Navigation
+
+Navigation allows you to hover to 
+see where a component, directive, module, etc. is from and then 
+click and press F12 to go directly to its definition.
+
+<figure>
+  <img src="generated/images/guide/language-service/language-navigation.gif" alt="navigation">
+</figure>
+
+
+## Angular Language Service in your editor
+
+Angular Language Service is currently available for [Visual Studio Code](https://code.visualstudio.com/) and 
+[WebStorm](https://www.jetbrains.com/webstorm). 
+
+### Visual Studio Code
+
+In Visual Studio Code, install Angular Language Service from the store, 
+which is accessible from the bottom icon on the left menu pane. 
+You can also use the VS Quick Open (⌘+P) to search for the extension. When you've opened it, 
+enter the following command: 
+
+```sh
+ext install ng-template
+```
+
+Then click the install button to install the Angular Language Service. 
+
+
+### WebStorm
+
+In webstorm, you have to install the language service as a dev dependency. 
+When Angular sees this dev dependency, it provides the 
+language service inside of WebStorm. Webstorm then gives you 
+colorization inside the template and autocomplete in addition to the Angular Language Service.
+
+Here's the dev dependency 
+you need to have in `package.json`:
+
+```json
+
+devDependencies {
+	"@angular/language-service": "^4.0.0"
+}
+```
+
+Then in the terminal window at the root of your project, 
+install the `devDependencies` with `npm` or `yarn`: 
+
+```sh
+npm install 
+```
+*OR* 
+
+```sh
+yarn
+```
+
+*OR* 
+
+```sh
+yarn install
+```
+
+
+### Sublime Text
+
+In [Sublime Text](https://www.sublimetext.com/), you first need an extension to allow Typescript. 
+Install the latest version of typescript in a local `node_modules` directory:
+
+```sh
+npm install --save-dev typescript
+```
+
+Then install the Angular Language Service in the same location:
+```sh
+npm install --save-dev @angular/language-service
+```
+
+Starting with TypeScript 2.3, TypeScript has a language service plugin model that the language service can use. 
+
+Next, in your user preferences (`Cmd+,` or `Ctrl+,`), add:
+
+```json
+"typescript-tsdk": "<path to your folder>/node_modules/typescript/lib"
+```
+
+
+## Installing in your project
+
+You can also install Angular Language Service in your project with the 
+following `npm` command:
+
+```sh
+npm install --save-dev @angular/language-service
+```
+Additionally, add the following to the `"compilerOptions"` section of 
+your project's `tsconfig.json`.
+
+```json
+  "plugins": [
+      {"name": "@angular/language-service"}
+  ]
+```
+Note that this only provides diagnostics and completions in `.ts` 
+files. You need a custom sublime plugin (or modifications to the current plugin) 
+for completions in HTML files.
+
+
+## How the Language Service works
+
+When you use an editor with a language service, there's an 
+editor process which starts a separate language process/service 
+to which it speaks through an [RPC](https://en.wikipedia.org/wiki/Remote_procedure_call). 
+Any time you type inside of the editor, it sends information to the other process to 
+track the state of your project. When you trigger a completion list within a template, the editor process first parses the template into an HTML AST, or [abstract syntax tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree). Then the Angular compiler interprets 
+what module the template is part of, the scope you're in, and the component selector. Then it figures out where in the template AST your cursor is. When it determines the 
+context, it can then determine what the children can be.
+
+It's a little more involved if you are in an interpolation. If you have an interpolation of `{{data.---}}` inside a `div` and need the completion list after `data.---`, the compiler can't use the HTML AST to find the answer. The HTML AST can only tell the compiler that there is some text with the characters "`{{data.---}}`". That's when the template parser produces an expression AST, which resides within the template AST. The Angular Language Services then looks at `data.---` within its context and asks the TypeScript Language Service what the members of data are. TypeScript then returns the list of possibilities.
+
+
+For more in-depth information, see the 
+[Angular Language Service API](https://github.com/angular/angular/blob/master/packages/language-service/src/types.ts)
+
+
+
+
+
+
+
+
+<hr>
+
+## More on Information
+
+For more information, see [Chuck Jazdzewski's presentation](https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s) on the Angular Language 
+Service from [ng-conf](https://www.ng-conf.org/) 2017.
+
+

aio/content/guide/reactive-forms.md

@@ -1080,8 +1080,11 @@ To get access to the `FormArray` class, import it into `hero-detail.component.ts
 
 
 To _work_ with a `FormArray` you do the following:
+
 1. Define the items (`FormControls` or `FormGroups`) in the array.
+
 1. Initialize the array with items created from data in the _data model_.
+
 1. Add and remove items as the user requires.
 
 In this guide, you define a `FormArray` for `Hero.addresses` and

aio/content/guide/router.md

@@ -1830,7 +1830,7 @@ Finally, you activate the observable with `subscribe` method and (re)set the com
 
 #### _ParamMap_ API
 
-The `ParamMap` API is inspired by the [URLSearchParams interface](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParamsOPut). It provides methods
+The `ParamMap` API is inspired by the [URLSearchParams interface](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams). It provides methods
 to handle parameter access for both route parameters (`paramMap`) and query parameters (`queryParamMap`).
 
 <table>

aio/content/marketing/contributors.json

@@ -342,7 +342,7 @@
    "name": "Ralph Wang",
    "picture": "ralph.jpg",
    "twitter": "ralph_wang_gde",
-   "bio": "Ralph(Zhicheng Wang) is a senior consultant at ThoughWorks and also a GDE. He is a technology enthusiast and he is a passionate advocate of 'Simplicity, Professionalism and Sharing'. In his eighteen years of R&D career, he worked as tester, R&D engineer, project manager, product manager and CTO. He is looking forward to the birth of his baby.",
+   "bio": "Ralph(Zhicheng Wang) is a senior consultant at ThoughtWorks and also a GDE. He is a technology enthusiast and he is a passionate advocate of 'Simplicity, Professionalism and Sharing'. In his eighteen years of R&D career, he worked as tester, R&D engineer, project manager, product manager and CTO. He is immersed in the excitement of the arrival of the baby.",
    "group": "GDE"
  },
 

aio/content/marketing/features.html

@@ -8,7 +8,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Cross Platform</div>
-          <img src="assets/images/icons/feature-icon.svg" height="70px">
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
         </div>
         <div class="feature-row">
 
@@ -34,7 +34,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Speed and Performance</div>
-          <img src="assets/images/icons/feature-icon.svg" height="70px">
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
         </div>
         <div class="feature-row">
 
@@ -59,7 +59,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Productivity</div>
-          <img src="assets/images/icons/feature-icon.svg" height="70px">
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
         </div>
         <div class="feature-row">
 
@@ -84,7 +84,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Full Development Story</div>
-          <img src="assets/images/icons/feature-icon.svg" height="70px">
+          <img src="generated/images/marketing/features/feature-icon.svg" height="70px">
         </div>
         <div class="feature-row">
 

aio/content/marketing/index.html

@@ -1,10 +1,10 @@
-<!--FULL HEADER BLOCK-->
+<!-- FULL HEADER BLOCK -->
 <header>
 
-  <!--BACKGROUND IMAGE-->
+  <!-- BACKGROUND IMAGE -->
   <div class="background-sky hero"></div>
 
-<!--INTRO SECTION -->
+  <!-- INTRO SECTION -->
   <section id="intro">
 
     <!-- LOGO -->
@@ -12,35 +12,37 @@
       <img src="assets/images/logos/angular/angular.svg"/>
     </div>
 
-      <!-- CONTAINER     -->
+    <!-- CONTAINER -->
     <div class="homepage-container">
-      <!-- container content starts -->
-
       <div class="hero-headline no-toc">One framework.<br>Mobile &amp; desktop.</div>
       <a class="button hero-cta" href="guide/quickstart">Get Started</a>
-  </div><!-- CONTAINER END -->
-  </section>
+    </div>
 
+  </section>
 
 </header>
 
+<!-- MAIN CONTENT -->
 <article>
+
+  <h1 class="no-toc" style="display: none"></h1>
+
   <div class="home-rows">
 
-    <!--Announcement Bar-->
+    <!-- Announcement Bar -->
     <div class="homepage-container">
       <div class="announcement-bar">
-        <img src="generated/images/marketing/angular-mix.png" height="40" width="151">
+        <img src="generated/images/marketing/home/angular-mix.png" height="40" width="151">
         <p>Join us at our newest event, October 2017</p>
         <a class="button" href="https://angularmix.com/">Learn More</a>
-     </div>
+      </div>
     </div>
 
-    <!-- Group 1-->
+    <!-- Group 1 -->
     <div layout="row" layout-xs="column" class="home-row homepage-container">
       <div class="promo-img-container promo-1">
         <div>
-          <img height="222" width="340" src="assets/images/home/responsive-framework.svg" alt="responsive framework">
+          <img height="222" width="340" src="generated/images/marketing/home/responsive-framework.svg" alt="responsive framework">
         </div>
       </div>
 
@@ -53,7 +55,8 @@
       </div>
     </div>
     <hr>
-    <!-- Group 2-->
+
+    <!-- Group 2 -->
     <div layout="row" layout-xs="column" class="home-row">
       <div class="text-container">
         <div class="text-block">
@@ -65,16 +68,16 @@
 
       <div class="promo-img-container promo-2">
         <div>
-          <img height="222" width="323" src="assets/images/home/speed-performance.svg" alt="speed and performance">
+          <img height="222" width="323" src="generated/images/marketing/home/speed-performance.svg" alt="speed and performance">
         </div>
       </div>
     </div>
     <hr>
 
-    <!-- Group 3-->
+    <!-- Group 3 -->
     <div layout="row" layout-xs="column" class="home-row">
       <div class="promo-img-container promo-3">
-        <div><img src="assets/images/home/joyful-development.png" alt="IDE example"></div>
+        <div><img src="generated/images/marketing/home/joyful-development.svg" alt="IDE example"></div>
       </div>
 
       <div class="text-container">
@@ -88,9 +91,8 @@
     </div>
     <hr>
 
-    <!-- Group 4-->
+    <!-- Group 4 -->
     <div layout="row" layout-xs="column" class="home-row">
-
       <div class="text-container">
         <div class="text-block l-pad-top-2">
           <div class="text-headline">Loved by Millions</div>
@@ -100,25 +102,24 @@
 
       <div class="promo-img-container promo-4">
         <div>
-          <img src="assets/images/home/loved-by-millions.png" alt="angular on the map" width="455" height="228">
+          <img src="generated/images/marketing/home/loved-by-millions.svg" alt="angular on the map" width="455" height="228">
         </div>
       </div>
     </div>
 
-  <!-- CTA CARDS -->
-  <div layout="row" layout-xs="column" class="home-row">
-
-    <a href="guide/quickstart">
-      <div class="card">
-          <img src="assets/images/icons/code-icon.svg" height="70px">
+    <!-- CTA CARDS -->
+    <div layout="row" layout-xs="column" class="home-row">
+      <a href="guide/quickstart">
+        <div class="card">
+          <img src="generated/images/marketing/home/code-icon.svg" height="70px">
           <div class="card-text-container">
             <div class="text-headline">Get Started</div>
             <p>Start building your Angular application.</p>
           </div>
-      </div>
-    </a>
-  </div>
+        </div>
+      </a>
+    </div>
 
-  </div> <!-- end of home rows -->
+  </div><!-- end of home rows -->
 
 </article>

aio/content/navigation.json

@@ -61,6 +61,12 @@
       "hidden": true
     },
 
+    {
+      "url": "guide/webpack",
+      "title": "Webpack: An Introduction",
+      "hidden": true
+    },
+
     {
       "url": "guide/quickstart",
       "title": "Getting Started",
@@ -282,6 +288,11 @@
           "title": "Internationalization (i18n)",
           "tooltip": "Translate the app's template text into multiple languages."
         },
+        {
+          "url": "guide/language-service",
+          "title": "Language Service",
+          "tooltip": "Use Angular Language Service to speed up dev time."
+        },
         {
           "url": "guide/security",
           "title": "Security",
@@ -397,7 +408,7 @@
           "tooltip": "Press contacts, logos, and branding."
         },
         {
-          "url": "https://blog.angularjs.org/",
+          "url": "https://blog.angular.io/",
           "title": "Blog",
           "tooltip": "Angular Blog"
         }

aio/firebase.json

@@ -6,26 +6,27 @@
     "public": "dist",
     "cleanUrls": true,
     "redirects": [
-      // cli-quickstart.html glossary.html, quickstart.html, http.html, style-guide.html, styleguide
+      // cli-quickstart.html, glossary.html, quickstart.html, server-communication.html, style-guide.html
       {"type": 301, "source": "/docs/ts/latest/cli-quickstart.html",             "destination": "/guide/quickstart"},
-      {"type": 301, "source": "/guide/cli-quickstart",                           "destination": "/guide/quickstart"},
       {"type": 301, "source": "/docs/ts/latest/glossary.html",                   "destination": "/guide/glossary"},
       {"type": 301, "source": "/docs/ts/latest/quickstart.html",                 "destination": "/guide/quickstart"},
       {"type": 301, "source": "/docs/ts/latest/guide/server-communication.html", "destination": "/guide/http"},
       {"type": 301, "source": "/docs/ts/latest/guide/style-guide.html",          "destination": "/guide/styleguide"},
-      {"type": 301, "source": "/styleguide",                                     "destination": "/guide/styleguide"},
 
-      // cookbook/component-communication.html
+      // guide/cli-quickstart, styleguide
+      {"type": 301, "source": "/guide/cli-quickstart", "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/styleguide",           "destination": "/guide/styleguide"},
+
+      // cookbook/a1-a2-quick-reference.html, cookbook/component-communication.html, cookbook/dependency-injection.html
+      {"type": 301, "source": "/docs/ts/latest/cookbook/a1-a2-quick-reference.html", "destination": "/guide/ajs-quick-reference"},
       {"type": 301, "source": "/docs/ts/latest/cookbook/component-communication.html", "destination": "/guide/component-interaction"},
+      {"type": 301, "source": "/docs/ts/latest/cookbook/dependency-injection.html", "destination": "/guide/dependency-injection-in-action"},
 
       // cookbook, cookbook/, cookbook/index.html
       {"type": 301, "source": "/docs/ts/latest/cookbook",            "destination": "/docs"},
       {"type": 301, "source": "/docs/ts/latest/cookbook/",           "destination": "/docs"},
       {"type": 301, "source": "/docs/ts/latest/cookbook/index.html", "destination": "/docs"},
 
-      // cookbook/dependency-injection.html
-      {"type": 301, "source": "/docs/ts/latest/cookbook/dependency-injection.html", "destination": "/guide/dependency-injection-in-action"},
-
       // cookbook/*.html
       {"type": 301, "source": "/docs/ts/latest/cookbook/:cookbook.html", "destination": "/guide/:cookbook"},
 

aio/karma.conf.js

@@ -16,15 +16,8 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     files: [
-      { pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true },
-      { pattern: './src/test.ts', watched: false }
+      { pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true }
     ],
-    preprocessors: {
-      './src/test.ts': ['@angular/cli']
-    },
-    mime: {
-      'text/x-typescript': ['ts','tsx']
-    },
     coverageIstanbulReporter: {
       reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
@@ -32,14 +25,13 @@ module.exports = function (config) {
     angularCli: {
       environment: 'dev'
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'coverage-istanbul']
-              : ['progress', 'kjhtml'],
+    reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
+    browserNoActivityTimeout: 60000,
     singleRun: false
   });
 };

aio/ngsw-manifest.json

@@ -10,8 +10,8 @@
   },
   "static.ignore": [
     "\\.js\\.map$",
-    "^/assets/images/.*/unused/",
-    "^/generated/(?:docs/(?!api/api-list\\.json).*|images|live-examples|zips)/"
+    "^(?:/|\\\\)assets(?:/|\\\\)images(?:/|\\\\).*(?:/|\\\\)_unused(?:/|\\\\)",
+    "^(?:/|\\\\)generated(?:/|\\\\)(?:docs(?:/|\\\\)(?!api(?:/|\\\\)api-list\\.json).*|images(?:/|\\\\)(?!marketing(?:/|\\\\)).*|live-examples|zips)(?:/|\\\\)"
   ],
   "static.versioned": [
     "\\.[0-9a-z]{20}\\."

aio/package.json

@@ -9,7 +9,7 @@
     "ng": "yarn check-env && ng",
     "start": "yarn check-env && ng serve",
     "prebuild": "yarn check-env && yarn setup",
-    "build": "ng build -prod -sm -vc=false",
+    "build": "ng build --target=production --environment=stable -sm -bo",
     "postbuild": "yarn sw-manifest && yarn sw-copy",
     "lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint",
     "test": "yarn check-env && ng test",
@@ -22,8 +22,7 @@
     "example-e2e": "node ./tools/examples/run-example-e2e",
     "example-lint": "tslint -c \"content/examples/tslint.json\" \"content/examples/**/*.ts\" -e \"content/examples/styleguide/**/*.avoid.ts\"",
     "deploy-preview": "scripts/deploy-preview.sh",
-    "deploy-staging": "scripts/deploy-to-firebase.sh staging",
-    "deploy-production": "scripts/deploy-to-firebase.sh production",
+    "deploy-production": "scripts/deploy-to-firebase.sh",
     "check-env": "node scripts/check-environment",
     "payload-size": "scripts/payload.sh",
     "predocs": "rimraf src/generated/{docs,*.json}",
@@ -31,15 +30,17 @@
     "docs-watch": "node tools/transforms/authors-package/watchr.js",
     "docs-lint": "eslint --ignore-path=\"tools/transforms/.eslintignore\" tools/transforms",
     "docs-test": "node tools/transforms/test.js",
+    "tools-test": "./scripts/deploy-to-firebase.test.sh && yarn docs-test",
     "serve-and-sync": "concurrently --kill-others \"yarn docs-watch\" \"yarn start\"",
     "~~update-webdriver": "webdriver-manager update --standalone false --gecko false",
-    "boilerplate:add": "node ./tools/examples/add-example-boilerplate add",
-    "boilerplate:remove": "node ./tools/examples/add-example-boilerplate remove",
+    "boilerplate:add": "node ./tools/examples/example-boilerplate add",
+    "boilerplate:remove": "node ./tools/examples/example-boilerplate remove",
+    "boilerplate:test": "node tools/examples/test.js",
     "generate-plunkers": "node ./tools/plunker-builder/generatePlunkers",
     "generate-zips": "node ./tools/example-zipper/generateZips",
     "sw-manifest": "ngu-sw-manifest --dist dist --in ngsw-manifest.json --out dist/ngsw-manifest.json",
     "sw-copy": "cp node_modules/@angular/service-worker/bundles/worker-basic.min.js dist/",
-    "postinstall": "node tools/cli-patches/patch.js && uglifyjs node_modules/lunr/lunr.js -c -m -o src/assets/js/lunr.min.js --source-map",
+    "postinstall": "uglifyjs node_modules/lunr/lunr.js -c -m -o src/assets/js/lunr.min.js --source-map",
     "build-ie-polyfills": "node node_modules/webpack/bin/webpack.js -p src/ie-polyfills.js src/generated/ie-polyfills.min.js"
   },
   "engines": {
@@ -48,31 +49,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.4",
-    "@angular/common": "^4.2.4",
-    "@angular/compiler": "^4.2.4",
-    "@angular/core": "^4.2.4",
-    "@angular/forms": "^4.2.4",
-    "@angular/http": "^4.2.4",
-    "@angular/material": "^2.0.0-beta.7",
-    "@angular/platform-browser": "^4.2.4",
-    "@angular/platform-browser-dynamic": "^4.2.4",
-    "@angular/platform-server": "^4.2.4",
-    "@angular/router": "^4.2.4",
+    "@angular/animations": "^4.3.1",
+    "@angular/cdk": "^2.0.0-beta.8",
+    "@angular/common": "^4.3.1",
+    "@angular/compiler": "^4.3.1",
+    "@angular/core": "^4.3.1",
+    "@angular/forms": "^4.3.1",
+    "@angular/http": "^4.3.1",
+    "@angular/material": "^2.0.0-beta.8",
+    "@angular/platform-browser": "^4.3.1",
+    "@angular/platform-browser-dynamic": "^4.3.1",
+    "@angular/platform-server": "^4.3.1",
+    "@angular/router": "^4.3.1",
     "@angular/service-worker": "^1.0.0-beta.16",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
     "jasmine": "^2.6.0",
     "ng-pwa-tools": "^0.0.10",
-    "ngo": "angular/ngo",
     "rxjs": "^5.2.0",
     "tslib": "^1.7.1",
     "web-animations-js": "^2.2.5",
     "zone.js": "^0.8.12"
   },
   "devDependencies": {
-    "@angular/cli": "angular/cli-builds#webpack-next",
-    "@angular/compiler-cli": "^4.2.4",
+    "@angular/cli": "1.3.0-rc.3",
+    "@angular/compiler-cli": "^4.3.1",
     "@types/jasmine": "^2.5.52",
     "@types/node": "~6.0.60",
     "archiver": "^1.3.0",
@@ -81,7 +82,7 @@
     "concurrently": "^3.4.0",
     "cross-spawn": "^5.1.0",
     "dgeni": "^0.4.7",
-    "dgeni-packages": "^0.20.0-rc.6",
+    "dgeni-packages": "^0.20.0",
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",

aio/scripts/deploy-to-firebase.sh

@@ -3,32 +3,82 @@
 # WARNING: FIREBASE_TOKEN should NOT be printed.
 set +x -eu -o pipefail
 
+# Only deploy if this not a PR. PRs are deployed early in `build.sh`.
+if [[ $TRAVIS_PULL_REQUEST != "false" ]]; then
+  echo "Skipping deploy because this is a PR build."
+  exit 0
+fi
 
-readonly deployEnv=$1
+# Do not deploy if the current commit is not the latest on its branch.
+readonly LATEST_COMMIT=$(git ls-remote origin $TRAVIS_BRANCH | cut -c1-40)
+if [[ $TRAVIS_COMMIT != $LATEST_COMMIT ]]; then
+  echo "Skipping deploy because $TRAVIS_COMMIT is not the latest commit ($LATEST_COMMIT)."
+  exit 0
+fi
+
+# The deployment mode is computed based on the branch we are building
+if [[ $TRAVIS_BRANCH == master ]]; then
+  readonly deployEnv=next
+elif [[ $TRAVIS_BRANCH == $STABLE_BRANCH ]]; then
+    readonly deployEnv=stable
+else
+  # Extract the major versions from the branches, e.g. the 4 from 4.3.x
+  readonly majorVersion=${TRAVIS_BRANCH%%.*}
+  readonly majorVersionStable=${STABLE_BRANCH%%.*}
+
+  # Do not deploy if the major version is not less than the stable branch major version
+  if [[ $majorVersion -ge $majorVersionStable ]]; then
+    echo "Skipping deploy of branch \"${TRAVIS_BRANCH}\" to firebase."
+    echo "We only deploy archive branches with the major version less than the stable branch: \"${STABLE_BRANCH}\""
+    exit 0
+  fi
+
+  # Find the branch that has highest minor version for the given `$majorVersion`
+  readonly mostRecentMinorVersion=$(
+    # List the branches that start with the major version
+    git ls-remote origin refs/heads/${majorVersion}.*.x |
+    # Extract the version number
+    awk -F'/' '{print $3}' |
+    # Sort by the minor version
+    sort -t. -k 2,2n |
+    # Get the highest version
+    tail -n1
+  )
+
+  # Do not deploy as it is not the latest branch for the given major version
+  if [[ $TRAVIS_BRANCH != $mostRecentMinorVersion ]]; then
+    echo "Skipping deploy of branch \"${TRAVIS_BRANCH}\" to firebase."
+    echo "There is a more recent branch with the same major version: \"${mostRecentMinorVersion}\""
+    exit 0
+  fi
+
+  readonly deployEnv=archive
+fi
 
 case $deployEnv in
-  staging)
-    readonly buildEnv=stage
+  next)
     readonly projectId=aio-staging
-    readonly deployedUrl=https://$projectId.firebaseapp.com/
+    readonly deployedUrl=https://next.angular.io/
     readonly firebaseToken=$FIREBASE_TOKEN
     ;;
-  production)
-    readonly buildEnv=prod
+  stable)
     readonly projectId=angular-io
     readonly deployedUrl=https://angular.io/
     readonly firebaseToken=$FIREBASE_TOKEN
     ;;
-  *)
-    echo "Unknown deployment environment ('$deployEnv'). Expected 'staging' or 'production'."
-    exit 1
+  archive)
+    readonly projectId=angular-io-${majorVersion}
+    readonly deployedUrl=https://v${majorVersion}.angular.io/
+    readonly firebaseToken=$FIREBASE_TOKEN
     ;;
 esac
 
-# Do not deploy if the current commit is not the latest on its branch.
-readonly LATEST_COMMIT=$(git ls-remote origin $TRAVIS_BRANCH | cut -c1-40)
-if [ $TRAVIS_COMMIT != $LATEST_COMMIT ]; then
-  echo "Skipping deploy because $TRAVIS_COMMIT is not the latest commit ($LATEST_COMMIT)."
+echo "Git branch        : $TRAVIS_BRANCH"
+echo "Build/deploy mode : $deployEnv"
+echo "Firebase project  : $projectId"
+echo "Deployment URL    : $deployedUrl"
+
+if [[ ${1:-} == "--dry-run" ]]; then
   exit 0
 fi
 
@@ -37,7 +87,10 @@ fi
   cd "`dirname $0`/.."
 
   # Build the app
-  yarn build -- --env=$buildEnv
+  yarn build -- --env=$deployEnv
+
+  # Include any mode-specific files
+  cp -rf src/extra-files/$deployEnv/. dist/
 
   # Check payload size
   yarn payload-size

aio/scripts/deploy-to-firebase.test.sh

@@ -0,0 +1,159 @@
+#!/usr/bin/env bash
+set +x -eu -o pipefail
+
+function check {
+  if [[ $1 == $2 ]]; then
+    echo Pass
+    exit 0
+  fi
+  echo Fail
+  echo ---- Expected ----
+  echo "$2"
+  echo ---- Actual   ----
+  echo "$1"
+  exit 1
+}
+
+(
+  echo ===== master - skip deploy - pull request
+  actual=$(
+    export TRAVIS_PULL_REQUEST=true
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy because this is a PR build."
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== master - deploy success
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=master
+    export TRAVIS_COMMIT=$(git ls-remote origin master | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Git branch        : master
+Build/deploy mode : next
+Firebase project  : aio-staging
+Deployment URL    : https://next.angular.io/"
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== master - skip deploy - commit not HEAD
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=master
+    export TRAVIS_COMMIT=DUMMY_TEST_COMMIT
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy because DUMMY_TEST_COMMIT is not the latest commit ($(git ls-remote origin master | cut -c1-40))."
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== stable - deploy success
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=4.3.x
+    export STABLE_BRANCH=4.3.x
+    export TRAVIS_COMMIT=$(git ls-remote origin 4.3.x | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Git branch        : 4.3.x
+Build/deploy mode : stable
+Firebase project  : angular-io
+Deployment URL    : https://angular.io/"
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== stable - skip deploy - commit not HEAD
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=4.3.x
+    export STABLE_BRANCH=4.3.x
+    export TRAVIS_COMMIT=DUMMY_TEST_COMMIT
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy because DUMMY_TEST_COMMIT is not the latest commit ($(git ls-remote origin 4.3.x | cut -c1-40))."
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== archive - deploy success
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=2.4.x
+    export STABLE_BRANCH=4.3.x
+    export TRAVIS_COMMIT=$(git ls-remote origin 2.4.x | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Git branch        : 2.4.x
+Build/deploy mode : archive
+Firebase project  : angular-io-2
+Deployment URL    : https://v2.angular.io/"
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== archive - skip deploy - commit not HEAD
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=2.4.x
+    export STABLE_BRANCH=4.3.x
+    export TRAVIS_COMMIT=DUMMY_TEST_COMMIT
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy because DUMMY_TEST_COMMIT is not the latest commit ($(git ls-remote origin 2.4.x | cut -c1-40))."
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== archive - skip deploy - major version too high, lower minor
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=2.1.x
+    export STABLE_BRANCH=2.2.x
+    export TRAVIS_COMMIT=$(git ls-remote origin 2.1.x | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy of branch \"2.1.x\" to firebase.
+We only deploy archive branches with the major version less than the stable branch: \"2.2.x\""
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== archive - skip deploy - major version too high, higher minor
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=2.4.x
+    export STABLE_BRANCH=2.2.x
+    export TRAVIS_COMMIT=$(git ls-remote origin 2.4.x | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy of branch \"2.4.x\" to firebase.
+We only deploy archive branches with the major version less than the stable branch: \"2.2.x\""
+  check "$actual" "$expected"
+)
+
+(
+  echo ===== archive - skip deploy - minor version too low
+  actual=$(
+    export TRAVIS_PULL_REQUEST=false
+    export TRAVIS_BRANCH=2.1.x
+    export STABLE_BRANCH=4.3.x
+    export TRAVIS_COMMIT=$(git ls-remote origin 2.1.x | cut -c-40)
+    export FIREBASE_TOKEN=XXXXX
+    `dirname $0`/deploy-to-firebase.sh --dry-run
+  )
+  expected="Skipping deploy of branch \"2.1.x\" to firebase.
+There is a more recent branch with the same major version: \"2.4.x\""
+  check "$actual" "$expected"
+)

aio/scripts/payload.sh

@@ -61,7 +61,8 @@ else
   # Nothing changed in aio/
   exit 0
 fi
-payloadData="$payloadData\"change\": \"$change\""
+message=$(echo $TRAVIS_COMMIT_MESSAGE | sed 's/"/\\"/g' | sed 's/\\/\\\\/g')
+payloadData="$payloadData\"change\": \"$change\", \"message\": \"$message\""
 
 payloadData="{${payloadData}}"
 

aio/src/app/app.component.html

@@ -21,12 +21,13 @@
     <aio-nav-menu *ngIf="!isSideBySide" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="false"></aio-nav-menu>
     <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="isSideBySide"></aio-nav-menu>
 
-    <div class="doc-version" title="Angular docs version {{currentDocVersion?.title}}">
-      <aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="docVersions && docVersions[0]"></aio-select>
+    <div class="doc-version">
+      <aio-select (change)="onDocVersionChange($event.index)" [options]="docVersions" [selected]="currentDocVersion"></aio-select>
     </div>
   </md-sidenav>
 
   <section class="sidenav-content" [id]="pageId" role="content">
+    <aio-mode-banner [mode]="deployment.mode" [version]="versionInfo"></aio-mode-banner>
     <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered()"></aio-doc-viewer>
     <aio-dt [on]="dtOn" [(doc)]="currentDocument"></aio-dt>
   </section>

aio/src/app/app.component.spec.ts

@@ -12,6 +12,7 @@ import { of } from 'rxjs/observable/of';
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
+import { Deployment } from 'app/shared/deployment.service';
 import { GaService } from 'app/shared/ga.service';
 import { LocationService } from 'app/shared/location.service';
 import { Logger } from 'app/shared/logger.service';
@@ -273,26 +274,49 @@ describe('AppComponent', () => {
     describe('SideNav version selector', () => {
       let selectElement: DebugElement;
       let selectComponent: SelectComponent;
-      beforeEach(() => {
+
+      function setupSelectorForTesting(mode?: string) {
+        createTestingModule('a/b', mode);
+        initializeTest();
         component.onResize(sideBySideBreakPoint + 1); // side-by-side
         selectElement = fixture.debugElement.query(By.directive(SelectComponent));
         selectComponent = selectElement.componentInstance;
+      }
+
+      it('should select the version that matches the deploy mode', () => {
+        setupSelectorForTesting();
+        expect(selectComponent.selected.title).toContain('stable');
+        setupSelectorForTesting('next');
+        expect(selectComponent.selected.title).toContain('next');
+        setupSelectorForTesting('archive');
+        expect(selectComponent.selected.title).toContain('v4');
       });
 
-      it('should pick first (current) version by default', () => {
-        expect(selectComponent.selected.title).toEqual(component.versionInfo.raw);
+      it('should add the current raw version string to the selected version', () => {
+        setupSelectorForTesting();
+        expect(selectComponent.selected.title).toContain(`(v${component.versionInfo.raw})`);
+        setupSelectorForTesting('next');
+        expect(selectComponent.selected.title).toContain(`(v${component.versionInfo.raw})`);
+        setupSelectorForTesting('archive');
+        expect(selectComponent.selected.title).toContain(`(v${component.versionInfo.raw})`);
       });
 
       // Older docs versions have an href
-      it('should navigate when change to a version with an href', () => {
-        selectElement.triggerEventHandler('change', { option: component.docVersions[1] as Option, index: 1});
-        expect(locationService.go).toHaveBeenCalledWith(TestHttp.docVersions[0].url);
+      it('should navigate when change to a version with a url', () => {
+        setupSelectorForTesting();
+        const versionWithUrlIndex = component.docVersions.findIndex(v => !!v.url);
+        const versionWithUrl = component.docVersions[versionWithUrlIndex];
+        selectElement.triggerEventHandler('change', { option: versionWithUrl, index: versionWithUrlIndex});
+        expect(locationService.go).toHaveBeenCalledWith(versionWithUrl.url);
       });
 
       // The current docs version should not have an href
       // This may change when we perfect our docs versioning approach
-      it('should not navigate when change to a version without an href', () => {
-        selectElement.triggerEventHandler('change', { option: component.docVersions[0] as Option, index: 0});
+      it('should not navigate when change to a version without a url', () => {
+        setupSelectorForTesting();
+        const versionWithoutUrlIndex = component.docVersions.findIndex(v => !v.url);
+        const versionWithoutUrl = component.docVersions[versionWithoutUrlIndex];
+        selectElement.triggerEventHandler('change', { option: versionWithoutUrl, index: versionWithoutUrlIndex});
         expect(locationService.go).not.toHaveBeenCalled();
       });
     });
@@ -332,10 +356,6 @@ describe('AppComponent', () => {
     });
 
     describe('hostClasses', () => {
-      let host: DebugElement;
-      beforeEach(() => {
-        host = fixture.debugElement;
-      });
 
       it('should set the css classes of the host container based on the current doc and navigation view', () => {
         locationService.go('guide/pipes');
@@ -359,7 +379,7 @@ describe('AppComponent', () => {
       });
 
       it('should set the css class of the host container based on the open/closed state of the side nav', () => {
-        const sideNav = host.query(By.directive(MdSidenav));
+        const sideNav = fixture.debugElement.query(By.directive(MdSidenav));
 
         locationService.go('guide/pipes');
         fixture.detectChanges();
@@ -376,7 +396,14 @@ describe('AppComponent', () => {
         checkHostClass('sidenav', 'open');
       });
 
+      it('should set the css class of the host container based on the initial deployment mode', () => {
+        createTestingModule('a/b', 'archive');
+        initializeTest();
+        checkHostClass('mode', 'archive');
+      });
+
       function checkHostClass(type, value) {
+        const host = fixture.debugElement;
         const classes = host.properties['className'];
         const classArray = classes.split(' ').filter(c => c.indexOf(`${type}-`) === 0);
         expect(classArray.length).toBeLessThanOrEqual(1, `"${classes}" should have only one class matching ${type}-*`);
@@ -623,7 +650,25 @@ describe('AppComponent', () => {
     describe('footer', () => {
       it('should have version number', () => {
         const versionEl: HTMLElement = fixture.debugElement.query(By.css('aio-footer')).nativeElement;
-        expect(versionEl.textContent).toContain(TestHttp.versionFull);
+        expect(versionEl.textContent).toContain(TestHttp.versionInfo.full);
+      });
+    });
+
+    describe('deployment banner', () => {
+      it('should show a message if the deployment mode is "archive"', () => {
+        createTestingModule('a/b', 'archive');
+        initializeTest();
+        fixture.detectChanges();
+        const banner: HTMLElement = fixture.debugElement.query(By.css('aio-mode-banner')).nativeElement;
+        expect(banner.textContent).toContain('archived documentation for Angular v4');
+      });
+
+      it('should show no message if the deployment mode is not "archive"', () => {
+        createTestingModule('a/b', 'stable');
+        initializeTest();
+        fixture.detectChanges();
+        const banner: HTMLElement = fixture.debugElement.query(By.css('aio-mode-banner')).nativeElement;
+        expect(banner.textContent.trim()).toEqual('');
       });
     });
 
@@ -720,6 +765,97 @@ describe('AppComponent', () => {
       });
     });
 
+    describe('archive redirection', () => {
+      it('should redirect to `docs` if deployment mode is `archive` and not at a docs page', () => {
+        createTestingModule('', 'archive');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).toHaveBeenCalledWith('docs');
+
+        createTestingModule('resources', 'archive');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).toHaveBeenCalledWith('docs');
+
+        createTestingModule('guide/aot-compiler', 'archive');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial', 'archive');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial/toh-pt1', 'archive');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('docs', 'archive');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('api', 'archive');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+      });
+
+      it('should redirect to `docs` if deployment mode is `next` and not at a docs page', () => {
+        createTestingModule('', 'next');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).toHaveBeenCalledWith('docs');
+
+        createTestingModule('resources', 'next');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).toHaveBeenCalledWith('docs');
+
+        createTestingModule('guide/aot-compiler', 'next');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial', 'next');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial/toh-pt1', 'next');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('docs', 'next');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('api', 'next');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+      });
+
+      it('should not redirect to `docs` if deployment mode is `stable` and not at a docs page', () => {
+        createTestingModule('', 'stable');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('resources', 'stable');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('guide/aot-compiler', 'stable');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial', 'stable');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('tutorial/toh-pt1', 'stable');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('docs', 'stable');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+
+        createTestingModule('api', 'stable');
+        initializeTest();
+        expect(TestBed.get(LocationService).replace).not.toHaveBeenCalled();
+      });
+    });
   });
 
   describe('with mocked DocViewer', () => {
@@ -883,7 +1019,8 @@ describe('AppComponent', () => {
 
 //// test helpers ////
 
-function createTestingModule(initialUrl: string) {
+function createTestingModule(initialUrl: string, mode: string = 'stable') {
+  const mockLocationService = new MockLocationService(initialUrl);
   TestBed.resetTestingModule();
   TestBed.configureTestingModule({
     imports: [ AppModule ],
@@ -891,9 +1028,14 @@ function createTestingModule(initialUrl: string) {
       { provide: APP_BASE_HREF, useValue: '/' },
       { provide: GaService, useClass: TestGaService },
       { provide: Http, useClass: TestHttp },
-      { provide: LocationService, useFactory: () => new MockLocationService(initialUrl) },
+      { provide: LocationService, useFactory: () => mockLocationService },
       { provide: Logger, useClass: MockLogger },
       { provide: SearchService, useClass: MockSearchService },
+      { provide: Deployment, useFactory: () => {
+        const deployment = new Deployment(mockLocationService as any);
+        deployment.mode = mode;
+        return deployment;
+      }},
     ]
   });
 }
@@ -908,7 +1050,21 @@ class TestSearchService {
 }
 
 class TestHttp {
-  static versionFull = '4.0.0-local+sha.73808dd';
+
+  static versionInfo = {
+    raw: '4.0.0-rc.6',
+    major: 4,
+    minor: 0,
+    patch: 0,
+    prerelease: [ 'local' ],
+    build: 'sha.73808dd',
+    version: '4.0.0-local',
+    codeName: 'snapshot',
+    isSnapshot: true,
+    full: '4.0.0-local+sha.73808dd',
+    branch: 'master',
+    commitSHA: '73808dd38b5ccd729404936834d1568bd066de81'
+  };
 
   static docVersions: NavigationNode[] = [
     { title: 'v2', url: 'https://v2.angular.io' }
@@ -951,22 +1107,7 @@ class TestHttp {
     ],
     "docVersions": TestHttp.docVersions,
 
-    "__versionInfo": {
-      "raw": "4.0.0-rc.6",
-      "major": 4,
-      "minor": 0,
-      "patch": 0,
-      "prerelease": [
-        "local"
-      ],
-      "build": "sha.73808dd",
-      "version": "4.0.0-local",
-      "codeName": "snapshot",
-      "isSnapshot": true,
-      "full": TestHttp.versionFull,
-      "branch": "master",
-      "commitSHA": "73808dd38b5ccd729404936834d1568bd066de81"
-    }
+    "__versionInfo": TestHttp.versionInfo,
   };
 
   get(url: string) {

aio/src/app/app.component.ts

@@ -5,6 +5,7 @@ import { MdSidenav } from '@angular/material';
 import { CurrentNodes, NavigationService, NavigationViews, NavigationNode, VersionInfo } from 'app/navigation/navigation.service';
 import { DocumentService, DocumentContents } from 'app/documents/document.service';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
+import { Deployment } from 'app/shared/deployment.service';
 import { LocationService } from 'app/shared/location.service';
 import { NavMenuComponent } from 'app/layout/nav-menu/nav-menu.component';
 import { ScrollService } from 'app/shared/scroll.service';
@@ -76,8 +77,8 @@ export class AppComponent implements OnInit {
 
   get homeImageUrl() {
     return this.isSideBySide ?
-      'assets/images/logos/standard/logo-nav@2x.png' :
-      'assets/images/logos/standard/shield-large.svg';
+      'assets/images/logos/angular/logo-nav@2x.png' :
+      'assets/images/logos/angular/shield-large.svg';
   }
   get isOpened() { return this.isSideBySide && this.isSideNavDoc; }
   get mode() { return this.isSideBySide ? 'side' : 'over'; }
@@ -99,6 +100,7 @@ export class AppComponent implements OnInit {
   sidenav: MdSidenav;
 
   constructor(
+    public deployment: Deployment,
     private documentService: DocumentService,
     private hostElement: ElementRef,
     private locationService: LocationService,
@@ -127,6 +129,11 @@ export class AppComponent implements OnInit {
     });
 
     this.locationService.currentPath.subscribe(path => {
+      // Redirect to docs if we are in not in stable mode and are not hitting a docs page
+      // (i.e. we have arrived at a marketing page)
+      if (this.deployment.mode !== 'stable' && !/^(docs$|api$|guide|tutorial)/.test(path)) {
+        this.locationService.replace('docs');
+      }
       if (path === this.currentPath) {
         // scroll only if on same page (most likely a change to the hash)
         this.autoScroll();
@@ -158,12 +165,24 @@ export class AppComponent implements OnInit {
 
     // Compute the version picker list from the current version and the versions in the navigation map
     combineLatest(
-      this.navigationService.versionInfo.map(versionInfo => ({ title: versionInfo.raw, url: null })),
-      this.navigationService.navigationViews.map(views => views['docVersions']),
-      (currentVersion, otherVersions) => [currentVersion, ...otherVersions])
-      .subscribe(versions => {
-        this.docVersions = versions;
-        this.currentDocVersion = this.docVersions[0];
+      this.navigationService.versionInfo,
+      this.navigationService.navigationViews.map(views => views['docVersions']))
+      .subscribe(([versionInfo, versions]) => {
+        // TODO(pbd): consider whether we can lookup the stable and next versions from the internet
+        const computedVersions = [
+          { title: 'next', url: 'https://next.angular.io' },
+          { title: 'stable', url: 'https://angular.io' },
+        ];
+        if (this.deployment.mode === 'archive') {
+          computedVersions.push({ title: `v${versionInfo.major}`, url: null });
+        }
+        this.docVersions = [...computedVersions, ...versions];
+
+        // Find the current version - eithers title matches the current deployment mode
+        // or its title matches the major version of the current version info
+        this.currentDocVersion = this.docVersions.find(version =>
+          version.title === this.deployment.mode || version.title === `v${versionInfo.major}`);
+        this.currentDocVersion.title += ` (v${versionInfo.raw})`;
       });
 
     this.navigationService.navigationViews.subscribe(views => {
@@ -256,12 +275,13 @@ export class AppComponent implements OnInit {
   }
 
   updateHostClasses() {
+    const mode = `mode-${this.deployment.mode}`;
     const sideNavOpen = `sidenav-${this.sidenav.opened ? 'open' : 'closed'}`;
     const pageClass = `page-${this.pageId}`;
     const folderClass = `folder-${this.folderId}`;
     const viewClasses = Object.keys(this.currentNodes || {}).map(view => `view-${view}`).join(' ');
 
-    this.hostClasses = `${sideNavOpen} ${pageClass} ${folderClass} ${viewClasses}`;
+    this.hostClasses = `${mode} ${sideNavOpen} ${pageClass} ${folderClass} ${viewClasses}`;
   }
 
   // Dynamically change height of table of contents container

aio/src/app/app.module.ts

@@ -26,8 +26,10 @@ import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
 import { AppComponent } from 'app/app.component';
 import { ApiService } from 'app/embedded/api/api.service';
 import { CustomMdIconRegistry, SVG_ICONS } from 'app/shared/custom-md-icon-registry';
+import { Deployment } from 'app/shared/deployment.service';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
 import { DtComponent } from 'app/layout/doc-viewer/dt.component';
+import { ModeBannerComponent } from 'app/layout/mode-banner/mode-banner.component';
 import { EmbeddedModule } from 'app/embedded/embedded.module';
 import { GaService } from 'app/shared/ga.service';
 import { Logger } from 'app/shared/logger.service';
@@ -90,14 +92,16 @@ export const svgIconProviders = [
     DocViewerComponent,
     DtComponent,
     FooterComponent,
-    TopMenuComponent,
+    ModeBannerComponent,
     NavMenuComponent,
     NavItemComponent,
     SearchResultsComponent,
     SearchBoxComponent,
+    TopMenuComponent,
   ],
   providers: [
     ApiService,
+    Deployment,
     DocumentService,
     GaService,
     Logger,

aio/src/app/layout/mode-banner/mode-banner.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { VersionInfo } from 'app/navigation/navigation.service';
+
+@Component({
+  selector: 'aio-mode-banner',
+  template: `
+  <div *ngIf="mode == 'archive'" class="mode-banner">
+    This is the <strong>archived documentation for Angular v{{version?.major}}.</strong>
+    Please visit <a href="https://angular.io/">angular.io</a> to see documentation for the current version of Angular.
+  </div>
+  `
+})
+export class ModeBannerComponent {
+  @Input() mode: string;
+  @Input() version: VersionInfo;
+}

aio/src/app/shared/deployment.service.spec.ts

@@ -0,0 +1,32 @@
+import { ReflectiveInjector } from '@angular/core';
+import { environment } from 'environments/environment';
+import { LocationService } from 'app/shared/location.service';
+import { MockLocationService } from 'testing/location.service';
+import { Deployment } from './deployment.service';
+
+describe('Deployment service', () => {
+  describe('mode', () => {
+    it('should get the mode from the environment', () => {
+      environment.mode = 'foo';
+      const deployment = getInjector().get(Deployment);
+      expect(deployment.mode).toEqual('foo');
+    });
+
+    it('should get the mode from the `mode` query parameter if available', () => {
+      const injector = getInjector();
+
+      const locationService: MockLocationService = injector.get(LocationService);
+      locationService.search.and.returnValue({ mode: 'bar' });
+
+      const deployment = injector.get(Deployment);
+      expect(deployment.mode).toEqual('bar');
+    });
+  });
+});
+
+function getInjector() {
+  return ReflectiveInjector.resolveAndCreate([
+    Deployment,
+    { provide: LocationService, useFactory: () => new MockLocationService('') }
+  ]);
+}

aio/src/app/shared/deployment.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { LocationService } from 'app/shared/location.service';
+import { environment } from 'environments/environment';
+
+/**
+ * Information about the deployment of this application.
+ */
+@Injectable()
+export class Deployment {
+  /**
+   * The deployment mode set from the environment provided at build time;
+   * or overridden by the `mode` query parameter: e.g. `...?mode=archive`
+   */
+  mode: string = this.location.search()['mode'] || environment.mode;
+
+  constructor(private location: LocationService) {}
+};

aio/src/app/shared/location.service.ts

@@ -55,6 +55,10 @@ export class LocationService {
     window.location.assign(url);
   }
 
+  replace(url: string) {
+    window.location.replace(url);
+  }
+
   private stripSlashes(url: string) {
     return url.replace(/^\/+/, '').replace(/\/+(\?|#|$)/, '$1');
   }