docs: add changelog for 5.0.2

Using `display: none` on the `<h1>` causes `innerText` to not work as expected
and include the icon ligature (`link`) in the title. This caused the window
title on the angular.io Home page to appear as "Angular - link".
This commit fixes it by not generating anchors at all for headings with the
`no-anchor` class.

Fixes #20427

PR Close #20440

.travis.yml

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

CHANGELOG.md

@@ -1,3 +1,31 @@
+<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.0.1"></a>
+## [5.0.1](https://github.com/angular/angular/compare/5.0.0...5.0.1) (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))
+
+
 <a name="5.0.0"></a>
 # [5.0.0](https://github.com/angular/angular/compare/5.0.0-rc.9...5.0.0) pentagonal-donut (2017-11-01)
 
@@ -8,7 +36,6 @@
 * **animations:** support :increment and :decrement transition aliases ([6f45519](https://github.com/angular/angular/commit/6f45519))
 * **animations:** support negative query limit values ([86ffacf](https://github.com/angular/angular/commit/86ffacf)), closes [#19259](https://github.com/angular/angular/issues/19259)
 * **common:** accept object map for HttpClient headers & params ([#18490](https://github.com/angular/angular/issues/18490)) ([1b1d5f1](https://github.com/angular/angular/commit/1b1d5f1))
-* **common:** add an empty DeprecatedI18NPipesModule module ([#18737](https://github.com/angular/angular/issues/18737)) ([83713dd](https://github.com/angular/angular/commit/83713dd))
 * **common:** drop use of the Intl API to improve browser support ([#18284](https://github.com/angular/angular/issues/18284)) ([079d884](https://github.com/angular/angular/commit/079d884)), closes [#10809](https://github.com/angular/angular/issues/10809) [#9524](https://github.com/angular/angular/issues/9524) [#7008](https://github.com/angular/angular/issues/7008) [#9324](https://github.com/angular/angular/issues/9324) [#7590](https://github.com/angular/angular/issues/7590) [#6724](https://github.com/angular/angular/issues/6724) [#3429](https://github.com/angular/angular/issues/3429) [#17576](https://github.com/angular/angular/issues/17576) [#17478](https://github.com/angular/angular/issues/17478) [#17319](https://github.com/angular/angular/issues/17319) [#17200](https://github.com/angular/angular/issues/17200) [#16838](https://github.com/angular/angular/issues/16838) [#16624](https://github.com/angular/angular/issues/16624) [#16625](https://github.com/angular/angular/issues/16625) [#16591](https://github.com/angular/angular/issues/16591) [#14131](https://github.com/angular/angular/issues/14131) [#12632](https://github.com/angular/angular/issues/12632) [#11376](https://github.com/angular/angular/issues/11376) [#11187](https://github.com/angular/angular/issues/11187)
 * **common:** generate `closure-locale.ts` to tree shake locale data ([#18907](https://github.com/angular/angular/issues/18907)) ([4878936](https://github.com/angular/angular/commit/4878936))
 * **common:** mark NgTemplateOutlet API as stable ([0a73e8d](https://github.com/angular/angular/commit/0a73e8d))
@@ -16,7 +43,6 @@
 * **compiler-cli:** lower metadata `useValue` and `data` literal fields ([#18905](https://github.com/angular/angular/issues/18905)) ([0e64261](https://github.com/angular/angular/commit/0e64261))
 * **compiler:** add representation of placeholders to xliff & xmb ([b3085e9](https://github.com/angular/angular/commit/b3085e9)), closes [#17345](https://github.com/angular/angular/issues/17345)
 * **compiler:** allow multiple exportAs names ([#18723](https://github.com/angular/angular/issues/18723)) ([7ec28fe](https://github.com/angular/angular/commit/7ec28fe))
-* **compiler:** deprecate i18n comments in favor of `ng-container` ([#18998](https://github.com/angular/angular/issues/18998)) ([66a5dab](https://github.com/angular/angular/commit/66a5dab))
 * **compiler:** enabled strict checking of parameters to an `@Injectable` ([#19412](https://github.com/angular/angular/issues/19412)) ([dfb8d21](https://github.com/angular/angular/commit/dfb8d21))
 * **compiler:** make `.ngsummary.json` files portable ([2572bf5](https://github.com/angular/angular/commit/2572bf5))
 * **compiler:** reuse the TypeScript typecheck for template typechecking. ([#19152](https://github.com/angular/angular/issues/19152)) ([996c7c2](https://github.com/angular/angular/commit/996c7c2))
@@ -32,7 +58,6 @@
 * **forms:** add updateOn blur option to FormControls ([#18408](https://github.com/angular/angular/issues/18408)) ([333a708](https://github.com/angular/angular/commit/333a708)), closes [#7113](https://github.com/angular/angular/issues/7113)
 * **forms:** add updateOn submit option to FormControls ([#18514](https://github.com/angular/angular/issues/18514)) ([f69561b](https://github.com/angular/angular/commit/f69561b))
 * **forms:** add updateOn support to ngModelOptions ([1cfa79c](https://github.com/angular/angular/commit/1cfa79c))
-* **http**: deprecate @angular/http in favor of @angular/common/http ([#18906](https://github.com/angular/angular/issues/18906)) ([72c7b6e](https://github.com/angular/angular/commit/72c7b6e))
 * **platform-server:** add an API to transfer state from server ([#19134](https://github.com/angular/angular/issues/19134)) ([cfd9ca0](https://github.com/angular/angular/commit/cfd9ca0))
 * **platform-server:** provide a DOM implementation on the server ([2f2d5f3](https://github.com/angular/angular/commit/2f2d5f3)), closes [#14638](https://github.com/angular/angular/issues/14638)
 * **platform-server:** provide a way to hook into renderModule* ([#19023](https://github.com/angular/angular/issues/19023)) ([8dfc3c3](https://github.com/angular/angular/commit/8dfc3c3))
@@ -59,21 +84,15 @@
 * **core:** Remove decorator DSL which depends on Reflect ([cac130e](https://github.com/angular/angular/commit/cac130e))
 * **core:** add option to remove blank text nodes from compiled templates ([d2c0d98](https://github.com/angular/angular/commit/d2c0d98))
 * **core:** use native addEventListener for faster rendering. ([#18107](https://github.com/angular/angular/issues/18107)) ([6279e50](https://github.com/angular/angular/commit/6279e50))
+* **core** switch angular to use StaticInjector instead of ReflectiveInjector ([fcadbf4](https://github.com/angular/angular/commit/fcadbf4)), closes [#18496](https://github.com/angular/angular/issues/18496)
 * latest tsickle to tree shake: abstract class methods & interfaces ([#18236](https://github.com/angular/angular/issues/18236)) ([b7a6f52](https://github.com/angular/angular/commit/b7a6f52))
-* switch angular to use StaticInjector instead of ReflectiveInjector ([fcadbf4](https://github.com/angular/angular/commit/fcadbf4)), closes [#18496](https://github.com/angular/angular/issues/18496)
 
 
 ### BREAKING CHANGES
 
-* compiler: The method `ngGetContentSelectors()`, deprecated in Angular 4.0, has been removed.
-  Use `ComponentFactory.ngContentSelectors` instead.
-* - the Angular compiler now requires TypeScript 2.4.x.
-* router: `RouterOutlet` properties `locationInjector` and `locationFactoryResolver` have been removed as they were deprecated since v4.
-* compiler: the compiler option `enableLegacyTemplate` is now disabled by default as the `<template>` element has been deprecated since v4. Use `<ng-template>` instead. The option `enableLegacyTemplate` and the `<template>` element will both be removed in Angular v6.
-* core: `OpaqueToken` has been removed as it was deprecated since v4. Use `InjectionToken` instead.
-* `platformXXXX()` no longer accepts providers which depend on reflection.
-Specifically the method signature when from `Provider[]` to
-`StaticProvider[]`.
+* **compiler**: Angular now requires TypeScript 2.4.x.
+* **compiler**: split compiler and core. `@angular/platform-server` now additionally depends on `@angular/platform-browser-dynamic` as a peer dependency. ([#18683](https://github.com/angular/angular/issues/18683)) ([0cc77b4](https://github.com/angular/angular/commit/0cc77b4))
+* `platformXXXX()` no longer accepts providers which depend on reflection. Specifically the method signature went from `Provider[]` to `StaticProvider[]`.
 
 Example:
 Before:
@@ -178,59 +197,27 @@ Because of multiple bugs and browser inconsistencies, we have dropped the intl a
 
 
 ### Deprecated code
-* router: `RouterOutlet` properties `locationInjector` and `locationFactoryResolver` have been removed as they were deprecated since v4.
-* common: `NgFor` has been removed as it was deprecated since v4. Use `NgForOf` instead. This does not impact the use of`*ngFor` in your templates.
-* common: `NgTemplateOutlet#ngOutletContext` has been removed as it was deprecated since v4. Use `NgTemplateOutlet#ngTemplateOutletContext` instead.
-* core: `Testability#findBindings` has been removed as it was deprecated since v4. Use `Testability#findProviders` instead.
-* core: `DebugNode#source` has been removed as it was deprecated since v4.
-* router: the values `true`, `false`, `legacy_enabled` and `legacy_disabled` for the router parameter `initialNavigation` have been removed as they were deprecated. Use `enabled` or `disabled` instead.
-* core: `DifferFactory.create` no longer takes ChangeDetectionRef as a first argument as it was not used and deprecated since v4.
-* core: `TrackByFn` has been removed because it was deprecated since v4. Use `TrackByFunction` instead.
-* platform-webworker: `PRIMITIVE` has been removed as it was deprecated since v4. Use `SerializerTypes.PRIMITIVE` instead.
-* platform-browser: `NgProbeToken` has been removed from `@angular/platform-browser` as it was deprecated since v4. Import it from `@angular/core` instead.
-* core: `ErrorHandler` no longer takes a parameter as it was not used and deprecated since v4.
-* compiler: the option `useDebug` for the compiler has been removed as it had no effect and was deprecated since v4.
-* common: remove deprecated `NgFor` ([#18758](https://github.com/angular/angular/issues/18758)) ([ec56760](https://github.com/angular/angular/commit/ec56760))
-* common: remove deprecated `NgTemplateOutlet#ngOutletContext` ([#18780](https://github.com/angular/angular/issues/18780)) ([7522987](https://github.com/angular/angular/commit/7522987))
-* compiler: remove option `useDebug` ([#18778](https://github.com/angular/angular/issues/18778)) ([499d05d](https://github.com/angular/angular/commit/499d05d))
-* compiler: split compiler and core ([#18683](https://github.com/angular/angular/issues/18683)) ([0cc77b4](https://github.com/angular/angular/commit/0cc77b4))
-* compiler: - `@angular/platform-server` now additionally depends on
-  `@angular/platform-browser-dynamic` as a peer dependency.
-* core: remove deprecated `ChangeDetectionRef` argument in `DifferFactory#create` ([#18757](https://github.com/angular/angular/issues/18757)) ([be9713c](https://github.com/angular/angular/commit/be9713c))
-* core: remove deprecated `DebugNode#source` ([#18779](https://github.com/angular/angular/issues/18779)) ([d61b902](https://github.com/angular/angular/commit/d61b902))
-* core: remove deprecated `OpaqueToken` ([#18971](https://github.com/angular/angular/issues/18971)) ([3c4eef8](https://github.com/angular/angular/commit/3c4eef8))
-* core: remove deprecated `Testability#findBindings` ([#18782](https://github.com/angular/angular/issues/18782)) ([f2a2a6b](https://github.com/angular/angular/commit/f2a2a6b))
-* core: remove deprecated `TrackByFn` ([#18757](https://github.com/angular/angular/issues/18757)) ([596e9f4](https://github.com/angular/angular/commit/596e9f4))
-* core: remove deprecated parameter for `ErrorHandler` ([#18759](https://github.com/angular/angular/issues/18759)) ([8f41326](https://github.com/angular/angular/commit/8f41326))
-* platform-browser: remove deprecated `NgProbeToken` ([#18760](https://github.com/angular/angular/issues/18760)) ([d7f42bf](https://github.com/angular/angular/commit/d7f42bf))
-* platform-webworker: remove deprecated `PRIMITIVE` ([#18761](https://github.com/angular/angular/issues/18761)) ([a56468c](https://github.com/angular/angular/commit/a56468c))
-* router: remove deprecated `RouterOutlet` properties ([#18781](https://github.com/angular/angular/issues/18781)) ([d1c4a94](https://github.com/angular/angular/commit/d1c4a94))
-* router: remove deprecated `RouterOutlet` properties ([a9ef858](https://github.com/angular/angular/commit/a9ef858))
-* router: remove deprecated `initialNavigation` options ([#18781](https://github.com/angular/angular/issues/18781)) ([d76761b](https://github.com/angular/angular/commit/d76761b))
-- `ReflectiveInjector` is now deprecated as it will be remove. Use `Injector.create` as a replacement.
+* **compiler**: The method `ngGetContentSelectors()` has been removed as it was deprecated since v4. Use `ComponentFactory.ngContentSelectors` instead.
+* **compiler**: the compiler option `enableLegacyTemplate` is now disabled by default as the `<template>` element was deprecated since v4. Use `<ng-template>` instead. The option `enableLegacyTemplate` and the `<template>` element will both be removed in Angular v6.
+* **compiler**: the option `useDebug` for the compiler has been removed as it had no effect and was deprecated since v4. ([#18778](https://github.com/angular/angular/issues/18778)) ([499d05d](https://github.com/angular/angular/commit/499d05d))
+* **compiler**: deprecate i18n comments in favor of `ng-container` ([#18998](https://github.com/angular/angular/issues/18998)) ([66a5dab](https://github.com/angular/angular/commit/66a5dab))
+* **common**: `NgFor` has been removed as it was deprecated since v4. Use `NgForOf` instead. This does not impact the use of `*ngFor` in your templates. ([#18758](https://github.com/angular/angular/issues/18758)) ([ec56760](https://github.com/angular/angular/commit/ec56760))
+* **common**: `NgTemplateOutlet#ngOutletContext` has been removed as it was deprecated since v4. Use `NgTemplateOutlet#ngTemplateOutletContext` instead. ([#18780](https://github.com/angular/angular/issues/18780)) ([7522987](https://github.com/angular/angular/commit/7522987))
+* **core**: `ErrorHandler` no longer takes a parameter as it was not used and deprecated since v4. ([#18759](https://github.com/angular/angular/issues/18759)) ([8f41326](https://github.com/angular/angular/commit/8f41326))
+* **core**: `ReflectiveInjector` is now deprecated. Use `Injector.create` as a replacement.
+* **core**: `Testability#findBindings` has been removed as it was deprecated since v4. Use `Testability#findProviders` instead. ([#18782](https://github.com/angular/angular/issues/18782)) ([f2a2a6b](https://github.com/angular/angular/commit/f2a2a6b))
+* **core**: `DebugNode#source` has been removed as it was deprecated since v4. ([#18779](https://github.com/angular/angular/issues/18779)) ([d61b902](https://github.com/angular/angular/commit/d61b902))
+* **core**: `OpaqueToken` has been removed as it was deprecated since v4. Use `InjectionToken` instead. ([#18971](https://github.com/angular/angular/issues/18971)) ([3c4eef8](https://github.com/angular/angular/commit/3c4eef8))
+* **core**: `DifferFactory.create` no longer takes ChangeDetectionRef as a first argument as it was not used and deprecated since v4. ([#18757](https://github.com/angular/angular/issues/18757)) ([be9713c](https://github.com/angular/angular/commit/be9713c))
+* **core**: `TrackByFn` has been removed because it was deprecated since v4. Use `TrackByFunction` instead. ([#18757](https://github.com/angular/angular/issues/18757)) ([596e9f4](https://github.com/angular/angular/commit/596e9f4))
+* **http**: deprecate @angular/http in favor of @angular/common/http ([#18906](https://github.com/angular/angular/issues/18906)) ([72c7b6e](https://github.com/angular/angular/commit/72c7b6e))
+* **router**: `RouterOutlet` properties `locationInjector` and `locationFactoryResolver` have been removed as they were deprecated since v4. ([#18781](https://github.com/angular/angular/issues/18781)) ([d1c4a94](https://github.com/angular/angular/commit/d1c4a94), [a9ef858](https://github.com/angular/angular/commit/a9ef858))
+* **router**: the values `true`, `false`, `legacy_enabled` and `legacy_disabled` for the router parameter `initialNavigation` have been removed as they were deprecated. Use `enabled` or `disabled` instead. ([#18781](https://github.com/angular/angular/issues/18781)) ([d76761b](https://github.com/angular/angular/commit/d76761b))
+* **platform-browser**: `NgProbeToken` has been removed from `@angular/platform-browser` as it was deprecated since v4. Import it from `@angular/core` instead. ([#18760](https://github.com/angular/angular/issues/18760)) ([d7f42bf](https://github.com/angular/angular/commit/d7f42bf))
+* **platform-webworker**: `PRIMITIVE` has been removed as it was deprecated since v4. Use `SerializerTypes.PRIMITIVE` instead. ([#18761](https://github.com/angular/angular/issues/18761)) ([a56468c](https://github.com/angular/angular/commit/a56468c))
 
 
 
-<a name="4.3.1"></a>
-## [4.3.1](https://github.com/angular/angular/compare/4.3.0...4.3.1) (2017-07-19)
-
-
-### Bug Fixes
-
-* **animations:** always camelcase style property names that contain auto styles ([383d896](https://github.com/angular/angular/commit/383d896)), closes [#17938](https://github.com/angular/angular/issues/17938)
-* **animations:** capture cancelled animation styles within grouped animations ([333ffd8](https://github.com/angular/angular/commit/333ffd8)), closes [#17170](https://github.com/angular/angular/issues/17170)
-* **animations:** do not crash animations if a nested component fires CD during CD ([4c1f32b](https://github.com/angular/angular/commit/4c1f32b)), closes [#18193](https://github.com/angular/angular/issues/18193)
-* **animations:** make sure @.disabled works in non-animation components ([a5c4bb5](https://github.com/angular/angular/commit/a5c4bb5))
-* **common:** send flushed body as error instead of null ([17b7bc3](https://github.com/angular/angular/commit/17b7bc3)), closes [#18181](https://github.com/angular/angular/issues/18181)
-* **compiler:** ensure jit external id arguments names are unique ([4671168](https://github.com/angular/angular/commit/4671168))
-* **compiler-cli:** don't generate empty `<target/>` when extracting xliff ([f0476fc](https://github.com/angular/angular/commit/f0476fc)), closes [#15754](https://github.com/angular/angular/issues/15754)
-* **platform-server:** provide XhrFactory for HttpClient ([4ce29f3](https://github.com/angular/angular/commit/4ce29f3))
-* **router:** canDeactivate guards should run from bottom to top ([1ac78bf](https://github.com/angular/angular/commit/1ac78bf)), closes [#15657](https://github.com/angular/angular/issues/15657)
-* **router:** should navigate to the same url when config changes ([4340bea](https://github.com/angular/angular/commit/4340bea)), closes [#15535](https://github.com/angular/angular/issues/15535)
-* **router:** should run resolvers for the same route concurrently ([ec89f37](https://github.com/angular/angular/commit/ec89f37)), closes [#14279](https://github.com/angular/angular/issues/14279)
-* **router:** terminal route in custom matcher ([5d275e9](https://github.com/angular/angular/commit/5d275e9))
-
-
 <a name="4.4.6"></a>
 ## [4.4.6](https://github.com/angular/angular/compare/4.4.5...4.4.6) (2017-10-18)
 

aio/content/examples/.gitignore

@@ -74,8 +74,7 @@ aot-compiler/**/*.factory.d.ts
 !styleguide/src/systemjs.custom.js
 
 # universal
-!universal/webpack.config.client.js
-!universal/webpack.config.universal.js
+!universal/webpack.server.config.js
 
 # plunkers
 *plnkr.no-link.html

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/aot-compiler/e2e-spec.ts

@@ -1,27 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-/* tslint:disable:quotemark */
-describe('AOT Compilation', function () {
-
-    beforeAll(function () {
-        browser.get('');
-    });
-
-    it('should load page and click button', function (done: any) {
-      let headingSelector = element.all(by.css('h1')).get(0);
-      expect(headingSelector.getText()).toEqual('Hello Angular');
-
-      expect(element.all(by.xpath('//div[text()="Magneta"]')).get(0).isPresent()).toBe(true);
-      expect(element.all(by.xpath('//div[text()="Bombasto"]')).get(0).isPresent()).toBe(true);
-      expect(element.all(by.xpath('//div[text()="Magma"]')).get(0).isPresent()).toBe(true);
-      expect(element.all(by.xpath('//div[text()="Tornado"]')).get(0).isPresent()).toBe(true);
-
-      let toggleButton = element.all(by.css('button')).get(0);
-      toggleButton.click().then(function() {
-        expect(headingSelector.isPresent()).toBe(false);
-        done();
-      });
-    });
-});

aio/content/examples/aot-compiler/example-config.json

@@ -1,4 +0,0 @@
-{
-  "build": "build:aot",
-  "projectType": "systemjs"
-}

aio/content/examples/aot-compiler/rollup-config.js

@@ -1,33 +0,0 @@
-// #docregion
-import nodeResolve from 'rollup-plugin-node-resolve';
-import commonjs    from 'rollup-plugin-commonjs';
-import uglify      from 'rollup-plugin-uglify';
-
-// #docregion config
-export default {
-  entry: 'src/main.js',
-  dest: 'src/build.js', // output a single application bundle
-  sourceMap: true,
-  format: 'iife',
-  onwarn: function(warning) {
-    // Skip certain warnings
-
-    // should intercept ... but doesn't in some rollup versions
-    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
-
-    // console.warn everything else
-    console.warn( warning.message );
-  },
-  plugins: [
-      nodeResolve({jsnext: true, module: true}),
-      // #docregion commonjs
-      commonjs({
-        include: 'node_modules/rxjs/**',
-      }),
-      // #enddocregion commonjs
-      // #docregion uglify
-      uglify()
-      // #enddocregion uglify
-  ]
-};
-// #enddocregion config

aio/content/examples/aot-compiler/src/app/app.component.html

@@ -1,7 +0,0 @@
-<!-- #docregion -->
-<button (click)="toggleHeading()">Toggle Heading</button>
-<h1 *ngIf="showHeading">Hello Angular</h1>
-
-<h3>List of Heroes</h3>
-<div *ngFor="let hero of heroes">{{hero}}</div>
-

aio/content/examples/aot-compiler/src/app/app.component.ts

@@ -1,15 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-app',
-  templateUrl: './app.component.html'
-})
-export class AppComponent {
-  showHeading = true;
-  heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado'];
-
-  toggleHeading() {
-    this.showHeading = !this.showHeading;
-  }
-}

aio/content/examples/aot-compiler/src/app/app.module.ts

@@ -1,12 +0,0 @@
-// #docregion
-import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent }  from './app.component';
-
-@NgModule({
-  imports:      [ BrowserModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
-})
-export class AppModule { }

aio/content/examples/aot-compiler/src/index-jit.html

@@ -1,24 +0,0 @@
-<!-- #docregion -->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Ahead of time compilation (JIT)</title>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-  <!-- #docregion jit -->
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main-jit.js').catch(function(err){ console.error(err); });
-    </script>
-  <!-- #enddocregion jit -->
-  </head>
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-</html>

aio/content/examples/aot-compiler/src/index.html

@@ -1,20 +0,0 @@
-<!-- #docregion -->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Ahead of time compilation</title>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-  </head>
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-  <!-- #docregion bundle -->
-  <script src="build.js"></script>
-  <!-- #enddocregion bundle -->
-</html>

aio/content/examples/aot-compiler/src/main-jit.ts

@@ -1,6 +0,0 @@
-// #docregion
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }              from './app/app.module';
-
-console.log('Running JIT compiled');
-platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/aot-compiler/src/main.ts

@@ -1,6 +0,0 @@
-// #docregion
-import { platformBrowser }    from '@angular/platform-browser';
-import { AppModuleNgFactory } from './app/app.module.ngfactory';
-
-console.log('Running AOT compiled');
-platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

aio/content/examples/aot-compiler/tsconfig-aot.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es2015", "dom"],
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "typeRoots": [
-      "./node_modules/@types/"
-    ]
-  },
-
-  "files": [
-    "src/app/app.module.ts",
-    "src/main.ts"
-  ],
-
-  "angularCompilerOptions": {
-    "annotationsAs": "decorators",
-    "genDir": ".",
-    "skipMetadataEmit" : true
-  }
-}

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/component-styles/e2e/app.e2e-spec.ts

@@ -13,7 +13,7 @@ describe('Component Style Tests', function () {
     let externalH1 = element(by.css('body > h1'));
 
     // Note: sometimes webdriver returns the fontWeight as "normal",
-    // othertimes as "400", both of which are equal in CSS terms.
+    // other times as "400", both of which are equal in CSS terms.
     expect(componentH1.getCssValue('fontWeight')).toMatch(/normal|400/);
     expect(externalH1.getCssValue('fontWeight')).not.toMatch(/normal|400/);
   });

aio/content/examples/component-styles/plnkr.json

@@ -4,7 +4,8 @@
   "files": [
     "!**/*.d.ts",
     "!**/*.js",
-    "!**/*.native.*"
+    "!**/*.native.*",
+    "!**/*.[1].*"
   ],
   "tags": ["CSS"]
 }

aio/content/examples/component-styles/src/app/hero-app.component.1.css

@@ -0,0 +1,3 @@
+h1 {
+  font-weight: normal;
+}

aio/content/examples/component-styles/src/app/hero-app.component.1.ts

@@ -0,0 +1,25 @@
+import { Component, HostBinding } from '@angular/core';
+import { Hero } from './hero';
+
+// #docregion
+@Component({
+  selector: 'app-root',
+  template: `
+    <h1>Tour of Heroes</h1>
+    <app-hero-main [hero]="hero"></app-hero-main>
+  `,
+  styleUrls: ['./hero-app.component.css']
+})
+export class HeroAppComponent {
+// #enddocregion
+  hero = new Hero(
+    'Human Torch',
+    ['Mister Fantastic', 'Invisible Woman', 'Thing']
+  );
+
+  @HostBinding('class') get themeClass() {
+    return 'theme-light';
+  }
+// #docregion
+}
+// #enddocregion

aio/content/examples/component-styles/src/app/hero-app.component.ts

@@ -6,7 +6,8 @@ import { Hero } from './hero';
   selector: 'app-root',
   template: `
     <h1>Tour of Heroes</h1>
-    <app-hero-main [hero]=hero></app-hero-main>`,
+    <app-hero-main [hero]="hero"></app-hero-main>
+  `,
   styles: ['h1 { font-weight: normal; }']
 })
 export class HeroAppComponent {

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,5 +1,3 @@
-// Early versions
-
 // #docregion
 import { Component } from '@angular/core';
 

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,6 +1,5 @@
 // #docregion
 import { Component }   from '@angular/core';
-
 import { HEROES }      from './mock-heroes';
 
 @Component({
@@ -11,6 +10,8 @@ import { HEROES }      from './mock-heroes';
     </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';

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

@@ -1,7 +1,6 @@
 /* tslint:disable:one-line */
 // #docregion
 import { Component }   from '@angular/core';
-
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 

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,17 +1,14 @@
 // #docplaster
-// #docregion full, v1
+// #docregion, v1
 import { Component } from '@angular/core';
 // #enddocregion v1
-
 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>

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]
+  `
 })
 export class HeroesComponent { }

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

@@ -1,9 +1,12 @@
-/* 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,
+import {
+  APP_CONFIG,
+  AppConfig,
   HERO_DI_CONFIG } from './app.config';
 
 import { HeroService } from './heroes/hero.service';
@@ -11,9 +14,8 @@ 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

@@ -4,6 +4,7 @@
 
 import { Component } from '@angular/core';
 
+import { Hero  } from './heroes/hero';
 import { HeroService } from './heroes/hero.service';
 import { HeroListComponent } from './heroes/hero-list.component';
 
@@ -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/deployment/src/app/app.component.ts

@@ -1,15 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-app',
-  template: `
-    <h1>Simple Deployment</h1>
-    <nav>
-      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
-      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
-    </nav>
-    <router-outlet></router-outlet>
-  `
-})
-export class AppComponent { }

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

@@ -1,29 +0,0 @@
-// #docregion
-import { NgModule }             from '@angular/core';
-import { BrowserModule }        from '@angular/platform-browser';
-import { RouterModule, Routes } from '@angular/router';
-
-import { AppComponent }           from './app.component';
-import { CrisisListComponent }    from './crisis-list.component';
-import { HeroListComponent }      from './hero-list.component';
-
-const appRoutes: Routes = [
-  { path: 'crisis-center', component: CrisisListComponent },
-  { path: 'heroes',        component: HeroListComponent },
-
-  { path: '', redirectTo: '/heroes', pathMatch: 'full' }
-];
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    RouterModule.forRoot(appRoutes)
-  ],
-  declarations: [
-    AppComponent,
-    CrisisListComponent,
-    HeroListComponent
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }

aio/content/examples/deployment/src/app/crisis-list.component.ts

@@ -1,9 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  template: `
-    <h2>CRISIS CENTER</h2>
-    <p>Get your crisis here</p>`
-})
-export class CrisisListComponent { }

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

@@ -1,10 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  template: `
-    <h2>HEROES</h2>
-    <p>Get your heroes here</p>
-  `
-})
-export class HeroListComponent { }

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

@@ -1,38 +0,0 @@
-<!-- #docregion -->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <!-- Doesn't load from node_modules! -->
-
-    <!-- Set the base href -->
-    <base href="/">
-    <title>Simple Deployment</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- #docregion node-module-scripts -->
-    <!-- Polyfills -->
-    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
-
-    <!-- Update these package versions as needed -->
-    <script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script>
-    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
-    <!-- #enddocregion node-module-scripts -->
-
-    <!-- #docregion systemjs-config -->
-    <!-- This SystemJS configuration loads umd packages from the web -->
-    <script src="systemjs.config.server.js"></script>
-    <!-- #enddocregion systemjs-config -->
-
-    <script>
-      System.import('main.js')
-            .catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <my-app></my-app>
-  </body>
-
-</html>

aio/content/examples/deployment/src/systemjs.config.server.js

@@ -1,46 +0,0 @@
-// #docregion
-/**
- * System configuration for deployment without installing node_modules
- * Loads umd packages from the web instead
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-  System.config({
-    // #docregion paths
-    paths: {
-      'npm:': 'https://unpkg.com/' // path serves as alias
-    },
-    // #enddocregion paths
-    // map tells the System loader where to look for things
-    map: {
-      app: 'app', // location of transpiled app files
-
-      // angular minimized umd bundles
-      '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js',
-      '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js',
-      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js',
-      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js',
-      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js',
-      '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js',
-      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.min.js',
-      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js',
-      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.min.js',
-      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.min.js',
-
-      // other libraries
-      'rxjs':                      'npm:rxjs@5.0.1',
-      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
-    },
-    // packages tells the System loader how to load when no filename and/or no extension
-    packages: {
-      app: {
-        main: './main.js',
-        defaultExtension: 'js'
-      },
-      rxjs: {
-        defaultExtension: 'js'
-      }
-    }
-  });
-  })(this);

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/i18n/doc-files/app.component.html

@@ -29,4 +29,3 @@
 <!--#docregion i18n-title-->
 <img [src]="logo" title="Angular logo">
 <!--#enddocregion i18n-title-->
-Contact GitHub API Training Shop Blog About

aio/content/examples/i18n/doc-files/app.locale_data_extra.ts

@@ -0,0 +1,7 @@
+// #docregion import-locale-extra
+import { registerLocaleData } from '@angular/common';
+import localeFrCa from '@angular/common/locales/fr-CA';
+import localeFrCaExtra from '@angular/common/locales/extra/fr-CA';
+
+registerLocaleData(localeFrCa, localeFrCaExtra);
+// #enddocregion import-locale-extra

aio/content/examples/i18n/doc-files/app.module.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { LOCALE_ID, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from '../src/app/app.component';
+
+@NgModule({
+  imports: [ BrowserModule ],
+  declarations: [ AppComponent ],
+  providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

aio/content/examples/i18n/doc-files/main.1.ts

@@ -1,15 +1,12 @@
 // #docregion
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
 
-// #docregion enableProdMode
-import { enableProdMode } from '@angular/core';
-
-// Enable production mode unless running locally
-if (!/localhost/.test(document.location.host)) {
+if (environment.production) {
   enableProdMode();
 }
-// #enddocregion enableProdMode
 
 platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/i18n/doc-files/main.2.ts

@@ -0,0 +1,22 @@
+// #docregion
+import { enableProdMode, TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+// use the require method provided by webpack
+declare const require;
+// we use the webpack raw-loader to return the content as a string
+const translations = require(`raw-loader!./locale/messages.fr.xlf`);
+
+platformBrowserDynamic().bootstrapModule(AppModule, {
+  providers: [
+    {provide: TRANSLATIONS, useValue: translations},
+    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'}
+  ]
+});

aio/content/examples/i18n/doc-files/main.3.ts

@@ -0,0 +1,13 @@
+// #docregion
+import { MissingTranslationStrategy } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+// ...
+
+platformBrowserDynamic().bootstrapModule(AppModule, {
+  missingTranslation: MissingTranslationStrategy.Error,
+  providers: [
+    // ...
+  ]
+});

aio/content/examples/i18n/doc-files/messages.fr.xlf.html

@@ -0,0 +1,73 @@
+<!-- The `messages.fr.xlf` after translation for documentation purposes -->
+<!-- #docregion -->
+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en" datatype="plaintext" original="ng2.template">
+    <body>
+      <!-- #docregion translated-hello-before -->
+      <trans-unit id="introductionHeader" datatype="html">
+        <source>Hello i18n!</source>
+        <note priority="1" from="description">An introduction header for this sample</note>
+        <note priority="1" from="meaning">User welcome</note>
+      </trans-unit>
+      <!-- #enddocregion translated-hello-before -->
+      <!-- #docregion translated-hello -->
+      <!-- #docregion custom-id -->
+      <trans-unit id="introductionHeader" datatype="html">
+      <!-- #enddocregion custom-id -->
+        <source>Hello i18n!</source>
+        <target>Bonjour i18n !</target>
+        <note priority="1" from="description">An introduction header for this sample</note>
+        <note priority="1" from="meaning">User welcome</note>
+      </trans-unit>
+      <!-- #enddocregion translated-hello -->
+      <!-- #docregion translated-other-nodes -->
+      <!-- #docregion generated-id -->
+      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
+      <!-- #enddocregion generated-id -->
+        <source>I don&apos;t output any element</source>
+        <target>Je n'affiche aucun élément</target>
+      </trans-unit>
+      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
+        <source>Angular logo</source>
+        <target>Logo d'Angular</target>
+      </trans-unit>
+      <!-- #enddocregion translated-other-nodes -->
+      <!-- #docregion translated-plural -->
+      <trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
+        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
+      </trans-unit>
+      <!-- #enddocregion translated-plural -->
+      <!-- #docregion translated-select -->
+      <!-- #docregion translate-select-1 -->
+      <trans-unit id="52515023fc70c216ef291086c1962ff135a9fe13" datatype="html">
+        <source>The author is <x id="ICU" equiv-text="{gender, select, m {...} f {...} o {...}}"/></source>
+        <target>L'auteur est <x id="ICU" equiv-text="{gender, select, m {...} f {...} o {...}}"/></target>
+      </trans-unit>
+      <!-- #enddocregion translate-select-1 -->
+      <!-- #docregion translate-select-2 -->
+      <trans-unit id="4e6fd3f2bb3477e8ad2088f03257f6e1b8b515a5" datatype="html">
+        <source>{VAR_SELECT, select, m {male} f {female} o {other} }</source>
+        <target>{VAR_SELECT, select, m {un homme} f {une femme} o {autre} }</target>
+      </trans-unit>
+      <!-- #enddocregion translate-select-2 -->
+      <!-- #enddocregion translated-select -->
+      <!-- #docregion translate-nested -->
+      <!-- #docregion translate-nested-1 -->
+      <trans-unit id="f7a55c9ef7c5b37147825a9041263305063e63e9" datatype="html">
+        <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
+        <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
+      </trans-unit>
+      <!-- #enddocregion translate-nested-1 -->
+      <!-- #docregion translate-nested-2 -->
+      <trans-unit id="80b5ac44661751e191225c0b1e000bceeeccb52c" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, m {male} f {female} o {other} }} }</source>
+        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, m {un homme} f {une femme} o {autre} }} }</target>
+      </trans-unit>
+      <!-- #enddocregion translate-nested-2 -->
+      <!-- #enddocregion translate-nested -->
+    </body>
+  </file>
+</xliff>
+

aio/content/examples/i18n/e2e-spec.ts

@@ -1,36 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('i18n E2E Tests', () => {
-
-  beforeEach(function () {
-    browser.get('');
-  });
-
-  it('should display i18n translated welcome: ¡Hola i18n!', function () {
-    expect(element(by.css('h1')).getText()).toEqual('¡Hola i18n!');
-  });
-
-  it('should display the node texts without elements', function () {
-    expect(element(by.css('my-app')).getText()).toContain('No genero ningún elemento');
-  });
-
-  it('should display the translated title attribute', function () {
-    const title = element(by.css('img')).getAttribute('title');
-    expect(title).toBe('Logo de Angular');
-  });
-
-  it('should display the plural of: a horde of wolves', function () {
-    expect(element.all(by.css('span')).get(0).getText()).toBe('ningún lobo');
-  });
-
-  it('should display the select of gender', function () {
-    expect(element.all(by.css('span')).get(1).getText()).toBe('El heroe es mujer');
-  });
-
-  it('should display the nested expression', function() {
-    expect(element.all(by.css('span')).get(2).getText()).toBe('Aquí tenemos: 3 mujeres');
-  });
-
-});

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

@@ -0,0 +1,45 @@
+import { browser, element, by } from 'protractor';
+
+describe('i18n E2E Tests', () => {
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it('should display i18n translated welcome: Bonjour !', function () {
+    expect(element(by.css('h1')).getText()).toEqual('Bonjour i18n !');
+  });
+
+  it('should display the node texts without elements', function () {
+    expect(element(by.css('app-root')).getText()).toContain(`Je n'affiche aucun élément`);
+  });
+
+  it('should display the translated title attribute', function () {
+    const title = element(by.css('img')).getAttribute('title');
+    expect(title).toBe(`Logo d'Angular`);
+  });
+
+  it('should display the ICU plural expression', function () {
+    expect(element.all(by.css('span')).get(0).getText()).toBe(`Mis à jour à l'instant`);
+  });
+
+  it('should display the ICU select expression', function () {
+    const selectIcuExp = element.all(by.css('span')).get(1);
+    expect(selectIcuExp.getText()).toBe(`L'auteur est une femme`);
+    element.all(by.css('button')).get(2).click();
+    expect(selectIcuExp.getText()).toBe(`L'auteur est un homme`);
+  });
+
+  it('should display the nested expression', function() {
+    const nestedExp = element.all(by.css('span')).get(2);
+    const incBtn = element.all(by.css('button')).get(0);
+    expect(nestedExp.getText()).toBe(`Mis à jour: à l'instant`);
+    incBtn.click();
+    expect(nestedExp.getText()).toBe(`Mis à jour: il y a une minute`);
+    incBtn.click();
+    incBtn.click();
+    element.all(by.css('button')).get(4).click();
+    expect(nestedExp.getText()).toBe(`Mis à jour: il y a 3 minutes par autre`);
+  });
+
+});

aio/content/examples/i18n/example-config.json

@@ -0,0 +1,3 @@
+{
+  "projectType": "i18n"
+}

aio/content/examples/i18n/messages.xlf

@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
-  <file source-language="en" datatype="plaintext" original="ng2.template">
-    <body>
-      <trans-unit id="introductionHeader" datatype="html">
-        <source>
-  Hello i18n!
-</source>
-        <target/>
-        <note priority="1" from="description">An introduction header for this sample</note>
-        <note priority="1" from="meaning">User welcome</note>
-      </trans-unit>
-      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
-        <source>I don&apos;t output any element</source>
-        <target/>
-      </trans-unit>
-      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
-        <source>Angular logo</source>
-        <target/>
-      </trans-unit>
-      <trans-unit id="6e22e74e8cbd3095560cfe08993c4fdfa3c50eb0" datatype="html">
-        <source/>
-        <target/>
-      </trans-unit>
-      <trans-unit id="61cafedb85466ab789b3ae817bba1a545468ee1c" datatype="html">
-        <source>The hero is <x id="ICU"/></source>
-        <target/>
-      </trans-unit>
-      <trans-unit id="14c7055d67771a3b7b6888d282ac092896be06b6" datatype="html">
-        <source/>
-        <target/>
-      </trans-unit>
-      <trans-unit id="2cf9a08c5b6e3612572a2a36dd46563013848382" datatype="html">
-        <source>Here we have: <x id="ICU"/></source>
-        <target/>
-      </trans-unit>
-      <trans-unit id="db1b921b55301ce3957e382090729562002da036" datatype="html">
-        <source/>
-        <target/>
-      </trans-unit>
-    </body>
-  </file>
-</xliff>

aio/content/examples/i18n/plnkr.json

@@ -1,19 +0,0 @@
-{
-  "description": "i18n",
-  "basePath": "src/",
-  "files": [
-    "app/**/*.css",
-    "app/**/*.html",
-    "app/**/*.ts",
-    "messages.xlf",
-    "locale/messages.*.xlf",
-
-    "!**/*.[1].*",
-
-    "main.ts",
-    "styles.css",
-    "systemjs-text-plugin.js",
-    "index.html"
-  ],
-  "tags": ["i18n"]
-}

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

@@ -17,19 +17,19 @@
 <br>
 <button (click)="inc(1)">+</button> <button (click)="inc(-1)">-</button>
 <!--#docregion i18n-plural-->
-<span i18n>{wolves, plural, =0 {no wolves} =1 {one wolf} =2 {two wolves} other {a wolf pack}}</span>
+<span i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span>
 <!--#enddocregion i18n-plural-->
-({{wolves}})
+({{minutes}})
 <br><br>
-<button (click)="male()">&#9794;</button> <button (click)="female()">&#9792;</button>
+<button (click)="male()">&#9794;</button> <button (click)="female()">&#9792;</button> <button (click)="other()">&#9895;</button>
 <!--#docregion i18n-select-->
-<span i18n>The hero is {gender, select, m {male} f {female}}</span>
+<span i18n>The author is {gender, select, m {male} f {female} o {other}}</span>
 <!--#enddocregion i18n-select-->
 <br><br>
 <!--#docregion i18n-nested-->
-<span i18n>Here we have: {count, plural,
-  =0 {no one}
-  =1 {one {gender, select, male {man} female {woman}}}
-  other {{{heroes.length}} {gender, select, male {men} female {women}}}
-}</span>
+<span i18n>Updated: {minutes, plural,
+  =0 {just now}
+  =1 {one minute ago}
+  other {{{minutes}} minutes ago by {gender, select, m {male} f {female} o {other}}}}
+</span>
 <!--#enddocregion i18n-nested-->

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

@@ -2,20 +2,20 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {
-  wolves = 0;
+  minutes = 0;
   gender = 'f';
   fly = true;
   logo = 'https://angular.io/assets/images/logos/angular/angular.png';
-  count = 3;
   heroes: string[] = ['Magneta', 'Celeritas', 'Dynama'];
   inc(i: number) {
-    this.wolves = Math.min(5, Math.max(0, this.wolves + i));
+    this.minutes = Math.min(5, Math.max(0, this.minutes + i));
   }
   male() { this.gender = 'm'; }
   female() { this.gender = 'f'; }
+  other() { this.gender = 'o'; }
 }
 

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

@@ -1,7 +0,0 @@
-// #docregion import-locale-extra
-import { registerLocaleData } from '@angular/common';
-import localeEnGB from '@angular/common/locales/en-GB';
-import localeEnGBExtra from '@angular/common/locales/extra/en-GB';
-
-registerLocaleData(localeEnGB, localeEnGBExtra);
-// #enddocregion import-locale-extra

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

@@ -9,5 +9,4 @@ import { AppComponent }  from './app.component';
   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })
-
 export class AppModule { }

aio/content/examples/i18n/src/app/i18n-providers.ts

@@ -1,41 +0,0 @@
-// #docplaster
-// #docregion without-missing-translation
-import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID, MissingTranslationStrategy, StaticProvider } from '@angular/core';
-import { CompilerConfig } from '@angular/compiler';
-
-export function getTranslationProviders(): Promise<StaticProvider[]> {
-
-  // Get the locale id from the global
-  const locale = document['locale'] as string;
-
-  // return no providers if fail to get translation file for locale
-  const noProviders: StaticProvider[] = [];
-
-  // No locale or U.S. English: no translation providers
-  if (!locale || locale === 'en-US') {
-    return Promise.resolve(noProviders);
-  }
-
-  // Ex: 'locale/messages.es.xlf`
-  const translationFile = `./locale/messages.${locale}.xlf`;
-
-  // #docregion missing-translation
-  return getTranslationsWithSystemJs(translationFile)
-    .then( (translations: string ) => [
-      { provide: TRANSLATIONS, useValue: translations },
-      { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
-      { provide: LOCALE_ID, useValue: locale },
-      // #enddocregion without-missing-translation
-      { provide: CompilerConfig, useValue: new CompilerConfig({ missingTranslation: MissingTranslationStrategy.Error }) }
-      // #docregion without-missing-translation
-    ])
-    .catch(() => noProviders); // ignore if file not found
-    // #enddocregion missing-translation
-}
-
-declare var System: any;
-
-function getTranslationsWithSystemJs(file: string) {
-  return System.import(file + '!text'); // relies on text plugin
-}
-// #enddocregion without-missing-translation

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

@@ -1,39 +1,14 @@
-<!DOCTYPE html>
 <!-- #docregion -->
+<!DOCTYPE html>
 <html>
   <head>
-    <title>Angular i18n example</title>
     <base href="/">
+    <title>Angular i18n example</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-
-    <!-- #docregion i18n -->
-    <script>
-      // Get the locale id somehow
-      document.locale = 'es';
-
-      // Map to the text plugin
-      System.config({
-        map: {
-          text: 'systemjs-text-plugin.js'
-        }
-      });
-
-      // Launch the app
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
-    <!-- #enddocregion i18n -->
   </head>
-
   <body>
-    <my-app>Loading...</my-app>
+    <app-root>Loading...</app-root>
   </body>
 </html>
+<!-- #enddocregion -->

aio/content/examples/i18n/src/locale/messages.es.xlf

@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
-  <file source-language="en" datatype="plaintext" original="ng2.template">
-    <body>
-      <trans-unit id="introductionHeader" datatype="html">
-        <source>Hello i18n!</source>
-        <target>¡Hola i18n!</target>
-        <note priority="1" from="description">An introduction header for this sample</note>
-        <note priority="1" from="meaning">User welcome</note>
-      </trans-unit>
-      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
-        <source>I don&apos;t output any element</source>
-        <target>No genero ningún elemento</target>
-      </trans-unit>
-      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
-        <source>Angular logo</source>
-        <target>Logo de Angular</target>
-      </trans-unit>
-      <trans-unit id="6e22e74e8cbd3095560cfe08993c4fdfa3c50eb0" datatype="html">
-        <source/>
-        <target>{wolves, plural, =0 {ningún lobo} =1 {un lobo} =2 {dos lobos} other {una horda de lobos}}</target>
-      </trans-unit>
-      <trans-unit id="61cafedb85466ab789b3ae817bba1a545468ee1c" datatype="html">
-        <source>The hero is <x id="ICU"/></source>
-        <target>El heroe es <x id="ICU"/></target>
-      </trans-unit>
-      <trans-unit id="14c7055d67771a3b7b6888d282ac092896be06b6" datatype="html">
-        <source/>
-        <target>{gender, select, m {hombre} f {mujer}}</target>
-      </trans-unit>
-      <trans-unit id="2cf9a08c5b6e3612572a2a36dd46563013848382" datatype="html">
-        <source>Here we have: <x id="ICU"/></source>
-        <target>Aquí tenemos: <x id="ICU"/></target>
-      </trans-unit>
-      <trans-unit id="db1b921b55301ce3957e382090729562002da036" datatype="html">
-        <source/>
-        <target>
-          {count, plural,
-            =0 { nadie }
-            =1 {{gender, select, m {un hombre} f {una mujer}}}
-            other {{{heroes.length}} {gender, select, m {hombres} f {mujeres}}}
-          }
-        </target>
-      </trans-unit>
-    </body>
-  </file>
-</xliff>

aio/content/examples/i18n/src/locale/messages.es.xlf.html

@@ -1,80 +0,0 @@
-<!-- The `messages.es.xlf` after translation for documentation purposes -->
-<!-- #docregion -->
-<?xml version="1.0" encoding="UTF-8" ?>
-<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
-  <file source-language="en" datatype="plaintext" original="ng2.template">
-    <body>
-      <!-- #docregion translated-hello -->
-      <!-- #docregion custom-id -->
-      <trans-unit id="introductionHeader" datatype="html">
-      <!-- #enddocregion custom-id -->
-        <source>Hello i18n!</source>
-        <target>¡Hola i18n!</target>
-        <note priority="1" from="description">An introduction header for this sample</note>
-        <note priority="1" from="meaning">User welcome</note>
-      </trans-unit>
-      <!-- #enddocregion translated-hello -->
-      <!-- #docregion translated-other-nodes -->
-      <!-- #docregion generated-id -->
-      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
-      <!-- #enddocregion generated-id -->
-        <source>I don&apos;t output any element</source>
-        <target>No genero ningún elemento</target>
-      </trans-unit>
-      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
-        <source>Angular logo</source>
-        <target>Logo de Angular</target>
-      </trans-unit>
-      <!-- #enddocregion translated-other-nodes -->
-      <!-- #docregion translated-plural -->
-      <trans-unit id="6e22e74e8cbd3095560cfe08993c4fdfa3c50eb0" datatype="html">
-        <source/>
-        <target>{wolves, plural, =0 {ningún lobo} =1 {un lobo} =2 {dos lobos} other {una horda de lobos}}</target>
-      </trans-unit>
-      <!-- #enddocregion translated-plural -->
-      <!-- #docregion translated-select -->
-      <!-- #docregion translate-select-1 -->
-      <trans-unit id="61cafedb85466ab789b3ae817bba1a545468ee1c" datatype="html">
-        <source>The hero is <x id="ICU"/></source>
-        <target>El heroe es <x id="ICU"/></target>
-      </trans-unit>
-      <!-- #enddocregion translate-select-1 -->
-      <!-- #docregion translate-select-2 -->
-      <trans-unit id="14c7055d67771a3b7b6888d282ac092896be06b6" datatype="html">
-        <source/>
-        <target>{gender, select, m {hombre} f {mujer}}</target>
-      </trans-unit>
-      <!-- #enddocregion translate-select-2 -->
-      <!-- #enddocregion translated-select -->
-      <trans-unit id="db04527df562d12c8607eab2b5723ef6e2066ba0" datatype="html">
-        <source>Here we have: <x id="ICU"/></source>
-        <target/>
-      </trans-unit>
-      <trans-unit id="000058be4e6f08b685d1d0a70f9da68067df7379" datatype="html">
-        <source/>
-        <target/>
-      </trans-unit>
-      <!-- #docregion translate-nested -->
-      <!-- #docregion translate-nested-1 -->
-      <trans-unit id="2cf9a08c5b6e3612572a2a36dd46563013848382" datatype="html">
-        <source>Here we have: <x id="ICU"/></source>
-        <target>Aquí tenemos: <x id="ICU"/></target>
-      </trans-unit>
-      <!-- #enddocregion translate-nested-1 -->
-      <!-- #docregion translate-nested-2 -->
-      <trans-unit id="db1b921b55301ce3957e382090729562002da036" datatype="html">
-        <source/>
-        <target>
-          {count, plural,
-            =0 { nadie }
-            =1 {{gender, select, m {un hombre} f {una mujer}}}
-            other {{{heroes.length}} {gender, select, m {hombres} f {mujeres}}}
-          }
-        </target>
-      </trans-unit>
-      <!-- #enddocregion translate-nested-2 -->
-      <!-- #enddocregion translate-nested -->
-    </body>
-  </file>
-</xliff>
-

aio/content/examples/i18n/src/locale/messages.fr.xlf

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="introductionHeader" datatype="html">
+        <source>
+    Hello i18n!
+</source>
+        <target>
+    Bonjour i18n !
+</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">4</context>
+        </context-group>
+        <note priority="1" from="description">An introduction header for this sample</note>
+        <note priority="1" from="meaning">User welcome</note>
+      </trans-unit>
+      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
+        <source>I don&apos;t output any element</source>
+        <target>Je n'affiche aucun élément</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">10</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
+        <source>Angular logo</source>
+        <target>Logo d'Angular</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">16</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="d69f6b42305f49332026fef24b40227f02e34594" datatype="html">
+        <source>Updated <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
+        <target>Mis à jour <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">21</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
+        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">21</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="52515023fc70c216ef291086c1962ff135a9fe13" datatype="html">
+        <source>The author is <x id="ICU" equiv-text="{gender, select, m {...} f {...} o {...}}"/></source>
+        <target>L'auteur est <x id="ICU" equiv-text="{gender, select, m {...} f {...} o {...}}"/></target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">27</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="4e6fd3f2bb3477e8ad2088f03257f6e1b8b515a5" datatype="html">
+        <source>{VAR_SELECT, select, m {male} f {female} o {other} }</source>
+        <target>{VAR_SELECT, select, m {un homme} f {une femme} o {autre} }</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">27</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="f7a55c9ef7c5b37147825a9041263305063e63e9" datatype="html">
+        <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/>
+</source>
+        <target>Mis à jour: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/>
+</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">31</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="80b5ac44661751e191225c0b1e000bceeeccb52c" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, m {male} f {female} o {other} }} }</source>
+        <target>{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes par {VAR_SELECT, select, m {un homme} f {une femme} o {autre} }} }</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">31</context>
+        </context-group>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

aio/content/examples/i18n/src/locale/messages.xlf

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="introductionHeader" datatype="html">
+        <source>
+    Hello i18n!
+</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">4</context>
+        </context-group>
+        <note priority="1" from="description">An introduction header for this sample</note>
+        <note priority="1" from="meaning">User welcome</note>
+      </trans-unit>
+      <trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html">
+        <source>I don&apos;t output any element</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">10</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
+        <source>Angular logo</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">16</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="d69f6b42305f49332026fef24b40227f02e34594" datatype="html">
+        <source>Updated <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">21</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">21</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="52515023fc70c216ef291086c1962ff135a9fe13" datatype="html">
+        <source>The author is <x id="ICU" equiv-text="{gender, select, m {...} f {...} o {...}}"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">27</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="4e6fd3f2bb3477e8ad2088f03257f6e1b8b515a5" datatype="html">
+        <source>{VAR_SELECT, select, m {male} f {female} o {other} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">27</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="f7a55c9ef7c5b37147825a9041263305063e63e9" datatype="html">
+        <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/>
+</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">31</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="80b5ac44661751e191225c0b1e000bceeeccb52c" datatype="html">
+        <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, m {male} f {female} o {other} }} }</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app\app.component.ts</context>
+          <context context-type="linenumber">31</context>
+        </context-group>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

aio/content/examples/i18n/src/main.1.ts

@@ -1,6 +0,0 @@
-// #docregion
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);

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

@@ -1,10 +1,12 @@
 // #docregion
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { getTranslationProviders } from './app/i18n-providers';
 
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
 
-getTranslationProviders().then(providers => {
-  const options = { providers };
-  platformBrowserDynamic().bootstrapModule(AppModule, options);
-});
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/i18n/src/systemjs-text-plugin.js

@@ -1,14 +0,0 @@
-// #docregion
-/*
-  SystemJS Text plugin from
-  https://github.com/systemjs/plugin-text/blob/master/text.js
-*/
-exports.translate = function (load) {
-  if (this.builder && this.transpiler) {
-    load.metadata.format = 'esm';
-    return 'exp' + 'ort var __useDefault = true; exp' + 'ort default ' + JSON.stringify(load.source) + ';';
-  }
-
-  load.metadata.format = 'amd';
-  return 'def' + 'ine(function() {\nreturn ' + JSON.stringify(load.source) + ';\n});';
-}

aio/content/examples/i18n/zipper.json

@@ -0,0 +1,11 @@
+{
+  "files":[
+    "!dist/",
+    "!**/*.d.ts",
+    "!src/**/*.js",
+    "!doc-files/**/*",
+    "**/*.xlf"
+  ],
+  "removeSystemJsConfig": true,
+  "type": "i18n"
+}

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';
+// #docregion import
 import { FormControl } from '@angular/forms';
-// #enddocregion
+// #enddocregion import
 
 @Component({
   selector: 'app-hero-detail-1',