docs: add changelog for 5.1.0-beta.1

PR Close #20462

.bazelrc

@@ -1,18 +0,0 @@
-# Make compilation fast, by keeping a few copies of the compilers
-# running as daemons, and cache SourceFile AST's to reduce parse time.
-build --strategy=TypeScriptCompile=worker
-build --strategy=AngularTemplateCompile=worker
-
-# Don't create bazel-* symlinks in the WORKSPACE directory.
-# These require .gitignore and may scare users.
-# Also, it's a workaround for https://github.com/bazelbuild/rules_typescript/issues/12
-# which affects the common case of having `tsconfig.json` in the WORKSPACE directory.
-#
-# Instead, you should run `bazel info bazel-bin` to find out where the outputs went.
-build --symlink_prefix=/
-
-# Performance: avoid stat'ing input files
-build --watchfs
-
-# Don't print all the .d.ts output locations after builds
-build --show_result=0

CHANGELOG.md

@@ -1,3 +1,52 @@
+<a name="5.1.0-beta.1"></a>
+# [5.1.0-beta.1](https://github.com/angular/angular/compare/5.1.0-beta.0...5.1.0-beta.1) (2017-11-16)
+
+
+### Bug Fixes
+
+* **animations:** always fire inner trigger callbacks even if blocked by parent animations ([#19753](https://github.com/angular/angular/issues/19753)) ([d47b2a6](https://github.com/angular/angular/commit/d47b2a6)), closes [#19100](https://github.com/angular/angular/issues/19100)
+* **animations:** ensure final state() styles are applied within @.disabled animations ([#20267](https://github.com/angular/angular/issues/20267)) ([20aafff](https://github.com/angular/angular/commit/20aafff)), closes [#20266](https://github.com/angular/angular/issues/20266)
+* **bazel:** adjust mock of tsconfig for ng_module rule unit test ([#20175](https://github.com/angular/angular/issues/20175)) ([c2a24b4](https://github.com/angular/angular/commit/c2a24b4))
+* **compiler:** fix corner cases in shadow CSS ([c32f5fd](https://github.com/angular/angular/commit/c32f5fd))
+* **compiler:** recognize @NgModule with a redundant @Injectable ([#20320](https://github.com/angular/angular/issues/20320)) ([c33a576](https://github.com/angular/angular/commit/c33a576))
+* **compiler:** show explanatory text in template errors ([#20313](https://github.com/angular/angular/issues/20313)) ([3257fcd](https://github.com/angular/angular/commit/3257fcd))
+* **core:** ensure init lifecycle events are called ([#20258](https://github.com/angular/angular/issues/20258)) ([24cf8b3](https://github.com/angular/angular/commit/24cf8b3))
+* **language-service:** pass compilerOptions.paths to ReflectorHost ([#20222](https://github.com/angular/angular/issues/20222)) ([eb8013e](https://github.com/angular/angular/commit/eb8013e))
+* **router:** 'merge' queryParamHandling strategy should be able to remove query params ([#19733](https://github.com/angular/angular/issues/19733)) ([a622e19](https://github.com/angular/angular/commit/a622e19)), closes [#18463](https://github.com/angular/angular/issues/18463) [#17202](https://github.com/angular/angular/issues/17202)
+* Update test code to type-check under TS 2.5 ([#20175](https://github.com/angular/angular/issues/20175)) ([5ec1717](https://github.com/angular/angular/commit/5ec1717))
+
+
+
+<a name="5.0.2"></a>
+## [5.0.2](https://github.com/angular/angular/compare/5.0.1...5.0.2) (2017-11-16)
+
+
+### Bug Fixes
+
+* **animations:** ensure final state() styles are applied within @.disabled animations ([#20267](https://github.com/angular/angular/issues/20267)) ([8b1a6b1](https://github.com/angular/angular/commit/8b1a6b1)), closes [#20266](https://github.com/angular/angular/issues/20266)
+* **compiler:** fix corner cases in shadow CSS ([5d1cd57](https://github.com/angular/angular/commit/5d1cd57))
+* **compiler:** recognize @NgModule with a redundant @Injectable ([#20320](https://github.com/angular/angular/issues/20320)) ([4cc6abb](https://github.com/angular/angular/commit/4cc6abb))
+* **compiler:** show explanatory text in template errors ([#20313](https://github.com/angular/angular/issues/20313)) ([424a323](https://github.com/angular/angular/commit/424a323))
+* **router:** 'merge' queryParamHandling strategy should be able to remove query params ([#19733](https://github.com/angular/angular/issues/19733)) ([b732fb9](https://github.com/angular/angular/commit/b732fb9)), closes [#18463](https://github.com/angular/angular/issues/18463) [#17202](https://github.com/angular/angular/issues/17202)
+
+
+<a name="5.1.0-beta.0"></a>
+# [5.1.0-beta.0](https://github.com/angular/angular/compare/5.0.0-rc.4...5.1.0-beta.0) (2017-11-08)
+
+### Bug Fixes
+
+* **compiler:** don't overwrite missingTranslation's value in JIT ([#19952](https://github.com/angular/angular/issues/19952)) ([799cbb9](https://github.com/angular/angular/commit/799cbb9))
+* **compiler:** report a reasonable error with invalid metadata ([#20062](https://github.com/angular/angular/issues/20062)) ([da22c48](https://github.com/angular/angular/commit/da22c48))
+* **compiler-cli:** don't report emit diagnostics when `--noEmitOnError` is off ([#20063](https://github.com/angular/angular/issues/20063)) ([8639995](https://github.com/angular/angular/commit/8639995))
+* **core:** `__symbol__` should return `__zone_symbol__` without zone.js loaded ([#19541](https://github.com/angular/angular/issues/19541)) ([678d1cf](https://github.com/angular/angular/commit/678d1cf))
+* **core:** should support event.stopImmediatePropagation ([#19222](https://github.com/angular/angular/issues/19222)) ([7083791](https://github.com/angular/angular/commit/7083791))
+* **platform-browser:** support Symbols in custom `jasmineToString()` method ([#19794](https://github.com/angular/angular/issues/19794)) ([5a6efa7](https://github.com/angular/angular/commit/5a6efa7))
+
+### Features
+
+* **compiler:** introduce `TestBed.overrideTemplateUsingTestingModule` ([a460066](https://github.com/angular/angular/commit/a460066)), closes [#19815](https://github.com/angular/angular/issues/19815)
+
+
 <a name="5.0.1"></a>
 ## [5.0.1](https://github.com/angular/angular/compare/5.0.0...5.0.1) (2017-11-08)
 

CONTRIBUTING.md

@@ -69,36 +69,37 @@ You can file new issues by filling out our [new issue form](https://github.com/a
 ### <a name="submit-pr"></a> Submitting a Pull Request (PR)
 Before you submit your Pull Request (PR) consider the following guidelines:
 
-* Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR
+1. Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR
   that relates to your submission. You don't want to duplicate effort.
-* Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
+1. Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs.
   We cannot accept code without this.
-* Make your changes in a new git branch:
+1. Fork the angular/angular repo.
+1. Make your changes in a new git branch:
 
      ```shell
      git checkout -b my-fix-branch master
      ```
 
-* Create your patch, **including appropriate test cases**.
-* Follow our [Coding Rules](#rules).
-* Run the full Angular test suite, as described in the [developer documentation][dev-doc],
+1. Create your patch, **including appropriate test cases**.
+1. Follow our [Coding Rules](#rules).
+1. Run the full Angular test suite, as described in the [developer documentation][dev-doc],
   and ensure that all tests pass.
-* Commit your changes using a descriptive commit message that follows our
+1. Commit your changes using a descriptive commit message that follows our
   [commit message conventions](#commit). Adherence to these conventions
   is necessary because release notes are automatically generated from these messages.
 
      ```shell
      git commit -a
      ```
-  Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
+    Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
 
-* Push your branch to GitHub:
+1. Push your branch to GitHub:
 
     ```shell
     git push origin my-fix-branch
     ```
 
-* In GitHub, send a pull request to `angular:master`.
+1. In GitHub, send a pull request to `angular:master`.
 * If we suggest changes then:
   * Make the required updates.
   * Re-run the Angular test suites to ensure tests are still passing.

WORKSPACE

@@ -5,8 +5,7 @@ load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 git_repository(
     name = "build_bazel_rules_nodejs",
     remote = "https://github.com/bazelbuild/rules_nodejs.git",
-    # TODO(alexeagle): use the correct tag here.
-    commit = "2c6243df53fd33fdab283ebdd01582e4eb815db8",
+    commit = "0.2.1",
 )
 
 load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")

aio/content/examples/ajs-quick-reference/.angular-cli.1.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "angular.io-example"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      // #docregion styles
+      "styles": [
+        "styles.css"
+      ],
+      // #enddocregion styles
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

aio/content/examples/ajs-quick-reference/src/index.html

@@ -5,9 +5,6 @@
     <meta charset="UTF-8">
     <title>AngularJS to Angular Quick Reference</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- #docregion style -->
-    <link rel="stylesheet" href="styles.css">
-    <!-- #enddocregion style -->
   </head>
 
   <body>

aio/content/examples/attribute-directives/plnkr.json

@@ -4,7 +4,7 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js",
-    "!app/*.[1,2,3].*"
+    "!app/*.[0,1,2,3].*"
   ],
   "tags": ["attribute", "directive"]
 }

aio/content/examples/attribute-directives/src/app/highlight.directive.0.ts

@@ -0,0 +1,9 @@
+// #docregion
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[appHighlight]'
+})
+export class HighlightDirective {
+  constructor() { }
+}

aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts

@@ -1,8 +1,10 @@
 /* tslint:disable:no-unused-variable */
 // #docregion
-import { Directive, ElementRef, Input } from '@angular/core';
+import { Directive, ElementRef } from '@angular/core';
 
-@Directive({ selector: '[appHighlight]' })
+@Directive({
+  selector: '[appHighlight]'
+})
 export class HighlightDirective {
     constructor(el: ElementRef) {
        el.nativeElement.style.backgroundColor = 'yellow';

aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts

@@ -1,7 +1,10 @@
 /* tslint:disable:no-unused-variable member-ordering */
 // #docplaster
+// #docregion imports,
+import { Directive, ElementRef, HostListener } from '@angular/core';
+// #enddocregion imports,
+import { Input } from '@angular/core';
 // #docregion
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
   selector: '[appHighlight]'
@@ -35,7 +38,7 @@ export class HighlightDirective {
   // #enddocregion color
 
   // #docregion color-2
-  @Input() myHighlight: string;
+  @Input() appHighlight: string;
   // #enddocregion color-2
 }
 

aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts

@@ -1,6 +1,7 @@
 /* tslint:disable:member-ordering */
-// #docregion
+// #docregion, imports
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+// #enddocregion imports
 
 @Directive({
   selector: '[appHighlight]'

aio/content/examples/attribute-directives/src/app/highlight.directive.ts

@@ -1,7 +1,5 @@
 /* tslint:disable:member-ordering */
-// #docregion imports,
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
-// #enddocregion imports
 
 @Directive({
   selector: '[appHighlight]'

aio/content/examples/dependency-injection/plnkr.json

@@ -4,7 +4,8 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js",
-    "!**/*.[1,2].*"
+    "!**/*.[0,1,2].*",
+    "**/dummy.module.ts"
   ],
   "tags": ["dependency", "di"]
 }

aio/content/examples/dependency-injection/src/app/app-config.ts

@@ -0,0 +1,10 @@
+/*
+  Must put this interface in its own file instead of app.config.ts
+  or else TypeScript gives a (bogus) warning:
+  WARNING in ./src/app/... .ts
+  "export 'AppConfig' was not found in './app.config'
+*/
+export interface AppConfig {
+  apiEndpoint: string;
+  title: string;
+}

aio/content/examples/dependency-injection/src/app/app.component.1.ts

@@ -1,7 +1,5 @@
-// Early versions
-
 // #docregion
-import { Component }         from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',

aio/content/examples/dependency-injection/src/app/app.component.2.ts

@@ -1,7 +1,6 @@
 // #docregion
 // #docregion imports
-import { Component }         from '@angular/core';
-import { Inject }   from '@angular/core';
+import { Component, Inject } from '@angular/core';
 
 import { APP_CONFIG, AppConfig }    from './app.config';
 // #enddocregion imports
@@ -23,3 +22,5 @@ export class AppComponent {
   }
   // #enddocregion ctor
 }
+// #enddocregion
+

aio/content/examples/dependency-injection/src/app/app.component.ts

@@ -4,7 +4,6 @@
 import { Component, Inject } from '@angular/core';
 
 import { APP_CONFIG, AppConfig } from './app.config';
-import { Logger } from './logger.service';
 import { UserService } from './user.service';
 // #enddocregion imports
 
@@ -23,8 +22,7 @@ import { UserService } from './user.service';
     <app-heroes id="authorized" *ngIf="isAuthorized"></app-heroes>
     <app-heroes id="unauthorized" *ngIf="!isAuthorized"></app-heroes>
     <app-providers></app-providers>
-  `,
-  providers: [Logger]
+  `
 })
 export class AppComponent {
   title: string;

aio/content/examples/dependency-injection/src/app/app.config.ts

@@ -1,15 +1,13 @@
+import { AppConfig } from './app-config';
+export { AppConfig } from './app-config';
+
 // #docregion token
 import { InjectionToken } from '@angular/core';
 
-export let APP_CONFIG = new InjectionToken<AppConfig>('app.config');
+export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');
 // #enddocregion token
 
 // #docregion config
-export interface AppConfig {
-  apiEndpoint: string;
-  title: string;
-}
-
 export const HERO_DI_CONFIG: AppConfig = {
   apiEndpoint: 'api.heroes.com',
   title: 'Dependency Injection'

aio/content/examples/dependency-injection/src/app/app.module.ts

@@ -1,32 +1,24 @@
+// #docplaster
 import { NgModule } from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 
+import { APP_CONFIG, HERO_DI_CONFIG }    from './app.config';
 import { AppComponent } from './app.component';
 import { CarComponent } from './car/car.component';
 import { HeroesComponent } from './heroes/heroes.component';
 import { HeroListComponent } from './heroes/hero-list.component';
 import { InjectorComponent } from './injector.component';
+import { Logger } from './logger.service';
 import { TestComponent } from './test.component';
-import { APP_CONFIG, HERO_DI_CONFIG }    from './app.config';
 import { UserService } from './user.service';
-import {
-  ProvidersComponent,
-  Provider1Component,
-  Provider3Component,
-  Provider4Component,
-  Provider5Component,
-  Provider6aComponent,
-  Provider6bComponent,
-  Provider7Component,
-  Provider8Component,
-  Provider9Component,
-  Provider10Component,
-} from './providers.component';
+
+import { ProvidersModule } from './providers.module';
 
 // #docregion ngmodule
 @NgModule({
   imports: [
-    BrowserModule
+    BrowserModule,
+    ProvidersModule
   ],
   declarations: [
     AppComponent,
@@ -35,26 +27,19 @@ import {
     // #enddocregion ngmodule
     HeroListComponent,
     InjectorComponent,
-    TestComponent,
-    ProvidersComponent,
-    Provider1Component,
-    Provider3Component,
-    Provider4Component,
-    Provider5Component,
-    Provider6aComponent,
-    Provider6bComponent,
-    Provider7Component,
-    Provider8Component,
-    Provider9Component,
-    Provider10Component,
+    TestComponent
     // #docregion ngmodule
   ],
-  // #docregion ngmodule-providers
+  // #docregion providers, providers-2
   providers: [
+    // #enddocregion providers
+    Logger,
+    // #docregion providers
     UserService,
     { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
   ],
-  // #enddocregion ngmodule-providers
+  // #enddocregion providers, providers-2
+  exports: [ CarComponent, HeroesComponent ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }

aio/content/examples/dependency-injection/src/app/dummy.module.ts

@@ -0,0 +1,25 @@
+
+/// Dummy modules to satisfy Angular Language Service
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppModule } from './app.module';
+
+////////
+
+import { AppComponent as AppComponent1 } from './app.component.1';
+
+@NgModule({
+  imports: [ CommonModule, AppModule ],
+  declarations: [ AppComponent1 ]
+})
+export class DummyModule1 {}
+
+/////////
+
+import { AppComponent as AppComponent2 } from './app.component.2';
+
+@NgModule({
+  imports: [ CommonModule, AppModule ],
+  declarations: [ AppComponent2 ]
+})
+export class DummyModule2 {}

aio/content/examples/dependency-injection/src/app/heroes/dummy.module.ts

@@ -0,0 +1,35 @@
+
+/// Dummy modules to satisfy Angular Language Service
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+////////
+
+import { HeroListComponent as HeroListComponent1 } from './hero-list.component.1';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ HeroListComponent1 ],
+  exports: [ HeroListComponent1 ]
+})
+export class DummyModule1 {}
+
+/////////
+
+import { HeroListComponent as HeroListComponent2 } from './hero-list.component.2';
+
+@NgModule({
+  imports: [ CommonModule ],
+  declarations: [ HeroListComponent2 ]
+})
+export class DummyModule2 {}
+
+/////////
+
+import { HeroesComponent as HeroesComponent1 } from './heroes.component.1';
+
+@NgModule({
+  imports: [ CommonModule, DummyModule1 ],
+  declarations: [ HeroesComponent1 ]
+})
+export class DummyModule3 {}

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts

@@ -1,16 +1,17 @@
 // #docregion
 import { Component }   from '@angular/core';
-
 import { HEROES }      from './mock-heroes';
 
 @Component({
   selector: 'app-hero-list',
   template: `
-  <div *ngFor="let hero of heroes">
-    {{hero.id}} - {{hero.name}}
-  </div>
+    <div *ngFor="let hero of heroes">
+      {{hero.id}} - {{hero.name}}
+    </div>
   `
 })
+// #docregion class
 export class HeroListComponent {
   heroes = HEROES;
 }
+// #enddocregion class

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts

@@ -1,7 +1,6 @@
 // #docplaster
 // #docregion
 import { Component }   from '@angular/core';
-
 import { Hero }        from './hero';
 // #enddocregion
 import { HeroService } from './hero.service.1';
@@ -15,9 +14,9 @@ import { HeroService } from './hero.service';
 @Component({
   selector: 'app-hero-list',
   template: `
-  <div *ngFor="let hero of heroes">
-    {{hero.id}} - {{hero.name}}
-  </div>
+    <div *ngFor="let hero of heroes">
+      {{hero.id}} - {{hero.name}}
+    </div>
   `
 })
 export class HeroListComponent {

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts

@@ -1,17 +1,16 @@
 /* tslint:disable:one-line */
 // #docregion
 import { Component }   from '@angular/core';
-
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
   selector: 'app-hero-list',
   template: `
-  <div *ngFor="let hero of heroes">
-    {{hero.id}} - {{hero.name}}
-    ({{hero.isSecret ? 'secret' : 'public'}})
-  </div>
+    <div *ngFor="let hero of heroes">
+      {{hero.id}} - {{hero.name}}
+      ({{hero.isSecret ? 'secret' : 'public'}})
+    </div>
   `,
 })
 export class HeroListComponent {

aio/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts

@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class HeroService {
+  constructor() { }
+}

aio/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts

@@ -1,6 +1,5 @@
 // #docregion
 import { Injectable } from '@angular/core';
-
 import { HEROES }     from './mock-heroes';
 
 @Injectable()

aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts

@@ -1,6 +1,5 @@
 // #docregion
 import { Injectable } from '@angular/core';
-
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';
 

aio/content/examples/dependency-injection/src/app/heroes/hero.service.ts

@@ -1,6 +1,5 @@
 // #docregion
 import { Injectable } from '@angular/core';
-
 import { HEROES }     from './mock-heroes';
 import { Logger }     from '../logger.service';
 

aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts

@@ -1,21 +1,18 @@
 // #docplaster
-// #docregion full, v1
-import { Component }          from '@angular/core';
+// #docregion, v1
+import { Component } from '@angular/core';
 // #enddocregion v1
+import { HeroService } from './hero.service';
 
-import { HeroService }        from './hero.service';
-// #enddocregion full
-
-// #docregion full, v1
-
+// #docregion v1
 @Component({
   selector: 'app-heroes',
     // #enddocregion v1
-  providers: [HeroService],
+  providers: [ HeroService ],
   // #docregion v1
   template: `
-  <h2>Heroes</h2>
-  <app-hero-list></app-hero-list>
+    <h2>Heroes</h2>
+    <app-hero-list></app-hero-list>
   `
 })
 export class HeroesComponent { }

aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts

@@ -1,14 +1,13 @@
 // #docregion
 import { Component }          from '@angular/core';
-
 import { heroServiceProvider } from './hero.service.provider';
 
 @Component({
   selector: 'app-heroes',
+  providers: [ heroServiceProvider ],
   template: `
-  <h2>Heroes</h2>
-  <app-hero-list></app-hero-list>
-  `,
-  providers: [heroServiceProvider]
+    <h2>Heroes</h2>
+    <app-hero-list></app-hero-list>
+  `
 })
 export class HeroesComponent { }

aio/content/examples/dependency-injection/src/app/providers.component.ts

@@ -1,19 +1,21 @@
-/* tslint:disable:one-line:check-open-brace*/
-// Examples of provider arrays
-// #docplaster
+/*
+ * A collection of demo components showing different ways to provide services
+ * in @Component metadata
+ */
 import { Component, Inject, Injectable, OnInit } from '@angular/core';
 
-import { APP_CONFIG, AppConfig,
-         HERO_DI_CONFIG }       from './app.config';
+import {
+  APP_CONFIG,
+  AppConfig,
+  HERO_DI_CONFIG } from './app.config';
 
-import { HeroService }          from './heroes/hero.service';
-import { heroServiceProvider }  from './heroes/hero.service.provider';
-import { Logger }               from './logger.service';
-import { UserService }    from './user.service';
+import { HeroService } from './heroes/hero.service';
+import { heroServiceProvider } from './heroes/hero.service.provider';
+import { Logger } from './logger.service';
+import { UserService } from './user.service';
 
-let template = '{{log}}';
+const template = '{{log}}';
 
-//////////////////////////////////////////
 @Component({
   selector: 'provider-1',
   template: template,
@@ -30,6 +32,7 @@ export class Provider1Component {
 }
 
 //////////////////////////////////////////
+
 @Component({
   selector: 'provider-3',
   template: template,
@@ -47,7 +50,7 @@ export class Provider3Component {
 }
 
 //////////////////////////////////////////
-class BetterLogger extends Logger {}
+export class BetterLogger extends Logger {}
 
 @Component({
   selector: 'provider-4',
@@ -66,9 +69,10 @@ export class Provider4Component {
 }
 
 //////////////////////////////////////////
+
 // #docregion EvenBetterLogger
 @Injectable()
-class EvenBetterLogger extends Logger {
+export class EvenBetterLogger extends Logger {
   constructor(private userService: UserService) { super(); }
 
   log(message: string) {
@@ -96,8 +100,10 @@ export class Provider5Component {
 }
 
 //////////////////////////////////////////
-class NewLogger extends Logger {}
-class OldLogger {
+
+export class NewLogger extends Logger {}
+
+export class OldLogger {
   logs: string[] = [];
   log(message: string) {
     throw new Error('Should not call the old logger!');
@@ -149,11 +155,14 @@ export class Provider6bComponent {
 }
 
 //////////////////////////////////////////
+
 // #docregion silent-logger
 // An object in the shape of the logger service
-let silentLogger = {
+export function SilentLoggerFn() {}
+
+const silentLogger = {
   logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'],
-  log: () => {}
+  log: SilentLoggerFn
 };
 // #enddocregion silent-logger
 
@@ -172,6 +181,7 @@ export class Provider7Component {
     this.log = logger.logs[0];
   }
 }
+
 /////////////////
 
 @Component({
@@ -189,6 +199,7 @@ export class Provider8Component {
 }
 
 /////////////////
+
 @Component({
   selector: 'provider-9',
   template: template,
@@ -218,6 +229,7 @@ export class Provider9Component implements OnInit {
      this.log = 'APP_CONFIG Application title is ' + this.config.title;
   }
 }
+
 //////////////////////////////////////////
 // Sample providers 1 to 7 illustrate a required logger dependency.
 // Optional logger, can be null
@@ -248,6 +260,7 @@ export class Provider10Component implements OnInit {
 }
 
 /////////////////
+
 @Component({
   selector: 'app-providers',
   template: `

aio/content/examples/dependency-injection/src/app/providers.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+
+import {
+  Provider1Component,
+  Provider3Component,
+  Provider4Component,
+  Provider5Component,
+  Provider6aComponent,
+  Provider6bComponent,
+  Provider7Component,
+  Provider8Component,
+  Provider9Component,
+  Provider10Component,
+  ProvidersComponent,
+} from './providers.component';
+
+@NgModule({
+  declarations: [
+    Provider1Component,
+    Provider3Component,
+    Provider4Component,
+    Provider5Component,
+    Provider6aComponent,
+    Provider6bComponent,
+    Provider7Component,
+    Provider8Component,
+    Provider9Component,
+    Provider10Component,
+    ProvidersComponent,
+  ],
+  exports: [ ProvidersComponent ]
+ })
+ export class ProvidersModule {}

aio/content/examples/dependency-injection/src/app/test.component.ts

@@ -2,10 +2,11 @@
 // Simulate a simple test
 // Reader should look to the testing chapter for the real thing
 
-import { Component }           from '@angular/core';
+import { Component } from '@angular/core';
 
-import { HeroService }         from './heroes/hero.service';
-import { HeroListComponent }   from './heroes/hero-list.component';
+import { Hero  } from './heroes/hero';
+import { HeroService } from './heroes/hero.service';
+import { HeroListComponent } from './heroes/hero-list.component';
 
 @Component({
   selector: 'app-tests',
@@ -22,12 +23,13 @@ export class TestComponent {
 function runTests() {
 
   // #docregion spec
-  let expectedHeroes = [{name: 'A'}, {name: 'B'}]
-  let mockService = <HeroService> {getHeroes: () => expectedHeroes }
+  const expectedHeroes = [{name: 'A'}, {name: 'B'}]
+  const mockService = <HeroService> {getHeroes: () => expectedHeroes }
 
   it('should have heroes when HeroListComponent created', () => {
-    let hlc = new HeroListComponent(mockService);
-    expect(hlc.heroes.length).toEqual(expectedHeroes.length);
+    // Pass the mock to the constructor as the Angular injector would
+    const component = new HeroListComponent(mockService);
+    expect(component.heroes.length).toEqual(expectedHeroes.length);
   });
   // #enddocregion spec
 

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

@@ -0,0 +1 @@
+<app-hero-form></app-hero-form>

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

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  template: '<app-hero-form></app-hero-form>'
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent { }

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

@@ -4,7 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
 
 import { AppComponent }  from './app.component';
-import { HeroFormComponent } from './hero-form.component';
+import { HeroFormComponent } from './hero-form/hero-form.component';
 
 @NgModule({
   imports: [
@@ -15,6 +15,7 @@ import { HeroFormComponent } from './hero-form.component';
     AppComponent,
     HeroFormComponent
   ],
+  providers: [],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }

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

@@ -2,11 +2,12 @@
 // #docregion , v1, final
 import { Component } from '@angular/core';
 
-import { Hero }    from './hero';
+import { Hero }    from '../hero';
 
 @Component({
   selector: 'app-hero-form',
-  templateUrl: './hero-form.component.html'
+  templateUrl: './hero-form.component.html',
+  styleUrls: ['./hero-form.component.css']
 })
 export class HeroFormComponent {
 

aio/content/examples/forms/src/styles.1.css

@@ -0,0 +1 @@
+@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

aio/content/examples/reactive-forms/debug.log

@@ -0,0 +1,3 @@
+[1030/162525.401:ERROR:process_reader_win.cc(123)] NtOpenThread: {Acceso denegado} Un proceso ha solicitado acceso a un objeto, pero no se le han concedido esos derechos de acceso.  (0xc0000022)
+[1030/162525.402:ERROR:exception_snapshot_win.cc(87)] thread ID 26896 not found in process
+[1030/162525.402:WARNING:crash_report_exception_handler.cc(62)] ProcessSnapshotWin::Initialize failed

aio/content/examples/reactive-forms/src/app/app.component.1.html

@@ -0,0 +1,4 @@
+<div class="container">
+  <h1>Reactive Forms</h1>
+  <app-hero-detail></app-hero-detail>
+</div>

aio/content/examples/reactive-forms/src/app/app.component.1.ts

@@ -1,12 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  template: `
-  <div class="container">
-    <h1>Reactive Forms</h1>
-    <app-hero-detail></app-hero-detail>
-  </div>`
-})
-export class AppComponent { }

aio/content/examples/reactive-forms/src/app/app.component.html

@@ -0,0 +1,4 @@
+<div class="container">
+  <h1>Reactive Forms</h1>
+  <app-hero-list></app-hero-list>
+</div>

aio/content/examples/reactive-forms/src/app/app.component.ts

@@ -3,10 +3,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  template: `
-  <div class="container">
-    <h1>Reactive Forms</h1>
-    <app-hero-list></app-hero-list>
-  </div>`
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent { }

aio/content/examples/reactive-forms/src/app/app.module.ts

@@ -6,9 +6,9 @@ import { BrowserModule }       from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';  // <-- #1 import module
 
 import { AppComponent }        from './app.component';
-import { HeroDetailComponent } from './hero-detail.component'; // <-- #1 import component
+import { HeroDetailComponent } from './hero-detail/hero-detail.component'; // <-- #1 import component
 // #enddocregion v1
-import { HeroListComponent }   from './hero-list.component';
+import { HeroListComponent }   from './hero-list/hero-list.component';
 
 import { HeroService }         from './hero.service'; //  <-- #1 import service
 // #docregion v1
@@ -20,7 +20,7 @@ import { HeroService }         from './hero.service'; //  <-- #1 import service
   ],
   declarations: [
     AppComponent,
-    HeroDetailComponent, // <-- #3 declare app component
+    HeroDetailComponent,
 // #enddocregion v1
     HeroListComponent
 // #docregion v1

aio/content/examples/reactive-forms/src/app/demo.module.ts

@@ -4,14 +4,14 @@ import { ReactiveFormsModule }  from '@angular/forms';
 
 import { AppModule }            from './app.module';
 import { DemoComponent }        from './demo.component';
-import { HeroDetailComponent1 } from './hero-detail-1.component';
-import { HeroDetailComponent2 } from './hero-detail-2.component';
-import { HeroDetailComponent3 } from './hero-detail-3.component';
-import { HeroDetailComponent4 } from './hero-detail-4.component';
-import { HeroDetailComponent5 } from './hero-detail-5.component';
-import { HeroDetailComponent6 } from './hero-detail-6.component';
-import { HeroDetailComponent7 } from './hero-detail-7.component';
-import { HeroDetailComponent8 } from './hero-detail-8.component';
+import { HeroDetailComponent1 } from './hero-detail/hero-detail-1.component';
+import { HeroDetailComponent2 } from './hero-detail/hero-detail-2.component';
+import { HeroDetailComponent3 } from './hero-detail/hero-detail-3.component';
+import { HeroDetailComponent4 } from './hero-detail/hero-detail-4.component';
+import { HeroDetailComponent5 } from './hero-detail/hero-detail-5.component';
+import { HeroDetailComponent6 } from './hero-detail/hero-detail-6.component';
+import { HeroDetailComponent7 } from './hero-detail/hero-detail-7.component';
+import { HeroDetailComponent8 } from './hero-detail/hero-detail-8.component';
 
 @NgModule({
   imports: [

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.ts

@@ -1,8 +1,9 @@
 /* tslint:disable:component-class-suffix */
-// #docregion imports
-import { Component }              from '@angular/core';
-import { FormControl }            from '@angular/forms';
-// #enddocregion
+
+import { Component } from '@angular/core';
+// #docregion import
+import { FormControl } from '@angular/forms';
+// #enddocregion import
 
 @Component({
   selector: 'app-hero-detail-1',

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.ts

@@ -3,7 +3,7 @@
 import { Component }                          from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import { states } from './data-model';
+import { states } from '../data-model';
 // #enddocregion imports
 
 @Component({

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.ts

@@ -2,7 +2,7 @@
 import { Component }                          from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import { states } from './data-model';
+import { states } from '../data-model';
 
 @Component({
   selector: 'app-hero-detail-5',

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts

@@ -5,7 +5,7 @@ import { Component, Input, OnChanges }             from '@angular/core';
 import { FormBuilder, FormGroup, Validators }      from '@angular/forms';
 
 // #docregion import-hero
-import { Hero, states } from './data-model';
+import { Hero, states } from '../data-model';
 // #enddocregion import-hero
 
 ////////// 6 ////////////////////

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts

@@ -5,7 +5,7 @@ import { Component, Input, OnChanges }             from '@angular/core';
 import { FormBuilder, FormGroup, Validators }      from '@angular/forms';
 
 // #docregion import-address
-import { Address, Hero, states } from './data-model';
+import { Address, Hero, states } from '../data-model';
 // #enddocregion import-address
 
 // #enddocregion imports

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts

@@ -3,7 +3,7 @@
 import { Component, Input, OnChanges }                   from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import { Address, Hero, states } from './data-model';
+import { Address, Hero, states } from '../data-model';
 // #enddocregion imports
 
 @Component({

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts

@@ -3,17 +3,16 @@
 import { Component, Input, OnChanges }       from '@angular/core';
 import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
 
-import { Address, Hero, states } from './data-model';
+import { Address, Hero, states } from '../data-model';
 // #docregion import-service
-import { HeroService }           from './hero.service';
+import { HeroService }           from '../hero.service';
 // #enddocregion import-service
 
-// #docregion metadata
 @Component({
   selector: 'app-hero-detail',
-  templateUrl: './hero-detail.component.html'
+  templateUrl: './hero-detail.component.html',
+  styleUrls: ['./hero-detail.component.css']
 })
-// #enddocregion metadata
 export class HeroDetailComponent implements OnChanges {
   @Input() hero: Hero;
 

aio/content/examples/reactive-forms/src/app/hero-list/hero-list.component.ts

@@ -3,12 +3,13 @@ import { Component, OnInit } from '@angular/core';
 import { Observable }        from 'rxjs/Observable';
 import 'rxjs/add/operator/finally';
 
-import { Hero }        from './data-model';
-import { HeroService } from './hero.service';
+import { Hero }        from '../data-model';
+import { HeroService } from '../hero.service';
 
 @Component({
   selector: 'app-hero-list',
-  templateUrl: './hero-list.component.html'
+  templateUrl: './hero-list.component.html',
+  styleUrls: ['./hero-list.component.css']
 })
 export class HeroListComponent implements OnInit {
   heroes: Observable<Hero[]>;

aio/content/examples/reactive-forms/src/index-final.html

@@ -5,10 +5,8 @@
     <title>Hero Form</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-     <!-- #docregion bootstrap -->
     <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
-     <!-- #enddocregion bootstrap -->
+    <link rel="stylesheet" href="styles.css">
 
      <script src="node_modules/core-js/client/shim.min.js"></script>
 

aio/content/examples/reactive-forms/src/index.html

@@ -5,9 +5,7 @@
     <title>Hero Form</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-     <!-- #docregion bootstrap -->
     <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
-     <!-- #enddocregion bootstrap -->
   </head>
 
   <body>

aio/content/examples/reactive-forms/src/styles.1.css

@@ -0,0 +1 @@
+@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

aio/content/examples/toh-pt4/src/app/hero.service.ts

@@ -3,7 +3,7 @@
 import { Injectable } from '@angular/core';
 
 // #docregion import-observable
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 // #enddocregion import-observable
 

aio/content/examples/toh-pt5/src/app/hero.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 import { of } from 'rxjs/observable/of';
 
 import { Hero } from './hero';

aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
 import { Http, Response } from '@angular/http';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 
 // #docregion downgrade-injectable
 declare var angular: angular.IAngularStatic;

aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts

@@ -3,7 +3,7 @@
 import { ActivatedRoute } from '@angular/router';
 
 // #enddocregion activatedroute
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 
 import { async, TestBed } from '@angular/core/testing';
 

aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SpyLocation } from '@angular/common/testing';
 

aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts

@@ -1,7 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
 import { Http, Response } from '@angular/http';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 
 import 'rxjs/add/operator/map';
 

aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts

@@ -3,7 +3,7 @@
 import { ActivatedRoute } from '@angular/router';
 
 // #enddocregion activatedroute
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 
 import { async, TestBed } from '@angular/core/testing';
 

aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts

@@ -2,7 +2,7 @@
 // #docregion routestuff
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SpyLocation } from '@angular/common/testing';
 

aio/content/guide/ajs-quick-reference.md

@@ -212,8 +212,6 @@ The following are some of the key AngularJS built-in directives and their equiva
       To launch the app in code, explicitly bootstrap the application's root module (`AppModule`)
       in `main.ts`
       and the application's root component (`AppComponent`) in `app.module.ts`.
-
-      For more information see the [Setup](guide/setup) page.
     </td>
 
   </tr>
@@ -1254,13 +1252,12 @@ also encapsulate a style sheet within a specific component.
     <td>
 
 
-      ### Link tag
 
-      <code-example hideCopy path="ajs-quick-reference/src/index.html" region="style" linenums="false"></code-example>
+      ### Styles configuration
+      <code-example hideCopy path="ajs-quick-reference/.angular-cli.1.json" region="styles" linenums="false">
 
-
-      In Angular, you can continue to use the link tag to define the styles for your application in the `index.html` file.
-      But now you can also encapsulate styles for your components.
+      With the Angular CLI, you can configure your global styles in the `.angular-cli.json` file.
+      You can rename the extension to `.scss` to use sass.
 
       ### StyleUrls
       In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define

aio/content/guide/aot-compiler.md

@@ -127,7 +127,7 @@ You can think of `.metadata.json` as a diagram of the overall structure of a dec
 
 <div class="l-sub-section">
 
-Angular's [schema.ts](https://github.com/angular/angular/blob/master/packages/tsc-wrapped/src/schema.ts)
+Angular's [schema.ts](https://github.com/angular/angular/blob/master/packages/compiler-cli/src/metadata/schema.ts)
 describes the JSON format as a collection of TypeScript interfaces.
 
 </div>

aio/content/guide/attribute-directives.md

@@ -33,7 +33,7 @@ An attribute directive minimally requires building a controller class annotated
 the attribute.
 The controller class implements the desired directive behavior.
 
-This page demonstrates building a simple _myHighlight_ attribute
+This page demonstrates building a simple _appHighlight_ attribute
 directive to set an element's background color
 when the user hovers over that element. You can apply it like this:
 
@@ -43,106 +43,84 @@ when the user hovers over that element. You can apply it like this:
 
 ### Write the directive code
 
-Follow the [setup](guide/setup) instructions for creating a new local project
-named <code>attribute-directives</code>.
+Create the directive class file in a terminal window with this CLI command.
 
-Create the following source file in the indicated folder:
+<code-example language="sh" class="code-shell">
+ng generate directive highlight
+</code-example>
 
-<code-example path="attribute-directives/src/app/highlight.directive.1.ts" title="src/app/highlight.directive.ts"></code-example>
-
-The `import` statement specifies symbols from the Angular `core`:
-
-1. `Directive` provides the functionality of the `@Directive` decorator.
-1. `ElementRef` [injects](guide/dependency-injection) into the directive's constructor
-so the code can access the DOM element.
-1. `Input` allows data to flow from the binding expression into the directive.
-
-Next, the `@Directive` decorator function contains the directive metadata in a configuration object
-as an argument.
-
-`@Directive` requires a CSS selector to identify
-the HTML in the template that is associated with the directive.
-The [CSS selector for an attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
-is the attribute name in square brackets.
-Here, the directive's selector is `[myHighlight]`.
-Angular locates all elements in the template that have an attribute named `myHighlight`.
+The CLI creates `src/app/highlight.directive.ts`, a corresponding test file (`.../spec.ts`, and _declares_ the directive class in the root `AppModule`.
 
 <div class="l-sub-section">
 
-### Why not call it "highlight"?
+_Directives_ must be declared in [Angular Modules](guide/ngmodule) in the same manner as _components_.
 
-Though *highlight* is a more concise name than *myHighlight* and would work,
-a best practice is to prefix selector names to ensure
+</div >
+
+The generated `src/app/highlight.directive.ts` is as follows:
+
+<code-example path="attribute-directives/src/app/highlight.directive.0.ts" title="src/app/highlight.directive.ts"></code-example>
+
+The imported `Directive` symbol provides the Angular the `@Directive` decorator.
+
+The `@Directive` decorator's lone configuration property specifies the directive's
+[CSS attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors), `[appHighlight]`.
+
+It's the brackets (`[]`) that make it an attribute selector.
+Angular locates each element in the template that has an attribute named `appHighlight` and applies the logic of this directive to that element.
+
+The _attribute selector_ pattern explains the name of this kind of directive.
+
+<div class="l-sub-section">
+
+#### Why not "highlight"?
+
+Though *highlight* would be a more concise selector than *appHighlight* and it would work,
+the best practice is to prefix selector names to ensure
 they don't conflict with standard HTML attributes.
 This also reduces the risk of colliding with third-party directive names.
+The CLI added the `app` prefix for you.
 
 Make sure you do **not** prefix the `highlight` directive name with **`ng`** because
 that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose.
-For a simple demo, the short prefix, `my`, helps distinguish your custom directive.
 
 </div>
 
-
 After the `@Directive` metadata comes the directive's controller class,
-called `HighlightDirective`, which contains the logic for the directive.
-Exporting `HighlightDirective` makes it accessible to other components.
+called `HighlightDirective`, which contains the (currently empty) logic for the directive.
+Exporting `HighlightDirective` makes the directive accessible.
 
-Angular creates a new instance of the directive's controller class for
-each matching element, injecting an Angular `ElementRef`
-into the constructor.
-`ElementRef` is a service that grants direct access to the DOM element
+Now edit the generated `src/app/highlight.directive.ts` to look as follows:
+
+<code-example path="attribute-directives/src/app/highlight.directive.1.ts" title="src/app/highlight.directive.ts"></code-example>
+
+The `import` statement specifies an additional `ElementRef` symbol from the Angular `core` library:
+
+You use the `ElementRef`in the directive's constructor
+to [inject](guide/dependency-injection) a reference to the host DOM element, 
+the element to which you applied `appHighlight`.
+
+`ElementRef` grants direct access to the host DOM element
 through its `nativeElement` property.
 
+This first implementation sets the background color of the host element to yellow.
+
 {@a apply-directive}
 
 ## Apply the attribute directive
 
-To use the new `HighlightDirective`, create a template that
-applies the directive as an attribute to a paragraph (`<p>`) element.
-In Angular terms, the `<p>` element is the attribute **host**.
+To use the new `HighlightDirective`, add a paragraph (`<p>`) element to the template of the root `AppComponent` and apply the directive as an attribute.
 
-Put the template in its own <code>app.component.html</code>
-file that looks like this:
+<code-example path="attribute-directives/src/app/app.component.1.html" title="src/app/app.component.html" region="applied"></code-example>
 
-<code-example path="attribute-directives/src/app/app.component.1.html" title="src/app/app.component.html"></code-example>
+Now run the application to see the `HighlightDirective` in action.
 
-Now reference this template in the `AppComponent`:
 
-<code-example path="attribute-directives/src/app/app.component.ts" title="src/app/app.component.ts"></code-example>
-
-Next, add an `import` statement to fetch the `Highlight` directive and
-add that class to the `declarations` NgModule metadata. This way Angular
-recognizes the directive when it encounters `myHighlight` in the template.
-
-<code-example path="attribute-directives/src/app/app.module.ts" title="src/app/app.module.ts"></code-example>
-
-Now when the app runs, the `myHighlight` directive highlights the paragraph text.
-
-<figure>
-  <img src="generated/images/guide/attribute-directives/first-highlight.png" alt="First Highlight">
-</figure>
-
-<div class="l-sub-section">
-
-<h3 class="no-toc">Your directive isn't working?</h3>
-
-Did you remember to add the directive to the `declarations` attribute of `@NgModule`?
-It is easy to forget!
-Open the console in the browser tools and look for an error like this:
-
-<code-example format="nocode">
-  EXCEPTION: Template parse errors:
-    Can't bind to 'myHighlight' since it isn't a known property of 'p'.
+<code-example language="sh" class="code-shell">
+ng serve
 </code-example>
 
-Angular detects that you're trying to bind to *something* but it can't find this directive
-in the module's `declarations` array.
-After specifying `HighlightDirective` in the `declarations` array,
-Angular knows it can apply the directive to components declared in this module.
-
-</div>
-
-To summarize, Angular found the `myHighlight` attribute on the `<p>` element.
+To summarize, Angular found the `appHighlight` attribute on the **host** `<p>` element.
 It created an instance of the `HighlightDirective` class and
 injected a reference to the `<p>` element into the directive's constructor
 which sets the `<p>` element's background style to yellow.
@@ -151,15 +129,14 @@ which sets the `<p>` element's background style to yellow.
 
 ## Respond to user-initiated events
 
-Currently, `myHighlight` simply sets an element color.
+Currently, `appHighlight` simply sets an element color.
 The directive could be more dynamic.
 It could detect when the user mouses into or out of the element
 and respond by setting or clearing the highlight color.
 
-Begin by adding `HostListener` to the list of imported symbols;
-add the `Input` symbol as well because you'll need it soon.
+Begin by adding `HostListener` to the list of imported symbols.
 
-<code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (imports)" region="imports"></code-example>
+<code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (imports)" region="imports"></code-example>
 
 Then add two eventhandlers that respond when the mouse enters or leaves,
 each adorned by the `HostListener` decorator.
@@ -180,8 +157,10 @@ There are at least three problems with _that_ approach:
 
 </div>
 
-The handlers delegate to a helper method that sets the color on the DOM element, `el`,
-which you declare and initialize in the constructor.
+The handlers delegate to a helper method that sets the color on the host DOM element, `el`.
+
+The helper method, `highlight`, was extracted from the constructor.
+The revised constructor simply declares the injected `el: ElementRef`.
 
 <code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (constructor)" region="ctor"></code-example>
 
@@ -203,7 +182,10 @@ the mouse hovers over the `p` and disappears as it moves out.
 Currently the highlight color is hard-coded _within_ the directive. That's inflexible.
 In this section, you give the developer the power to set the highlight color while applying the directive.
 
-Start by adding a `highlightColor` property to the directive class like this:
+Begin by adding `Input` to the list of symbols imported from `@angular/core`.
+<code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (imports)" region="imports"></code-example>
+
+Add a `highlightColor` property to the directive class like this:
 
 <code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (highlightColor)" region="color"></code-example>
 
@@ -232,16 +214,16 @@ That's good, but it would be nice to _simultaneously_ apply the directive and se
 
 <code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color"></code-example>
 
-The `[myHighlight]` attribute binding both applies the highlighting directive to the `<p>` element
+The `[appHighlight]` attribute binding both applies the highlighting directive to the `<p>` element
 and sets the directive's highlight color with a property binding.
-You're re-using the directive's attribute selector (`[myHighlight]`) to do both jobs.
+You're re-using the directive's attribute selector (`[appHighlight]`) to do both jobs.
 That's a crisp, compact syntax.
 
-You'll have to rename the directive's `highlightColor` property to `myHighlight` because that's now the color property binding name.
+You'll have to rename the directive's `highlightColor` property to `appHighlight` because that's now the color property binding name.
 
 <code-example path="attribute-directives/src/app/highlight.directive.2.ts" linenums="false" title="src/app/highlight.directive.ts (renamed to match directive selector)" region="color-2"></code-example>
 
-This is disagreeable. The word, `myHighlight`, is a terrible property name and it doesn't convey the property's intent.
+This is disagreeable. The word, `appHighlight`, is a terrible property name and it doesn't convey the property's intent.
 
 {@a input-alias}
 
@@ -254,14 +236,14 @@ Restore the original property name and specify the selector as the alias in the
 <code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (color property with alias)" region="color"></code-example>
 
 _Inside_ the directive the property is known as `highlightColor`.
-_Outside_ the directive, where you bind to it, it's known as `myHighlight`.
+_Outside_ the directive, where you bind to it, it's known as `appHighlight`.
 
 You get the best of both worlds: the property name you want and the binding syntax you want:
 
 <code-example path="attribute-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (color)" region="color"></code-example>
 
-Now that you're binding to `highlightColor`, modify the `onMouseEnter()` method to use it.
-If someone neglects to bind to `highlightColor`, highlight in red:
+Now that you're binding via the alias to the `highlightColor`, modify the `onMouseEnter()` method to use that property.
+If someone neglects to bind to `appHighlightColor`, highlight the host element in red:
 
 <code-example path="attribute-directives/src/app/highlight.directive.3.ts" linenums="false" title="src/app/highlight.directive.ts (mouse enter)" region="mouse-enter"></code-example>
 
@@ -308,7 +290,7 @@ then with the `defaultColor`, and falls back to "red" if both properties are und
 
 <code-example path="attribute-directives/src/app/highlight.directive.ts" linenums="false" title="src/app/highlight.directive.ts (mouse-enter)" region="mouse-enter"></code-example>
 
-How do you bind to a second property when you're already binding to the `myHighlight` attribute name?
+How do you bind to a second property when you're already binding to the `appHighlight` attribute name?
 
 As with components, you can add as many directive property bindings as you need by stringing them along in the template.
 The developer should be able to write the following template HTML to both bind to the `AppComponent.color`
@@ -398,6 +380,6 @@ Now apply that reasoning to the following example:
   The template and its component trust each other.
   The `color` property doesn't require the `@Input` decorator.
 
-* The `myHighlight` property on the left refers to an _aliased_ property of the `HighlightDirective`,
+* The `appHighlight` property on the left refers to an _aliased_ property of the `HighlightDirective`,
   not a property of the template's component. There are trust issues.
   Therefore, the directive property must carry the `@Input` decorator.

aio/content/guide/component-interaction.md

@@ -356,6 +356,7 @@ Use `setTimeout()` to wait one tick and then revise the `seconds()` method so
 that it takes future values from the timer component.
 
 <h3 class="no-toc">Test it</h3>
+
 Use [the same countdown timer tests](guide/component-interaction#countdown-tests) as before.
 
 [Back to top](guide/component-interaction#top)

aio/content/guide/dependency-injection-in-action.md

@@ -5,51 +5,6 @@ Dependency Injection is a powerful pattern for managing code dependencies.
 This cookbook explores many of the features of Dependency Injection (DI) in Angular.
 {@a toc}
 
-<!--
-
-# Contents
-
-* [Application-wide dependencies](guide/dependency-injection-in-action#app-wide-dependencies)
-* [External module configuration](guide/dependency-injection-in-action#external-module-configuration)
-* [`@Injectable()` and nested service dependencies](guide/dependency-injection-in-action#nested-dependencies)
-
-  * [`@Injectable()`](guide/dependency-injection-in-action#injectable-1)
-
-* [Limit service scope to a component subtree](guide/dependency-injection-in-action#service-scope)
-* [Multiple service instances (sandboxing)](guide/dependency-injection-in-action#multiple-service-instances)
-* [Qualify dependency lookup with `@Optional()` and `@Host()`](guide/dependency-injection-in-action#qualify-dependency-lookup)
-
-  * [Demonstration](guide/dependency-injection-in-action#demonstration)
-
-* [Inject the component's DOM element](guide/dependency-injection-in-action#component-element)
-* [Define dependencies with providers](guide/dependency-injection-in-action#providers)
-
-  * [Defining providers](guide/dependency-injection-in-action#defining-providers)
-  * [The *provide* object literal](guide/dependency-injection-in-action#provide)
-  * [`useValue`&mdash;the *value provider*](guide/dependency-injection-in-action#usevalue)
-  * [`useClass`&mdash;the *class provider*](guide/dependency-injection-in-action#useclass)
-  * [`useExisting`&mdash;the *alias provider*](guide/dependency-injection-in-action#useexisting)
-  * [`useFactory`&mdash;the *factory provider*](guide/dependency-injection-in-action#usefactory)
-
-* [Provider token alternatives: the class-interface and `InjectionToken`](guide/dependency-injection-in-action#tokens)
-
-  * [class-interface](guide/dependency-injection-in-action#class-interface)
-  * [`InjectionToken`](guide/dependency-injection-in-action#injection-token)
-
-* [Inject into a derived class](guide/dependency-injection-in-action#di-inheritance)
-* [Find a parent component by injection](guide/dependency-injection-in-action#find-parent)
-
-  * [Find parent with a known component type](guide/dependency-injection-in-action#known-parent)
-  * [Cannot find a parent by its base class](guide/dependency-injection-in-action#base-parent)
-  * [Find a parent by its class-interface](guide/dependency-injection-in-action#class-interface-parent)
-  * [Find a parent in a tree of parents with `@SkipSelf()`](guide/dependency-injection-in-action#parent-tree)
-  * [The `Parent` class-interface](guide/dependency-injection-in-action#parent-token)
-  * [A `provideParent()` helper function](guide/dependency-injection-in-action#provideparent)
-
-* [Break circularities with a forward class reference (*forwardRef*)](guide/dependency-injection-in-action#forwardref)
-
--->
-
 See the <live-example name="dependency-injection-in-action"></live-example>
 of the code in this cookbook.
 
@@ -79,7 +34,7 @@ is all the registration you need.
 
 A *provider* is something that can create or deliver a service.
 Angular creates a service instance from a class provider by using `new`.
-Read more about providers in the [Dependency Injection](guide/dependency-injection#injector-providers)
+Read more about providers in the [Dependency Injection](guide/dependency-injection#register-providers-ngmodule)
 guide.
 
 </div>

aio/content/guide/dependency-injection-pattern.md

@@ -0,0 +1,167 @@
+# The Dependency Injection pattern
+
+**Dependency injection** is an important application design pattern.
+It's used so widely that almost everyone just calls it _DI_.
+
+Angular has its own dependency injection framework, and
+you really can't build an Angular application without it.
+
+This page covers what DI is and why it's useful.
+
+When you've learned the general pattern, you're ready to turn to
+the [Angular Dependency Injection](guide/dependency-injection) guide to see how it works in an Angular app.
+
+{@a why-di }
+
+## Why dependency injection?
+
+To understand why dependency injection is so important, consider an example without it.
+Imagine writing the following code:
+
+<code-example path="dependency-injection/src/app/car/car-no-di.ts" region="car" title="src/app/car/car.ts (without DI)">
+</code-example>
+
+The `Car` class creates everything it needs inside its constructor.
+What's the problem?
+The problem is that the `Car` class is brittle, inflexible, and hard to test.
+
+This `Car` needs an engine and tires. Instead of asking for them,
+the `Car` constructor instantiates its own copies from
+the very specific classes `Engine` and `Tires`.
+
+What if the `Engine` class evolves and its constructor requires a parameter?
+That would break the `Car` class and it would stay broken until you rewrote it along the lines of
+`this.engine = new Engine(theNewParameter)`.
+The `Engine` constructor parameters weren't even a consideration when you first wrote `Car`.
+You may not anticipate them even now.
+But you'll *have* to start caring because
+when the definition of `Engine` changes, the `Car` class must change.
+That makes `Car` brittle.
+
+What if you want to put a different brand of tires on your `Car`? Too bad.
+You're locked into whatever brand the `Tires` class creates. That makes the
+`Car` class inflexible.
+
+Right now each new car gets its own `engine`. It can't share an `engine` with other cars.
+While that makes sense for an automobile engine,
+surely you can think of other dependencies that should be shared, such as the onboard
+wireless connection to the manufacturer's service center. This `Car` lacks the flexibility
+to share services that have been created previously for other consumers.
+
+When you write tests for `Car` you're at the mercy of its hidden dependencies.
+Is it even possible to create a new `Engine` in a test environment?
+What does `Engine` depend upon? What does that dependency depend on?
+Will a new instance of `Engine` make an asynchronous call to the server?
+You certainly don't want that going on during tests.
+
+What if the `Car` should flash a warning signal when tire pressure is low?
+How do you confirm that it actually does flash a warning
+if you can't swap in low-pressure tires during the test?
+
+You have no control over the car's hidden dependencies.
+When you can't control the dependencies, a class becomes difficult to test.
+
+How can you make `Car` more robust, flexible, and testable?
+
+{@a ctor-injection}
+That's super easy. Change the `Car` constructor to a version with DI:
+
+<code-tabs>
+
+  <code-pane title="src/app/car/car.ts (excerpt with DI)" path="dependency-injection/src/app/car/car.ts" region="car-ctor">
+  </code-pane>
+
+  <code-pane title="src/app/car/car.ts (excerpt without DI)" path="dependency-injection/src/app/car/car-no-di.ts" region="car-ctor">
+  </code-pane>
+
+</code-tabs>
+
+See what happened? The definition of the dependencies are
+now in the constructor.
+The `Car` class no longer creates an `engine` or `tires`.
+It just consumes them.
+
+<div class="l-sub-section">
+
+This example leverages TypeScript's constructor syntax for declaring
+parameters and properties simultaneously.
+
+</div>
+
+Now you can create a car by passing the engine and tires to the constructor.
+
+<code-example path="dependency-injection/src/app/car/car-creations.ts" region="car-ctor-instantiation" linenums="false">
+</code-example>
+
+How cool is that?
+The definition of the `engine` and `tire` dependencies are
+decoupled from the `Car` class.
+You can pass in any kind of `engine` or `tires` you like, as long as they
+conform to the general API requirements of an `engine` or `tires`.
+
+Now, if someone extends the `Engine` class, that is not `Car`'s problem.
+
+<div class="l-sub-section">
+
+The _consumer_ of `Car` has the problem. The consumer must update the car creation code to
+something like this:
+
+<code-example path="dependency-injection/src/app/car/car-creations.ts" region="car-ctor-instantiation-with-param" linenums="false">
+
+</code-example>
+
+The critical point is this: the `Car` class did not have to change.
+You'll take care of the consumer's problem shortly.
+
+</div>
+
+The `Car` class is much easier to test now because you are in complete control
+of its dependencies.
+You can pass mocks to the constructor that do exactly what you want them to do
+during each test:
+
+<code-example path="dependency-injection/src/app/car/car-creations.ts" region="car-ctor-instantiation-with-mocks" linenums="false">
+</code-example>
+
+**You just learned what dependency injection is**.
+
+It's a coding pattern in which a class receives its dependencies from external
+sources rather than creating them itself.
+
+Cool! But what about that poor consumer?
+Anyone who wants a `Car` must now
+create all three parts: the `Car`, `Engine`, and `Tires`.
+The `Car` class shed its problems at the consumer's expense.
+You need something that takes care of assembling these parts.
+
+You _could_ write a giant class to do that:
+
+<code-example path="dependency-injection/src/app/car/car-factory.ts" title="src/app/car/car-factory.ts">
+</code-example>
+
+It's not so bad now with only three creation methods.
+But maintaining it will be hairy as the application grows.
+This factory is going to become a huge spiderweb of
+interdependent factory methods!
+
+Wouldn't it be nice if you could simply list the things you want to build without
+having to define which dependency gets injected into what?
+
+This is where the dependency injection framework comes into play.
+Imagine the framework had something called an _injector_.
+You register some classes with this injector, and it figures out how to create them.
+
+When you need a `Car`, you simply ask the injector to get it for you and you're good to go.
+
+<code-example path="dependency-injection/src/app/car/car-injector.ts" region="injector-call" title="src/app/car/car-injector.ts" linenums="false">
+</code-example>
+
+Everyone wins. The `Car` knows nothing about creating an `Engine` or `Tires`.
+The consumer knows nothing about creating a `Car`.
+You don't have a gigantic factory class to maintain.
+Both `Car` and consumer simply ask for what they need and the injector delivers.
+
+This is what a **dependency injection framework** is all about.
+
+Now that you know what dependency injection is and appreciate its benefits,
+turn to the [Angular Dependency Injection](guide/dependency-injection) guide to see how it is implemented in Angular.

aio/content/guide/displaying-data.md

@@ -31,9 +31,11 @@ The easiest way to display a component property
 is to bind the property name through interpolation.
 With interpolation, you put the property name in the view template, enclosed in double curly braces: `{{myHero}}`.
 
-Follow the [setup](guide/setup) instructions for creating a new project
+Follow the [quickstart](guide/quickstart) instructions for creating a new project
 named <code>displaying-data</code>.
 
+Delete the <code>app.component.html</code> file. It is not needed for this example.
+
 Then modify the <code>app.component.ts</code> file by
 changing the template and the body of the component.
 
@@ -48,7 +50,7 @@ When you're done, it should look like this:
 
 You added two properties to the formerly empty component: `title` and `myHero`.
 
-The revised template displays the two component properties using double curly brace
+The template displays the two component properties using double curly brace
 interpolation:
 
 
@@ -92,7 +94,7 @@ the view, such as a keystroke, a timer completion, or a response to an HTTP requ
 Notice that you don't call **new** to create an instance of the `AppComponent` class.
 Angular is creating an instance for you. How?
 
-The CSS `selector` in the `@Component` decorator specifies an element named `<my-app>`.
+The CSS `selector` in the `@Component` decorator specifies an element named `<app-root>`.
 That element is a placeholder in the body of your `index.html` file:
 
 
@@ -102,9 +104,9 @@ That element is a placeholder in the body of your `index.html` file:
 
 
 
-When you bootstrap with the `AppComponent` class (in <code>main.ts</code>), Angular looks for a `<my-app>`
+When you bootstrap with the `AppComponent` class (in <code>main.ts</code>), Angular looks for a `<app-root>`
 in the `index.html`, finds it, instantiates an instance of `AppComponent`, and renders it
-inside the `<my-app>` tag.
+inside the `<app-root>` tag.
 
 Now run the app. It should display the title and hero name:
 
@@ -131,13 +133,23 @@ is simpler without the additional HTML file.
 
 In either style, the template data bindings have the same access to the component's properties.
 
+<div class="alert is-helpful">
+  
+  By default, the Angular CLI generates components with a template file. You can override that with:
+
+  <code-example hideCopy language="sh" class="code-shell">
+    ng generate component hero -it
+  </code-example>
+
+</div>
+
 
 ## Constructor or variable initialization?
 
-Although this example uses variable assignment to initialize the components, you can instead declare and initialize the properties using a constructor:
+Although this example uses variable assignment to initialize the components, you could instead declare and initialize the properties using a constructor:
 
 
-<code-example path="displaying-data/src/app/app-ctor.component.ts" linenums="false" title="src/app/app-ctor.component.ts (class)" region="class">
+<code-example path="displaying-data/src/app/app-ctor.component.ts" linenums="false" region="class">
 
 </code-example>
 
@@ -231,12 +243,16 @@ At the moment, the binding is to an array of strings.
 In real applications, most bindings are to more specialized objects.
 
 To convert this binding to use specialized objects, turn the array
-of hero names into an array of `Hero` objects. For that you'll need a `Hero` class.
+of hero names into an array of `Hero` objects. For that you'll need a `Hero` class:
 
-Create a new file in the `app` folder called  `hero.ts` with the following code:
+<code-example language="sh" class="code-shell">
+  ng generate class hero
+</code-example>
+
+With the following code:
 
 
-<code-example path="displaying-data/src/app/hero.ts" linenums="false" title="src/app/hero.ts (excerpt)">
+<code-example path="displaying-data/src/app/hero.ts" linenums="false" title="src/app/hero.ts">
 
 </code-example>
 

aio/content/guide/form-validation.md

@@ -40,7 +40,7 @@ Note the following:
 also carries a custom validator directive, `forbiddenName`. For more 
 information, see [Custom validators](guide/form-validation#custom-validators) section.
 
-* `#name="ngModel"` exports `NgModel` into a local variable callled `name`. `NgModel` mirrors many of the properties of its underlying 
+* `#name="ngModel"` exports `NgModel` into a local variable called `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.
 

aio/content/guide/forms.md

@@ -29,19 +29,13 @@ You can run the <live-example></live-example> in Plunker and download the code f
 You can build forms by writing templates in the Angular [template syntax](guide/template-syntax) with
 the form-specific directives and techniques described in this page.
 
-
 <div class="l-sub-section">
 
-
-
-You can also use a reactive (or model-driven) approach to build forms.
-However, this page focuses on template-driven forms.
-
+  You can also use a reactive (or model-driven) approach to build forms.
+  However, this page focuses on template-driven forms.
 
 </div>
 
-
-
 You can build almost any form with an Angular template&mdash;login forms, contact forms, and pretty much any business form.
 You can lay out the controls creatively, bind them to data, specify validation rules and display validation errors,
 conditionally enable or disable specific controls, trigger built-in visual feedback, and much more.
@@ -51,13 +45,10 @@ otherwise wrestle with yourself.
 
 You'll learn to build a template-driven form that looks like this:
 
-
 <figure>
   <img src="generated/images/guide/forms/hero-form-1.png" alt="Clean Form">
 </figure>
 
-
-
 The *Hero Employment Agency* uses this form to maintain personal information about heroes.
 Every hero needs a job. It's the company mission to match the right hero with the right crisis.
 
@@ -65,27 +56,18 @@ Two of the three fields on this form are required. Required fields have a green
 
 If you delete the hero name, the form displays a validation error in an attention-grabbing style:
 
-
 <figure>
   <img src="generated/images/guide/forms/hero-form-2.png" alt="Invalid, Name Required">
 </figure>
 
-
-
 Note that the *Submit* button is disabled, and the "required" bar to the left of the input control changes from green to red.
 
-
 <div class="l-sub-section">
 
-
-
-You can customize the colors and location of the "required" bar with standard CSS.
-
+  You can customize the colors and location of the "required" bar with standard CSS.
 
 </div>
 
-
-
 You'll build this form in small steps:
 
 1. Create the `Hero` model class.
@@ -98,11 +80,15 @@ You'll build this form in small steps:
 1. Handle form submission with *ngSubmit*.
 1. Disable the form’s *Submit* button until the form is valid.
 
-
 ## Setup
 
-Follow the [setup](guide/setup) instructions for creating a new project
-named angular-forms.
+Create a new project named <code>angular-forms</code>:
+
+<code-example language="sh" class="code-shell">
+
+  ng new angular-forms
+
+</code-example>
 
 ## Create the Hero model class
 
@@ -113,15 +99,20 @@ A model can be as simple as a "property bag" that holds facts about a thing of a
 That describes well the `Hero` class with its three required fields (`id`, `name`, `power`)
 and one optional field (`alterEgo`).
 
-In the `app` directory, create the following file with the given content:
+Using the Angular CLI, generate a new class named `Hero`:
 
+<code-example language="sh" class="code-shell">
+
+  ng generate class Hero
+
+</code-example>
+
+With this content:
 
 <code-example path="forms/src/app/hero.ts" title="src/app/hero.ts">
 
 </code-example>
 
-
-
 It's an anemic model with few requirements and no behavior. Perfect for the demo.
 
 The TypeScript compiler generates a public field for each `public` constructor parameter and
@@ -131,28 +122,29 @@ The `alterEgo` is optional, so the constructor lets you omit it; note the questi
 
 You can create a new hero like this:
 
-
-<code-example path="forms/src/app/hero-form.component.ts" linenums="false" title="src/app/hero-form.component.ts (SkyDog)" region="SkyDog">
+<code-example path="forms/src/app/hero-form/hero-form.component.ts" linenums="false" region="SkyDog">
 
 </code-example>
 
-
-
-
 ## Create a form component
 
 An Angular form has two parts: an HTML-based _template_ and a component _class_
 to handle data and user interactions programmatically.
 Begin with the class because it states, in brief, what the hero editor can do.
 
-Create the following file with the given content:
+Using the Angular CLI, generate a new component named `HeroForm`:
 
+<code-example language="sh" class="code-shell">
 
-<code-example path="forms/src/app/hero-form.component.ts" linenums="false" title="src/app/hero-form.component.ts (v1)" region="v1">
+  ng generate component HeroForm
 
 </code-example>
 
+With this content:
 
+<code-example path="forms/src/app/hero-form/hero-form.component.ts" linenums="false" title="src/app/hero-form/hero-form.component.ts (v1)" region="v1">
+
+</code-example>
 
 There’s nothing special about this component, nothing form-specific,
 nothing to distinguish it from any component you've written before.
@@ -173,21 +165,6 @@ parent component. This is not a concern now and these future changes won't affec
 * You added a `diagnostic` property to return a JSON representation of the model.
 It'll help you see what you're doing during development; you've left yourself a cleanup note to discard it later.
 
-### Why the separate template file?
-
-Why don't you write the template inline in the component file as you often do elsewhere?
-
-There is no "right" answer for all occasions. Inline templates are useful when they are short.
-Most form templates aren't short. TypeScript and JavaScript files generally aren't the best place to
-write (or read) large stretches of HTML, and few editors help with files that have a mix of HTML and code.
-
-Form templates tend to be large, even when displaying a small number of fields,
-so it's usually best to put the HTML template in a separate file.
-You'll write that template file in a moment. First,
-revise the `app.module.ts` and `app.component.ts` to make use of the new `HeroFormComponent`.
-
-
-
 ## Revise *app.module.ts*
 
 `app.module.ts` defines the application's root module. In it you identify the external modules you'll use in the application
@@ -196,89 +173,57 @@ and declare the components that belong to this module, such as the `HeroFormComp
 Because template-driven forms are in their own module, you need to add the `FormsModule` to the array of
 `imports` for the application module before you can use forms.
 
-Replace the contents of the "QuickStart" version with the following:
+Update it with the following:
 
 <code-example path="forms/src/app/app.module.ts" title="src/app/app.module.ts">
 
 </code-example>
 
-
-
-
-
 <div class="l-sub-section">
 
+  There are two changes:
 
+  1. You import `FormsModule`.
 
-There are three changes:
-
-1. You import `FormsModule` and the new `HeroFormComponent`.
-
-1. You add the `FormsModule` to the list of `imports` defined in the `@NgModule` decorator. This gives the application
-access to all of the template-driven forms features, including `ngModel`.
-
-1. You add the `HeroFormComponent` to the list of `declarations` defined in the `@NgModule` decorator. This makes
-the `HeroFormComponent` component visible throughout this module.
-
+  1. You add the `FormsModule` to the list of `imports` defined in the `@NgModule` decorator. This gives the application
+  access to all of the template-driven forms features, including `ngModel`.
 
 </div>
 
-
-
 <div class="alert is-important">
 
-
-
-If a component, directive, or pipe belongs to a module in the `imports` array, ​_don't_​ re-declare it in the `declarations` array.
-If you wrote it and it should belong to this module, ​_do_​ declare it in the `declarations` array.
-
+  If a component, directive, or pipe belongs to a module in the `imports` array, ​_don't_​ re-declare it in the `declarations` array.
+  If you wrote it and it should belong to this module, ​_do_​ declare it in the `declarations` array.
 
 </div>
 
-
-
-
-## Revise *app.component.ts*
+## Revise *app.component.html*
 
 `AppComponent` is the application's root component. It will host the new `HeroFormComponent`.
 
-Replace the contents of the "QuickStart" version with the following:
+Replace the contents of its template with the following:
 
-
-<code-example path="forms/src/app/app.component.ts" title="src/app/app.component.ts">
+<code-example path="forms/src/app/app.component.html" title="src/app/app.component.html">
 
 </code-example>
 
-
-
-
-
 <div class="l-sub-section">
 
-
-
-There are only two changes.
-The `template` is simply the new element tag identified by the component's `selector` property.
-This displays the hero form when the application component is loaded.
-You've also dropped the `name` field from the class body.
-
+  There are only two changes.
+  The `template` is simply the new element tag identified by the component's `selector` property.
+  This displays the hero form when the application component is loaded.
+  Don't forget to remove the `name` field from the class body as well.
 
 </div>
 
-
-
-
 ## Create an initial HTML form template
 
-Create the template file with the following contents:
+Update the template file with the following contents:
 
-
-<code-example path="forms/src/app/hero-form.component.html" region="start" title="src/app/hero-form.component.html">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" region="start" title="src/app/hero-form/hero-form.component.html">
 
 </code-example>
 
-
-
 The language is simply HTML5. You're presenting two of the `Hero` fields, `name` and `alterEgo`, and
 opening them up for user input in input boxes.
 
@@ -289,52 +234,34 @@ You added a *Submit* button at the bottom with some classes on it for styling.
 
 *You're not using Angular yet*. There are no bindings or extra directives, just layout.
 
-
 <div class="l-sub-section">
 
-
-
-In template driven forms, if you've imported `FormsModule`, you don't have to do anything
-to the `<form>` tag in order to make use of `FormsModule`. Continue on to see how this works.
-
+  In template driven forms, if you've imported `FormsModule`, you don't have to do anything
+  to the `<form>` tag in order to make use of `FormsModule`. Continue on to see how this works.
 
 </div>
 
-
-
 The `container`, `form-group`, `form-control`, and `btn` classes
 come from [Twitter Bootstrap](http://getbootstrap.com/css/). These classes are purely cosmetic.
 Bootstrap gives the form a little style.
 
-
 <div class="callout is-important">
 
+  <header>
+    Angular forms don't require a style library
+  </header>
 
-
-<header>
-  Angular forms don't require a style library
-</header>
-
-
-
-Angular makes no use of the `container`, `form-group`, `form-control`, and `btn` classes or
-the styles of any external library. Angular apps can use any CSS library or none at all.
-
+  Angular makes no use of the `container`, `form-group`, `form-control`, and `btn` classes or
+  the styles of any external library. Angular apps can use any CSS library or none at all.
 
 </div>
 
+To add the stylesheet, open `styles.css` and add the following import line at the top:
 
-
-To add the stylesheet, open `index.html` and add the following link to the `<head>`:
-
-
-<code-example path="forms/src/index.html" linenums="false" title="src/index.html (bootstrap)" region="bootstrap">
+<code-example path="forms/src/styles.1.css" linenums="false" title="src/styles.css">
 
 </code-example>
 
-
-
-
 ## Add powers with _*ngFor_
 
 The hero must choose one superpower from a fixed list of agency-approved powers.
@@ -346,13 +273,10 @@ a technique seen previously in the [Displaying Data](guide/displaying-data) page
 
 Add the following HTML *immediately below* the *Alter Ego* group:
 
-
-<code-example path="forms/src/app/hero-form.component.html" linenums="false" title="src/app/hero-form.component.html (powers)" region="powers">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (powers)" region="powers">
 
 </code-example>
 
-
-
 This code repeats the `<option>` tag for each power in the list of powers.
 The `pow` template input variable is a different power in each iteration;
 you display its name using the interpolation syntax.
@@ -363,13 +287,11 @@ you display its name using the interpolation syntax.
 
 Running the app right now would be disappointing.
 
-
 <figure>
   <img src="generated/images/guide/forms/hero-form-3.png" alt="Early form with no binding">
 </figure>
 
 
-
 You don't see hero data because you're not binding to the `Hero` yet.
 You know how to do that from earlier pages.
 [Displaying Data](guide/displaying-data) teaches property binding.
@@ -384,113 +306,83 @@ makes binding the form to the model easy.
 
 Find the `<input>` tag for *Name* and update it like this:
 
-
-<code-example path="forms/src/app/hero-form.component.html" linenums="false" title="src/app/hero-form.component.html (excerpt)" region="ngModelName-1">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="ngModelName-1">
 
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
-You added a diagnostic interpolation after the input tag
-so you can see what you're doing.
-You left yourself a note to throw it away when you're done.
-
+  You added a diagnostic interpolation after the input tag
+  so you can see what you're doing.
+  You left yourself a note to throw it away when you're done.
 
 </div>
 
-
-
 Focus on the binding syntax: `[(ngModel)]="..."`.
 
 You need one more addition to display the data. Declare
 a template variable for the form. Update the `<form>` tag with
 `#heroForm="ngForm"` as follows:
 
-
-<code-example path="forms/src/app/hero-form.component.html" linenums="false" title="src/app/hero-form.component.html (excerpt)" region="template-variable">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="template-variable">
 
 </code-example>
 
-
-
 The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole.
 
-
 <div class="l-sub-section">
 
-{@a ngForm}
+  {@a ngForm}
 
-### The _NgForm_ directive
+  ### The _NgForm_ directive
 
-What `NgForm` directive?
-You didn't add an [NgForm](api/forms/NgForm) directive.
+  What `NgForm` directive?
+  You didn't add an [NgForm](api/forms/NgForm) directive.
 
-Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag.
-
-The `NgForm` directive supplements the `form` element with additional features.
-It holds the controls you created for the elements with an `ngModel` directive
-and `name` attribute, and monitors their properties, including their validity.
-It also has its own `valid` property which is true only *if every contained
-control* is valid.
+  Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag.
 
+  The `NgForm` directive supplements the `form` element with additional features.
+  It holds the controls you created for the elements with an `ngModel` directive
+  and `name` attribute, and monitors their properties, including their validity.
+  It also has its own `valid` property which is true only *if every contained
+  control* is valid.
 
 </div>
 
-
-
 If you ran the app now and started typing in the *Name* input box,
 adding and deleting characters, you'd see them appear and disappear
 from the interpolated text.
 At some point it might look like this:
 
-
 <figure>
   <img src="generated/images/guide/forms/ng-model-in-action.png" alt="ngModel in action">
 </figure>
 
-
-
 The diagnostic is evidence that values really are flowing from the input box to the model and
 back again.
 
-
 <div class="l-sub-section">
 
-
-
-That's *two-way data binding*.
-For more information, see
-[Two-way binding with NgModel](guide/template-syntax#ngModel) on the
-the [Template Syntax](guide/template-syntax) page.
-
+  That's *two-way data binding*.
+  For more information, see
+  [Two-way binding with NgModel](guide/template-syntax#ngModel) on the
+  the [Template Syntax](guide/template-syntax) page.
 
 </div>
 
-
-
 Notice that you also added a `name` attribute to the `<input>` tag and set it to "name",
 which makes sense for the hero's name. Any unique value will do, but using a descriptive name is helpful.
 Defining a `name` attribute is a requirement when using `[(ngModel)]` in combination with a form.
 
-
 <div class="l-sub-section">
 
-
-
-Internally, Angular creates `FormControl` instances and
-registers them with an `NgForm` directive that Angular attached to the `<form>` tag.
-Each `FormControl` is registered under the name you assigned to the `name` attribute.
-Read more in the previous section, [The NgForm directive](guide/forms#ngForm).
-
+  Internally, Angular creates `FormControl` instances and
+  registers them with an `NgForm` directive that Angular attached to the `<form>` tag.
+  Each `FormControl` is registered under the name you assigned to the `name` attribute.
+  Read more in the previous section, [The NgForm directive](guide/forms#ngForm).
 
 </div>
 
-
-
 Add similar `[(ngModel)]` bindings and `name` attributes to *Alter Ego* and *Hero Power*.
 You'll ditch the input box binding message
 and add a new binding (at the top) to the component's `diagnostic` property.
@@ -498,42 +390,29 @@ Then you can confirm that two-way data binding works *for the entire hero model*
 
 After revision, the core of the form should look like this:
 
-
-<code-example path="forms/src/app/hero-form.component.html" linenums="false" title="src/app/hero-form.component.html (excerpt)" region="ngModel-2">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="ngModel-2">
 
 </code-example>
 
-
-
 <div class="l-sub-section">
 
-
-
-* Each input element has an `id` property that is used by the `label` element's `for` attribute
-to match the label to its input control.
-* Each input element has a `name` property that is required by Angular forms to register the control with the form.
-
+  * Each input element has an `id` property that is used by the `label` element's `for` attribute
+  to match the label to its input control.
+  * Each input element has a `name` property that is required by Angular forms to register the control with the form.
 
 </div>
 
-
-
 If you run the app now and change every hero model property, the form might display like this:
 
-
 <figure>
   <img src="generated/images/guide/forms/ng-model-in-action-2.png" alt="ngModel in action">
 </figure>
 
-
-
 The diagnostic near the top of the form
 confirms that all of your changes are reflected in the model.
 
 *Delete* the `{{diagnostic}}` binding at the top as it has served its purpose.
 
-
-
 ## Track control state and validity with _ngModel_
 
 Using `ngModel` in a form gives you more than just two-way data binding. It also tells
@@ -542,7 +421,6 @@ you if the user touched the control, if the value changed, or if the value becam
 The *NgModel* directive doesn't just track state; it updates the control with special Angular CSS classes that reflect the state.
 You can leverage those class names to change the appearance of the control.
 
-
 <table>
 
   <tr>
@@ -611,18 +489,13 @@ You can leverage those class names to change the appearance of the control.
 
 </table>
 
-
-
 Temporarily add a [template reference variable](guide/template-syntax#ref-vars) named `spy`
 to the _Name_ `<input>` tag and use it to display the input's CSS classes.
 
-
-<code-example path="forms/src/app/hero-form.component.html" linenums="false" title="src/app/hero-form.component.html (excerpt)" region="ngModelName-2">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="ngModelName-2">
 
 </code-example>
 
-
-
 Now run the app and look at the _Name_ input box.
 Follow these steps *precisely*:
 
@@ -633,61 +506,44 @@ Follow these steps *precisely*:
 
 The actions and effects are as follows:
 
-
 <figure>
   <img src="generated/images/guide/forms/control-state-transitions-anim.gif" alt="Control State Transition">
 </figure>
 
-
-
 You should see the following transitions and class names:
 
-
 <figure>
   <img src="generated/images/guide/forms/ng-control-class-changes.png" alt="Control state transitions">
 </figure>
 
-
-
 The `ng-valid`/`ng-invalid` pair is the most interesting, because you want to send a
 strong visual signal when the values are invalid. You also want to mark required fields.
 To create such visual feedback, add definitions for the `ng-*` CSS classes.
 
 *Delete* the `#spy` template reference variable and the `TODO` as they have served their purpose.
 
-
-
 ## Add custom CSS for visual feedback
 
 You can mark required fields and invalid data at the same time with a colored bar
 on the left of the input box:
 
-
 <figure>
   <img src="generated/images/guide/forms/validity-required-indicator.png" alt="Invalid Form">
 </figure>
 
-
-
 You achieve this effect by adding these class definitions to a new `forms.css` file
 that you add to the project as a sibling to `index.html`:
 
-
 <code-example path="forms/src/assets/forms.css" title="src/assets/forms.css">
 
 </code-example>
 
-
-
 Update the `<head>` of `index.html` to include this style sheet:
 
-
 <code-example path="forms/src/index.html" linenums="false" title="src/index.html (styles)" region="styles">
 
 </code-example>
 
-
-
 ## Show and hide validation error messages
 
 You can improve the form. The _Name_ input box is required and clearing it turns the bar red.
@@ -696,13 +552,10 @@ Leverage the control's state to reveal a helpful message.
 
 When the user deletes the name, the form should look like this:
 
-
 <figure>
   <img src="generated/images/guide/forms/name-required-error.png" alt="Name required">
 </figure>
 
-
-
 To achieve this effect, extend the `<input>` tag with the following:
 
 * A [template reference variable](guide/template-syntax#ref-vars).
@@ -710,41 +563,29 @@ To achieve this effect, extend the `<input>` tag with the following:
 
 Here's an example of an error message added to the _name_ input box:
 
-
-<code-example path="forms/src/app/hero-form.component.html" linenums="false" title="src/app/hero-form.component.html (excerpt)" region="name-with-error-msg">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="name-with-error-msg">
 
 </code-example>
 
-
-
 You need a template reference variable to access the input box's Angular control from within the template.
 Here you created a variable called `name` and gave it the value "ngModel".
 
-
 <div class="l-sub-section">
 
-
-
-Why "ngModel"?
-A directive's [exportAs](api/core/Directive) property
-tells Angular how to link the reference variable to the directive.
-You set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
-
+  Why "ngModel"?
+  A directive's [exportAs](api/core/Directive) property
+  tells Angular how to link the reference variable to the directive.
+  You set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
 
 </div>
 
-
-
 You control visibility of the name error message by binding properties of the `name`
 control to the message `<div>` element's `hidden` property.
 
-
-<code-example path="forms/src/app/hero-form.component.html" linenums="false" title="src/app/hero-form.component.html (hidden-error-msg)" region="hidden-error-msg">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (hidden-error-msg)" region="hidden-error-msg">
 
 </code-example>
 
-
-
 In this example, you hide the message when the control is valid or pristine;
 "pristine" means the user hasn't changed the value since it was displayed in this form.
 
@@ -767,19 +608,14 @@ power to valid values.
 Now you'll add a new hero in this form.
 Place a *New Hero* button at the bottom of the form and bind its click event to a `newHero` component method.
 
-
-<code-example path="forms/src/app/hero-form.component.html" region="new-hero-button-no-reset" title="src/app/hero-form.component.html (New Hero button)">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" region="new-hero-button-no-reset" title="src/app/hero-form/hero-form.component.html (New Hero button)">
 
 </code-example>
 
-
-
-<code-example path="forms/src/app/hero-form.component.ts" region="new-hero" title="src/app/hero-form.component.ts (New Hero method)" linenums="false">
+<code-example path="forms/src/app/hero-form/hero-form.component.ts" region="new-hero" title="src/app/hero-form/hero-form.component.ts (New Hero method)" linenums="false">
 
 </code-example>
 
-
-
 Run the application again, click the *New Hero* button, and the form clears.
 The *required* bars to the left of the input box are red, indicating invalid `name` and `power` properties.
 That's understandable as these are required fields.
@@ -797,17 +633,12 @@ Replacing the hero object *did not restore the pristine state* of the form contr
 You have to clear all of the flags imperatively, which you can do
 by calling the form's `reset()` method after calling the `newHero()` method.
 
-
-<code-example path="forms/src/app/hero-form.component.html" region="new-hero-button-form-reset" title="src/app/hero-form.component.html (Reset the form)">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" region="new-hero-button-form-reset" title="src/app/hero-form/hero-form.component.html (Reset the form)">
 
 </code-example>
 
-
-
 Now clicking "New Hero" resets both the form and its control flags.
 
-
-
 ## Submit the form with _ngSubmit_
 
 The user should be able to submit this form after filling it in.
@@ -819,13 +650,10 @@ A "form submit" is useless at the moment.
 To make it useful, bind the form's `ngSubmit` event property
 to the hero form component's `onSubmit()` method:
 
-
-<code-example path="forms/src/app/hero-form.component.html" linenums="false" title="src/app/hero-form.component.html (ngSubmit)" region="ngSubmit">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (ngSubmit)" region="ngSubmit">
 
 </code-example>
 
-
-
 You'd already defined a template reference variable,
 `#heroForm`, and initialized it with the value "ngForm".
 Now, use that variable to access the form with the Submit button.
@@ -835,13 +663,10 @@ You'll bind the form's overall validity via
 the `heroForm` variable to the button's `disabled` property
 using an event binding. Here's the code:
 
-
-<code-example path="forms/src/app/hero-form.component.html" linenums="false" title="src/app/hero-form.component.html (submit-button)" region="submit-button">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (submit-button)" region="submit-button">
 
 </code-example>
 
-
-
 If you run the application now, you find that the button is enabled&mdash;although
 it doesn't do anything useful yet.
 
@@ -857,65 +682,48 @@ For you, it was as simple as this:
 1. Define a template reference variable on the (enhanced) form element.
 2. Refer to that variable in a button many lines away.
 
-
-
 ## Toggle two form regions (extra credit)
 
 Submitting the form isn't terribly dramatic at the moment.
 
-
 <div class="l-sub-section">
 
-
-
-An unsurprising observation for a demo. To be honest,
-jazzing it up won't teach you anything new about forms.
-But this is an opportunity to exercise some of your newly won
-binding skills.
-If you aren't interested, skip to this page's conclusion.
-
+  An unsurprising observation for a demo. To be honest,
+  jazzing it up won't teach you anything new about forms.
+  But this is an opportunity to exercise some of your newly won
+  binding skills.
+  If you aren't interested, skip to this page's conclusion.
 
 </div>
 
-
-
 For a more strikingly visual effect,
 hide the data entry area and display something else.
 
 Wrap the form in a `<div>` and bind
 its `hidden` property to the `HeroFormComponent.submitted` property.
 
-
-<code-example path="forms/src/app/hero-form.component.html" linenums="false" title="src/app/hero-form.component.html (excerpt)" region="edit-div">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="edit-div">
 
 </code-example>
 
-
-
 The main form is visible from the start because the
 `submitted` property is false until you submit the form,
 as this fragment from the `HeroFormComponent` shows:
 
-
-<code-example path="forms/src/app/hero-form.component.ts" linenums="false" title="src/app/hero-form.component.ts (submitted)" region="submitted">
+<code-example path="forms/src/app/hero-form/hero-form.component.ts" linenums="false" title="src/app/hero-form/hero-form.component.ts (submitted)" region="submitted">
 
 </code-example>
 
-
-
 When you click the *Submit* button, the `submitted` flag becomes true and the form disappears
 as planned.
 
 Now the app needs to show something else while the form is in the submitted state.
 Add the following HTML below the `<div>` wrapper you just wrote:
 
-
-<code-example path="forms/src/app/hero-form.component.html" linenums="false" title="src/app/hero-form.component.html (excerpt)" region="submitted">
+<code-example path="forms/src/app/hero-form/hero-form.component.html" linenums="false" title="src/app/hero-form/hero-form.component.html (excerpt)" region="submitted">
 
 </code-example>
 
-
-
 There's the hero again, displayed read-only with interpolation bindings.
 This `<div>` appears only while the component is in the submitted state.
 
@@ -924,9 +732,7 @@ that clears the `submitted` flag.
 
 When you click the *Edit* button, this block disappears and the editable form reappears.
 
-
-
-## Conclusion
+## Summary
 
 The Angular form discussed in this page takes advantage of the following
 framework features to provide support for data modification, validation, and more:
@@ -941,89 +747,15 @@ framework features to provide support for data modification, validation, and mor
 * Controlling the *Submit* button's enabled state by binding to `NgForm` validity.
 * Custom CSS classes that provide visual feedback to users about invalid controls.
 
-The final project folder structure should look like this:
-
-
-<div class='filetree'>
-
-  <div class='file'>
-    angular-forms
-  </div>
-
-  <div class='children'>
-
-    <div class='file'>
-      src
-    </div>
-
-    <div class='children'>
-
-      <div class='file'>
-        app
-      </div>
-
-      <div class='children'>
-
-        <div class='file'>
-          app.component.ts
-        </div>
-
-        <div class='file'>
-          app.module.ts
-        </div>
-
-        <div class='file'>
-          hero.ts
-        </div>
-
-        <div class='file'>
-          hero-form.component.html
-        </div>
-
-        <div class='file'>
-          hero-form.component.ts
-        </div>
-
-      </div>
-
-      <div class='file'>
-        main.ts
-      </div>
-
-      <div class='file'>
-        tsconfig.json
-      </div>
-
-      <div class='file'>
-        index.html
-      </div>
-
-    </div>
-
-    <div class='file'>
-      node_modules ...
-    </div>
-
-    <div class='file'>
-      package.json
-    </div>
-
-  </div>
-
-</div>
-
-
-
 Here’s the code for the final version of the application:
 
-
 <code-tabs>
 
-  <code-pane title="hero-form.component.ts" path="forms/src/app/hero-form.component.ts" region="final">
+  <code-pane title="hero-form/hero-form.component.ts" path="forms/src/app/hero-form/hero-form.component.ts" region="final">
 
   </code-pane>
 
-  <code-pane title="hero-form.component.html" path="forms/src/app/hero-form.component.html" region="final">
+  <code-pane title="hero-form/hero-form.component.html" path="forms/src/app/hero-form/hero-form.component.html" region="final">
 
   </code-pane>
 
@@ -1035,6 +767,10 @@ Here’s the code for the final version of the application:
 
   </code-pane>
 
+  <code-pane title="app.component.html" path="forms/src/app/app.component.html">
+
+  </code-pane>
+
   <code-pane title="app.component.ts" path="forms/src/app/app.component.ts">
 
   </code-pane>
@@ -1043,10 +779,6 @@ Here’s the code for the final version of the application:
 
   </code-pane>
 
-  <code-pane title="index.html" path="forms/src/index.html">
-
-  </code-pane>
-
   <code-pane title="forms.css" path="forms/src/assets/forms.css">
 
   </code-pane>

aio/content/guide/glossary.md

@@ -132,7 +132,6 @@ You launch an Angular application by "bootstrapping" it using the application ro
 
 Bootstrapping identifies an application's top level "root" [component](guide/glossary#component),
 which is the first component that is loaded for the application.
-For more information, see the [Setup](guide/setup) page.
 
 You can bootstrap multiple apps in the same `index.html`, each app with its own top-level root.
 
@@ -150,6 +149,12 @@ camelCase is also known as *lower camel case* to distinguish it from *upper came
 In Angular documentation, "camelCase" always means *lower camel case*.
 
 
+## CLI
+
+The Angular CLI is a `command line interface` tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
+
+Learn more in the [Getting Started](guide/quickstart) guide.
+
 {@a component}
 
 
@@ -496,7 +501,7 @@ is based on the [ES2015 module standard](http://www.2ality.com/2014/09/es6-modul
 An application that adheres to this standard requires a module loader to
 load modules on request and resolve inter-module dependencies.
 Angular doesn't include a module loader and doesn't have a preference
-for any particular third-party library (although most examples use SystemJS).
+for any particular third-party library.
 You can use any module library that conforms to the standard.
 
 Modules are typically named after the file in which the exported thing is defined.

aio/content/guide/npm-packages.md

@@ -28,11 +28,11 @@ you already have projects running on your machine that use other versions of nod
 
 Both `npm` and `yarn` install packages identified in a [**package.json**](https://docs.npmjs.com/files/package.json) file.
 
-The CLI `ng new` command creates a default `packages.json` file for your project.
-This `packages.json` specifies _a starter set of packages_ that work well together and 
+The CLI `ng new` command creates a default `package.json` file for your project.
+This `package.json` specifies _a starter set of packages_ that work well together and 
 jointly support many common application scenarios.
 
-You will add packages to `packages.json` as your application evolves.
+You will add packages to `package.json` as your application evolves.
 You may even remove some.
 
 This guide focuses on the most important packages in the starter set.

aio/content/guide/reactive-forms.md

@@ -128,11 +128,13 @@ Then you'll learn about the [Angular form classes](guide/reactive-forms#essentia
 
 ## Setup
 
-Follow the steps in the [_Setup_ guide](guide/setup "Setup guide")
-for creating a new project folder (perhaps called `reactive-forms`)
-based on the _QuickStart seed_.
+Create a new project named <code>angular-reactive-forms</code>:
 
+<code-example language="sh" class="code-shell">
 
+  ng new angular-reactive-forms
+
+</code-example>
 
 {@a data-model}
 
@@ -140,15 +142,21 @@ based on the _QuickStart seed_.
 ## Create a data model
 The focus of this guide is a reactive forms component that edits a hero.
 You'll need a `hero` class and some hero data.
-Create a new `data-model.ts` file in the `app` directory and copy the content below into it.
 
+Using the CLI, generate a new class named `data-model`:
+
+<code-example language="sh" class="code-shell">
+
+  ng generate class data-model
+
+</code-example>
+
+And copy the content below:
 
 <code-example path="reactive-forms/src/app/data-model.ts" title="src/app/data-model.ts" linenums="false">
 
 </code-example>
 
-
-
 The file exports two classes and two constants. The `Address`
 and `Hero` classes define the application _data model_.
 The `heroes` and `states` constants supply the test data.
@@ -159,32 +167,26 @@ The `heroes` and `states` constants supply the test data.
 
 
 ## Create a _reactive forms_ component
-Make a new file called
-`hero-detail.component.ts` in the `app` directory and import these symbols:
 
+Generate a new component named `HeroDetail`:
 
-<code-example path="reactive-forms/src/app/hero-detail-1.component.ts" region="imports" title="src/app/hero-detail.component.ts" linenums="false">
+<code-example language="sh" class="code-shell">
+
+  ng generate component HeroDetail
 
 </code-example>
 
+And import:
 
-
-Now enter the `@Component` decorator that specifies the `HeroDetailComponent` metadata:
-
-
-<code-example path="reactive-forms/src/app/hero-detail.component.ts" region="metadata" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-1.component.ts" region="import" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
-
-
-Next, create an exported `HeroDetailComponent` class with a `FormControl`.
+Next, update the `HeroDetailComponent` class with a `FormControl`.
 `FormControl` is a directive that allows you to create and manage
 a `FormControl` instance directly.
 
-
-
-<code-example path="reactive-forms/src/app/hero-detail-1.component.ts" region="v1" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-1.component.ts" region="v1" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -218,10 +220,10 @@ read the [Form Validation](guide/form-validation) guide.
 
 ## Create the template
 
-Now create the component's template, `src/app/hero-detail.component.html`, with the following markup.
+Now update the component's template, with the following markup.
 
 
-<code-example path="reactive-forms/src/app/hero-detail-1.component.html" region="simple-control" title="src/app/hero-detail.component.html" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-1.component.html" region="simple-control" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
@@ -255,13 +257,11 @@ It _styles_ the form but in no way impacts the logic of the form.
 The HeroDetailComponent template uses `formControlName`
 directive from the `ReactiveFormsModule`.
 
-In this sample, you declare the `HeroDetailComponent` in the `AppModule`.
-Therefore, do the following three things in `app.module.ts`:
+Do the following two things in `app.module.ts`:
 
 1. Use a JavaScript `import` statement to access
-the `ReactiveFormsModule` and the `HeroDetailComponent`.
+the `ReactiveFormsModule`.
 1. Add `ReactiveFormsModule` to the `AppModule`'s `imports` list.
-1. Add `HeroDetailComponent` to the declarations array.
 
 
 <code-example path="reactive-forms/src/app/app.module.ts" region="v1" title="src/app/app.module.ts (excerpt)" linenums="false">
@@ -277,7 +277,7 @@ the `ReactiveFormsModule` and the `HeroDetailComponent`.
 ## Display the _HeroDetailComponent_
 Revise the `AppComponent` template so it displays the `HeroDetailComponent`.
 
-<code-example path="reactive-forms/src/app/app.component.1.ts" title="src/app/app.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/app.component.1.html" title="src/app/app.component.html" linenums="false">
 
 </code-example>
 
@@ -312,10 +312,10 @@ You'll learn more about these classes as you work through this guide.
 
 ### Style the app
 You used bootstrap CSS classes in the template HTML of both the `AppComponent` and the `HeroDetailComponent`.
-Add the `bootstrap` _CSS stylesheet_ to the head of `index.html`:
+Add the `bootstrap` _CSS stylesheet_ to the head of `styles.css`:
 
 
-<code-example path="reactive-forms/src/index.html" region="bootstrap" title="index.html" linenums="false">
+<code-example path="reactive-forms/src/styles.1.css" title="styles.css" linenums="false">
 
 </code-example>
 
@@ -340,7 +340,7 @@ This is simple to do. To add a `FormGroup`, add it to the imports section
 of `hero-detail.component.ts`:
 
 
-<code-example path="reactive-forms/src/app/hero-detail-2.component.ts" region="imports" title="src/app/hero-detail.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-2.component.ts" region="imports" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
@@ -349,7 +349,7 @@ of `hero-detail.component.ts`:
 In the class, wrap the `FormControl` in a `FormGroup` called `heroForm` as follows:
 
 
-<code-example path="reactive-forms/src/app/hero-detail-2.component.ts" region="v2" title="src/app/hero-detail.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-2.component.ts" region="v2" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
@@ -359,7 +359,7 @@ Now that you've made changes in the class, they need to be reflected in the
 template. Update `hero-detail.component.html` by replacing it with the following.
 
 
-<code-example path="reactive-forms/src/app/hero-detail-2.component.html" region="basic-form" title="src/app/hero-detail.component.html" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-2.component.html" region="basic-form" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
@@ -418,7 +418,7 @@ To see the form model, add the following line after the
 closing `form` tag in the `hero-detail.component.html`:
 
 
-<code-example path="reactive-forms/src/app/hero-detail-3.component.html" region="form-value-json" title="src/app/hero-detail.component.html" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-3.component.html" region="form-value-json" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
@@ -458,7 +458,7 @@ clutter by handling details of control creation for you.
 
 To use `FormBuilder`, you need to import it into `hero-detail.component.ts`:
 
-<code-example path="reactive-forms/src/app/hero-detail-3a.component.ts" region="imports" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-3a.component.ts" region="imports" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -474,7 +474,7 @@ by following this plan:
 
 The revised `HeroDetailComponent` looks like this:
 
-<code-example path="reactive-forms/src/app/hero-detail-3a.component.ts" region="v3a" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-3a.component.ts" region="v3a" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -497,7 +497,7 @@ demonstrates the simplicity of using `Validators.required` in reactive forms.
 
 First, import the `Validators` symbol.
 
-<code-example path="reactive-forms/src/app/hero-detail-3.component.ts" region="imports" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-3.component.ts" region="imports" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -509,7 +509,7 @@ The first item is the initial value for `name`;
 the second is the required validator, `Validators.required`.
 
 
-<code-example path="reactive-forms/src/app/hero-detail-3.component.ts" region="required" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-3.component.ts" region="required" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -529,7 +529,7 @@ Configuring validation is harder in template-driven forms where you must wrap va
 Update the diagnostic message at the bottom of the template to display the form's validity status.
 
 
-<code-example path="reactive-forms/src/app/hero-detail-3.component.html" region="form-value-json" title="src/app/hero-detail.component.html (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-3.component.html" region="form-value-json" title="src/app/hero-detail/hero-detail.component.html (excerpt)" linenums="false">
 
 </code-example>
 
@@ -564,7 +564,7 @@ A hero has an address, a super power and sometimes a sidekick too.
 The address has a state property. The user will select a state with a `<select>` box and you'll populate
 the `<option>` elements with states. So import `states` from `data-model.ts`.
 
-<code-example path="reactive-forms/src/app/hero-detail-4.component.ts" region="imports" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-4.component.ts" region="imports" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -573,7 +573,7 @@ the `<option>` elements with states. So import `states` from `data-model.ts`.
 Declare the `states` property and add some address `FormControls` to the `heroForm` as follows.
 
 
-<code-example path="reactive-forms/src/app/hero-detail-4.component.ts" region="v4" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-4.component.ts" region="v4" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -583,7 +583,7 @@ Then add corresponding markup in `hero-detail.component.html`
 within the `form` element.
 
 
-<code-example path="reactive-forms/src/app/hero-detail-4.component.html" title="src/app/hero-detail.component.html" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-4.component.html" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
@@ -640,7 +640,7 @@ Let that be the parent `FormGroup`.
 Use `FormBuilder` again to create a child `FormGroup` that encapsulates the address controls;
 assign the result to a new `address` property of the parent `FormGroup`.
 
-<code-example path="reactive-forms/src/app/hero-detail-5.component.ts" region="v5" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-5.component.ts" region="v5" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -657,7 +657,7 @@ To make this change visually obvious, slip in an `<h4>` header near the top with
 The new _address_ HTML looks like this:
 
 
-<code-example path="reactive-forms/src/app/hero-detail-5.component.html" region="add-group" title="src/app/hero-detail.component.html (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-5.component.html" region="add-group" title="src/app/hero-detail/hero-detail.component.html (excerpt)" linenums="false">
 
 </code-example>
 
@@ -691,7 +691,7 @@ page by adding the following to the template,
 immediately after the `{{form.value | json}}` interpolation as follows:
 
 
-<code-example path="reactive-forms/src/app/hero-detail-5.component.html" region="inspect-value" title="src/app/hero-detail.component.html" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-5.component.html" region="inspect-value" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
@@ -700,7 +700,7 @@ immediately after the `{{form.value | json}}` interpolation as follows:
 To get the state of a `FormControl` that’s inside a `FormGroup`, use dot notation to path to the control.
 
 
-<code-example path="reactive-forms/src/app/hero-detail-5.component.html" region="inspect-child-control" title="src/app/hero-detail.component.html" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-5.component.html" region="inspect-child-control" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
@@ -851,7 +851,7 @@ Recall the definition of `Hero` in `data-model.ts`:
 Here, again, is the component's `FormGroup` definition.
 
 
-<code-example path="reactive-forms/src/app/hero-detail-6.component.ts" region="hero-form-model" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-6.component.ts" region="hero-form-model" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -870,7 +870,7 @@ to the _form model_ with the `patchValue` and `setValue` methods.
 
 Take a moment to refactor the _address_ `FormGroup` definition for brevity and clarity as follows:
 
-<code-example path="reactive-forms/src/app/hero-detail-7.component.ts" region="address-form-group" title="src/app/hero-detail-7.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="address-form-group" title="src/app/hero-detail/hero-detail-7.component.ts" linenums="false">
 
 </code-example>
 
@@ -878,7 +878,7 @@ Take a moment to refactor the _address_ `FormGroup` definition for brevity and c
 
 Also be sure to update the import from `data-model` so you can reference the `Hero` and `Address` classes:
 
-<code-example path="reactive-forms/src/app/hero-detail-7.component.ts" region="import-address" title="src/app/hero-detail-7.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="import-address" title="src/app/hero-detail/hero-detail-7.component.ts" linenums="false">
 
 </code-example>
 
@@ -898,7 +898,7 @@ With **`setValue`**, you assign _every_ form control value _at once_
 by passing in a data object whose properties exactly match the _form model_ behind the `FormGroup`.
 
 
-<code-example path="reactive-forms/src/app/hero-detail-7.component.ts" region="set-value" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="set-value" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -920,7 +920,7 @@ because its shape is similar to the component's `FormGroup` structure.
 You can only show the hero's first address and you must account for the possibility that the `hero` has no addresses at all.
 This explains the conditional setting of the `address` property in the data object argument:
 
-<code-example path="reactive-forms/src/app/hero-detail-7.component.ts" region="set-value-address" title="src/app/hero-detail-7.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="set-value-address" title="src/app/hero-detail/hero-detail-7.component.ts" linenums="false">
 
 </code-example>
 
@@ -932,7 +932,7 @@ by supplying an object of key/value pairs for just the controls of interest.
 
 This example sets only the form's `name` control.
 
-<code-example path="reactive-forms/src/app/hero-detail-6.component.ts" region="patch-value" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-6.component.ts" region="patch-value" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -953,7 +953,7 @@ When the user clicks on a hero, the list component passes the selected hero into
 by binding to its `hero` input property.
 
 
-<code-example path="reactive-forms/src/app/hero-list.component.1.html" title="hero-list.component.html (simplified)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-list/hero-list.component.1.html" title="hero-list.component.html (simplified)" linenums="false">
 
 </code-example>
 
@@ -968,7 +968,7 @@ as the following steps demonstrate.
 First, import the `OnChanges` and `Input` symbols in `hero-detail.component.ts`.
 
 
-<code-example path="reactive-forms/src/app/hero-detail-6.component.ts" region="import-input" title="src/app/hero-detail.component.ts (core imports)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-6.component.ts" region="import-input" title="src/app/hero-detail/hero-detail.component.ts (core imports)" linenums="false">
 
 </code-example>
 
@@ -976,7 +976,7 @@ First, import the `OnChanges` and `Input` symbols in `hero-detail.component.ts`.
 
 Add the `hero` input property.
 
-<code-example path="reactive-forms/src/app/hero-detail-6.component.ts" region="hero" title="src/app/hero-detail-6.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-6.component.ts" region="hero" title="src/app/hero-detail/hero-detail-6.component.ts" linenums="false">
 
 </code-example>
 
@@ -985,7 +985,7 @@ Add the `hero` input property.
 Add the `ngOnChanges` method to the class as follows:
 
 
-<code-example path="reactive-forms/src/app/hero-detail-7.component.ts" region="ngOnChanges-1" title="src/app/hero-detail.component.ts (ngOnchanges)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="ngOnChanges-1" title="src/app/hero-detail/hero-detail.component.ts (ngOnchanges)" linenums="false">
 
 </code-example>
 
@@ -998,7 +998,7 @@ control values from the previous hero are cleared and
 status flags are restored to the _pristine_ state.
 You could call `reset` at the top of `ngOnChanges` like this.
 
-<code-example path="reactive-forms/src/app/hero-detail-7.component.ts" region="reset" title="src/app/hero-detail-7.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="reset" title="src/app/hero-detail/hero-detail-7.component.ts" linenums="false">
 
 </code-example>
 
@@ -1008,7 +1008,7 @@ The `reset` method has an optional `state` value so you can reset the flags _and
 Internally, `reset` passes the argument to `setValue`.
 A little refactoring and `ngOnChanges` becomes this:
 
-<code-example path="reactive-forms/src/app/hero-detail-7.component.ts" region="ngOnChanges" title="src/app/hero-detail.component.ts (ngOnchanges - revised)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="ngOnChanges" title="src/app/hero-detail/hero-detail.component.ts (ngOnchanges - revised)" linenums="false">
 
 </code-example>
 
@@ -1049,7 +1049,7 @@ The techniques involved are covered elsewhere in the documentation, including th
 [here](tutorial/toh-pt3 "ToH: Multiple Components") and [here](tutorial/toh-pt4 "ToH: Services").
 
 If you're coding along with the steps in this reactive forms tutorial,
-create the pertinent files based on the
+generate the pertinent files based on the
 [source code displayed below](guide/reactive-forms#source-code "Reactive Forms source code").
 Notice that `hero-list.component.ts` imports `Observable` and `finally` while `hero.service.ts` imports `Observable`, `of`,
 and `delay` from `rxjs`.
@@ -1073,7 +1073,7 @@ An Angular `FormArray` can display an array of _address_ `FormGroups`.
 
 To get access to the `FormArray` class, import it into `hero-detail.component.ts`:
 
-<code-example path="reactive-forms/src/app/hero-detail-8.component.ts" region="imports" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="imports" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
@@ -1093,7 +1093,7 @@ let the user add or modify addresses (removing addresses is your homework).
 You’ll need to redefine the form model in the `HeroDetailComponent` constructor,
 which currently only displays the first hero address in an _address_ `FormGroup`.
 
-<code-example path="reactive-forms/src/app/hero-detail-7.component.ts" region="address-form-group" title="src/app/hero-detail-7.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="address-form-group" title="src/app/hero-detail/hero-detail-7.component.ts" linenums="false">
 
 </code-example>
 
@@ -1105,7 +1105,7 @@ From the user's point of view, heroes don't have _addresses_.
 _Addresses_ are for mere mortals. Heroes have _secret lairs_!
 Replace the _address_ `FormGroup` definition with a _secretLairs_ `FormArray` definition:
 
-<code-example path="reactive-forms/src/app/hero-detail-8.component.ts" region="secretLairs-form-array" title="src/app/hero-detail-8.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="secretLairs-form-array" title="src/app/hero-detail/hero-detail-8.component.ts" linenums="false">
 
 </code-example>
 
@@ -1139,7 +1139,7 @@ the parent `HeroListComponent` sets the `HeroDetailComponent.hero` input propert
 The following `setAddresses` method replaces the _secretLairs_ `FormArray` with a new `FormArray`,
 initialized by an array of hero address `FormGroups`.
 
-<code-example path="reactive-forms/src/app/hero-detail-8.component.ts" region="set-addresses" title="src/app/hero-detail-8.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="set-addresses" title="src/app/hero-detail/hero-detail-8.component.ts" linenums="false">
 
 </code-example>
 
@@ -1156,7 +1156,7 @@ The `HeroDetailComponent` should be able to display, add, and remove items from
 Use the `FormGroup.get` method to acquire a reference to that `FormArray`.
 Wrap the expression in a `secretLairs` convenience property for clarity and re-use.
 
-<code-example path="reactive-forms/src/app/hero-detail-8.component.ts" region="get-secret-lairs" title="src/app/hero-detail.component.ts (secretLayers property)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="get-secret-lairs" title="src/app/hero-detail/hero-detail.component.ts (secretLayers property)" linenums="false">
 
 </code-example>
 
@@ -1184,7 +1184,7 @@ You'll re-use that index to compose a unique label for each address.
 
 Here's the skeleton for the _secret lairs_ section of the HTML template:
 
-<code-example path="reactive-forms/src/app/hero-detail-8.component.html" region="form-array-skeleton" title="src/app/hero-detail.component.html (*ngFor)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.html" region="form-array-skeleton" title="src/app/hero-detail/hero-detail.component.html (*ngFor)" linenums="false">
 
 </code-example>
 
@@ -1192,7 +1192,7 @@ Here's the skeleton for the _secret lairs_ section of the HTML template:
 
 Here's the complete template for the _secret lairs_ section:
 
-<code-example path="reactive-forms/src/app/hero-detail-8.component.html" region="form-array" title="src/app/hero-detail.component.html (excerpt)">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.html" region="form-array" title="src/app/hero-detail/hero-detail.component.html (excerpt)">
 
 </code-example>
 
@@ -1202,7 +1202,7 @@ Here's the complete template for the _secret lairs_ section:
 
 Add an `addLair` method that gets the _secretLairs_ `FormArray` and appends a new _address_ `FormGroup` to it.
 
-<code-example path="reactive-forms/src/app/hero-detail-8.component.ts" region="add-lair" title="src/app/hero-detail.component.ts (addLair method)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="add-lair" title="src/app/hero-detail/hero-detail.component.ts (addLair method)" linenums="false">
 
 </code-example>
 
@@ -1211,7 +1211,7 @@ Add an `addLair` method that gets the _secretLairs_ `FormArray` and appends a ne
 Place a button on the form so the user can add a new _secret lair_ and wire it to the component's `addLair` method.
 
 
-<code-example path="reactive-forms/src/app/hero-detail-8.component.html" region="add-lair" title="src/app/hero-detail.component.html (addLair button)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.html" region="add-lair" title="src/app/hero-detail/hero-detail.component.html (addLair button)" linenums="false">
 
 </code-example>
 
@@ -1272,7 +1272,7 @@ You don't need to know much about RxJS `Observable` to monitor form control valu
 
 Add the following method to log changes to the value of the _name_ `FormControl`.
 
-<code-example path="reactive-forms/src/app/hero-detail.component.ts" region="log-name-change" title="src/app/hero-detail.component.ts (logNameChange)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.ts" region="log-name-change" title="src/app/hero-detail/hero-detail.component.ts (logNameChange)" linenums="false">
 
 </code-example>
 
@@ -1280,7 +1280,7 @@ Add the following method to log changes to the value of the _name_ `FormControl`
 
 Call it in the constructor, after creating the form.
 
-<code-example path="reactive-forms/src/app/hero-detail-8.component.ts" region="ctor" title="src/app/hero-detail-8.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="ctor" title="src/app/hero-detail/hero-detail-8.component.ts" linenums="false">
 
 </code-example>
 
@@ -1289,7 +1289,7 @@ Call it in the constructor, after creating the form.
 The `logNameChange` method pushes name-change values into a `nameChangeLog` array.
 Display that array at the bottom of the component template with this `*ngFor` binding:
 
-<code-example path="reactive-forms/src/app/hero-detail.component.html" region="name-change-log" title="src/app/hero-detail.component.html (Name change log)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.html" region="name-change-log" title="src/app/hero-detail/hero-detail.component.html (Name change log)" linenums="false">
 
 </code-example>
 
@@ -1328,7 +1328,7 @@ In this sample application, when the user submits the form,
 the `HeroDetailComponent` will pass an instance of the hero _data model_
 to a save method on the injected `HeroService`.
 
-<code-example path="reactive-forms/src/app/hero-detail.component.ts" region="on-submit" title="src/app/hero-detail.component.ts (onSubmit)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.ts" region="on-submit" title="src/app/hero-detail/hero-detail.component.ts (onSubmit)" linenums="false">
 
 </code-example>
 
@@ -1339,7 +1339,7 @@ So you create a new `hero` from a combination of original hero values (the `hero
 and deep copies of the changed form model values, using the `prepareSaveHero` helper.
 
 
-<code-example path="reactive-forms/src/app/hero-detail.component.ts" region="prepare-save-hero" title="src/app/hero-detail.component.ts (prepareSaveHero)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.ts" region="prepare-save-hero" title="src/app/hero-detail/hero-detail.component.ts (prepareSaveHero)" linenums="false">
 
 </code-example>
 
@@ -1368,7 +1368,7 @@ The user cancels changes and reverts the form to the original state by pressing
 
 Reverting is easy. Simply re-execute the `ngOnChanges` method that built the _form model_ from the original, unchanged `hero` _data model_.
 
-<code-example path="reactive-forms/src/app/hero-detail.component.ts" region="revert" title="src/app/hero-detail.component.ts (revert)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.ts" region="revert" title="src/app/hero-detail/hero-detail.component.ts (revert)" linenums="false">
 
 </code-example>
 
@@ -1377,7 +1377,7 @@ Reverting is easy. Simply re-execute the `ngOnChanges` method that built the _fo
 ### Buttons
 Add the "Save" and "Revert" buttons near the top of the component's template:
 
-<code-example path="reactive-forms/src/app/hero-detail.component.html" region="buttons" title="src/app/hero-detail.component.html (Save and Revert buttons)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.html" region="buttons" title="src/app/hero-detail/hero-detail.component.html (Save and Revert buttons)" linenums="false">
 
 </code-example>
 
@@ -1395,9 +1395,7 @@ Try the <live-example plnkr="final" title="Reactive Forms (final) in Plunker"></
 
 
 
-## Conclusion
-
-This page covered:
+## Summary
 
 * How to create a reactive form component and its corresponding template.
 * How to use `FormBuilder` to simplify coding a reactive form.
@@ -1417,6 +1415,10 @@ The key files of the final version are as follows:
 
 <code-tabs>
 
+  <code-pane title="src/app/app.component.html" path="reactive-forms/src/app/app.component.html">
+
+  </code-pane>
+
   <code-pane title="src/app/app.component.ts" path="reactive-forms/src/app/app.component.ts">
 
   </code-pane>
@@ -1425,19 +1427,19 @@ The key files of the final version are as follows:
 
   </code-pane>
 
-  <code-pane title="src/app/hero-detail.component.ts" path="reactive-forms/src/app/hero-detail.component.ts">
+  <code-pane title="src/app/hero-detail/hero-detail.component.ts" path="reactive-forms/src/app/hero-detail/hero-detail.component.ts">
 
   </code-pane>
 
-  <code-pane title="src/app/hero-detail.component.html" path="reactive-forms/src/app/hero-detail.component.html">
+  <code-pane title="src/app/hero-detail/hero-detail.component.html" path="reactive-forms/src/app/hero-detail/hero-detail.component.html">
 
   </code-pane>
 
-  <code-pane title="src/app/hero-list.component.html" path="reactive-forms/src/app/hero-list.component.html">
+  <code-pane title="src/app/hero-list/hero-list.component.html" path="reactive-forms/src/app/hero-list/hero-list.component.html">
 
   </code-pane>
 
-  <code-pane title="src/app/hero-list.component.ts" path="reactive-forms/src/app/hero-list.component.ts">
+  <code-pane title="src/app/hero-list/hero-list.component.ts" path="reactive-forms/src/app/hero-list/hero-list.component.ts">
 
   </code-pane>
 

aio/content/guide/router.md

@@ -3492,7 +3492,7 @@ It will be there when the `CrisisDetailComponent` ask for it.
 
 
 
-**Two critical points**
+**Three critical points**
 
 1. The router's `Resolve` interface is optional.
 The `CrisisDetailResolver` doesn't inherit from a base class.

aio/content/guide/structural-directives.md

@@ -25,7 +25,7 @@ They shape or reshape the DOM's _structure_, typically by adding, removing, or m
 elements.
 
 As with other directives, you apply a structural directive to a _host element_.
-The directive then does whatever it's supposed to do with that host element and its descendents.
+The directive then does whatever it's supposed to do with that host element and its descendants.
 
 Structural directives are easy to recognize.
 An asterisk (*) precedes the directive attribute name as in this example.