docs: add changelog for 5.0.1

release: cut the 5.0.1 version
docs(common): fix mis-ordered lines (#20221 )
2017-11-08 10:29:46 -08:00 · 2017-11-08 10:28:13 -08:00 · 2017-11-06 11:29:12 -08:00 · 2017-11-06 10:05:23 -08:00 · 2017-11-06 10:05:23 -08:00 · 2017-11-06 10:05:23 -08:00
479 changed files with 12481 additions and 12720 deletions
--- a/.travis.yml
+++ b/.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
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,406 +1,114 @@
-<a name="5.0.0-rc.4"></a>
-# [5.0.0-rc.4](https://github.com/angular/angular/compare/5.0.0-rc.3...5.0.0-rc.4) (2017-10-24)
+<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

-* **bazel:** don't console.error from the compile helper ([#19879](https://github.com/angular/angular/issues/19879)) ([5da96c7](https://github.com/angular/angular/commit/5da96c7))
-* **compiler:** correctly calculate the outDir if it repeats a parts of the `rootDir`. ([#19836](https://github.com/angular/angular/issues/19836)) ([fc0b1d5](https://github.com/angular/angular/commit/fc0b1d5)), closes [#19718](https://github.com/angular/angular/issues/19718)
-* **service-worker:** include versionedFiles in the manifest hashTable ([#19837](https://github.com/angular/angular/issues/19837)) ([90d1423](https://github.com/angular/angular/commit/90d1423))
+* **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-rc.3"></a>
-# [5.0.0-rc.3](https://github.com/angular/angular/compare/5.0.0-rc.2...5.0.0-rc.3) (2017-10-18)
-
-
-### Bug Fixes
-
-* **animations:** always fire inner trigger callbacks even if blocked by parent animations ([#19753](https://github.com/angular/angular/issues/19753)) ([5a9ed2d](https://github.com/angular/angular/commit/5a9ed2d)), closes [#19100](https://github.com/angular/angular/issues/19100)
-* **animations:** ensure animateChild() works with all inner leave animations ([#19006](https://github.com/angular/angular/issues/19006)) ([#19532](https://github.com/angular/angular/issues/19532)) ([#19693](https://github.com/angular/angular/issues/19693)) ([f42d317](https://github.com/angular/angular/commit/f42d317))
-* **animations:** ensure inner :leave animations do not remove node when skipped ([#19532](https://github.com/angular/angular/issues/19532)) ([#19693](https://github.com/angular/angular/issues/19693)) ([d035175](https://github.com/angular/angular/commit/d035175))
-* **bazel:** fix the output directory for extractor to be genfiles/ instead of bin/ ([#19716](https://github.com/angular/angular/issues/19716)) ([405ccc7](https://github.com/angular/angular/commit/405ccc7))
-* **common:** attempt to JSON.parse errors for JSON responses ([#19773](https://github.com/angular/angular/issues/19773)) ([04ab9f1](https://github.com/angular/angular/commit/04ab9f1))
-* **compiler:** generate correct imports for type check blocks ([#19582](https://github.com/angular/angular/issues/19582)) ([60bdcd6](https://github.com/angular/angular/commit/60bdcd6))
-* **compiler:** prepare for future Bazel semantics of += ([#19717](https://github.com/angular/angular/issues/19717)) ([836c889](https://github.com/angular/angular/commit/836c889))
-* **compiler-cli:** diagnostics file paths relative to cwd, not tsconfig ([#19748](https://github.com/angular/angular/issues/19748)) ([56774df](https://github.com/angular/angular/commit/56774df))
-* **compiler-cli:** do not add references to files outside of `rootDir` ([#19770](https://github.com/angular/angular/issues/19770)) ([25cbc98](https://github.com/angular/angular/commit/25cbc98))
-* **router:** RouterLinkActive should update its state right after checking the children ([#19449](https://github.com/angular/angular/issues/19449)) ([6f2939d](https://github.com/angular/angular/commit/6f2939d)), closes [#18983](https://github.com/angular/angular/issues/18983)
-* **service-worker:** add missing annotation for SwPush ([#19721](https://github.com/angular/angular/issues/19721)) ([15a8429](https://github.com/angular/angular/commit/15a8429))
-* **service-worker:** freshness strategy should clone response for cache ([#19764](https://github.com/angular/angular/issues/19764)) ([396c241](https://github.com/angular/angular/commit/396c241))
-* **service-worker:** PushEvent.data has to be decoded ([#19764](https://github.com/angular/angular/issues/19764)) ([3bcf0cf](https://github.com/angular/angular/commit/3bcf0cf))
-* **service-worker:** use posix path resolution for generation of ngsw.json ([#19527](https://github.com/angular/angular/issues/19527)) ([621f87b](https://github.com/angular/angular/commit/621f87b))
-
-
-
-<a name="4.4.6"></a>
-## [4.4.6](https://github.com/angular/angular/compare/4.4.5...4.4.6) (2017-10-18)
-
-
-### Bug Fixes
-
-* **animations:** properly support boolean-based transitions and state changes ([#19672](https://github.com/angular/angular/issues/19672)) ([f983a6c](https://github.com/angular/angular/commit/f983a6c)), closes [#9396](https://github.com/angular/angular/issues/9396) [#12337](https://github.com/angular/angular/issues/12337)
-* **common:** attempt to JSON.parse errors for JSON responses ([#19773](https://github.com/angular/angular/issues/19773)) ([269f5ac](https://github.com/angular/angular/commit/269f5ac))
-* **router:** RouterLinkActive should update its state right after checking the children ([53a807a](https://github.com/angular/angular/commit/53a807a)), closes [#18983](https://github.com/angular/angular/issues/18983)
-
-
-### Performance Improvements
-
-* **animations:** reduce size of bundle by removing AST classes ([#19673](https://github.com/angular/angular/issues/19673)) ([76d2496](https://github.com/angular/angular/commit/76d2496))
-
-
-
-<a name="5.0.0-rc.2"></a>
-# [5.0.0-rc.2](https://github.com/angular/angular/compare/5.0.0-rc.1...5.0.0-rc.2) (2017-10-12)
-
-
-### Bug Fixes
-
-* **animations:** properly support boolean-based transitions and state changes ([#19279](https://github.com/angular/angular/issues/19279)) ([a8920eb](https://github.com/angular/angular/commit/a8920eb)), closes [#9396](https://github.com/angular/angular/issues/9396) [#12337](https://github.com/angular/angular/issues/12337)
-* **compiler:** correctly calculate the out path on windows ([#19601](https://github.com/angular/angular/issues/19601)) ([d30ce19](https://github.com/angular/angular/commit/d30ce19)), closes [#19543](https://github.com/angular/angular/issues/19543)
-* **compiler-cli:** produce smaller source maps for templates ([#19578](https://github.com/angular/angular/issues/19578)) ([f83989b](https://github.com/angular/angular/commit/f83989b))
-
-
-### Performance Improvements
-
-* **animations:** reduce size of bundle by removing AST classes ([#19539](https://github.com/angular/angular/issues/19539)) ([d5c9c5f](https://github.com/angular/angular/commit/d5c9c5f))
-* **compiler:** only type check input files when using bazel ([#19581](https://github.com/angular/angular/issues/19581)) ([0b06ea1](https://github.com/angular/angular/commit/0b06ea1))
-* **compiler:** skip type check and emit in bazel in some cases. ([#19646](https://github.com/angular/angular/issues/19646)) ([a22121d](https://github.com/angular/angular/commit/a22121d))
-* **compiler:** speed up loading of summaries for bazel. ([#19581](https://github.com/angular/angular/issues/19581)) ([81167d9](https://github.com/angular/angular/commit/81167d9))
-
-
-
-<a name="4.4.5"></a>
-## [4.4.5](https://github.com/angular/angular/compare/4.4.4...4.4.5) (2017-10-12)
-
-
-### Bug Fixes
-
-* **compiler:** `TestBed.overrideProvider` should keep imported `NgModule`s eager ([#19624](https://github.com/angular/angular/issues/19624)) ([734378c](https://github.com/angular/angular/commit/734378c))
-* **compiler:** correctly instantiate eager providers that are used via `Injector.get` ([#19558](https://github.com/angular/angular/issues/19558)) ([e292548](https://github.com/angular/angular/commit/e292548)), closes [#15501](https://github.com/angular/angular/issues/15501)
-* **compiler:** disallow references for select and index evaluation ([95f3b1d](https://github.com/angular/angular/commit/95f3b1d))
-* **core:** make dynamic & inline code checking behave the same ([#19189](https://github.com/angular/angular/issues/19189)) ([6c66031](https://github.com/angular/angular/commit/6c66031))
-* **platform-browser:** support customEqualityTesters when overriding Jasmine toEqual ([cc8ae32](https://github.com/angular/angular/commit/cc8ae32))
-* **tsc-wrapped:** don't rewrite imports when annotating for closure ([#19579](https://github.com/angular/angular/issues/19579)) ([c9f8718](https://github.com/angular/angular/commit/c9f8718))
-
-
-<a name="5.0.0-rc.1"></a>
-# [5.0.0-rc.1](https://github.com/angular/angular/compare/5.0.0-rc.0...5.0.0-rc.1) (2017-10-06)
-
-
-### Bug Fixes
-
-* **compiler:** always emit summaries for jit with ng_module bazel rule. ([1058b2a](https://github.com/angular/angular/commit/1058b2a))
-* don’t rely on `goog.DEBUG` but on `COMPILED` instead ([db74f44](https://github.com/angular/angular/commit/db74f44))
-* **compiler:** add typings for `COMPILED`. ([0038712](https://github.com/angular/angular/commit/0038712))
-* **compiler:** also count generated files to determine whether to use single file emit ([7c5ecb5](https://github.com/angular/angular/commit/7c5ecb5))
-* **compiler:** disallow references for select and index evaluation ([f3f4c3d](https://github.com/angular/angular/commit/f3f4c3d))
-* **compiler:** don’t use `ng://` in AOT source maps, and never point to the original source file ([01f7112](https://github.com/angular/angular/commit/01f7112)), closes [#19538](https://github.com/angular/angular/issues/19538)
-* **compiler:** only don’t emit already emitted files in incremental compilation ([caa5195](https://github.com/angular/angular/commit/caa5195))
-* **compiler:** properly work on windows ([696af79](https://github.com/angular/angular/commit/696af79)), closes [#19492](https://github.com/angular/angular/issues/19492)
-* **compiler:** set `emitSkipped` to false for incremental compilation ([c412913](https://github.com/angular/angular/commit/c412913))
-* **service-worker:** several misc fixes for corner cases ([f10f8db](https://github.com/angular/angular/commit/f10f8db))
-* **upgrade:** call `ngOnInit()` after `ngOnChanges()` (on components with inputs) ([eef7d8a](https://github.com/angular/angular/commit/eef7d8a)), closes [#18913](https://github.com/angular/angular/issues/18913)
-* **upgrade:** correctly run change detection when `propagateDigest` is false ([617b3d2](https://github.com/angular/angular/commit/617b3d2))
-* **upgrade:** ensure downgraded components are destroyed in the Angular zone ([4e6aa9c](https://github.com/angular/angular/commit/4e6aa9c))
-
-
-### Performance Improvements
-
-* **compiler:** don’t emit summaries for jit by default ([b086891](https://github.com/angular/angular/commit/b086891))
-* **compiler:** fix perf issue in loading aot summaries in jit compiler ([fbc9537](https://github.com/angular/angular/commit/fbc9537))
-* **compiler:** only emit changed files for incremental compilation ([745b59f](https://github.com/angular/angular/commit/745b59f))
-
-
-
-<a name="5.0.0-rc.0"></a>
-# [5.0.0-rc.0](https://github.com/angular/angular/compare/5.0.0-beta.7...5.0.0-rc.0) (2017-09-28)
-
-
-### Bug Fixes
-
-* **animations:** properly support the query limit option value ([b54368b](https://github.com/angular/angular/commit/b54368b)), closes [#19232](https://github.com/angular/angular/issues/19232)
-* **common:** use correct pipe name in error messages ([#19403](https://github.com/angular/angular/issues/19403)) ([f9b0863](https://github.com/angular/angular/commit/f9b0863)), closes [#19373](https://github.com/angular/angular/issues/19373)
-* **compiler:** add parens around binary / ternary expressions ([3799f43](https://github.com/angular/angular/commit/3799f43))
-* **compiler:** allow to use flat modules and summaries ([ec2be5d](https://github.com/angular/angular/commit/ec2be5d))
-* **compiler:** allow to use lowering with `export *`. ([e31a76c](https://github.com/angular/angular/commit/e31a76c))
-* **compiler:** also create `.ngfactory.js` files in non obvious cases ([#19301](https://github.com/angular/angular/issues/19301)) ([1a647c3](https://github.com/angular/angular/commit/1a647c3))
-* **compiler:** collect non exported symbols in d.ts files ([#19301](https://github.com/angular/angular/issues/19301)) ([62602b9](https://github.com/angular/angular/commit/62602b9))
-* **compiler:** correctly derive `fileExists` for generated files ([#19301](https://github.com/angular/angular/issues/19301)) ([f2bad19](https://github.com/angular/angular/commit/f2bad19))
-* **compiler:** correctly map error message locations ([#19424](https://github.com/angular/angular/issues/19424)) ([ff5b050](https://github.com/angular/angular/commit/ff5b050))
-* **compiler:** do not consider a reference with members as a reference ([#19454](https://github.com/angular/angular/issues/19454)) ([b3db3f8](https://github.com/angular/angular/commit/b3db3f8))
-* **compiler:** don’t lower property accesses of exported symbols ([#19301](https://github.com/angular/angular/issues/19301)) ([45747ed](https://github.com/angular/angular/commit/45747ed))
-* **compiler:** don’t type check property access of literal maps ([#19301](https://github.com/angular/angular/issues/19301)) ([04997c8](https://github.com/angular/angular/commit/04997c8))
-* **compiler:** implement i18n with new compiler ([627f048](https://github.com/angular/angular/commit/627f048)), closes [#19429](https://github.com/angular/angular/issues/19429)
-* **compiler:** make sure our out path calculation is correct ([2f6ae52](https://github.com/angular/angular/commit/2f6ae52))
-* **compiler:** make sure to detect paths that start with `rootDir` correctly ([bb1665c](https://github.com/angular/angular/commit/bb1665c)), closes [#19362](https://github.com/angular/angular/issues/19362)
-* **compiler:** make watch mode work with `declaration: false` ([7c1d3e0](https://github.com/angular/angular/commit/7c1d3e0)), closes [#19464](https://github.com/angular/angular/issues/19464)
-* **compiler:** remove deprecated `Compiler.ngGetContentSelectors()` ([#19347](https://github.com/angular/angular/issues/19347)) ([f57b7df](https://github.com/angular/angular/commit/f57b7df))
-* **compiler:** skip &nbsp; when trimming / removing whitespaces ([#19310](https://github.com/angular/angular/issues/19310)) ([13613d4](https://github.com/angular/angular/commit/13613d4)), closes [#19304](https://github.com/angular/angular/issues/19304)
-* **compiler:** support `noResolve` ([#19301](https://github.com/angular/angular/issues/19301)) ([c76da27](https://github.com/angular/angular/commit/c76da27))
-* **compiler:** various squashed fixes for the new ngc ([a8a9660](https://github.com/angular/angular/commit/a8a9660))
-* **compiler:** work well with `forwardRef` with `useValue` / `useFactory` ([1dacae2](https://github.com/angular/angular/commit/1dacae2))
-* **compiler-cli:** do not validate metadata from declaration files ([#19324](https://github.com/angular/angular/issues/19324)) ([4767902](https://github.com/angular/angular/commit/4767902)), closes [#18867](https://github.com/angular/angular/issues/18867)
-* **compiler-cli:** don't join errors with comma ([#19331](https://github.com/angular/angular/issues/19331)) ([e889c68](https://github.com/angular/angular/commit/e889c68))
-* **compiler-cli:** don't rewrite imports when annotating for closure ([#19444](https://github.com/angular/angular/issues/19444)) ([f24ea59](https://github.com/angular/angular/commit/f24ea59))
-* create proper externs so that closure does not clobber e.g. `ng` for internal variables ([#19423](https://github.com/angular/angular/issues/19423)) ([b21a1d1](https://github.com/angular/angular/commit/b21a1d1))
-* **compiler-cli:** set source file ranges in node emitter ([#19348](https://github.com/angular/angular/issues/19348)) ([27c6638](https://github.com/angular/angular/commit/27c6638))
-* **compiler-cli:** update ngtools2 EmitFlags ([#19375](https://github.com/angular/angular/issues/19375)) ([e224e3d](https://github.com/angular/angular/commit/e224e3d))
-* **core:** make dynamic & inline code checking behave the same ([#19189](https://github.com/angular/angular/issues/19189)) ([473a577](https://github.com/angular/angular/commit/473a577))
-* **http:** introduce named type for HttpParams options ([#19360](https://github.com/angular/angular/issues/19360)) ([8a0e458](https://github.com/angular/angular/commit/8a0e458))
-* **language-service:** do not report errors for `OpaqueToken` ([#19427](https://github.com/angular/angular/issues/19427)) ([c1b029a](https://github.com/angular/angular/commit/c1b029a))
-* **router:** fix activation events toString and docs ([#19147](https://github.com/angular/angular/issues/19147)) ([2c4107c](https://github.com/angular/angular/commit/2c4107c))
-* **router:** resolve and guards should be able to reject with null and undefined ([#19418](https://github.com/angular/angular/issues/19418)) ([a9d32a3](https://github.com/angular/angular/commit/a9d32a3)), closes [#17148](https://github.com/angular/angular/issues/17148)
-* **tsc-wrapped:** deduplicate metadata only when the module is the same ([#19249](https://github.com/angular/angular/issues/19249)) ([b6b18c1](https://github.com/angular/angular/commit/b6b18c1)), closes [#19219](https://github.com/angular/angular/issues/19219)
-* don’t use the global `ng` at all with closure enhanced optimizations ([a7798f2](https://github.com/angular/angular/commit/a7798f2))
-
-### Features
-
-* **animations:** support negative query limit values ([86ffacf](https://github.com/angular/angular/commit/86ffacf)), closes [#19259](https://github.com/angular/angular/issues/19259)
-* **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:** reuse the TypeScript typecheck for template typechecking. ([#19152](https://github.com/angular/angular/issues/19152)) ([996c7c2](https://github.com/angular/angular/commit/996c7c2))
-* **core:** support for bootstrap with custom zone ([#17672](https://github.com/angular/angular/issues/17672)) ([344a5ca](https://github.com/angular/angular/commit/344a5ca))
-* **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))
-* **service-worker:** introduce the [@angular](https://github.com/angular)/service-worker package ([#19274](https://github.com/angular/angular/issues/19274)) ([d442b68](https://github.com/angular/angular/commit/d442b68))
-
-### Performance Improvements
-
-* **compiler:** make the creation of `ts.Program` faster. ([#19275](https://github.com/angular/angular/issues/19275)) ([edd5f5a](https://github.com/angular/angular/commit/edd5f5a))
-* **compiler:** only use tsickle if needed ([#19275](https://github.com/angular/angular/issues/19275)) ([8f95b75](https://github.com/angular/angular/commit/8f95b75))
-* **compiler:** speed up watch mode ([#19275](https://github.com/angular/angular/issues/19275)) ([6665d76](https://github.com/angular/angular/commit/6665d76))
-
-### BREAKING CHANGES
-
-* **compiler:** The method `ngGetContentSelectors()`, deprecated in Angular 4.0, has been removed.
-  Use `ComponentFactory.ngContentSelectors` instead.
-
-
-
-<a name="4.4.4"></a>
-## [4.4.4](https://github.com/angular/angular/compare/4.4.3...4.4.4) (2017-09-28)
-
-
-### Bug Fixes
-
-* **animations:** support negative query limit value ([#19419](https://github.com/angular/angular/issues/19419)) ([bc81fbd](https://github.com/angular/angular/commit/bc81fbd)), closes [#19232](https://github.com/angular/angular/issues/19232)
-* **compiler:** correctly map error message locations ([#19424](https://github.com/angular/angular/issues/19424)) ([c3b39ba](https://github.com/angular/angular/commit/c3b39ba))
-* **compiler:** do not consider a reference with members as a reference ([#19466](https://github.com/angular/angular/issues/19466)) ([7fc2dce](https://github.com/angular/angular/commit/7fc2dce))
-* **compiler:** skip &nbsp; when trimming / removing whitespaces ([#19310](https://github.com/angular/angular/issues/19310)) ([c7aa8a1](https://github.com/angular/angular/commit/c7aa8a1)), closes [#19304](https://github.com/angular/angular/issues/19304)
-* **tsc-wrapped:** add metadata for `type` declarations ([#19040](https://github.com/angular/angular/issues/19040)) ([ae52851](https://github.com/angular/angular/commit/ae52851))
-
-
-<a name="4.4.3"></a>
-## [4.4.3](https://github.com/angular/angular/compare/4.4.2...4.4.3) (2017-09-19)
-
-
-### Bug Fixes
-
-* **tsc-wrapped:** deduplicate metadata only when the module is the same ([#19261](https://github.com/angular/angular/issues/19261)) ([0371538](https://github.com/angular/angular/commit/0371538)), closes [#19219](https://github.com/angular/angular/issues/19219)
-
-
-<a name="4.4.2"></a>
-## [4.4.2](https://github.com/angular/angular/compare/4.4.1...4.4.2) (2017-09-18)
-
-
-### Bug Fixes
-
-* **platform-server**: fix for packaging issues [#19250](https://github.com/angular/angular/issues/19250)
-
-
-<a name="4.4.1"></a>
-## [4.4.1](https://github.com/angular/angular/compare/4.3.6...4.4.1) (2017-09-15)
-
-
-### Bug Fixes
-
-* **animations:** do not leak DOM nodes/styling for host triggered animations ([#18853](https://github.com/angular/angular/issues/18853)) ([1cc3fe2](https://github.com/angular/angular/commit/1cc3fe2)), closes [#18606](https://github.com/angular/angular/issues/18606)
-* **common:** fix improper packaging for [@angular](https://github.com/angular)/common/http ([#18613](https://github.com/angular/angular/issues/18613)) ([a203a95](https://github.com/angular/angular/commit/a203a95))
-* **common:** fix XSSI prefix stripping by using JSON.parse always ([#18466](https://github.com/angular/angular/issues/18466)) ([8821723](https://github.com/angular/angular/commit/8821723)), closes [#18396](https://github.com/angular/angular/issues/18396) [#18453](https://github.com/angular/angular/issues/18453)
-* **compiler:** normalize the locale name ([#18963](https://github.com/angular/angular/issues/18963)) ([497e017](https://github.com/angular/angular/commit/497e017))
-* **core:** complete EventEmitter in QueryList on component destroy ([#18902](https://github.com/angular/angular/issues/18902)) ([7d137d7](https://github.com/angular/angular/commit/7d137d7)), closes [#18741](https://github.com/angular/angular/issues/18741)
-* **tsc-wrapped:** deduplicate metadata for re-exported modules ([48ae1a6](https://github.com/angular/angular/commit/48ae1a6))
-* **tsc-wrapped:** fix metadata symbol reference ([f6a7183](https://github.com/angular/angular/commit/f6a7183))
-* **upgrade:** remove code setting id attribute. ([#19182](https://github.com/angular/angular/issues/19182)) ([b20c5d2](https://github.com/angular/angular/commit/b20c5d2)), closes [#18446](https://github.com/angular/angular/issues/18446)
-
-
-### Features
-
-* **compiler:** allow multiple exportAs names ([#18723](https://github.com/angular/angular/issues/18723)) ([7ec28fe](https://github.com/angular/angular/commit/7ec28fe))
-* **core:** add option to remove blank text nodes from compiled templates ([#18823](https://github.com/angular/angular/issues/18823)) ([b8b551c](https://github.com/angular/angular/commit/b8b551c))
-
-
-Note: the 4.4.0 release on npm accidentally glitched-out midway, so we cut 4.4.1 instead. oops :-)
-
-
-
-<a name="5.0.0-beta.7"></a>
-## [5.0.0-beta.7](https://github.com/angular/angular/compare/5.0.0-beta.6...5.0.0-beta.7) (2017-09-13)
-
-
-### Bug Fixes
-
-* **compiler:** emit preamble in generated files. ([b1055a5](https://github.com/angular/angular/commit/b1055a5))
-* **compiler:** fix bazel integration and make `perform-compile` more flexible ([a69172f](https://github.com/angular/angular/commit/a69172f))
-* **compiler:** lower variables with a closure by exporting the variable. ([5ef6e63](https://github.com/angular/angular/commit/5ef6e63))
-* **platform-browser:** run BLACK_LISTED_EVENTS outside of ngZone ([#18993](https://github.com/angular/angular/issues/18993)) ([d52f426](https://github.com/angular/angular/commit/d52f426))
-* **platform-browser:** simple version of zone aware addEventListener ([#18993](https://github.com/angular/angular/issues/18993)) ([ed1175f](https://github.com/angular/angular/commit/ed1175f))
-* **platform-server:** support setting innerText property ([831613a](https://github.com/angular/angular/commit/831613a))
-* **router:** adjust ChildActivation events to only fire when the child is actually changing ([#19043](https://github.com/angular/angular/issues/19043)) ([66f0ab0](https://github.com/angular/angular/commit/66f0ab0)), closes [#18942](https://github.com/angular/angular/issues/18942)
-* **tsc-wrapped:** deduplicate metadata for re-exported modules ([c056b8c](https://github.com/angular/angular/commit/c056b8c))
-* **tsc-wrapped:** fix metadata symbol reference ([626555c](https://github.com/angular/angular/commit/626555c))
-* **upgrade:** add testability hook to downgraded component ([97cc6ca](https://github.com/angular/angular/commit/97cc6ca))
-* **upgrade:** remove code setting id attribute. ([b6833d1](https://github.com/angular/angular/commit/b6833d1)), closes [#18446](https://github.com/angular/angular/issues/18446)
-
-
-### Code Refactoring
-
-* **router:** remove deprecated `RouterOutlet` properties ([a9ef858](https://github.com/angular/angular/commit/a9ef858))
-* update angular to support TypeScript 2.4 ([ca5aeba](https://github.com/angular/angular/commit/ca5aeba))
-
-
-### Features
-
-* **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))
-* **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))
-* **router:** add ActivationStart/End events ([8f79150](https://github.com/angular/angular/commit/8f79150))
-
-
-### BREAKING CHANGES
-
-* - the Angular compiler now requires TypeScript 2.4.x.
-* router: `RouterOutlet` properties `locationInjector` and `locationFactoryResolver` have been removed as they were deprecated since v4.
-
-
-
-<a name="5.0.0-beta.6"></a>
-## [5.0.0-beta.6](https://github.com/angular/angular/compare/5.0.0-beta.5...5.0.0-beta.6) (2017-09-03)
-
-
-### Bug Fixes
-
-* **animations:** do not leak DOM nodes/styling for host triggered animations ([#18853](https://github.com/angular/angular/issues/18853)) ([fcadeb2](https://github.com/angular/angular/commit/fcadeb2)), closes [#18606](https://github.com/angular/angular/issues/18606)
-* **common:** fix a duplicate case in the locale switch ([#18941](https://github.com/angular/angular/issues/18941)) ([fdd5010](https://github.com/angular/angular/commit/fdd5010))
-* **common:** fix improper packaging for [@angular](https://github.com/angular)/common/http ([#18613](https://github.com/angular/angular/issues/18613)) ([65e26d7](https://github.com/angular/angular/commit/65e26d7))
-* **common:** fix XSSI prefix stripping by using JSON.parse always ([#18466](https://github.com/angular/angular/issues/18466)) ([452a7ae](https://github.com/angular/angular/commit/452a7ae)), closes [#18396](https://github.com/angular/angular/issues/18396) [#18453](https://github.com/angular/angular/issues/18453)
-* **common:** update closure-locale generation for tree shaking ([#18938](https://github.com/angular/angular/issues/18938)) ([946e5bd](https://github.com/angular/angular/commit/946e5bd))
-* **common:** use correct group separator for currency pipe ([#18932](https://github.com/angular/angular/issues/18932)) ([4ec5e28](https://github.com/angular/angular/commit/4ec5e28))
-* **common:** use v4 plurals when importing `DeprecatedI18NPipesModule` ([#18955](https://github.com/angular/angular/issues/18955)) ([30d53a8](https://github.com/angular/angular/commit/30d53a8))
-* **compiler:** always check summaries first before falling back to metadata from .d.ts files ([#18788](https://github.com/angular/angular/issues/18788)) ([f83b819](https://github.com/angular/angular/commit/f83b819))
-* **compiler:** always emit ngfactories with reexports ([#18788](https://github.com/angular/angular/issues/18788)) ([0262e37](https://github.com/angular/angular/commit/0262e37))
-* **compiler:** don’t emit stubs when we didn’t generate code for a file. ([#18788](https://github.com/angular/angular/issues/18788)) ([506d2e9](https://github.com/angular/angular/commit/506d2e9))
-* **compiler:** don’t reexport types in `.ngfactory` files ([#18788](https://github.com/angular/angular/issues/18788)) ([8c858d7](https://github.com/angular/angular/commit/8c858d7))
-* **compiler:** normalize the locale name ([#18963](https://github.com/angular/angular/issues/18963)) ([043f104](https://github.com/angular/angular/commit/043f104))
-* **compiler:** quote non identifiers in map keys. ([#18788](https://github.com/angular/angular/issues/18788)) ([2fbc92f](https://github.com/angular/angular/commit/2fbc92f))
-* **compiler:** treat absolute imports as package imports ([#18912](https://github.com/angular/angular/issues/18912)) ([fce7ae1](https://github.com/angular/angular/commit/fce7ae1))
-* **compiler:** use either summary or metadata information when reading .d.ts files ([#18912](https://github.com/angular/angular/issues/18912)) ([f1e526f](https://github.com/angular/angular/commit/f1e526f))
-* **compiler:** workaround bugs in TS when combining transformers ([#18912](https://github.com/angular/angular/issues/18912)) ([4059a72](https://github.com/angular/angular/commit/4059a72))
-* **compiler-cli:** fix memory leaks in watch mode ([#18961](https://github.com/angular/angular/issues/18961)) ([83e5deb](https://github.com/angular/angular/commit/83e5deb))
-* **compiler-cli:** use `--locale` parameter for transformers ([#18988](https://github.com/angular/angular/issues/18988)) ([22c4090](https://github.com/angular/angular/commit/22c4090))
-* **core:** complete EventEmitter in QueryList on component destroy ([#18902](https://github.com/angular/angular/issues/18902)) ([36d37cc](https://github.com/angular/angular/commit/36d37cc)), closes [#18741](https://github.com/angular/angular/issues/18741)
-* **tsc-wrapped:** decouple bundle index host from tsickle dependency ([#18999](https://github.com/angular/angular/issues/18999)) ([d1afadb](https://github.com/angular/angular/commit/d1afadb))
-* **upgrade:** deprecate the dynamic version of `ngUpgrade` ([450a13d](https://github.com/angular/angular/commit/450a13d))
-
-
-### Code Refactoring
-
-* **core:** remove deprecated `OpaqueToken` ([#18971](https://github.com/angular/angular/issues/18971)) ([3c4eef8](https://github.com/angular/angular/commit/3c4eef8))
-
-
-### Features
-
-* **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))
-* **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:** 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))
-* **compiler:** set `enableLegacyTemplate` to false by default ([#18756](https://github.com/angular/angular/issues/18756)) ([56238fe](https://github.com/angular/angular/commit/56238fe))
-* **compiler-cli:** add watch mode to `ngc` ([#18818](https://github.com/angular/angular/issues/18818)) ([cf7d47d](https://github.com/angular/angular/commit/cf7d47d))
-* **compiler-cli:** add watch mode to `ngc` ([#18818](https://github.com/angular/angular/issues/18818)) ([06d01b2](https://github.com/angular/angular/commit/06d01b2))
-* **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-cli:** lower metadata `useValue` and `data` literal fields ([#18905](https://github.com/angular/angular/issues/18905)) ([c685cc2](https://github.com/angular/angular/commit/c685cc2))
-* **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)
-
-
-### BREAKING CHANGES
-
-* core: `OpaqueToken` has been removed as it was deprecated since v4. Use `InjectionToken` instead.
-* 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.
-
-
-
-### Features
-
-* **compiler:** allow multiple exportAs names ([#18723](https://github.com/angular/angular/issues/18723)) ([7ec28fe](https://github.com/angular/angular/commit/7ec28fe))
-* **core:** add option to remove blank text nodes from compiled templates ([#18823](https://github.com/angular/angular/issues/18823)) ([b8b551c](https://github.com/angular/angular/commit/b8b551c))
-
-
-<a name="5.0.0-beta.5"></a>
-## [5.0.0-beta.5](https://github.com/angular/angular/compare/5.0.0-beta.4...5.0.0-beta.5) (2017-08-29)
-
-
-### Bug Fixes
-
-* **animations:** ensure animations are disabled on the element containing the @.disabled flag ([#18714](https://github.com/angular/angular/issues/18714)) ([791c7ef](https://github.com/angular/angular/commit/791c7ef))
-* **animations:** make sure @.disabled respects disabled parent/sub animation sequences ([#18715](https://github.com/angular/angular/issues/18715)) ([e25f05a](https://github.com/angular/angular/commit/e25f05a))
-* **animations:** make sure animation cancellations respect AUTO style values ([#18787](https://github.com/angular/angular/issues/18787)) ([29aa8b3](https://github.com/angular/angular/commit/29aa8b3)), closes [#17450](https://github.com/angular/angular/issues/17450)
-* **animations:** resolve error when using AnimationBuilder with platform-server ([#18642](https://github.com/angular/angular/issues/18642)) ([845c68f](https://github.com/angular/angular/commit/845c68f)), closes [#18635](https://github.com/angular/angular/issues/18635)
-* **animations:** restore auto-style support for removed DOM nodes ([#18787](https://github.com/angular/angular/issues/18787)) ([7062811](https://github.com/angular/angular/commit/7062811))
-* **compiler-cli:** propagate preserveWhitespaces option to codegen ([#18773](https://github.com/angular/angular/issues/18773)) ([8ea6c56](https://github.com/angular/angular/commit/8ea6c56))
-* **compiler-cli:** use forward slashes for ts.resolveModuleName ([#18784](https://github.com/angular/angular/issues/18784)) ([e228f2c](https://github.com/angular/angular/commit/e228f2c))
-* **core:** correct order in ContentChildren query result ([#18326](https://github.com/angular/angular/issues/18326)) ([f53f724](https://github.com/angular/angular/commit/f53f724)), closes [#16568](https://github.com/angular/angular/issues/16568)
-* **core:** make sure onStable runs in the right zone ([#18706](https://github.com/angular/angular/issues/18706)) ([713d7c2](https://github.com/angular/angular/commit/713d7c2))
-* **tsc-wrapped:** add metadata for `type` declarations ([#18704](https://github.com/angular/angular/issues/18704)) ([6e3498c](https://github.com/angular/angular/commit/6e3498c)), closes [#18675](https://github.com/angular/angular/issues/18675)
-* **tsc-wrapped:** make `test.sh tools` run the tsc-wrapped tests again ([#18683](https://github.com/angular/angular/issues/18683)) ([2da45e6](https://github.com/angular/angular/commit/2da45e6))
-
-
-### Code Refactoring
-
-* **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))
-* **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 `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 `initialNavigation` options ([#18781](https://github.com/angular/angular/issues/18781)) ([d76761b](https://github.com/angular/angular/commit/d76761b))
-* **router:** remove deprecated `RouterOutlet` properties ([#18781](https://github.com/angular/angular/issues/18781)) ([d1c4a94](https://github.com/angular/angular/commit/d1c4a94))
-
+<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)

 ### Features

 * **animations:** allow @.disabled property to work without an expression ([#18713](https://github.com/angular/angular/issues/18713)) ([2159342](https://github.com/angular/angular/commit/2159342))
 * **animations:** report errors when invalid CSS properties are detected ([#18718](https://github.com/angular/angular/issues/18718)) ([409688f](https://github.com/angular/angular/commit/409688f)), closes [#18701](https://github.com/angular/angular/issues/18701)
-* **common:** add an empty DeprecatedI18NPipesModule module ([#18737](https://github.com/angular/angular/issues/18737)) ([83713dd](https://github.com/angular/angular/commit/83713dd))
+* **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:** 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)
-* **compiler:** allow multiple exportAs names ([3a50098](https://github.com/angular/angular/commit/3a50098))
+* **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))
+* **compiler-cli:** add watch mode to `ngc` ([#18818](https://github.com/angular/angular/issues/18818)) ([06d01b2](https://github.com/angular/angular/commit/06d01b2))
+* **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:** 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))
+* **compiler:** set `enableLegacyTemplate` to false by default ([#18756](https://github.com/angular/angular/issues/18756)) ([56238fe](https://github.com/angular/angular/commit/56238fe))
 * **compiler:** use typescript for resolving resource paths ([43226cb](https://github.com/angular/angular/commit/43226cb))
+* **core:** Create StaticInjector which does not depend on Reflect polyfill. ([d9d00bd](https://github.com/angular/angular/commit/d9d00bd))
+* **core:** add option to remove blank text nodes from compiled templates ([#18823](https://github.com/angular/angular/issues/18823)) ([b8b551c](https://github.com/angular/angular/commit/b8b551c))
+* **core:** support for bootstrap with custom zone ([#17672](https://github.com/angular/angular/issues/17672)) ([344a5ca](https://github.com/angular/angular/commit/344a5ca))
+* **forms:** add default updateOn values for groups and arrays ([#18536](https://github.com/angular/angular/issues/18536)) ([ff5c58b](https://github.com/angular/angular/commit/ff5c58b))
+* **forms:** add options arg to abstract controls ([ebef5e6](https://github.com/angular/angular/commit/ebef5e6))
+* **forms:** add status to `AbstractControlDirective` ([233ef93](https://github.com/angular/angular/commit/233ef93))
 * **forms:** add updateOn and ngFormOptions to NgForm ([0d45828](https://github.com/angular/angular/commit/0d45828))
+* **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))
+* **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))
+* **router:** add ActivationStart/End events ([8f79150](https://github.com/angular/angular/commit/8f79150))
+* **router:** add events tracking activation of individual routes ([49cd851](https://github.com/angular/angular/commit/49cd851))
+* **service-worker:** introduce the [@angular](https://github.com/angular)/service-worker package ([#19274](https://github.com/angular/angular/issues/19274)) ([d442b68](https://github.com/angular/angular/commit/d442b68))
+* **upgrade:** propagate touched state of NgModelController ([59c23c7](https://github.com/angular/angular/commit/59c23c7))
+* **upgrade:** support lazy-loading Angular module into AngularJS app ([30e76fc](https://github.com/angular/angular/commit/30e76fc))
+* update angular to support TypeScript 2.4 ([ca5aeba](https://github.com/angular/angular/commit/ca5aeba))
+
+
+### Performance Improvements
+
+* **animations:** reduce size of bundle by removing AST classes ([#19539](https://github.com/angular/angular/issues/19539)) ([d5c9c5f](https://github.com/angular/angular/commit/d5c9c5f))
+* **compiler:** don’t emit summaries for jit by default ([b086891](https://github.com/angular/angular/commit/b086891))
+* **compiler:** fix perf issue in loading aot summaries in jit compiler ([fbc9537](https://github.com/angular/angular/commit/fbc9537))
+* **compiler:** make the creation of `ts.Program` faster. ([#19275](https://github.com/angular/angular/issues/19275)) ([edd5f5a](https://github.com/angular/angular/commit/edd5f5a))
+* **compiler:** only emit changed files for incremental compilation ([745b59f](https://github.com/angular/angular/commit/745b59f))
+* **compiler:** only type check input files when using bazel ([#19581](https://github.com/angular/angular/issues/19581)) ([0b06ea1](https://github.com/angular/angular/commit/0b06ea1))
+* **compiler:** only use tsickle if needed ([#19275](https://github.com/angular/angular/issues/19275)) ([8f95b75](https://github.com/angular/angular/commit/8f95b75))
+* **compiler:** skip type check and emit in bazel in some cases. ([#19646](https://github.com/angular/angular/issues/19646)) ([a22121d](https://github.com/angular/angular/commit/a22121d))
+* **compiler:** speed up loading of summaries for bazel. ([#19581](https://github.com/angular/angular/issues/19581)) ([81167d9](https://github.com/angular/angular/commit/81167d9))
+* **compiler:** speed up watch mode ([#19275](https://github.com/angular/angular/issues/19275)) ([6665d76](https://github.com/angular/angular/commit/6665d76))
+* **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))


 ### BREAKING CHANGES

-#### 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.
+* **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:
+```
+[
+  MyClass,
+  {provide: ClassA, useClass: SubClassA}
+]
+
+```
+
+After:
+```
+[
+  {provide: MyClass, deps: [Dep1,...]},
+  {provide: ClassA, useClass: SubClassA, deps: [Dep1,...]}
+]
+```
+
+NOTE: This only applies to platform creation and providers for the JIT
+compiler. It does not apply to `@Component` or `@NgModule` provides
+declarations.
+
+Benchpress note: Previously Benchpress also supported reflective
+provides, which now require static providers.
+
+
+#### I18n Changes (@angular/common)
+Because of multiple bugs and browser inconsistencies, we have dropped the intl api in favor of data exported from the Unicode Common Locale Data Repository (CLDR). Unfortunately we had to change the i18n pipes (date, number, currency, percent) and there are some breaking changes.

-#### Other breaking changes
-* compiler: - `@angular/platform-server` now additionally depends on
-  `@angular/platform-browser-dynamic` as a peer dependency.
-* common: Because of multiple bugs and browser inconsistencies, we have dropped the intl api in favor of data exported from the Unicode Common Locale Data Repository (CLDR).
-Unfortunately we had to change the i18n pipes (date, number, currency, percent) and there are some breaking changes.
  ##### I18n pipes:
  - Breaking change:
    - By default Angular now only contains locale data for the language `en-US`, if you set the value of `LOCALE_ID` to another locale, you will have to import new locale data for this language because we don't use the intl API anymore.
@ -474,6 +182,116 @@ Unfortunately we had to change the i18n pipes (date, number, currency, percent)
    - if you don't specify the number of digits to round to, the local format will be used (and it usually rounds numbers to 0 digits, instead of not rounding previously), e.g. `{{ 3.141592 | percent }}` will output `314%` for the locale `en-US` instead of `314.1592%` previously.


+### Deprecated code
+* **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.4.6"></a>
+## [4.4.6](https://github.com/angular/angular/compare/4.4.5...4.4.6) (2017-10-18)
+
+
+### Bug Fixes
+
+* **animations:** properly support boolean-based transitions and state changes ([#19672](https://github.com/angular/angular/issues/19672)) ([f983a6c](https://github.com/angular/angular/commit/f983a6c)), closes [#9396](https://github.com/angular/angular/issues/9396) [#12337](https://github.com/angular/angular/issues/12337)
+* **common:** attempt to JSON.parse errors for JSON responses ([#19773](https://github.com/angular/angular/issues/19773)) ([269f5ac](https://github.com/angular/angular/commit/269f5ac))
+* **router:** RouterLinkActive should update its state right after checking the children ([53a807a](https://github.com/angular/angular/commit/53a807a)), closes [#18983](https://github.com/angular/angular/issues/18983)
+
+
+### Performance Improvements
+
+* **animations:** reduce size of bundle by removing AST classes ([#19673](https://github.com/angular/angular/issues/19673)) ([76d2496](https://github.com/angular/angular/commit/76d2496))
+
+
+
+<a name="4.4.5"></a>
+## [4.4.5](https://github.com/angular/angular/compare/4.4.4...4.4.5) (2017-10-12)
+
+
+### Bug Fixes
+
+* **compiler:** `TestBed.overrideProvider` should keep imported `NgModule`s eager ([#19624](https://github.com/angular/angular/issues/19624)) ([734378c](https://github.com/angular/angular/commit/734378c))
+* **compiler:** correctly instantiate eager providers that are used via `Injector.get` ([#19558](https://github.com/angular/angular/issues/19558)) ([e292548](https://github.com/angular/angular/commit/e292548)), closes [#15501](https://github.com/angular/angular/issues/15501)
+* **compiler:** disallow references for select and index evaluation ([95f3b1d](https://github.com/angular/angular/commit/95f3b1d))
+* **core:** make dynamic & inline code checking behave the same ([#19189](https://github.com/angular/angular/issues/19189)) ([6c66031](https://github.com/angular/angular/commit/6c66031))
+* **platform-browser:** support customEqualityTesters when overriding Jasmine toEqual ([cc8ae32](https://github.com/angular/angular/commit/cc8ae32))
+* **tsc-wrapped:** don't rewrite imports when annotating for closure ([#19579](https://github.com/angular/angular/issues/19579)) ([c9f8718](https://github.com/angular/angular/commit/c9f8718))
+
+
+<a name="4.4.4"></a>
+## [4.4.4](https://github.com/angular/angular/compare/4.4.3...4.4.4) (2017-09-28)
+
+
+### Bug Fixes
+
+* **animations:** support negative query limit value ([#19419](https://github.com/angular/angular/issues/19419)) ([bc81fbd](https://github.com/angular/angular/commit/bc81fbd)), closes [#19232](https://github.com/angular/angular/issues/19232)
+* **compiler:** correctly map error message locations ([#19424](https://github.com/angular/angular/issues/19424)) ([c3b39ba](https://github.com/angular/angular/commit/c3b39ba))
+* **compiler:** do not consider a reference with members as a reference ([#19466](https://github.com/angular/angular/issues/19466)) ([7fc2dce](https://github.com/angular/angular/commit/7fc2dce))
+* **compiler:** skip &nbsp; when trimming / removing whitespaces ([#19310](https://github.com/angular/angular/issues/19310)) ([c7aa8a1](https://github.com/angular/angular/commit/c7aa8a1)), closes [#19304](https://github.com/angular/angular/issues/19304)
+* **tsc-wrapped:** add metadata for `type` declarations ([#19040](https://github.com/angular/angular/issues/19040)) ([ae52851](https://github.com/angular/angular/commit/ae52851))
+
+
+<a name="4.4.3"></a>
+## [4.4.3](https://github.com/angular/angular/compare/4.4.2...4.4.3) (2017-09-19)
+
+
+### Bug Fixes
+
+* **tsc-wrapped:** deduplicate metadata only when the module is the same ([#19261](https://github.com/angular/angular/issues/19261)) ([0371538](https://github.com/angular/angular/commit/0371538)), closes [#19219](https://github.com/angular/angular/issues/19219)
+
+
+<a name="4.4.2"></a>
+## [4.4.2](https://github.com/angular/angular/compare/4.4.1...4.4.2) (2017-09-18)
+
+
+### Bug Fixes
+
+* **platform-server**: fix for packaging issues [#19250](https://github.com/angular/angular/issues/19250)
+
+
+<a name="4.4.1"></a>
+## [4.4.1](https://github.com/angular/angular/compare/4.3.6...4.4.1) (2017-09-15)
+
+
+### Bug Fixes
+
+* **animations:** do not leak DOM nodes/styling for host triggered animations ([#18853](https://github.com/angular/angular/issues/18853)) ([1cc3fe2](https://github.com/angular/angular/commit/1cc3fe2)), closes [#18606](https://github.com/angular/angular/issues/18606)
+* **common:** fix improper packaging for [@angular](https://github.com/angular)/common/http ([#18613](https://github.com/angular/angular/issues/18613)) ([a203a95](https://github.com/angular/angular/commit/a203a95))
+* **common:** fix XSSI prefix stripping by using JSON.parse always ([#18466](https://github.com/angular/angular/issues/18466)) ([8821723](https://github.com/angular/angular/commit/8821723)), closes [#18396](https://github.com/angular/angular/issues/18396) [#18453](https://github.com/angular/angular/issues/18453)
+* **compiler:** normalize the locale name ([#18963](https://github.com/angular/angular/issues/18963)) ([497e017](https://github.com/angular/angular/commit/497e017))
+* **core:** complete EventEmitter in QueryList on component destroy ([#18902](https://github.com/angular/angular/issues/18902)) ([7d137d7](https://github.com/angular/angular/commit/7d137d7)), closes [#18741](https://github.com/angular/angular/issues/18741)
+* **tsc-wrapped:** deduplicate metadata for re-exported modules ([48ae1a6](https://github.com/angular/angular/commit/48ae1a6))
+* **tsc-wrapped:** fix metadata symbol reference ([f6a7183](https://github.com/angular/angular/commit/f6a7183))
+* **upgrade:** remove code setting id attribute. ([#19182](https://github.com/angular/angular/issues/19182)) ([b20c5d2](https://github.com/angular/angular/commit/b20c5d2)), closes [#18446](https://github.com/angular/angular/issues/18446)
+
+
+### Features
+
+* **compiler:** allow multiple exportAs names ([#18723](https://github.com/angular/angular/issues/18723)) ([7ec28fe](https://github.com/angular/angular/commit/7ec28fe))
+* **core:** add option to remove blank text nodes from compiled templates ([#18823](https://github.com/angular/angular/issues/18823)) ([b8b551c](https://github.com/angular/angular/commit/b8b551c))
+
+
+Note: the 4.4.0 release on npm accidentally glitched-out midway, so we cut 4.4.1 instead. oops :-)
+
+
+
 <a name="4.3.6"></a>
 ## [4.3.6](https://github.com/angular/angular/compare/4.3.5...4.3.6) (2017-08-23)

@ -496,31 +314,6 @@ Unfortunately we had to change the i18n pipes (date, number, currency, percent)



-<a name="5.0.0-beta.4"></a>
-## [5.0.0-beta.4](https://github.com/angular/angular/compare/5.0.0-beta.3...5.0.0-beta.4) (2017-08-16)
-
-
-### Bug Fixes
-
-* **compiler:** Don't strip CSS source maps ([64b4be9](https://github.com/angular/angular/commit/64b4be9))
-* **forms:** re-assigning options should not clear select ([32ff21c](https://github.com/angular/angular/commit/32ff21c)), closes [#18330](https://github.com/angular/angular/issues/18330)
-* **language-service:** remove tsickle dependency ([bc22ff1](https://github.com/angular/angular/commit/bc22ff1))
-
-
-### Features
-
-* **common:** mark NgTemplateOutlet API as stable ([0a73e8d](https://github.com/angular/angular/commit/0a73e8d))
-* **forms:** add status to `AbstractControlDirective` ([233ef93](https://github.com/angular/angular/commit/233ef93))
-* **forms:** add updateOn support to ngModelOptions ([1cfa79c](https://github.com/angular/angular/commit/1cfa79c))
-
-
-### Performance Improvements
-
-* **core:** add option to remove blank text nodes from compiled templates ([d2c0d98](https://github.com/angular/angular/commit/d2c0d98))
-* **core:** Remove decorator DSL which depends on Reflect ([cac130e](https://github.com/angular/angular/commit/cac130e))
-
-
-
 <a name="4.3.5"></a>
 ## [4.3.5](https://github.com/angular/angular/compare/4.3.4...4.3.5) (2017-08-16)

@ -543,89 +336,6 @@ Unfortunately we had to change the i18n pipes (date, number, currency, percent)
 * **compiler:** ignore [@import](https://github.com/import) in multi-line css ([#18452](https://github.com/angular/angular/issues/18452)) ([e7e7622](https://github.com/angular/angular/commit/e7e7622)), closes [#18038](https://github.com/angular/angular/issues/18038)


-<a name="5.0.0-beta.3"></a>
-## [5.0.0-beta.3](https://github.com/angular/angular/compare/5.0.0-beta.2...5.0.0-beta.3) (2017-08-09)
-
-
-### Bug Fixes
-
-* **animations:** revert container/queried animations accordingly during cancel ([#18516](https://github.com/angular/angular/issues/18516)) ([c0c03dc](https://github.com/angular/angular/commit/c0c03dc))
-* **animations:** support persisting dynamic styles within animation states ([#18468](https://github.com/angular/angular/issues/18468)) ([05472cb](https://github.com/angular/angular/commit/05472cb)), closes [#18423](https://github.com/angular/angular/issues/18423) [#17505](https://github.com/angular/angular/issues/17505)
-* **benchpress:** compile cleanly with TS 2.4 ([#18455](https://github.com/angular/angular/issues/18455)) ([e25b3dd](https://github.com/angular/angular/commit/e25b3dd))
-* **common:** don't recreate view when context shape doesn't change ([#18277](https://github.com/angular/angular/issues/18277)) ([685cc26](https://github.com/angular/angular/commit/685cc26)), closes [#13407](https://github.com/angular/angular/issues/13407)
-* **compiler:** cleanly compile with TypeScript 2.4 ([#18456](https://github.com/angular/angular/issues/18456)) ([7c47b62](https://github.com/angular/angular/commit/7c47b62))
-* **compiler:** ignore [@import](https://github.com/import) in multi-line css ([#18452](https://github.com/angular/angular/issues/18452)) ([1dca575](https://github.com/angular/angular/commit/1dca575)), closes [#18038](https://github.com/angular/angular/issues/18038)
-* **compiler-cli:** disable buggy expression lowering ([#18513](https://github.com/angular/angular/issues/18513)) ([ca695e0](https://github.com/angular/angular/commit/ca695e0))
-* **compiler-cli:** fix and re-enable expression lowering ([#18570](https://github.com/angular/angular/issues/18570)) ([6f2038c](https://github.com/angular/angular/commit/6f2038c)), closes [#18388](https://github.com/angular/angular/issues/18388)
-* **compiler-cli:** modified ngc to throw all errors, not just syntax ([#18388](https://github.com/angular/angular/issues/18388)) ([5651e4a](https://github.com/angular/angular/commit/5651e4a))
-* **compiler-cli:** remove minimist dependency of compiler-cli/index ([#18532](https://github.com/angular/angular/issues/18532)) ([5b7432b](https://github.com/angular/angular/commit/5b7432b))
-* **core:** fix platform-browser-dynamic ([#18576](https://github.com/angular/angular/issues/18576)) ([f0a5501](https://github.com/angular/angular/commit/f0a5501))
-* **core:** forbid destroyed views to be inserted or moved in VC ([#18568](https://github.com/angular/angular/issues/18568)) ([e54bd59](https://github.com/angular/angular/commit/e54bd59)), closes [#17780](https://github.com/angular/angular/issues/17780)
-
-### Features
-
-* **core:** Create StaticInjector which does not depend on Reflect polyfill. ([d9d00bd](https://github.com/angular/angular/commit/d9d00bd))
-* **forms:** add default updateOn values for groups and arrays ([#18536](https://github.com/angular/angular/issues/18536)) ([ff5c58b](https://github.com/angular/angular/commit/ff5c58b))
-* **forms:** add updateOn blur option to FormControls ([#18408](https://github.com/angular/angular/issues/18408)) ([333a708](https://github.com/angular/angular/commit/333a708)), closes [#7113](https://github.com/angular/angular/issues/7113)
-* **forms:** add updateOn submit option to FormControls ([#18514](https://github.com/angular/angular/issues/18514)) ([f69561b](https://github.com/angular/angular/commit/f69561b))
-
-### Performance Improvements
-
-* switch angular to use StaticInjector instead of ReflectiveInjector ([fcadbf4](https://github.com/angular/angular/commit/fcadbf4)), closes [#18496](https://github.com/angular/angular/issues/18496)
-
-
-### BREAKING CHANGES
-
-* `platformXXXX()` no longer accepts providers which depend on reflection.
-Specifically the method signature when from `Provider[]` to
-`StaticProvider[]`.
-
-Example:
-Before:
-```
-[
-  MyClass,
-  {provide: ClassA, useClass: SubClassA}
-]
-
-```
-
-After:
-```
-[
-  {provide: MyClass, deps: [Dep1,...]},
-  {provide: ClassA, useClass: SubClassA, deps: [Dep1,...]}
-]
-```
-
-NOTE: This only applies to platform creation and providers for the JIT
-compiler. It does not apply to `@Component` or `@NgModule` provides
-declarations.
-
-Benchpress note: Previously Benchpress also supported reflective
-provides, which now require static providers.
-
-DEPRECATION:
-
- `ReflectiveInjector` is now deprecated as it will be remove. Use
-  `Injector.create` as a replacement.
-
-<a name="5.0.0-beta.2"></a>
-## [5.0.0-beta.2](https://github.com/angular/angular/compare/5.0.0-beta.1...5.0.0-beta.2) (2017-08-02)
-
-
-### Bug Fixes
-
-* **compiler:** do not consider arguments when determining recursion ([e64b54b](https://github.com/angular/angular/commit/e64b54b))
-* **compiler:** fix for element needing implicit parent placed in top-level ng-container ([381471d](https://github.com/angular/angular/commit/381471d)), closes [#18314](https://github.com/angular/angular/issues/18314)
-
-
-### Features
-
-* **forms:** add options arg to abstract controls ([ebef5e6](https://github.com/angular/angular/commit/ebef5e6))
-* **router:** add events tracking activation of individual routes ([49cd851](https://github.com/angular/angular/commit/49cd851))
-
-
 <a name="4.3.3"></a>
 ## [4.3.3](https://github.com/angular/angular/compare/4.3.2...4.3.3) (2017-08-02)

@ -634,35 +344,6 @@ DEPRECATION:
 * **compiler:** fix for element needing implicit parent placed in top-level ng-container ([f5cbc2e](https://github.com/angular/angular/commit/f5cbc2e)), closes [#18314](https://github.com/angular/angular/issues/18314)


-<a name="5.0.0-beta.1"></a>
-## [5.0.0-beta.1](https://github.com/angular/angular/compare/5.0.0-beta.0...5.0.0-beta.1) (2017-07-27)
-
-
-### Bug Fixes
-
-* **animations:** export BrowserModule as apart of BrowserAnimationsModule ([#18263](https://github.com/angular/angular/issues/18263)) ([fd0cc01](https://github.com/angular/angular/commit/fd0cc01))
-* **compiler:** add equiv & disp attributes to Xliff2 ICU placeholders ([#18283](https://github.com/angular/angular/issues/18283)) ([38ec05f](https://github.com/angular/angular/commit/38ec05f)), closes [#17344](https://github.com/angular/angular/issues/17344)
-* **compiler:** allow numbers for ICU message cases in lexer ([#18095](https://github.com/angular/angular/issues/18095)) ([a3a5429](https://github.com/angular/angular/commit/a3a5429)), closes [#17799](https://github.com/angular/angular/issues/17799)
-* **core:** invoke error handler outside of the Angular Zone ([#18269](https://github.com/angular/angular/issues/18269)) ([7ae7573](https://github.com/angular/angular/commit/7ae7573)), closes [#17073](https://github.com/angular/angular/issues/17073) [#7774](https://github.com/angular/angular/issues/7774)
-* **platform-server:** don't clobber parse5 properties when setting ([#18237](https://github.com/angular/angular/issues/18237)) ([a094769](https://github.com/angular/angular/commit/a094769)), closes [#17050](https://github.com/angular/angular/issues/17050)
-* **router:** child CanActivate guard should wait for parent to complete ([#18110](https://github.com/angular/angular/issues/18110)) ([086f4aa](https://github.com/angular/angular/commit/086f4aa)), closes [#15670](https://github.com/angular/angular/issues/15670)
-* **router:** should throw when lazy loaded module doesn't define any routes ([#15001](https://github.com/angular/angular/issues/15001)) ([82923a3](https://github.com/angular/angular/commit/82923a3)), closes [#14596](https://github.com/angular/angular/issues/14596)
-* **upgrade:** ensure downgraded components are created in the Angular zone ([#18209](https://github.com/angular/angular/issues/18209)) ([43c33d5](https://github.com/angular/angular/commit/43c33d5))
-* **upgrade:** throw error if trying to get injector before setting ([#18209](https://github.com/angular/angular/issues/18209)) ([d31dc7b](https://github.com/angular/angular/commit/d31dc7b))
-
-
-### Features
-
-* **compiler:** add representation of placeholders to xliff & xmb ([b3085e9](https://github.com/angular/angular/commit/b3085e9)), closes [#17345](https://github.com/angular/angular/issues/17345)
-
-
-### Performance Improvements
-
-* latest tsickle to tree shake: abstract class methods & interfaces ([#18236](https://github.com/angular/angular/issues/18236)) ([b7a6f52](https://github.com/angular/angular/commit/b7a6f52))
-* **core:** use native addEventListener for faster rendering. ([#18107](https://github.com/angular/angular/issues/18107)) ([6279e50](https://github.com/angular/angular/commit/6279e50))
-
-
-
 <a name="4.3.2"></a>
 ## [4.3.2](https://github.com/angular/angular/compare/4.3.1...4.3.2) (2017-07-26)

@ -680,35 +361,6 @@ DEPRECATION:



-<a name="5.0.0-beta.0"></a>
-## [5.0.0-beta.0](https://github.com/angular/angular/compare/4.3.0...5.0.0-beta.0) (2017-07-19)
-
-
-### Bug Fixes
-
-* **animations:** always camelcase style property names that contain auto styles ([d22f8f5](https://github.com/angular/angular/commit/d22f8f5)), closes [#17938](https://github.com/angular/angular/issues/17938)
-* **animations:** capture cancelled animation styles within grouped animations ([23146c9](https://github.com/angular/angular/commit/23146c9)), closes [#17170](https://github.com/angular/angular/issues/17170)
-* **animations:** do not crash animations if a nested component fires CD during CD ([5db6f38](https://github.com/angular/angular/commit/5db6f38)), closes [#18193](https://github.com/angular/angular/issues/18193)
-* **animations:** make sure @.disabled works in non-animation components ([5344be5](https://github.com/angular/angular/commit/5344be5))
-* **common:** send flushed body as error instead of null ([5c62e30](https://github.com/angular/angular/commit/5c62e30)), closes [#18181](https://github.com/angular/angular/issues/18181)
-* **compiler:** ensure jit external id arguments names are unique ([95635c1](https://github.com/angular/angular/commit/95635c1))
-* **compiler-cli:** don't generate empty <target/> when extracting xliff ([65c9e13](https://github.com/angular/angular/commit/65c9e13)), closes [#15754](https://github.com/angular/angular/issues/15754)
-* **platform-server:** provide XhrFactory for HttpClient ([8076482](https://github.com/angular/angular/commit/8076482))
-* **router:** canDeactivate guards should run from bottom to top ([e20cfe1](https://github.com/angular/angular/commit/e20cfe1)), closes [#15657](https://github.com/angular/angular/issues/15657)
-* **router:** should navigate to the same url when config changes ([eb6fb5f](https://github.com/angular/angular/commit/eb6fb5f)), closes [#15535](https://github.com/angular/angular/issues/15535)
-* **router:** should run resolvers for the same route concurrently ([ad3029e](https://github.com/angular/angular/commit/ad3029e)), closes [#14279](https://github.com/angular/angular/issues/14279)
-* **router:** terminal route in custom matcher ([b399cb2](https://github.com/angular/angular/commit/b399cb2))
-* **upgrade:** allow accessing AngularJS injector from downgraded module ([a5205c6](https://github.com/angular/angular/commit/a5205c6))
-
-
-### Features
-
-* **animations:** support :increment and :decrement transition aliases ([6f45519](https://github.com/angular/angular/commit/6f45519))
-* **upgrade:** propagate touched state of NgModelController ([59c23c7](https://github.com/angular/angular/commit/59c23c7))
-* **upgrade:** support lazy-loading Angular module into AngularJS app ([30e76fc](https://github.com/angular/angular/commit/30e76fc))
-
-
-
 <a name="4.3.1"></a>
 ## [4.3.1](https://github.com/angular/angular/compare/4.3.0...4.3.1) (2017-07-19)

--- a/aio/content/examples/.gitignore
+++ b/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
--- a/aio/content/examples/aot-compiler/e2e-spec.ts
+++ b/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();
-      });
-    });
-});
--- a/aio/content/examples/aot-compiler/example-config.json
+++ b/aio/content/examples/aot-compiler/example-config.json
@ -1,4 +0,0 @@
-{
-  "build": "build:aot",
-  "projectType": "systemjs"
-}
--- a/aio/content/examples/aot-compiler/rollup-config.js
+++ b/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
--- a/aio/content/examples/aot-compiler/src/app/app.component.html
+++ b/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>
-
--- a/aio/content/examples/aot-compiler/src/app/app.component.ts
+++ b/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;
-  }
-}
--- a/aio/content/examples/aot-compiler/src/app/app.module.ts
+++ b/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 { }
--- a/aio/content/examples/aot-compiler/src/index-jit.html
+++ b/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>
--- a/aio/content/examples/aot-compiler/src/index.html
+++ b/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>
--- a/aio/content/examples/aot-compiler/src/main-jit.ts
+++ b/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);
--- a/aio/content/examples/aot-compiler/src/main.ts
+++ b/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);
--- a/aio/content/examples/aot-compiler/tsconfig-aot.json
+++ b/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
-  }
-}
--- a/aio/content/examples/component-styles/e2e/app.e2e-spec.ts
+++ b/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/);
  });
--- a/aio/content/examples/component-styles/plnkr.json
+++ b/aio/content/examples/component-styles/plnkr.json
@ -4,7 +4,8 @@
  "files": [
    "!**/*.d.ts",
    "!**/*.js",
-    "!**/*.native.*"
+    "!**/*.native.*",
+    "!**/*.[1].*"
  ],
  "tags": ["CSS"]
 }
--- a/aio/content/examples/component-styles/src/app/hero-app.component.1.css
+++ b/aio/content/examples/component-styles/src/app/hero-app.component.1.css
@ -0,0 +1,3 @@
+h1 {
+  font-weight: normal;
+}
--- a/aio/content/examples/component-styles/src/app/hero-app.component.1.ts
+++ b/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
--- a/aio/content/examples/component-styles/src/app/hero-app.component.ts
+++ b/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 {
--- a/aio/content/examples/deployment/src/app/app.component.ts
+++ b/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 { }
--- a/aio/content/examples/deployment/src/app/app.module.ts
+++ b/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 { }
--- a/aio/content/examples/deployment/src/app/crisis-list.component.ts
+++ b/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 { }
--- a/aio/content/examples/deployment/src/app/hero-list.component.ts
+++ b/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 { }
--- a/aio/content/examples/deployment/src/index.html
+++ b/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>
--- a/aio/content/examples/deployment/src/systemjs.config.server.js
+++ b/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);
--- a/aio/content/examples/i18n/doc-files/app.component.html
+++ b/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
--- a/aio/content/examples/i18n/doc-files/app.locale_data.ts
+++ b/aio/content/examples/i18n/doc-files/app.locale_data.ts
--- a/aio/content/examples/i18n/doc-files/app.locale_data_extra.ts
+++ b/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
--- a/aio/content/examples/i18n/doc-files/app.module.ts
+++ b/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 { }
--- a/aio/content/examples/i18n/doc-files/main.1.ts
+++ b/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);
--- a/aio/content/examples/i18n/doc-files/main.2.ts
+++ b/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'}
+  ]
+});
--- a/aio/content/examples/i18n/doc-files/main.3.ts
+++ b/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: [
+    // ...
+  ]
+});
--- a/aio/content/examples/i18n/doc-files/messages.fr.xlf.html
+++ b/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>
+
--- a/aio/content/examples/i18n/e2e-spec.ts
+++ b/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');
-  });
-
-});
--- a/aio/content/examples/i18n/e2e/app.e2e-spec.ts
+++ b/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`);
+  });
+
+});
--- a/aio/content/examples/i18n/example-config.json
+++ b/aio/content/examples/i18n/example-config.json
@ -0,0 +1,3 @@
+{
+  "projectType": "i18n"
+}
--- a/aio/content/examples/i18n/messages.xlf
+++ b/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>
--- a/aio/content/examples/i18n/plnkr.json
+++ b/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"]
-}
--- a/aio/content/examples/i18n/src/app/app.component.html
+++ b/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-->
--- a/aio/content/examples/i18n/src/app/app.component.ts
+++ b/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'; }
+  male() { this.gender = 'm'; }
  female() { this.gender = 'f'; }
+  other() { this.gender = 'o'; }
 }

--- a/aio/content/examples/i18n/src/app/app.locale_data_extra.ts
+++ b/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
--- a/aio/content/examples/i18n/src/app/app.module.ts
+++ b/aio/content/examples/i18n/src/app/app.module.ts
@ -1,13 +1,12 @@
 // #docregion
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';

-import { AppComponent }  from './app.component';
+import { AppComponent } from './app.component';

@NgModule({
-  imports:      [ BrowserModule ],
+  imports: [ BrowserModule ],
  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
+  bootstrap: [ AppComponent ]
 })
-
 export class AppModule { }
--- a/aio/content/examples/i18n/src/app/i18n-providers.ts
+++ b/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
--- a/aio/content/examples/i18n/src/index.html
+++ b/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 -->
--- a/aio/content/examples/i18n/src/locale/messages.es.xlf
+++ b/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>
--- a/aio/content/examples/i18n/src/locale/messages.es.xlf.html
+++ b/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>
-
--- a/aio/content/examples/i18n/src/locale/messages.fr.xlf
+++ b/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>
--- a/aio/content/examples/i18n/src/locale/messages.xlf
+++ b/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>
--- a/aio/content/examples/i18n/src/main.1.ts
+++ b/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);
--- a/aio/content/examples/i18n/src/main.ts
+++ b/aio/content/examples/i18n/src/main.ts
@ -1,10 +1,12 @@
 // #docregion
-import { platformBrowserDynamic }  from '@angular/platform-browser-dynamic';
-import { getTranslationProviders } from './app/i18n-providers';
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

 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);
--- a/aio/content/examples/i18n/src/systemjs-text-plugin.js
+++ b/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});';
-}
--- a/aio/content/examples/i18n/zipper.json
+++ b/aio/content/examples/i18n/zipper.json
@ -0,0 +1,11 @@
+{
+  "files":[
+    "!dist/",
+    "!**/*.d.ts",
+    "!src/**/*.js",
+    "!doc-files/**/*",
+    "**/*.xlf"
+  ],
+  "removeSystemJsConfig": true,
+  "type": "i18n"
+}
--- a/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts
+++ b/aio/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts
@ -20,12 +20,12 @@ export class HeroService {

  getHero(id: number) {
    return this.http.get(`api/heroes/${id}`)
-      .map(response => response.json().data as Hero);
+      .map(response => response.json() as Hero);
  }

  getHeroes() {
    return this.http.get(`api/heroes`)
-      .map(response => response.json().data as Hero[]);
+      .map(response => response.json() as Hero[]);
  }

 }
--- a/aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts
+++ b/aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts
@ -11,7 +11,7 @@ export class HeroService {

  getHeroes() {
    return this.http.get('api/heroes')
-      .map((response: Response) => <Hero[]>response.json().data);
+      .map((response: Response) => <Hero[]>response.json());
  }
 }
 // #enddocregion example
--- a/aio/content/examples/toh-pt0/e2e/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt0/e2e/app.e2e-spec.ts
@ -0,0 +1,14 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Tour of Heroes', () => {
+  beforeEach(() => {
+    return browser.get('/');
+  });
+
+  it('should display "Tour of Heroes"', () => {
+    let title = element(by.css('app-root h1')).getText();
+    expect(title).toEqual('Tour of Heroes');
+  });
+});
--- a/aio/content/examples/deployment/example-config.json
+++ b/aio/content/examples/deployment/example-config.json
--- a/aio/content/examples/toh-pt0/plnkr.json
+++ b/aio/content/examples/toh-pt0/plnkr.json
@ -0,0 +1,10 @@
+{
+  "description": "Tour of Heroes: Part 0",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes"]
+}
--- a/aio/content/examples/toh-pt0/src/app/app.component.css
+++ b/aio/content/examples/toh-pt0/src/app/app.component.css
--- a/aio/content/examples/toh-pt0/src/app/app.component.html
+++ b/aio/content/examples/toh-pt0/src/app/app.component.html
@ -0,0 +1 @@
+<h1>{{title}}</h1>
--- a/aio/content/examples/toh-pt0/src/app/app.component.spec.ts
+++ b/aio/content/examples/toh-pt0/src/app/app.component.spec.ts
@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});
--- a/aio/content/examples/toh-pt0/src/app/app.component.ts
+++ b/aio/content/examples/toh-pt0/src/app/app.component.ts
@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+// #docregion set-title
+  title = 'Tour of Heroes';
+// #enddocregion set-title
+}
--- a/aio/content/examples/toh-pt0/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt0/src/app/app.module.ts
@ -0,0 +1,16 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
--- a/aio/content/examples/toh-pt0/src/index.html
+++ b/aio/content/examples/toh-pt0/src/index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
--- a/aio/content/examples/toh-pt4/src/main.1.ts
+++ b/aio/content/examples/toh-pt4/src/main.1.ts
--- a/aio/content/examples/toh-pt0/src/styles.1.css
+++ b/aio/content/examples/toh-pt0/src/styles.1.css
@ -1,4 +1,4 @@
-/* Master Styles */
+/* Application-wide Styles */
 h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
--- a/aio/content/examples/toh-pt1/app/app.component.1.ts
+++ b/aio/content/examples/toh-pt1/app/app.component.1.ts
@ -1,44 +0,0 @@
-import { Component } from '@angular/core';
-
-let t = {
-// #docregion show-hero
-template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`
-// #enddocregion show-hero
-};
-
-t = {
-// #docregion show-hero-2
-template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`
-// #enddocregion show-hero-2
-};
-
-t = {
-// #docregion multi-line-strings
-template: `
-  <h1>{{title}}</h1>
-  <h2>{{hero.name}} details!</h2>
-  <div><label>id: </label>{{hero.id}}</div>
-  <div><label>name: </label>{{hero.name}}</div>
-  `
-// #enddocregion multi-line-strings
-};
-
-
-/*
-// #docregion name-input
-<div>
-  <label>name: </label>
-  <input [(ngModel)]="hero.name" placeholder="name">
-</div>
-// #enddocregion name-input
-*/
-
-/////////////////
-
-@Component(t)
-// #docregion app-component-1
-export class AppComponent {
-  title = 'Tour of Heroes';
-  hero = 'Windstorm';
-}
-// #enddocregion app-component-1
--- a/aio/content/examples/toh-pt1/e2e/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt1/e2e/app.e2e-spec.ts
@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';

 const expectedH1 = 'Tour of Heroes';
-const expectedTitle = `Angular ${expectedH1}`;
+const expectedTitle = `${expectedH1}`;

 class Hero {
  id: number;
@ -49,7 +49,7 @@ describe('Tutorial part 1', () => {
    let page = getPageElts();
    let hero = await Hero.fromDetail(page.heroDetail);
    expect(hero.id).toEqual(expectedHero.id);
-    expect(hero.name).toEqual(expectedHero.name);
+    expect(hero.name).toEqual(expectedHero.name.toUpperCase());
  });

  it(`shows updated hero name`, async () => {
@ -58,13 +58,13 @@ describe('Tutorial part 1', () => {
    let hero = await Hero.fromDetail(page.heroDetail);
    let newName = expectedHero.name + nameSuffix;
    expect(hero.id).toEqual(expectedHero.id);
-    expect(hero.name).toEqual(newName);
+    expect(hero.name).toEqual(newName.toUpperCase());
  });

 });

 function getPageElts() {
  return {
-    heroDetail: element(by.css('my-app'))
+    heroDetail: element(by.css('app-root'))
  };
 }
--- a/aio/content/examples/toh-pt1/plnkr.json
+++ b/aio/content/examples/toh-pt1/plnkr.json
@ -4,7 +4,8 @@
  "files":[
    "!**/*.d.ts",
    "!**/*.js",
-    "!**/*.[1].*"
+    "!**/*.[1].*",
+    "!**/dummy.module.ts"
  ],
  "tags": ["tutorial", "tour", "heroes"]
 }
--- a/aio/content/examples/toh-pt1/src/app/app.component.css
+++ b/aio/content/examples/toh-pt1/src/app/app.component.css
--- a/aio/content/examples/toh-pt1/src/app/app.component.html
+++ b/aio/content/examples/toh-pt1/src/app/app.component.html
@ -0,0 +1,2 @@
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
--- a/aio/content/examples/toh-pt1/src/app/app.component.ts
+++ b/aio/content/examples/toh-pt1/src/app/app.component.ts
@ -1,33 +1,10 @@
-// #docregion
 import { Component } from '@angular/core';

-// #docregion hero-class-1
-export class Hero {
-  id: number;
-  name: string;
-}
-// #enddocregion hero-class-1
-
@Component({
-  selector: 'my-app',
-  // #docregion editing-Hero
-  template: `
-    <h1>{{title}}</h1>
-    <h2>{{hero.name}} details!</h2>
-    <div><label>id: </label>{{hero.id}}</div>
-    <div>
-      <label>name: </label>
-      <input [(ngModel)]="hero.name" placeholder="name">
-    </div>
-    `
-  // #enddocregion editing-Hero
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
  title = 'Tour of Heroes';
-  // #docregion hero-property-1
-  hero: Hero = {
-    id: 1,
-    name: 'Windstorm'
-  };
-  // #enddocregion hero-property-1
 }
--- a/aio/content/examples/toh-pt1/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt1/src/app/app.module.ts
@ -1,18 +1,30 @@
+// #docplaster
 // #docregion
-import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
+import { NgModule } from '@angular/core';
+// #docregion formsmodule-js-import
+import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
+// #enddocregion formsmodule-js-import

-import { AppComponent }  from './app.component';
+import { AppComponent } from './app.component';
+// #docregion heroes-import
+import { HeroesComponent } from './heroes/heroes.component';
+// #enddocregion heroes-import

@NgModule({
+  // #docregion declarations
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
+  // #enddocregion declarations
+  // #docregion ng-imports
  imports: [
    BrowserModule,
-    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
+    FormsModule
  ],
-  declarations: [
-    AppComponent
-  ],
-  bootstrap: [ AppComponent ]
+  // #enddocregion ng-imports
+  providers: [],
+  bootstrap: [AppComponent]
 })
 export class AppModule { }
--- a/aio/content/examples/toh-pt1/src/app/hero.ts
+++ b/aio/content/examples/toh-pt1/src/app/hero.ts
@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html
@ -0,0 +1,17 @@
+<!-- #docregion show-hero-1 -->
+{{hero}}
+<!-- #enddocregion show-hero-1 -->
+
+<!-- #docregion show-hero-2 -->
+<h2>{{ hero.name }} Details</h2>
+<div><span>id: </span>{{hero.id}}</div>
+<div><span>name: </span>{{hero.name}}</div>
+<!-- #enddocregion show-hero-2 -->
+
+<!-- #docregion name-input -->
+<div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name">
+    </label>
+</div>
+<!-- #enddocregion name-input -->
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.css
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html
@ -0,0 +1,10 @@
+<!-- #docregion -->
+<!-- #docregion pipe -->
+<h2>{{ hero.name | uppercase }} Details</h2>
+<!-- #enddocregion pipe -->
+<div><span>id: </span>{{hero.id}}</div>
+<div>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name">
+    </label>
+</div>
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/toh-pt1/src/app/heroes/heroes.component.ts
@ -0,0 +1,35 @@
+// #docplaster
+// #docregion, v1
+import { Component, OnInit } from '@angular/core';
+// #enddocregion v1
+import { Hero } from '../hero';
+// #docregion v1
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  // #enddocregion, v1
+  /*
+  // #docregion add-hero
+  hero = 'Windstorm';
+  // #enddocregion add-hero
+  */
+  // #docregion
+  // #docregion hero-property-1
+  hero: Hero = {
+    id: 1,
+    name: 'Windstorm'
+  };
+  // #enddocregion hero-property-1
+  // #docregion v1
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
+// #enddocregion, v1
--- a/aio/content/examples/toh-pt1/src/index.html
+++ b/aio/content/examples/toh-pt1/src/index.html
@ -1,13 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <title>Angular Tour of Heroes</title>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">

-  <body>
-    <my-app>Loading...</my-app>
-  </body>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
 </html>
--- a/aio/content/examples/toh-pt2/e2e/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt2/e2e/app.e2e-spec.ts
@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';

 const expectedH1 = 'Tour of Heroes';
-const expectedTitle = `Angular ${expectedH1}`;
+const expectedTitle = `${expectedH1}`;
 const expectedH2 = 'My Heroes';
 const targetHero = { id: 16, name: 'RubberMan' };
 const nameSuffix = 'X';
@ -85,7 +85,7 @@ function selectHeroTests() {
    let page = getPageElts();
    let hero = await Hero.fromDetail(page.heroDetail);
    expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(targetHero.name);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
  });
 }

@ -100,7 +100,7 @@ function updateHeroTests() {
    let hero = await Hero.fromDetail(page.heroDetail);
    let newName = targetHero.name + nameSuffix;
    expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(newName);
+    expect(hero.name).toEqual(newName.toUpperCase());
  });

  it(`shows updated hero name in list`, async () => {
@ -126,8 +126,8 @@ function expectHeading(hLevel: number, expectedText: string): void {

 function getPageElts() {
  return {
-    heroes: element.all(by.css('my-app li')),
-    selected: element(by.css('my-app li.selected')),
-    heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
+    heroes: element.all(by.css('app-root li')),
+    selected: element(by.css('app-root li.selected')),
+    heroDetail: element(by.css('app-root > div, app-root > app-heroes > div'))
  };
 }
--- a/aio/content/examples/toh-pt2/src/app/app.component.1.html
+++ b/aio/content/examples/toh-pt2/src/app/app.component.1.html
@ -1,69 +0,0 @@
-<!-- #docregion ng-for -->
-<li *ngFor="let hero of heroes">
-  <span class="badge">{{hero.id}}</span> {{hero.name}}
-</li>
-<!-- #enddocregion ng-for -->
-
-<!-- #docregion heroes-styled -->
-<h2>My Heroes</h2>
-<ul class="heroes">
-  <li *ngFor="let hero of heroes">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
-  </li>
-</ul>
-<!-- #enddocregion heroes-styled -->
-
-<!-- #docregion selectedHero-click -->
-<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
-  ...
-</li>
-<!-- #enddocregion selectedHero-click -->
-
-<!-- #docregion selectedHero-details -->
-<h2>{{selectedHero.name}} details!</h2>
-<div><label>id: </label>{{selectedHero.id}}</div>
-<div>
-    <label>name: </label>
-    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
-</div>
-<!-- #enddocregion selectedHero-details -->
-
-<!-- #docregion ng-if -->
-<div *ngIf="selectedHero">
-  <h2>{{selectedHero.name}} details!</h2>
-  <div><label>id: </label>{{selectedHero.id}}</div>
-  <div>
-    <label>name: </label>
-    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
-  </div>
-</div>
-<!-- #enddocregion ng-if -->
-
-<!-- #docregion hero-array-1 -->
-heroes = HEROES;
-<!-- #enddocregion hero-array-1 -->
-
-<!-- #docregion heroes-template-1 -->
-<h2>My Heroes</h2>
-<ul class="heroes">
-  <li>
-    <!-- each hero goes here -->
-  </li>
-</ul>
-<!-- #enddocregion heroes-template-1 -->
-
-<!-- #docregion heroes-ngfor-1 -->
-<li *ngFor="let hero of heroes">
-<!-- #enddocregion heroes-ngfor-1 -->
-
-<!-- #docregion class-selected-1 -->
-[class.selected]="hero === selectedHero"
-<!-- #enddocregion class-selected-1 -->
-
-<!-- #docregion class-selected-2 -->
-<li *ngFor="let hero of heroes"
-  [class.selected]="hero === selectedHero"
-  (click)="onSelect(hero)">
-  <span class="badge">{{hero.id}}</span> {{hero.name}}
-</li>
-<!-- #enddocregion class-selected-2 -->
--- a/aio/content/examples/toh-pt2/src/app/app.component.css
+++ b/aio/content/examples/toh-pt2/src/app/app.component.css
--- a/aio/content/examples/toh-pt2/src/app/app.component.html
+++ b/aio/content/examples/toh-pt2/src/app/app.component.html
@ -0,0 +1,2 @@
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
--- a/aio/content/examples/toh-pt2/src/app/app.component.ts
+++ b/aio/content/examples/toh-pt2/src/app/app.component.ts
@ -1,109 +1,10 @@
-// #docregion
 import { Component } from '@angular/core';

-export class Hero {
-  id: number;
-  name: string;
-}
-
-// #docregion hero-array
-const HEROES: Hero[] = [
-  { id: 11, name: 'Mr. Nice' },
-  { id: 12, name: 'Narco' },
-  { id: 13, name: 'Bombasto' },
-  { id: 14, name: 'Celeritas' },
-  { id: 15, name: 'Magneta' },
-  { id: 16, name: 'RubberMan' },
-  { id: 17, name: 'Dynama' },
-  { id: 18, name: 'Dr IQ' },
-  { id: 19, name: 'Magma' },
-  { id: 20, name: 'Tornado' }
-];
-// #enddocregion hero-array
-
@Component({
-  selector: 'my-app',
-  template: `
-    <h1>{{title}}</h1>
-    <h2>My Heroes</h2>
-    <ul class="heroes">
-      <li *ngFor="let hero of heroes"
-        [class.selected]="hero === selectedHero"
-        (click)="onSelect(hero)">
-        <span class="badge">{{hero.id}}</span> {{hero.name}}
-      </li>
-    </ul>
-    <div *ngIf="selectedHero">
-      <h2>{{selectedHero.name}} details!</h2>
-      <div><label>id: </label>{{selectedHero.id}}</div>
-      <div>
-        <label>name: </label>
-        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
-      </div>
-    </div>
-  `,
-  // #docregion styles
-  styles: [`
-    .selected {
-      background-color: #CFD8DC !important;
-      color: white;
-    }
-    .heroes {
-      margin: 0 0 2em 0;
-      list-style-type: none;
-      padding: 0;
-      width: 15em;
-    }
-    .heroes li {
-      cursor: pointer;
-      position: relative;
-      left: 0;
-      background-color: #EEE;
-      margin: .5em;
-      padding: .3em 0;
-      height: 1.6em;
-      border-radius: 4px;
-    }
-    .heroes li.selected:hover {
-      background-color: #BBD8DC !important;
-      color: white;
-    }
-    .heroes li:hover {
-      color: #607D8B;
-      background-color: #DDD;
-      left: .1em;
-    }
-    .heroes .text {
-      position: relative;
-      top: -3px;
-    }
-    .heroes .badge {
-      display: inline-block;
-      font-size: small;
-      color: white;
-      padding: 0.8em 0.7em 0 0.7em;
-      background-color: #607D8B;
-      line-height: 1em;
-      position: relative;
-      left: -1px;
-      top: -4px;
-      height: 1.8em;
-      margin-right: .8em;
-      border-radius: 4px 0 0 4px;
-    }
-  `]
-  // #enddocregion styles
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
  title = 'Tour of Heroes';
-  heroes = HEROES;
-  // #docregion selected-hero
-  selectedHero: Hero;
-  // #enddocregion selected-hero
-
-  // #docregion on-select
-  onSelect(hero: Hero): void {
-    this.selectedHero = hero;
-  }
-  // #enddocregion on-select
 }
--- a/aio/content/examples/toh-pt2/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt2/src/app/app.module.ts
@ -1,18 +1,20 @@
-// #docregion
-import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';

-import { AppComponent }  from './app.component';
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
+  declarations: [
+    AppComponent,
+    HeroesComponent
+  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
-  declarations: [
-    AppComponent
-  ],
-  bootstrap: [ AppComponent ]
+  providers: [],
+  bootstrap: [AppComponent]
 })
 export class AppModule { }
--- a/aio/content/examples/toh-pt2/src/app/hero.ts
+++ b/aio/content/examples/toh-pt2/src/app/hero.ts
@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
@ -0,0 +1,20 @@
+<!-- #docregion list -->
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li>
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+</ul>
+<!-- #enddocregion list -->
+
+<!-- #docregion li -->
+  <li *ngFor="let hero of heroes">
+<!-- #enddocregion li -->
+
+<!-- #docregion selectedHero-click -->
+<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
+<!-- #enddocregion selectedHero-click -->
+
+<!-- #docregion class-selected -->
+[class.selected]="hero === selectedHero"
+<!-- #enddocregion class-selected -->
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
@ -1,4 +1,4 @@
-/* #docregion */
+/* HeroesComponent's private CSS styles */
 .selected {
  background-color: #CFD8DC !important;
  color: white;
@ -19,15 +19,15 @@
  height: 1.6em;
  border-radius: 4px;
 }
+.heroes li.selected:hover {
+  background-color: #BBD8DC !important;
+  color: white;
+}
 .heroes li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
 }
-.heroes li.selected:hover {
-  background-color: #BBD8DC !important;
-  color: white;
-}
 .heroes .text {
  position: relative;
  top: -3px;
@ -46,15 +46,3 @@
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
 }
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
@ -0,0 +1,27 @@
+<!-- #docregion -->
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <!-- #docregion li -->
+  <li *ngFor="let hero of heroes"
+    [class.selected]="hero === selectedHero"
+    (click)="onSelect(hero)">
+    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  </li>
+  <!-- #enddocregion li -->
+</ul>
+
+<!-- #docregion ng-if -->
+<div *ngIf="selectedHero">
+
+  <!-- #docregion selectedHero-details -->
+  <h2>{{ selectedHero.name | uppercase }} Details</h2>
+  <div><span>id: </span>{{selectedHero.id}}</div>
+  <div>
+    <label>name:
+      <input [(ngModel)]="selectedHero.name" placeholder="name">
+    </label>
+  </div>
+  <!-- #enddocregion selectedHero-details -->
+
+</div>
+<!-- #enddocregion ng-if -->
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroesComponent } from './heroes.component';
+
+describe('HeroesComponent', () => {
+  let component: HeroesComponent;
+  let fixture: ComponentFixture<HeroesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeroesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeroesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.ts
@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
+// #docregion import-heroes
+import { HEROES } from '../mock-heroes';
+// #enddocregion import-heroes
+
+// #docplaster
+// #docregion metadata
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.css']
+})
+// #enddocregion metadata
+export class HeroesComponent implements OnInit {
+
+  // #docregion heroes
+  heroes = HEROES;
+  // #enddocregion heroes
+
+  // #docregion on-select
+  selectedHero: Hero;
+
+  // #enddocregion on-select
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  // #docregion on-select
+  onSelect(hero: Hero): void {
+    this.selectedHero = hero;
+  }
+  // #enddocregion on-select
+}
--- a/aio/content/examples/toh-pt2/src/app/mock-heroes.ts
+++ b/aio/content/examples/toh-pt2/src/app/mock-heroes.ts
@ -0,0 +1,14 @@
+import { Hero } from './hero';
+
+export const HEROES: Hero[] = [
+  { id: 11, name: 'Mr. Nice' },
+  { id: 12, name: 'Narco' },
+  { id: 13, name: 'Bombasto' },
+  { id: 14, name: 'Celeritas' },
+  { id: 15, name: 'Magneta' },
+  { id: 16, name: 'RubberMan' },
+  { id: 17, name: 'Dynama' },
+  { id: 18, name: 'Dr IQ' },
+  { id: 19, name: 'Magma' },
+  { id: 20, name: 'Tornado' }
+];
--- a/aio/content/examples/toh-pt2/src/index.html
+++ b/aio/content/examples/toh-pt2/src/index.html
@ -1,13 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <title>Angular Tour of Heroes</title>
-    <base href="/">
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
+<head>
+  <meta charset="utf-8">
+  <title>Tour of Heroes</title>
+  <base href="/">

-  <body>
-    <my-app>Loading...</my-app>
-  </body>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
 </html>
--- a/aio/content/examples/toh-pt3/app/hero-detail.component.1.ts
+++ b/aio/content/examples/toh-pt3/app/hero-detail.component.1.ts
@ -1,35 +0,0 @@
-// #docplaster
-// #docregion v1
-import { Component } from '@angular/core';
-
-// #enddocregion v1
-// #docregion hero-import
-import { Hero } from './hero';
-// #enddocregion hero-import
-
-// #docregion v1
-@Component({
-  selector: 'hero-detail',
-// #enddocregion v1
-  // #docregion template
-  template: `
-    <div *ngIf="hero">
-      <h2>{{hero.name}} details!</h2>
-      <div><label>id: </label>{{hero.id}}</div>
-      <div>
-        <label>name: </label>
-        <input [(ngModel)]="hero.name" placeholder="name"/>
-      </div>
-    </div>
-  `
-  // #enddocregion template
-// #docregion v1
-})
-export class HeroDetailComponent {
-// #enddocregion v1
-// #docregion hero
-  hero: Hero;
-// #enddocregion hero
-// #docregion v1
-}
-// #enddocregion v1
--- a/aio/content/examples/toh-pt3/e2e/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt3/e2e/app.e2e-spec.ts
@ -4,7 +4,7 @@ import { browser, element, by, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';

 const expectedH1 = 'Tour of Heroes';
-const expectedTitle = `Angular ${expectedH1}`;
+const expectedTitle = `${expectedH1}`;
 const expectedH2 = 'My Heroes';
 const targetHero = { id: 16, name: 'RubberMan' };
 const nameSuffix = 'X';
@ -85,7 +85,7 @@ function selectHeroTests() {
    let page = getPageElts();
    let hero = await Hero.fromDetail(page.heroDetail);
    expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(targetHero.name);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
  });
 }

@ -100,7 +100,7 @@ function updateHeroTests() {
    let hero = await Hero.fromDetail(page.heroDetail);
    let newName = targetHero.name + nameSuffix;
    expect(hero.id).toEqual(targetHero.id);
-    expect(hero.name).toEqual(newName);
+    expect(hero.name).toEqual(newName.toUpperCase());
  });

  it(`shows updated hero name in list`, async () => {
@ -126,8 +126,8 @@ function expectHeading(hLevel: number, expectedText: string): void {

 function getPageElts() {
  return {
-    heroes: element.all(by.css('my-app li')),
-    selected: element(by.css('my-app li.selected')),
-    heroDetail: element(by.css('my-app > div, my-app > hero-detail > div'))
+    heroes: element.all(by.css('app-root li')),
+    selected: element(by.css('app-root li.selected')),
+    heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
  };
 }
--- a/aio/content/examples/toh-pt3/src/app/app.component.css
+++ b/aio/content/examples/toh-pt3/src/app/app.component.css
--- a/aio/content/examples/toh-pt3/src/app/app.component.html
+++ b/aio/content/examples/toh-pt3/src/app/app.component.html
@ -0,0 +1,2 @@
+<h1>{{title}}</h1>
+<app-heroes></app-heroes>
--- a/aio/content/examples/toh-pt3/src/app/app.component.ts
+++ b/aio/content/examples/toh-pt3/src/app/app.component.ts
@ -1,95 +1,10 @@
-// #docregion
 import { Component } from '@angular/core';

-// #docregion hero-import
-import { Hero } from './hero';
-// #enddocregion hero-import
-
-const HEROES: Hero[] = [
-  { id: 11, name: 'Mr. Nice' },
-  { id: 12, name: 'Narco' },
-  { id: 13, name: 'Bombasto' },
-  { id: 14, name: 'Celeritas' },
-  { id: 15, name: 'Magneta' },
-  { id: 16, name: 'RubberMan' },
-  { id: 17, name: 'Dynama' },
-  { id: 18, name: 'Dr IQ' },
-  { id: 19, name: 'Magma' },
-  { id: 20, name: 'Tornado' }
-];
-
@Component({
-  selector: 'my-app',
-// #docregion hero-detail-template
-  template: `
-    <h1>{{title}}</h1>
-    <h2>My Heroes</h2>
-    <ul class="heroes">
-      <li *ngFor="let hero of heroes"
-        [class.selected]="hero === selectedHero"
-        (click)="onSelect(hero)">
-        <span class="badge">{{hero.id}}</span> {{hero.name}}
-      </li>
-    </ul>
-    <hero-detail [hero]="selectedHero"></hero-detail>
-  `,
-// #enddocregion hero-detail-template
-  styles: [`
-    .selected {
-      background-color: #CFD8DC !important;
-      color: white;
-    }
-    .heroes {
-      margin: 0 0 2em 0;
-      list-style-type: none;
-      padding: 0;
-      width: 15em;
-    }
-    .heroes li {
-      cursor: pointer;
-      position: relative;
-      left: 0;
-      background-color: #EEE;
-      margin: .5em;
-      padding: .3em 0;
-      height: 1.6em;
-      border-radius: 4px;
-    }
-    .heroes li.selected:hover {
-      background-color: #BBD8DC !important;
-      color: white;
-    }
-    .heroes li:hover {
-      color: #607D8B;
-      background-color: #DDD;
-      left: .1em;
-    }
-    .heroes .text {
-      position: relative;
-      top: -3px;
-    }
-    .heroes .badge {
-      display: inline-block;
-      font-size: small;
-      color: white;
-      padding: 0.8em 0.7em 0 0.7em;
-      background-color: #607D8B;
-      line-height: 1em;
-      position: relative;
-      left: -1px;
-      top: -4px;
-      height: 1.8em;
-      margin-right: .8em;
-      border-radius: 4px 0 0 4px;
-    }
-  `]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
  title = 'Tour of Heroes';
-  heroes = HEROES;
-  selectedHero: Hero;
-
-  onSelect(hero: Hero): void {
-    this.selectedHero = hero;
-  }
 }
--- a/aio/content/examples/toh-pt3/src/app/app.module.ts
+++ b/aio/content/examples/toh-pt3/src/app/app.module.ts
@ -1,24 +1,22 @@
-// #docregion
-import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';

-import { AppComponent }        from './app.component';
-// #docregion hero-detail-import
-import { HeroDetailComponent } from './hero-detail.component';
-// #enddocregion hero-detail-import
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';

@NgModule({
+  declarations: [
+    AppComponent,
+    HeroesComponent,
+    HeroDetailComponent
+  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
-// #docregion declarations
-  declarations: [
-    AppComponent,
-    HeroDetailComponent
-  ],
-// #enddocregion declarations
-  bootstrap: [ AppComponent ]
+  providers: [],
+  bootstrap: [AppComponent]
 })
 export class AppModule { }
--- a/aio/content/examples/toh-pt3/src/app/hero-detail.component.ts
+++ b/aio/content/examples/toh-pt3/src/app/hero-detail.component.ts
@ -1,29 +0,0 @@
-// #docregion
-// #docregion import-input
-import { Component, Input } from '@angular/core';
-// #enddocregion import-input
-
-import { Hero } from './hero';
-// #docregion template
-@Component({
-  selector: 'hero-detail',
-  template: `
-    <div *ngIf="hero">
-      <h2>{{hero.name}} details!</h2>
-      <div><label>id: </label>{{hero.id}}</div>
-      <div>
-        <label>name: </label>
-        <input [(ngModel)]="hero.name" placeholder="name"/>
-      </div>
-    </div>
-  `
-})
-// #enddocregion template
-// #docregion class
-export class HeroDetailComponent {
-// #docregion hero
-  @Input() hero: Hero;
-// #enddocregion hero
-}
-// #enddocregion class
-
--- a/Show More
+++ b/Show More