docs: add changelog for 5.0.2

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

Fixes #20427

PR Close #20440

.bazelrc

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

.circleci/config.yml

@@ -7,25 +7,17 @@
 # To validate changes, use an online parser, eg.
 # http://yaml-online-parser.appspot.com/
 
-# Variables
-
-## IMPORTANT
-# If you change the `docker_image` version, also change the `cache_key` suffix and the version of
-# `com_github_bazelbuild_buildtools` in the `/WORKSPACE` file.
-var_1: &docker_image angular/ngcontainer:0.0.8
-var_2: &cache_key angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.0.8
-
 # Settings common to each job
 anchor_1: &job_defaults
   working_directory: ~/ng
   docker:
-    - image: *docker_image
+    - image: angular/ngcontainer:0.0.2
 
 # After checkout, rebase on top of master.
 # Similar to travis behavior, but not quite the same.
 # See https://discuss.circleci.com/t/1662
 anchor_2: &post_checkout
-  post: git pull --ff-only origin "refs/pull/${CIRCLE_PULL_REQUEST//*pull\//}/merge"
+  post: git pull --ff-only origin "refs/pull/${CI_PULL_REQUEST//*pull\//}/merge"
 
 version: 2
 jobs:
@@ -34,13 +26,8 @@ jobs:
     steps:
       - checkout:
           <<: *post_checkout
-      # Check BUILD.bazel formatting before we have a node_modules directory
-      # Then we don't need any exclude pattern to avoid checking those files
-      - run: 'buildifier -mode=check $(find . -type f \( -name BUILD.bazel -or -name BUILD \)) ||
-              (echo "BUILD files not formatted. Please run ''yarn buildifier''" ; exit 1)'
-
       - restore_cache:
-          key: *cache_key
+          key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
 
       - run: yarn install --frozen-lockfile --non-interactive
       - run: ./node_modules/.bin/gulp lint
@@ -51,17 +38,13 @@ jobs:
       - checkout:
           <<: *post_checkout
       - restore_cache:
-          key: *cache_key
-      
-      - run: bazel info release
-      - run: bazel run @yarn//:yarn
-      # Use bazel query so that we explicitly ask for all buildable targets to be built as well
-      # This avoids waiting for a build command to finish before running the first test
-      # See https://github.com/bazelbuild/bazel/issues/4257
-      - run: bazel query --output=label '//packages/... union @angular//...' | xargs bazel test --config=ci
+          key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
 
+      - run: bazel run @yarn//:yarn
+      - run: bazel build packages/...
+      - run: bazel test @angular//...
       - save_cache:
-          key: *cache_key
+          key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
             - "node_modules"
 

.nvmrc

@@ -1 +1 @@
-8.9
+6.9.5

.pullapprove.yml

@@ -22,9 +22,11 @@
 # petebacondarwin - Pete Bacon Darwin
 # pkozlowski-opensource - Pawel Kozlowski
 # robwormald - Rob Wormald
+# tbosch - Tobias Bosch
 # tinayuangao - Tina Gao
 # vicb - Victor Berchet
 # vikerman - Vikram Subramanian
+# wardbell - Ward Bell
 
 
 version: 2
@@ -43,7 +45,6 @@ groups:
         include:
           - "*"
         exclude:
-          - ".circleci/*"
           - "aio/*"
           - "integration/*"
           - "modules/*"
@@ -73,7 +74,6 @@ groups:
     users:
       - alexeagle #primary
       - chuckjaz
-      - IgorMinar
       - vikerman #fallback
 
   build-and-ci:
@@ -100,6 +100,7 @@ groups:
     users:
       - alexeagle
       - mhevery
+      - tbosch
       - vicb
       - IgorMinar #fallback
 
@@ -108,7 +109,8 @@ groups:
       files:
         - "packages/core/*"
     users:
-      - chuckjaz #primary
+      - tbosch #primary
+      - chuckjaz
       - mhevery
       - vicb
       - IgorMinar #fallback
@@ -130,7 +132,7 @@ groups:
         - "packages/compiler/src/i18n/*"
     users:
       - vicb #primary
-      - chuckjaz
+      - tbosch
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -139,8 +141,9 @@ groups:
       files:
         - "packages/compiler/*"
     users:
-      - chuckjaz #primary
+      - tbosch #primary
       - vicb
+      - chuckjaz
       - mhevery
       - IgorMinar #fallback
 
@@ -160,11 +163,12 @@ groups:
           - "packages/compiler-cli/*"
           - "packages/bazel/*"
         exclude:
-          - "packages/compiler-cli/src/ngtools*"
+          - "packages/compiler-cli/src/ngtools*"   
     users:
       - alexeagle
       - chuckjaz
       - vicb
+      - tbosch
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -208,7 +212,7 @@ groups:
         - "packages/language-service/*"
     users:
       - chuckjaz #primary
-      # needs secondary
+      - tbosch #secondary
       - vicb
       - IgorMinar #fallback
       - mhevery #fallback
@@ -238,8 +242,8 @@ groups:
       files:
         - "packages/platform-browser/*"
     users:
-      - vicb #primary
-      # needs secondary
+      - tbosch #primary
+      - vicb #secondary
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -249,9 +253,9 @@ groups:
         - "packages/platform-server/*"
     users:
       - vikerman #primary
-      # needs secondary
       - alxhub
       - vicb
+      - tbosch
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -261,7 +265,7 @@ groups:
         - "packages/platform-webworker/*"
     users:
       - vicb #primary
-      # needs secondary
+      - tbosch #secondary
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -280,7 +284,7 @@ groups:
       files:
         - "packages/benchpress/*"
     users:
-      # needs primary
+      - tbosch #primary
       # needs secondary
       - IgorMinar #fallback
       - mhevery #fallback
@@ -311,6 +315,7 @@ groups:
       - juleskremer #primary
       - Foxandxss
       - stephenfluin
+      - wardbell
       - petebacondarwin
       - gkalpak
       - IgorMinar #fallback

.travis.yml

@@ -2,7 +2,7 @@ language: node_js
 sudo: false
 dist: trusty
 node_js:
-  - '8.9.1'
+  - '6.9.5'
 
 addons:
 #  firefox: "38.0"
@@ -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

BUILD.bazel

@@ -1,5 +1,4 @@
 package(default_visibility = ["//visibility:public"])
-
 exports_files(["tsconfig.json"])
 
 # This rule belongs in node_modules/BUILD
@@ -12,25 +11,17 @@ filegroup(
     # bazel query "deps(:node_modules)" | wc -l
     # This won't scale in the general case.
     # TODO(alexeagle): figure out what to do
-    srcs = glob(["/".join([
-        "node_modules",
-        pkg,
-        "**",
-        ext,
-    ]) for pkg in [
+    srcs = glob(["/".join(["node_modules", pkg, "**", ext]) for pkg in [
         "jasmine",
         "typescript",
         "zone.js",
-        "tsutils",
-        "@types/jasmine",
-        "@types/node",
-        "@types/source-map",
+        "rxjs",
+        "@types",
         "tsickle",
         "hammerjs",
         "protobufjs",
         "bytebuffer",
         "reflect-metadata",
-        "source-map-support",
         "minimist",
     ] for ext in [
         "*.js",

CHANGELOG.md

@@ -1,220 +1,3 @@
-<a name="5.2.0-beta.1"></a>
-# [5.2.0-beta.1](https://github.com/angular/angular/compare/5.2.0-beta.0...5.2.0-beta.1) (2017-12-20)
-
-
-### Bug Fixes
-
-* **compiler:** generate the correct imports for summary type-check ([d91ff17](https://github.com/angular/angular/commit/d91ff17))
-* **forms:** avoid producing an error with hostBindingTypeCheck ([d213a20](https://github.com/angular/angular/commit/d213a20))
-
-
-### Features
-
-* **compiler:** allow ngIf to use the ngIf expression directly as a guard ([82bcd83](https://github.com/angular/angular/commit/82bcd83))
-* **router:** add "paramsInheritanceStrategy" router configuration option ([5efea2f](https://github.com/angular/angular/commit/5efea2f)), closes [#20572](https://github.com/angular/angular/issues/20572)
-
-
-
-<a name="5.1.2"></a>
-## [5.1.2](https://github.com/angular/angular/compare/5.1.1...5.1.2) (2017-12-20)
-
-
-### Bug Fixes
-
-* **common:** fix a Closure compilation issue. ([267ebf3](https://github.com/angular/angular/commit/267ebf3))
-* **compiler:** make tsx file aot compatible ([756dd34](https://github.com/angular/angular/commit/756dd34)), closes [#20555](https://github.com/angular/angular/issues/20555)
-* **compiler:** report an error for recursive module references ([ced575f](https://github.com/angular/angular/commit/ced575f))
-* **compiler-cli:** do not emit invalid .metadata.json files ([a1d4c2d](https://github.com/angular/angular/commit/a1d4c2d))
-* **compiler-cli:** do not force type checking on .js files ([3b63e16](https://github.com/angular/angular/commit/3b63e16))
-* **service-worker:** check for updates on navigation ([a33182c](https://github.com/angular/angular/commit/a33182c)), closes [#20877](https://github.com/angular/angular/issues/20877)
-* **upgrade:** replaces get/setAngularLib with get/setAngularJSGlobal ([66cc2fa](https://github.com/angular/angular/commit/66cc2fa))
-
-
-
-<a name="5.2.0-beta.0"></a>
-# [5.2.0-beta.0](https://github.com/angular/angular/compare/5.1.0...5.2.0-beta.0) (2017-12-13)
-
-
-### Features
-
-* **animations:** re-introduce support for transition matching functions ([#20723](https://github.com/angular/angular/issues/20723)) ([590d93b](https://github.com/angular/angular/commit/590d93b)), closes [#18959](https://github.com/angular/angular/issues/18959)
-* **compiler:** add a pseudo $any() function to disable type checking ([#20876](https://github.com/angular/angular/issues/20876)) ([70cd124](https://github.com/angular/angular/commit/70cd124))
-* **compiler:** narrow types of expressions used in *ngIf ([#20702](https://github.com/angular/angular/issues/20702)) ([e7d9cb3](https://github.com/angular/angular/commit/e7d9cb3))
-* **core:** add source to `StaticInjectorError` message ([#20817](https://github.com/angular/angular/issues/20817)) ([b7738e1](https://github.com/angular/angular/commit/b7738e1)), closes [#19302](https://github.com/angular/angular/issues/19302)
-* **forms:** allow nulls on setAsyncValidators ([#20327](https://github.com/angular/angular/issues/20327)) ([d41d2c4](https://github.com/angular/angular/commit/d41d2c4)), closes [#20296](https://github.com/angular/angular/issues/20296)
-
-
-
-<a name="5.1.1"></a>
-## [5.1.1](https://github.com/angular/angular/compare/5.1.0...5.1.1) (2017-12-13)
-
-
-### Bug Fixes
-
-* **animations:** ensure multi-level route leave animations are queryable ([#20787](https://github.com/angular/angular/issues/20787)) ([d09d497](https://github.com/angular/angular/commit/d09d497)), closes [#19807](https://github.com/angular/angular/issues/19807)
-* **animations:** ensure the web-animations driver properly handles empty keyframes ([#20648](https://github.com/angular/angular/issues/20648)) ([c3e8731](https://github.com/angular/angular/commit/c3e8731)), closes [#15858](https://github.com/angular/angular/issues/15858)
-* **animations:** properly recover and cleanup DOM when CD failures occur ([#20719](https://github.com/angular/angular/issues/20719)) ([e6a2805](https://github.com/angular/angular/commit/e6a2805)), closes [#19093](https://github.com/angular/angular/issues/19093)
-* **animations:** support webkit-based vendor prefixes for prop validations ([#19055](https://github.com/angular/angular/issues/19055)) ([501f01e](https://github.com/angular/angular/commit/501f01e)), closes [#18921](https://github.com/angular/angular/issues/18921)
-* **bazel:** don't equate moduleName with fileName ([#20895](https://github.com/angular/angular/issues/20895)) ([0c9f7b0](https://github.com/angular/angular/commit/0c9f7b0))
-* **compiler:** support referencing enums in namespaces ([#20947](https://github.com/angular/angular/issues/20947)) ([d6da798](https://github.com/angular/angular/commit/d6da798)), closes [#18170](https://github.com/angular/angular/issues/18170)
-* **compiler-cli:** disable checkTypes in emit. ([#20828](https://github.com/angular/angular/issues/20828)) ([160a154](https://github.com/angular/angular/commit/160a154))
-* **compiler-cli:** fix swallowed Error messages ([#20846](https://github.com/angular/angular/issues/20846)) ([6727336](https://github.com/angular/angular/commit/6727336))
-* **compiler-cli:** merge [@fileoverview](https://github.com/fileoverview) comments. ([#20870](https://github.com/angular/angular/issues/20870)) ([be9a737](https://github.com/angular/angular/commit/be9a737))
-* **router:** NavigatonError and NavigationCancel should be emitted after resetting the URL ([#20803](https://github.com/angular/angular/issues/20803)) ([baeec4d](https://github.com/angular/angular/commit/baeec4d))
-
-
-
-<a name="5.1.0"></a>
-# [5.1.0](https://github.com/angular/angular/compare/5.1.0-rc.1...5.1.0) (2017-12-06)
-
-
-### Bug Fixes
-
-* **animations:** ensure DOM is cleaned up after multiple [@trigger](https://github.com/trigger) leave animations finish ([#20740](https://github.com/angular/angular/issues/20740)) ([b78ada1](https://github.com/angular/angular/commit/b78ada1)), closes [#20541](https://github.com/angular/angular/issues/20541)
-* **service-worker:** initialize in browser only ([#20782](https://github.com/angular/angular/issues/20782)) ([7cabaa0](https://github.com/angular/angular/commit/7cabaa0)), closes [#20360](https://github.com/angular/angular/issues/20360)
-* **service-worker:** esm2015 points to wrong path ([#20800](https://github.com/angular/angular/issues/20800)) ([da3563c](https://github.com/angular/angular/commit/da3563c))
-
-
-
-<a name="5.1.0-rc.1"></a>
-# [5.1.0-rc.1](https://github.com/angular/angular/compare/5.1.0-rc.0...5.1.0-rc.1) (2017-12-01)
-
-
-### Bug Fixes
-
-* **compiler-cli:** propagate ts.SourceFile moduleName into metadata ([f841fbe](https://github.com/angular/angular/commit/f841fbe))
-* **service-worker:** allow disabling SW while still using services ([65f4fad](https://github.com/angular/angular/commit/65f4fad))
-* **service-worker:** don't crash if SW not supported ([b9a91a5](https://github.com/angular/angular/commit/b9a91a5))
-* **service-worker:** send initialization signal from the application ([3fbcde9](https://github.com/angular/angular/commit/3fbcde9))
-* **service-worker:** use relative path for ngsw.json ([f582620](https://github.com/angular/angular/commit/f582620))
-
-
-
-<a name="5.0.5"></a>
-## [5.0.5](https://github.com/angular/angular/compare/5.0.4...5.0.5) (2017-12-01)
-
-
-### Bug Fixes
-
-* **compiler-cli:** propagate ts.SourceFile moduleName into metadata ([a2ff4ab](https://github.com/angular/angular/commit/a2ff4ab))
-* **service-worker:** allow disabling SW while still using services ([f99335b](https://github.com/angular/angular/commit/f99335b))
-* **service-worker:** don't crash if SW not supported ([ee37d4b](https://github.com/angular/angular/commit/ee37d4b))
-* **service-worker:** send initialization signal from the application ([6bf07b4](https://github.com/angular/angular/commit/6bf07b4))
-* **service-worker:** use relative path for ngsw.json ([56c98f7](https://github.com/angular/angular/commit/56c98f7))
-
-
-
-<a name="5.1.0-rc.0"></a>
-# [5.1.0-rc.0](https://github.com/angular/angular/compare/5.1.0-beta.2...5.1.0-rc.0) (2017-12-01)
-
-
-### Bug Fixes
-
-* **animations:** ensure multi-level enter animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([dd6237e](https://github.com/angular/angular/commit/dd6237e))
-* **animations:** ensure multi-level enter animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([b2a586c](https://github.com/angular/angular/commit/b2a586c))
-* **animations:** ensure multi-level leave animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([1366762](https://github.com/angular/angular/commit/1366762))
-* **animations:** ensure multi-level leave animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([c2b3792](https://github.com/angular/angular/commit/c2b3792))
-* **bazel:** produce named AMD modules for codegen ([#20547](https://github.com/angular/angular/issues/20547)) ([6e83204](https://github.com/angular/angular/commit/6e83204)), closes [#19422](https://github.com/angular/angular/issues/19422)
-* **common:** accept falsy values as HTTP bodies ([#19958](https://github.com/angular/angular/issues/19958)) ([15a54df](https://github.com/angular/angular/commit/15a54df)), closes [#19825](https://github.com/angular/angular/issues/19825) [#19195](https://github.com/angular/angular/issues/19195)
-* **common:** don't strip XSSI prefix for if error isn't JSON ([#19958](https://github.com/angular/angular/issues/19958)) ([aafa75d](https://github.com/angular/angular/commit/aafa75d))
-* **common:** remove useless guard in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([eb01ad5](https://github.com/angular/angular/commit/eb01ad5)), closes [#19223](https://github.com/angular/angular/issues/19223)
-* **common:** treat an empty body as null when parsing JSON in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([503be69](https://github.com/angular/angular/commit/503be69)), closes [#18680](https://github.com/angular/angular/issues/18680) [#19413](https://github.com/angular/angular/issues/19413) [#19502](https://github.com/angular/angular/issues/19502) [#19555](https://github.com/angular/angular/issues/19555)
-* **compiler:** correctly detect when to serialze summary metadata ([#20668](https://github.com/angular/angular/issues/20668)) ([8bb42df](https://github.com/angular/angular/commit/8bb42df))
-* **compiler-cli:** fix memory leak in program creation ([#20692](https://github.com/angular/angular/issues/20692)) ([71e5de6](https://github.com/angular/angular/commit/71e5de6)), closes [#20691](https://github.com/angular/angular/issues/20691)
-* **compiler-cli:** normalize sourcepaths for i18n extracted files ([#20417](https://github.com/angular/angular/issues/20417)) ([de78307](https://github.com/angular/angular/commit/de78307)), closes [#20416](https://github.com/angular/angular/issues/20416)
-* **core:** should use native addEventListener in ngZone ([#20672](https://github.com/angular/angular/issues/20672)) ([65a2cb8](https://github.com/angular/angular/commit/65a2cb8))
-* **language-service:** Allow empty templates ([#20651](https://github.com/angular/angular/issues/20651)) ([3203069](https://github.com/angular/angular/commit/3203069)), closes [#19406](https://github.com/angular/angular/issues/19406)
-* **language-service:** Fix crash when no script files are found ([#20550](https://github.com/angular/angular/issues/20550)) ([54bfe14](https://github.com/angular/angular/commit/54bfe14)), closes [#19325](https://github.com/angular/angular/issues/19325)
-
-
-### Features
-
-* **common:** add locale id parameter to `registerLocaleData` ([#20623](https://github.com/angular/angular/issues/20623)) ([24bf3e2](https://github.com/angular/angular/commit/24bf3e2))
-* **compiler-cli:** improve error messages produced during structural errors ([#20459](https://github.com/angular/angular/issues/20459)) ([8ecda94](https://github.com/angular/angular/commit/8ecda94))
-
-
-
-<a name="5.0.4"></a>
-## [5.0.4](https://github.com/angular/angular/compare/5.0.3...5.0.4) (2017-12-01)
-
-
-### Bug Fixes
-
-* **animations:** ensure multi-level enter animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([22bbd6e](https://github.com/angular/angular/commit/22bbd6e))
-* **animations:** ensure multi-level leave animations work ([#19455](https://github.com/angular/angular/issues/19455)) ([c7b211c](https://github.com/angular/angular/commit/c7b211c))
-* **common:** accept falsy values as HTTP bodies ([#19958](https://github.com/angular/angular/issues/19958)) ([66fd1f8](https://github.com/angular/angular/commit/66fd1f8)), closes [#19825](https://github.com/angular/angular/issues/19825) [#19195](https://github.com/angular/angular/issues/19195)
-* **common:** don't strip XSSI prefix for if error isn't JSON ([#19958](https://github.com/angular/angular/issues/19958)) ([ead7596](https://github.com/angular/angular/commit/ead7596))
-* **common:** remove useless guard in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([e099911](https://github.com/angular/angular/commit/e099911)), closes [#19223](https://github.com/angular/angular/issues/19223)
-* **common:** treat an empty body as null when parsing JSON in HttpClient ([#19958](https://github.com/angular/angular/issues/19958)) ([bdaee50](https://github.com/angular/angular/commit/bdaee50)), closes [#18680](https://github.com/angular/angular/issues/18680) [#19413](https://github.com/angular/angular/issues/19413) [#19502](https://github.com/angular/angular/issues/19502) [#19555](https://github.com/angular/angular/issues/19555)
-* **compiler-cli:** fix memory leak in program creation ([#20692](https://github.com/angular/angular/issues/20692)) ([38be44d](https://github.com/angular/angular/commit/38be44d)), closes [#20691](https://github.com/angular/angular/issues/20691)
-* **compiler-cli:** normalize sourcepaths for i18n extracted files ([#20417](https://github.com/angular/angular/issues/20417)) ([2b0c896](https://github.com/angular/angular/commit/2b0c896)), closes [#20416](https://github.com/angular/angular/issues/20416)
-
-
-
-<a name="5.1.0-beta.2"></a>
-# [5.1.0-beta.2](https://github.com/angular/angular/compare/5.1.0-beta.1...5.1.0-beta.2) (2017-11-22)
-
-
-### Bug Fixes
-
-* **animations:** always fire inner trigger callbacks even if blocked by parent animations ([#19753](https://github.com/angular/angular/issues/19753)) ([0e012c9](https://github.com/angular/angular/commit/0e012c9)), closes [#19100](https://github.com/angular/angular/issues/19100)
-* **animations:** always fire start and done callbacks in order for noop animations ([#20570](https://github.com/angular/angular/issues/20570)) ([ffb6dbe](https://github.com/angular/angular/commit/ffb6dbe))
-* **animations:** validate against trigger() names that use @ symbols ([#20326](https://github.com/angular/angular/issues/20326)) ([1861e41](https://github.com/angular/angular/commit/1861e41))
-* **benchpress:** Allow ignoring navigationStart events in perflog metric. ([#20312](https://github.com/angular/angular/issues/20312)) ([717ac5a](https://github.com/angular/angular/commit/717ac5a))
-* **common:** return ISubscription from Location.subscribe() ([#20429](https://github.com/angular/angular/issues/20429)) ([437a044](https://github.com/angular/angular/commit/437a044)), closes [#20406](https://github.com/angular/angular/issues/20406)
-* **compiler:** emit correct type-check-blocks with TemplateRef's ([#20463](https://github.com/angular/angular/issues/20463)) ([68b53c0](https://github.com/angular/angular/commit/68b53c0))
-* **compiler:** support event bindings in `fullTemplateTypeCheck` ([#20490](https://github.com/angular/angular/issues/20490)) ([4ed0439](https://github.com/angular/angular/commit/4ed0439))
-* **core:** fix [#20532](https://github.com/angular/angular/issues/20532), should be able to cancel listener from mixed zone ([#20538](https://github.com/angular/angular/issues/20538)) ([a740e4f](https://github.com/angular/angular/commit/a740e4f))
-* **core:** should support event.stopImmediatePropagation ([#20469](https://github.com/angular/angular/issues/20469)) ([997336b](https://github.com/angular/angular/commit/997336b))
-* **forms:** updateOn should check if change occurred ([#20358](https://github.com/angular/angular/issues/20358)) ([69c53c3](https://github.com/angular/angular/commit/69c53c3)), closes [#20259](https://github.com/angular/angular/issues/20259)
-
-
-### Features
-
-* **platform-browser-dynamic:** export `JitCompilerFactory` ([#20478](https://github.com/angular/angular/issues/20478)) ([d7a727c](https://github.com/angular/angular/commit/d7a727c)), closes [#20125](https://github.com/angular/angular/issues/20125)
-
-
-
-<a name="5.0.3"></a>
-## [5.0.3](https://github.com/angular/angular/compare/5.0.2...5.0.3) (2017-11-22)
-
-
-### Bug Fixes
-
-* **animations:** always fire inner trigger callbacks even if blocked by parent animations ([#19753](https://github.com/angular/angular/issues/19753)) ([814f062](https://github.com/angular/angular/commit/814f062)), closes [#19100](https://github.com/angular/angular/issues/19100)
-* **animations:** validate against trigger() names that use @ symbols ([#20326](https://github.com/angular/angular/issues/20326)) ([15795d0](https://github.com/angular/angular/commit/15795d0))
-* **benchpress:** Allow ignoring navigationStart events in perflog metric. ([#20312](https://github.com/angular/angular/issues/20312)) ([9ca6ee9](https://github.com/angular/angular/commit/9ca6ee9))
-* **common:** return ISubscription from Location.subscribe() ([#20429](https://github.com/angular/angular/issues/20429)) ([bc904b1](https://github.com/angular/angular/commit/bc904b1)), closes [#20406](https://github.com/angular/angular/issues/20406)
-* **compiler:** emit correct type-check-blocks with TemplateRef's ([#20463](https://github.com/angular/angular/issues/20463)) ([81f1d42](https://github.com/angular/angular/commit/81f1d42))
-* **compiler:** support event bindings in `fullTemplateTypeCheck` ([#20490](https://github.com/angular/angular/issues/20490)) ([b53ead4](https://github.com/angular/angular/commit/b53ead4))
-* **core:** fix [#20532](https://github.com/angular/angular/issues/20532), should be able to cancel listener from mixed zone ([#20538](https://github.com/angular/angular/issues/20538)) ([0feba49](https://github.com/angular/angular/commit/0feba49))
-* **core:** should support event.stopImmediatePropagation ([#20469](https://github.com/angular/angular/issues/20469)) ([82aace6](https://github.com/angular/angular/commit/82aace6))
-* **forms:** updateOn should check if change occurred ([#20358](https://github.com/angular/angular/issues/20358)) ([f9f2c20](https://github.com/angular/angular/commit/f9f2c20)), closes [#20259](https://github.com/angular/angular/issues/20259)
-
-
-<a name="5.1.0-beta.1"></a>
-# [5.1.0-beta.1](https://github.com/angular/angular/compare/5.1.0-beta.0...5.1.0-beta.1) (2017-11-16)
-
-
-### Bug Fixes
-
-* **animations:** always fire inner trigger callbacks even if blocked by parent animations ([#19753](https://github.com/angular/angular/issues/19753)) ([d47b2a6](https://github.com/angular/angular/commit/d47b2a6)), closes [#19100](https://github.com/angular/angular/issues/19100)
-* **animations:** ensure final state() styles are applied within @.disabled animations ([#20267](https://github.com/angular/angular/issues/20267)) ([20aafff](https://github.com/angular/angular/commit/20aafff)), closes [#20266](https://github.com/angular/angular/issues/20266)
-* **bazel:** adjust mock of tsconfig for ng_module rule unit test ([#20175](https://github.com/angular/angular/issues/20175)) ([c2a24b4](https://github.com/angular/angular/commit/c2a24b4))
-* **compiler:** fix corner cases in shadow CSS ([c32f5fd](https://github.com/angular/angular/commit/c32f5fd))
-* **compiler:** recognize @NgModule with a redundant @Injectable ([#20320](https://github.com/angular/angular/issues/20320)) ([c33a576](https://github.com/angular/angular/commit/c33a576))
-* **compiler:** show explanatory text in template errors ([#20313](https://github.com/angular/angular/issues/20313)) ([3257fcd](https://github.com/angular/angular/commit/3257fcd))
-* **core:** ensure init lifecycle events are called ([#20258](https://github.com/angular/angular/issues/20258)) ([24cf8b3](https://github.com/angular/angular/commit/24cf8b3))
-* **language-service:** pass compilerOptions.paths to ReflectorHost ([#20222](https://github.com/angular/angular/issues/20222)) ([eb8013e](https://github.com/angular/angular/commit/eb8013e))
-* **router:** 'merge' queryParamHandling strategy should be able to remove query params ([#19733](https://github.com/angular/angular/issues/19733)) ([a622e19](https://github.com/angular/angular/commit/a622e19)), closes [#18463](https://github.com/angular/angular/issues/18463) [#17202](https://github.com/angular/angular/issues/17202)
-* Update test code to type-check under TS 2.5 ([#20175](https://github.com/angular/angular/issues/20175)) ([5ec1717](https://github.com/angular/angular/commit/5ec1717))
-
-### Features
-
-* **typescript:** support TypeScript 2.5 ([a9f3e2b](https://github.com/angular/angular/commit/a9f3e2b)), closes [#20175](https://github.com/angular/angular/issues/20175)
-
-> Note, if you do `Injector.get(Token)` where `Token` has static members, you'll run into https://github.com/Microsoft/TypeScript/issues/20102 where the returned type is `{}` rather than `Token`. Use `Injector.get<Token>(Token)` to work around.
-
 <a name="5.0.2"></a>
 ## [5.0.2](https://github.com/angular/angular/compare/5.0.1...5.0.2) (2017-11-16)
 
@@ -228,22 +11,6 @@
 * **router:** 'merge' queryParamHandling strategy should be able to remove query params ([#19733](https://github.com/angular/angular/issues/19733)) ([b732fb9](https://github.com/angular/angular/commit/b732fb9)), closes [#18463](https://github.com/angular/angular/issues/18463) [#17202](https://github.com/angular/angular/issues/17202)
 
 
-<a name="5.1.0-beta.0"></a>
-# [5.1.0-beta.0](https://github.com/angular/angular/compare/5.0.0-rc.4...5.1.0-beta.0) (2017-11-08)
-
-### Bug Fixes
-
-* **compiler:** don't overwrite missingTranslation's value in JIT ([#19952](https://github.com/angular/angular/issues/19952)) ([799cbb9](https://github.com/angular/angular/commit/799cbb9))
-* **compiler:** report a reasonable error with invalid metadata ([#20062](https://github.com/angular/angular/issues/20062)) ([da22c48](https://github.com/angular/angular/commit/da22c48))
-* **compiler-cli:** don't report emit diagnostics when `--noEmitOnError` is off ([#20063](https://github.com/angular/angular/issues/20063)) ([8639995](https://github.com/angular/angular/commit/8639995))
-* **core:** `__symbol__` should return `__zone_symbol__` without zone.js loaded ([#19541](https://github.com/angular/angular/issues/19541)) ([678d1cf](https://github.com/angular/angular/commit/678d1cf))
-* **core:** should support event.stopImmediatePropagation ([#19222](https://github.com/angular/angular/issues/19222)) ([7083791](https://github.com/angular/angular/commit/7083791))
-* **platform-browser:** support Symbols in custom `jasmineToString()` method ([#19794](https://github.com/angular/angular/issues/19794)) ([5a6efa7](https://github.com/angular/angular/commit/5a6efa7))
-
-### Features
-
-* **compiler:** introduce `TestBed.overrideTemplateUsingTestingModule` ([a460066](https://github.com/angular/angular/commit/a460066)), closes [#19815](https://github.com/angular/angular/issues/19815)
-
 
 <a name="5.0.1"></a>
 ## [5.0.1](https://github.com/angular/angular/compare/5.0.0...5.0.1) (2017-11-08)

CONTRIBUTING.md

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

WORKSPACE

@@ -5,51 +5,20 @@ load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 git_repository(
     name = "build_bazel_rules_nodejs",
     remote = "https://github.com/bazelbuild/rules_nodejs.git",
-    tag = "0.3.1",
+    # TODO(alexeagle): use the correct tag here.
+    commit = "2c6243df53fd33fdab283ebdd01582e4eb815db8",
 )
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
+load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")
 
-check_bazel_version("0.8.1")
 node_repositories(package_json = ["//:package.json"])
 
-git_repository(
+local_repository(
     name = "build_bazel_rules_typescript",
-    remote = "https://github.com/bazelbuild/rules_typescript.git",
-    tag = "0.6.0",
+    path = "node_modules/@bazel/typescript",
 )
 
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_repositories")
-
-ts_repositories()
-
 local_repository(
     name = "angular",
     path = "packages/bazel",
 )
-
-local_repository(
-    name = "rxjs",
-    path = "node_modules/rxjs/src",
-)
-
-git_repository(
-    name = "com_github_bazelbuild_buildtools",
-    remote = "https://github.com/bazelbuild/buildtools.git",
-    # Note, this commit matches the version of buildifier in angular/ngcontainer
-    # If you change this, also check if it matches the version in the angular/ngcontainer
-    # version in /.circleci/config.yml
-    commit = "b3b620e8bcff18ed3378cd3f35ebeb7016d71f71",
-)
-
-http_archive(
-    name = "io_bazel_rules_go",
-    url = "https://github.com/bazelbuild/rules_go/releases/download/0.7.1/rules_go-0.7.1.tar.gz",
-    sha256 = "341d5eacef704415386974bc82a1783a8b7ffbff2ab6ba02375e1ca20d9b031c",
-)
-
-load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
-
-go_rules_dependencies()
-
-go_register_toolchains()

aio/content/examples/architecture/src/app/hero-detail.component.html

@@ -1,10 +1,9 @@
 <hr>
 <h4>{{hero.name}} Detail</h4>
 <div>Id: {{hero.id}}</div>
-<label>Name:
+<div>Name:
   <!-- #docregion ngModel -->
   <input [(ngModel)]="hero.name">
   <!-- #enddocregion ngModel -->
-</label>
-<br />
-<label>Power: <input [(ngModel)]="hero.power"></label>
+</div>
+<div>Power:<input [(ngModel)]="hero.power"></div>

aio/content/examples/architecture/src/app/sales-tax.component.ts

@@ -7,7 +7,7 @@ import { TaxRateService }  from './tax-rate.service';
   selector:    'app-sales-tax',
   template: `
     <h2>Sales Tax Calculator</h2>
-    <label>Amount: <input #amountBox (change)="0"></label>
+    Amount: <input #amountBox (change)="0">
 
     <div *ngIf="amountBox.value">
     The sales tax is

aio/content/examples/attribute-directives/src/app/app.component.1.html

@@ -1,14 +1,14 @@
 <!-- #docregion -->
 <h1>My First Attribute Directive</h1>
 <!-- #docregion applied -->
-<p appHighlight>Highlight me!</p>
+<p appHightlight>Highlight me!</p>
 <!-- #enddocregion applied,  -->
 
 <!-- #docregion color-1 -->
-<p appHighlight highlightColor="yellow">Highlighted in yellow</p>
-<p appHighlight [highlightColor]="'orange'">Highlighted in orange</p>
+<p appHightlight highlightColor="yellow">Highlighted in yellow</p>
+<p appHightlight [highlightColor]="'orange'">Highlighted in orange</p>
 <!-- #enddocregion color-1 -->
 
 <!-- #docregion color-2 -->
-<p appHighlight [highlightColor]="color">Highlighted with parent component's color</p>
+<p appHightlight [highlightColor]="color">Highlighted with parent component's color</p>
 <!-- #enddocregion color-2 -->

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

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

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

@@ -2,6 +2,5 @@
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
 
-// the second parameter 'fr' is optional
-registerLocaleData(localeFr, 'fr');
+registerLocaleData(localeFr);
 // #enddocregion import-locale

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

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

aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts

@@ -93,20 +93,22 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
 
     <h4>-- AfterContent Logs --</h4>
     <p><button (click)="reset()">Reset</button></p>
-    <div *ngFor="let msg of logger.logs">{{msg}}</div>
+    <div *ngFor="let msg of logs">{{msg}}</div>
   </div>
   `,
   styles: ['.parent {background: burlywood}'],
   providers: [LoggerService]
 })
 export class AfterContentParentComponent {
+  logs: string[];
   show = true;
 
-  constructor(public logger: LoggerService) {
+  constructor(private logger: LoggerService) {
+    this.logs = logger.logs;
   }
 
   reset() {
-    this.logger.clear();
+    this.logs.length = 0;
     // quickly remove and reload AfterContentComponent which recreates it
     this.show = false;
     this.logger.tick_then(() => this.show = true);

aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts

@@ -95,20 +95,22 @@ export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
 
     <h4>-- AfterView Logs --</h4>
     <p><button (click)="reset()">Reset</button></p>
-    <div *ngFor="let msg of logger.logs">{{msg}}</div>
+    <div *ngFor="let msg of logs">{{msg}}</div>
   </div>
   `,
   styles: ['.parent {background: burlywood}'],
   providers: [LoggerService]
 })
 export class AfterViewParentComponent {
+  logs: string[];
   show = true;
 
-  constructor(public logger: LoggerService) {
+  constructor(private logger: LoggerService) {
+    this.logs = logger.logs;
   }
 
   reset() {
-    this.logger.clear();
+    this.logs.length = 0;
     // quickly remove and reload AfterViewComponent which recreates it
     this.show = false;
     this.logger.tick_then(() => this.show = true);

aio/content/examples/lifecycle-hooks/src/app/counter.component.ts

@@ -27,7 +27,7 @@ export class MyCounterComponent implements OnChanges {
     // Empty the changeLog whenever counter goes to zero
     // hint: this is a way to respond programmatically to external value changes.
     if (this.counter === 0) {
-      this.changeLog = [];
+      this.changeLog.length = 0;
     }
 
     // A change to `counter` is the only change we care about

aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts

@@ -68,7 +68,7 @@ export class DoCheckComponent implements DoCheck {
 
   reset() {
     this.changeDetected = true;
-    this.changeLog = [];
+    this.changeLog.length = 0;
   }
 }
 

aio/content/examples/lifecycle-hooks/src/app/logger.service.ts

@@ -18,7 +18,7 @@ export class LoggerService {
     }
   }
 
-  clear() { this.logs = []; }
+  clear() { this.logs.length = 0; }
 
   // schedules a view refresh to ensure display catches up
   tick() {  this.tick_then(() => { }); }

aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts

@@ -43,7 +43,7 @@ export class OnChangesComponent implements OnChanges {
   }
   // #enddocregion ng-on-changes
 
-  reset() { this.changeLog = []; }
+  reset() { this.changeLog.length = 0; }
 }
 
 /***************************************/

aio/content/examples/lifecycle-hooks/src/app/spy.component.html

@@ -12,5 +12,5 @@
   </div>
   <!-- #enddocregion template -->
   <h4>-- Spy Lifecycle Hook Log --</h4>
-  <div *ngFor="let msg of logger.logs">{{msg}}</div>
+  <div *ngFor="let msg of spyLog">{{msg}}</div>
 </div>

aio/content/examples/lifecycle-hooks/src/app/spy.component.ts

@@ -15,8 +15,10 @@ import { LoggerService }  from './logger.service';
 export class SpyParentComponent {
   newName = 'Herbie';
   heroes: string[] = ['Windstorm', 'Magneta'];
+  spyLog: string[];
 
-  constructor(public logger: LoggerService) {
+  constructor(private logger: LoggerService) {
+    this.spyLog = logger.logs;
   }
 
   addHero() {
@@ -32,7 +34,7 @@ export class SpyParentComponent {
   }
   reset() {
     this.logger.log('-- reset --');
-    this.heroes = [];
+    this.heroes.length = 0;
     this.logger.tick();
   }
 }

aio/content/examples/ngmodule/contact.1b.plnkr.json

@@ -14,7 +14,7 @@
     "app/contact/contact.component.html",
     "app/contact/contact.component.3.ts",
     "app/contact/contact.service.ts",
-    "app/contact/contact-highlight.directive.ts",
+    "app/contact/highlight.directive.ts",
 
     "main.1b.ts",
     "styles.css",

aio/content/examples/ngmodule/contact.2.plnkr.json

@@ -16,7 +16,7 @@
     "app/contact/awesome.pipe.ts",
     "app/contact/contact.component.3.ts",
     "app/contact/contact.module.2.ts",
-    "app/contact/contact-highlight.directive.ts",
+    "app/contact/highlight.directive.ts",
 
     "main.2.ts",
     "styles.css",

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

@@ -15,7 +15,7 @@ describe('NgModule', function () {
 
     return {
       title: element.all(by.tagName('h1')).get(0),
-      welcome: element.all(by.css('app-title p i')).get(0),
+      subtitle: element.all(by.css('app-title p i')).get(0),
       contactButton: buttons.get(0),
       crisisButton: buttons.get(1),
       heroesButton: buttons.get(2)
@@ -67,7 +67,7 @@ describe('NgModule', function () {
 
       it('should welcome us', function () {
         const commons = getCommonsSectionStruct();
-        expect(commons.welcome.getText()).toBe('Welcome, ' + (name ||  'Sherlock Holmes'));
+        expect(commons.subtitle.getText()).toBe('Welcome, ' + (name ||  'Sherlock Holmes'));
       });
     };
   }

aio/content/examples/ngmodule/pre-shared.3.plnkr.json

@@ -19,7 +19,7 @@
     "app/contact/contact.component.3.ts",
     "app/contact/contact.module.3.ts",
     "app/contact/contact-routing.module.3.ts",
-    "app/contact/contact-highlight.directive.ts",
+    "app/contact/highlight.directive.ts",
 
     "app/crisis/*.ts",
 

aio/content/examples/ngmodule/src/app/app-routing.module.3.ts

@@ -1,19 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { ContactModule } from './contact/contact.module.3';
-
-const routes: Routes = [
+export const routes: Routes = [
   { path: '', redirectTo: 'contact', pathMatch: 'full'},
   { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
   { path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' }
 ];
 
 @NgModule({
-  imports: [
-    ContactModule,
-    RouterModule.forRoot(routes)
-  ],
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

aio/content/examples/ngmodule/src/app/app-routing.module.ts

@@ -2,29 +2,18 @@
 import { NgModule }             from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { ContactModule }    from './contact/contact.module';
-
-// #docregion routes
-const routes: Routes = [
+export const routes: Routes = [
   { path: '', redirectTo: 'contact', pathMatch: 'full'},
-  // #docregion lazy-routes
+// #docregion lazy-routes
   { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
   { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
-  // #enddocregion lazy-routes
+// #enddocregion lazy-routes
 ];
-// #enddocregion routes
 
+// #docregion forRoot
 @NgModule({
-  // #docregion imports
-  imports: [
-    ContactModule,
-    // #docregion forRoot
-    RouterModule.forRoot(routes),
-    // #enddocregion forRoot
-  ],
-  // #enddocregion imports
-  // #docregion exports
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
-  // #enddocregion exports
 })
 export class AppRoutingModule {}
+// #enddocregion forRoot

aio/content/examples/ngmodule/src/app/app.component.0.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   template: '<h1>{{title}}</h1>',
 })
 export class AppComponent {
-  title = 'Angular Modules';
+  title = 'Minimal NgModule';
 }

aio/content/examples/ngmodule/src/app/app.component.1.ts

@@ -11,7 +11,9 @@ import { Component } from '@angular/core';
   // #enddocregion template
   */
 // #docregion
-  template: '<app-title></app-title>'
+  template: '<app-title [subtitle]="subtitle"></app-title>'
 })
-export class AppComponent {}
+export class AppComponent {
+  subtitle = '(v1)';
+}
 // #enddocregion

aio/content/examples/ngmodule/src/app/app.component.1b.ts

@@ -5,9 +5,11 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   // #docregion template
   template: `
-    <app-title></app-title>
+    <app-title [subtitle]="subtitle"></app-title>
     <app-contact></app-contact>
   `
   // #enddocregion template
 })
-export class AppComponent {}
+export class AppComponent {
+  subtitle = '(v1)';
+}

aio/content/examples/ngmodule/src/app/app.component.2.ts

@@ -3,8 +3,10 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   template: `
-    <app-title></app-title>
+    <app-title [subtitle]="subtitle"></app-title>
     <app-contact></app-contact>
   `
 })
-export class AppComponent {}
+export class AppComponent {
+  subtitle = '(v2)';
+}

aio/content/examples/ngmodule/src/app/app.component.3.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   // #docregion template
   template: `
-    <app-title></app-title>
+    <app-title [subtitle]="subtitle"></app-title>
     <nav>
       <a routerLink="contact" routerLinkActive="active">Contact</a>
       <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
@@ -14,4 +14,6 @@ import { Component } from '@angular/core';
   `
   // #enddocregion template
 })
-export class AppComponent {}
+export class AppComponent {
+  subtitle = '(v3)';
+}

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

@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   template: `
-    <app-title></app-title>
+    <app-title [subtitle]="subtitle"></app-title>
     <nav>
       <a routerLink="contact" routerLinkActive="active">Contact</a>
       <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
@@ -14,4 +14,6 @@ import { Component } from '@angular/core';
     <router-outlet></router-outlet>
   `
 })
-export class AppComponent {}
+export class AppComponent {
+  subtitle = '(Final)';
+}

aio/content/examples/ngmodule/src/app/app.module.0.ts

@@ -1,7 +1,17 @@
+// #docplaster
+// #docregion
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppComponent }  from './app.component.0';
+import
+// #enddocregion
+       { AppComponent }  from './app.component.0';
+/*
+// #docregion
+       { AppComponent }  from './app.component';
+// #enddocregion
+*/
+// #docregion
 
 @NgModule({
 // #docregion imports

aio/content/examples/ngmodule/src/app/app.module.1.ts

@@ -1,15 +1,14 @@
 // #docplaster
 // #docregion
-/* Angular Imports */
 import { NgModule }           from '@angular/core';
 import { BrowserModule }      from '@angular/platform-browser';
 
-/* App Imports */
+import
 // #enddocregion
-import { AppComponent }       from './app.component.1';
+       { AppComponent }       from './app.component.1';
 /*
 // #docregion
-import { AppComponent }       from './app.component';
+       { AppComponent }       from './app.component';
 // #enddocregion
 */
 // #docregion
@@ -22,9 +21,12 @@ import { FormsModule }        from '@angular/forms';
 
 import { AwesomePipe }        from './contact/awesome.pipe';
 import { ContactComponent }   from './contact/contact.component.3';
+
+// #docregion import-contact-directive
 import {
-  ContactHighlightDirective as ContactHighlightDirective
-} from './contact/contact-highlight.directive';
+  HighlightDirective as ContactHighlightDirective
+} from './contact/highlight.directive';
+// #enddocregion import-contact-directive
 
 @NgModule({
 // #docregion imports

aio/content/examples/ngmodule/src/app/app.module.1b.ts

@@ -1,16 +1,15 @@
 // #docplaster
 // #docregion
-/* Angular Imports */
 import { NgModule }           from '@angular/core';
 import { BrowserModule }      from '@angular/platform-browser';
-import { FormsModule }        from '@angular/forms';
 
-/* App Imports */
+/* App Root */
+import
 // #enddocregion
-import { AppComponent }       from './app.component.1b';
+       { AppComponent }       from './app.component.1b';
 /*
 // #docregion
-import { AppComponent }       from './app.component';
+       { AppComponent }       from './app.component';
 // #enddocregion
 */
 // #docregion
@@ -19,17 +18,25 @@ import { TitleComponent }     from './title.component';
 import { UserService }        from './user.service';
 
 /* Contact Imports */
+import
 // #enddocregion
-import { ContactComponent } from './contact/contact.component.3';
+       { ContactComponent }   from './contact/contact.component.3';
 /*
 // #docregion
-import { ContactComponent } from './contact/contact.component';
+       { ContactComponent }   from './contact/contact.component';
 // #enddocregion
 */
 // #docregion
-import { AwesomePipe } from './contact/awesome.pipe';
-import { ContactService } from './contact/contact.service';
-import { ContactHighlightDirective } from './contact/contact-highlight.directive';
+import { ContactService }     from './contact/contact.service';
+import { AwesomePipe }        from './contact/awesome.pipe';
+
+// #docregion import-alias
+import {
+  HighlightDirective as ContactHighlightDirective
+} from './contact/highlight.directive';
+// #enddocregion import-alias
+
+import { FormsModule }        from '@angular/forms';
 
 @NgModule({
   imports: [ BrowserModule,  FormsModule ],

aio/content/examples/ngmodule/src/app/app.module.2.ts

@@ -1,15 +1,15 @@
 // #docplaster
 // #docregion
-/* Angular Imports */
 import { NgModule }           from '@angular/core';
 import { BrowserModule }      from '@angular/platform-browser';
 
-/* App Imports */
+/* App Root */
+import
 // #enddocregion
-import { AppComponent }       from './app.component.2';
+       { AppComponent }       from './app.component.2';
 /*
 // #docregion
-import { AppComponent }       from './app.component';
+       { AppComponent }       from './app.component';
 // #enddocregion
 */
 // #docregion
@@ -18,11 +18,12 @@ import { TitleComponent }     from './title.component';
 import { UserService }        from './user.service';
 
 /* Contact Imports */
+import
 // #enddocregion
-import { ContactModule }      from './contact/contact.module.2';
+       { ContactModule }      from './contact/contact.module.2';
 /*
 // #docregion
-import { ContactModule }      from './contact/contact.module';
+       { ContactModule }      from './contact/contact.module';
 // #enddocregion
 */
 // #docregion

aio/content/examples/ngmodule/src/app/app.module.3.ts

@@ -1,36 +1,25 @@
 // #docplaster
 // #docregion
-/* Angular Imports */
 import { NgModule }           from '@angular/core';
 import { BrowserModule }      from '@angular/platform-browser';
 
-/* App Imports */
-// #enddocregion
+/* App Root */
 import { AppComponent }       from './app.component.3';
-/*
-// #docregion
-import { AppComponent }       from './app.component';
-// #enddocregion
-*/
-// #docregion
 import { HighlightDirective } from './highlight.directive';
 import { TitleComponent }     from './title.component';
 import { UserService }        from './user.service';
 
+/* Feature Modules */
+import { ContactModule }      from './contact/contact.module.3';
+
 /* Routing Module */
-// #enddocregion
 import { AppRoutingModule }   from './app-routing.module.3';
-/*
-// #docregion
-import { AppRoutingModule }   from './app-routing.module';
-// #enddocregion
-*/
-// #docregion
 
 @NgModule({
 // #docregion imports
   imports:      [
     BrowserModule,
+    ContactModule,
     AppRoutingModule
   ],
 // #enddocregion imports

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

@@ -1,14 +1,14 @@
 // #docplaster
 // #docregion
 // #docregion v4
-/* Angular Imports */
 import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 
-/* App Imports */
+/* App Root */
 import { AppComponent }   from './app.component';
 
-/* Core Modules */
+/* Feature Modules */
+import { ContactModule }    from './contact/contact.module';
 import { CoreModule }       from './core/core.module';
 
 /* Routing Module */
@@ -18,6 +18,7 @@ import { AppRoutingModule } from './app-routing.module';
   // #docregion import-for-root
   imports: [
     BrowserModule,
+    ContactModule,
 // #enddocregion v4
 // #enddocregion import-for-root
 /*

aio/content/examples/ngmodule/src/app/contact/contact-routing.module.3.ts

@@ -3,12 +3,10 @@ import { RouterModule }        from '@angular/router';
 
 import { ContactComponent }    from './contact.component.3';
 
-const routes = [
-  { path: 'contact', component: ContactComponent}
-];
-
 @NgModule({
-  imports: [ RouterModule.forChild(routes) ],
-  exports: [ RouterModule ]
+  imports: [RouterModule.forChild([
+    { path: 'contact', component: ContactComponent}
+  ])],
+  exports: [RouterModule]
 })
 export class ContactRoutingModule {}

aio/content/examples/ngmodule/src/app/contact/contact-routing.module.ts

@@ -4,13 +4,11 @@ import { RouterModule }        from '@angular/router';
 import { ContactComponent }    from './contact.component';
 
 // #docregion routing
-const routes = [
-  { path: 'contact', component: ContactComponent}
-];
-
 @NgModule({
-  imports: [ RouterModule.forChild(routes) ],
-  exports: [ RouterModule ]
+  imports: [RouterModule.forChild([
+    { path: 'contact', component: ContactComponent }
+  ])],
+  exports: [RouterModule]
 })
 export class ContactRoutingModule {}
 // #enddocregion

aio/content/examples/ngmodule/src/app/contact/contact.component.3.ts

@@ -21,7 +21,7 @@ export class ContactComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.contactService.getContacts().subscribe(contacts => {
+    this.contactService.getContacts().then(contacts => {
       this.msg = '';
       this.contacts = contacts;
       this.contact = contacts[0];

aio/content/examples/ngmodule/src/app/contact/contact.component.css

@@ -27,6 +27,3 @@
   margin-bottom: 20px;
 }
 
-.button-group {
-  padding-top: 12px;
-}

aio/content/examples/ngmodule/src/app/contact/contact.component.html

@@ -6,32 +6,18 @@
   <!-- #docregion awesome -->
   <h3 highlight>{{ contact.name | awesome }}</h3>
   <!-- #enddocregion awesome -->
-
   <div class="form-group">
     <label for="name">Name</label>
-
-    <!-- #docregion ngModel -->
     <input type="text" class="form-control" required
       [(ngModel)]="contact.name"
-      name="name"  #name="ngModel" >
-    <!-- #enddocregion ngModel -->
-
+        name="name"  #name="ngModel" >
     <div [hidden]="name.valid" class="alert alert-danger">
       Name is required
     </div>
   </div>
-
-  <div class="button-group">
-    <button type="submit" class="btn btn-default"
-    [disabled]="!contactForm.form.valid">
-    Save</button>
-
-    <button type="button" class="btn" (click)="next()"
-    [disabled]="!contactForm.form.valid">
-    Next Contact</button>
-
-    <button type="button" class="btn" (click)="newContact()">
-    New Contact</button>
-  </div>
+  <br>
+  <button type="submit" class="btn btn-default" [disabled]="!contactForm.form.valid">Save</button>
+  <button type="button" class="btn" (click)="next()" [disabled]="!contactForm.form.valid">Next Contact</button>
+  <button type="button" class="btn" (click)="newContact()">New Contact</button>
 </form>
 <!-- #enddocregion -->

aio/content/examples/ngmodule/src/app/contact/contact.component.ts

@@ -22,7 +22,7 @@ export class ContactComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.contactService.getContacts().subscribe(contacts => {
+    this.contactService.getContacts().then(contacts => {
       this.msg = '';
       this.contacts = contacts;
       this.contact = contacts[0];

aio/content/examples/ngmodule/src/app/contact/contact.module.0.ts

@@ -1,11 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: []
-})
-export class ContactModule { }

aio/content/examples/ngmodule/src/app/contact/contact.module.2.ts

@@ -5,32 +5,25 @@ import { CommonModule }       from '@angular/common';
 import { FormsModule }        from '@angular/forms';
 
 import { AwesomePipe }        from './awesome.pipe';
+
+import
 // #enddocregion
-import { ContactComponent }   from './contact.component.3';
+       { ContactComponent }   from './contact.component.3';
 /*
 // #docregion
-import { ContactComponent }   from './contact.component';
+       { ContactComponent }   from './contact.component';
 // #enddocregion
 */
 // #docregion
-import { ContactHighlightDirective } from './contact-highlight.directive';
 import { ContactService }     from './contact.service';
+import { HighlightDirective } from './highlight.directive';
 
 // #docregion class
 @NgModule({
-  imports: [
-    CommonModule,
-    FormsModule
-  ],
-  declarations: [
-    AwesomePipe,
-    ContactComponent,
-    ContactHighlightDirective
-  ],
-  // #docregion exports
-  exports:   [ ContactComponent ],
-  // #enddocregion exports
-  providers: [ ContactService ]
+  imports:      [ CommonModule, FormsModule ],
+  declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
+  exports:      [ ContactComponent ],
+  providers:    [ ContactService ]
 })
 export class ContactModule { }
 // #enddocregion class

aio/content/examples/ngmodule/src/app/contact/contact.module.3.ts

@@ -1,43 +1,21 @@
-// #docplaster
 // #docregion
 import { NgModule }           from '@angular/core';
 import { CommonModule }       from '@angular/common';
 import { FormsModule }        from '@angular/forms';
 
 import { AwesomePipe }        from './awesome.pipe';
-// #enddocregion
-import { ContactComponent }   from './contact.component.3';
-/*
-// #docregion
-import { ContactComponent }   from './contact.component';
-// #enddocregion
-*/
-// #docregion
-import { ContactHighlightDirective } from './contact-highlight.directive';
-import { ContactService }     from './contact.service';
 
-// #enddocregion
+import { ContactComponent }   from './contact.component.3';
+import { ContactService }     from './contact.service';
+import { HighlightDirective } from './highlight.directive';
+
 import { ContactRoutingModule }   from './contact-routing.module.3';
-/*
-// #docregion
-import { ContactRoutingModule }   from './contact-routing.module';
-// #enddocregion
-*/
-// #docregion
 
 // #docregion class
 @NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    ContactRoutingModule
-  ],
-  declarations: [
-    AwesomePipe,
-    ContactComponent,
-    ContactHighlightDirective
-  ],
-  providers: [ ContactService ]
+  imports:      [ CommonModule, FormsModule, ContactRoutingModule ],
+  declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
+  providers:    [ ContactService ]
 })
 export class ContactModule { }
 // #enddocregion class

aio/content/examples/ngmodule/src/app/contact/contact.module.ts

@@ -8,10 +8,7 @@ import { ContactRoutingModule } from './contact-routing.module';
 
 // #docregion class
 @NgModule({
-  imports: [
-    SharedModule,
-    ContactRoutingModule
-  ],
+  imports:      [ SharedModule, ContactRoutingModule ],
   declarations: [ ContactComponent ],
   providers:    [ ContactService ]
 })

aio/content/examples/ngmodule/src/app/contact/contact.service.ts

@@ -1,10 +1,5 @@
-// #docplaster
 // #docregion
-import { Injectable, OnDestroy } from '@angular/core';
-
-import { Observable } from 'rxjs/Observable';
-import { of }         from 'rxjs/observable/of';
-import { delay }      from 'rxjs/operators';
+import { Injectable } from '@angular/core';
 
 export class Contact {
   constructor(public id: number, public name: string) { }
@@ -18,21 +13,17 @@ const CONTACTS: Contact[] = [
 
 const FETCH_LATENCY = 500;
 
-/** Simulate a data service that retrieves contacts from a server */
 @Injectable()
-export class ContactService implements OnDestroy {
-// #enddocregion
-  constructor() { console.log('ContactService instance created.'); }
-  ngOnDestroy() { console.log('ContactService instance destroyed.'); }
+export class ContactService {
 
-// #docregion
-  getContacts(): Observable<Contact[]> {
-    return of(CONTACTS).pipe(delay(FETCH_LATENCY));
+  getContacts() {
+    return new Promise<Contact[]>(resolve => {
+      setTimeout(() => { resolve(CONTACTS); }, FETCH_LATENCY);
+    });
   }
 
-  getContact(id: number | string): Observable<Contact> {
-    return of(CONTACTS.find(contact => contact.id === +id))
-      .pipe(delay(FETCH_LATENCY));
+  getContact(id: number | string) {
+    return this.getContacts()
+      .then(heroes => heroes.find(hero => hero.id === +id));
   }
 }
-// #enddocregion

aio/content/examples/ngmodule/src/app/contact/highlight.directive.ts

@@ -1,4 +1,4 @@
-// #docplaster
+/* tslint:disable */
 // Same directive name and selector as
 // HighlightDirective in parent AppModule
 // It selects for both input boxes and  'highlight' attr
@@ -7,14 +7,12 @@
 // #docregion
 import { Directive, ElementRef } from '@angular/core';
 
-// Highlight the host element or any InputElement in blue
 @Directive({ selector: '[highlight], input' })
-export class ContactHighlightDirective {
+/** Highlight the attached element or an InputElement in blue */
+export class HighlightDirective {
   constructor(el: ElementRef) {
     el.nativeElement.style.backgroundColor = 'powderblue';
-    // #enddocregion
-    console.log(`* Contact highlight called for ${el.nativeElement.tagName}`);
-    // #docregion
+    console.log(
+      `* Contact highlight called for ${el.nativeElement.tagName}`);
   }
 }
-// #enddocregion

aio/content/examples/ngmodule/src/app/core/title.component.html

@@ -1,5 +1,5 @@
 <!-- Exact copy from earlier app.component.html -->
-<h1 highlight>{{title}}</h1>
+<h1 highlight>{{title}} {{subtitle}}</h1>
 <p *ngIf="user">
   <i>Welcome, {{user}}</i>
 <p>

aio/content/examples/ngmodule/src/app/core/title.component.ts

@@ -7,6 +7,7 @@ import { UserService }      from '../core/user.service';
   templateUrl: './title.component.html',
 })
 export class TitleComponent {
+  @Input() subtitle = '';
   title = 'Angular Modules';
   user = '';
 

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

@@ -1,21 +1,22 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Component, OnInit } from '@angular/core';
 
 import { Crisis,
-         CrisisService } from './crisis.service';
+         CrisisService }     from './crisis.service';
 
 @Component({
   template: `
     <h3 highlight>Crisis List</h3>
-    <div *ngFor='let crisis of crises | async'>
+    <div *ngFor='let crisis of crisises | async'>
       <a routerLink="{{'../' + crisis.id}}">{{crisis.id}} - {{crisis.name}}</a>
     </div>
   `
 })
-export class CrisisListComponent {
-  crises: Observable<Crisis[]>;
+export class CrisisListComponent implements OnInit {
+  crisises: Promise<Crisis[]>;
 
-  constructor(private crisisService: CrisisService) {
-    this.crises = this.crisisService.getCrises();
+  constructor(private crisisService: CrisisService) { }
+
+  ngOnInit() {
+    this.crisises = this.crisisService.getCrises();
   }
 }

aio/content/examples/ngmodule/src/app/crisis/crisis.service.ts

@@ -1,8 +1,4 @@
-import { Injectable, OnDestroy } from '@angular/core';
-
-import { Observable } from 'rxjs/Observable';
-import { of }         from 'rxjs/observable/of';
-import { delay }      from 'rxjs/operators';
+import { Injectable } from '@angular/core';
 
 export class Crisis {
   constructor(public id: number, public name: string) { }
@@ -17,18 +13,18 @@ const CRISES: Crisis[] = [
 
 const FETCH_LATENCY = 500;
 
-/** Simulate a data service that retrieves crises from a server */
 @Injectable()
-export class CrisisService implements OnDestroy {
-  constructor() { console.log('CrisisService instance created.'); }
-  ngOnDestroy() { console.log('CrisisService instance destroyed.'); }
+export class CrisisService {
 
-  getCrises(): Observable<Crisis[]> {
-    return of(CRISES).pipe(delay(FETCH_LATENCY));
+  getCrises() {
+    return new Promise<Crisis[]>(resolve => {
+      setTimeout(() => { resolve(CRISES); }, FETCH_LATENCY);
+    });
   }
 
-  getCrisis(id: number | string): Observable<Crisis> {
-    return of(CRISES.find(crisis => crisis.id === +id))
-      .pipe(delay(FETCH_LATENCY));
+  getCrisis(id: number | string) {
+    return this.getCrises()
+      .then(heroes => heroes.find(hero => hero.id === +id));
   }
+
 }

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

@@ -26,6 +26,6 @@ export class HeroDetailComponent implements OnInit {
 
   ngOnInit() {
     let id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
-    this.heroService.getHero(id).subscribe(hero => this.hero = hero);
+    this.heroService.getHero(id).then(hero => this.hero = hero);
   }
 }

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

@@ -1,5 +1,4 @@
-import { Component }  from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Component, OnInit } from '@angular/core';
 
 import { Hero,
          HeroService } from './hero.service';
@@ -12,9 +11,11 @@ import { Hero,
     </div>
   `
 })
-export class HeroListComponent {
-  heroes: Observable<Hero[]>;
-  constructor(private heroService: HeroService) {
+export class HeroListComponent implements OnInit {
+  heroes: Promise<Hero[]>;
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
     this.heroes = this.heroService.getHeroes();
   }
 }

aio/content/examples/ngmodule/src/app/hero/hero.module.3.ts

@@ -5,9 +5,8 @@ import { FormsModule }         from '@angular/forms';
 import { HeroComponent }       from './hero.component.3';
 import { HeroDetailComponent } from './hero-detail.component';
 import { HeroListComponent }   from './hero-list.component';
-import { HeroRoutingModule }   from './hero-routing.module.3';
-
 import { HighlightDirective }  from './highlight.directive';
+import { HeroRoutingModule }   from './hero-routing.module.3';
 
 // #docregion class
 @NgModule({

aio/content/examples/ngmodule/src/app/hero/hero.service.ts

@@ -1,8 +1,4 @@
-import { Injectable, OnDestroy } from '@angular/core';
-
-import { Observable } from 'rxjs/Observable';
-import { of }         from 'rxjs/observable/of';
-import { delay }      from 'rxjs/operators';
+import { Injectable } from '@angular/core';
 
 export class Hero {
   constructor(public id: number, public name: string) { }
@@ -19,19 +15,18 @@ const HEROES: Hero[] = [
 
 const FETCH_LATENCY = 500;
 
-/** Simulate a data service that retrieves heroes from a server */
 @Injectable()
-export class HeroService implements OnDestroy {
+export class HeroService {
 
-  constructor() { console.log('HeroService instance created.'); }
-  ngOnDestroy() { console.log('HeroService instance destroyed.'); }
-
-  getHeroes(): Observable<Hero[]> {
-    return of(HEROES).pipe(delay(FETCH_LATENCY));
+  getHeroes() {
+    return new Promise<Hero[]>(resolve => {
+      setTimeout(() => { resolve(HEROES); }, FETCH_LATENCY);
+    });
   }
 
-  getHero(id: number | string): Observable<Hero> {
-    return of(HEROES.find(hero => hero.id === +id))
-      .pipe(delay(FETCH_LATENCY));
+  getHero(id: number | string) {
+    return this.getHeroes()
+      .then(heroes => heroes.find(hero => hero.id === +id));
   }
+
 }

aio/content/examples/ngmodule/src/app/highlight.directive.ts

@@ -1,15 +1,12 @@
-// #docplaster
 // #docregion
 import { Directive, ElementRef } from '@angular/core';
 
-// Highlight the host element in gold
 @Directive({ selector: '[highlight]' })
+/** Highlight the attached element in gold */
 export class HighlightDirective {
   constructor(el: ElementRef) {
     el.nativeElement.style.backgroundColor = 'gold';
-    // #enddocregion
-    console.log(`* AppRoot highlight called for ${el.nativeElement.tagName}`);
-    // #docregion
+    console.log(
+      `* AppRoot highlight called for ${el.nativeElement.tagName}`);
   }
 }
-// #enddocregion

aio/content/examples/ngmodule/src/app/shared/highlight.directive.ts

@@ -1,8 +1,9 @@
+/* tslint:disable */
 // Exact copy of contact/highlight.directive except for color and message
 import { Directive, ElementRef } from '@angular/core';
 
 @Directive({ selector: '[highlight], input' })
-// Highlight the host element or any InputElement in gray
+/** Highlight the attached element or an InputElement in gray */
 export class HighlightDirective {
   constructor(el: ElementRef) {
     el.nativeElement.style.backgroundColor = 'lightgray';

aio/content/examples/ngmodule/src/app/title.component.html

@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!-- #docregion v1 -->
-<h1 highlight>{{title}}</h1>
+<h1 highlight>{{title}} {{subtitle}}</h1>
 <!-- #enddocregion v1 -->
 <!-- #docregion ngIf -->
 <p *ngIf="user">

aio/content/examples/ngmodule/src/app/title.component.ts

@@ -1,17 +1,18 @@
 // #docplaster
 // #docregion
 // #docregion v1
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 // #enddocregion v1
 import { UserService } from './user.service';
 // #docregion v1
 
 @Component({
   selector: 'app-title',
-  templateUrl: './title.component.html'
+  templateUrl: './title.component.html',
 })
 export class TitleComponent {
-  title = 'Angular Modules';
+  @Input() subtitle = '';
+  title = 'NgModules';
 // #enddocregion v1
   user = '';
 

aio/content/examples/ngmodule/src/index.0.html

@@ -5,6 +5,17 @@
     <title>NgModule Minimal</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+     <!-- Polyfills -->
+    <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>
+    <script>
+      System.import('main.0.js').catch(function(err){ console.error(err); });
+    </script>
   </head>
 
   <body>

aio/content/examples/ngmodule/src/index.1.html

@@ -5,6 +5,17 @@
     <title>NgModule Minimal</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+     <!-- Polyfills -->
+    <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>
+    <script>
+      System.import('main.1.js').catch(function(err){ console.error(err); });
+    </script>
   </head>
 
   <body>

aio/content/examples/ngmodule/src/index.1b.html

@@ -5,6 +5,17 @@
     <title>NgModule Minimal</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+     <!-- Polyfills -->
+    <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>
+    <script>
+      System.import('main.1b.js').catch(function(err){ console.error(err); });
+    </script>
   </head>
 
   <body>

aio/content/examples/ngmodule/src/index.2.html

@@ -5,6 +5,17 @@
     <title>NgModule Minimal</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+     <!-- Polyfills -->
+    <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>
+    <script>
+      System.import('main.2.js').catch(function(err){ console.error(err); });
+    </script>
   </head>
 
   <body>

aio/content/examples/ngmodule/src/index.3.html

@@ -5,6 +5,17 @@
     <title>NgModule Minimal</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+
+     <!-- Polyfills -->
+    <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>
+    <script>
+      System.import('main.3.js').catch(function(err){ console.error(err); });
+    </script>
   </head>
 
   <body>

aio/content/examples/reactive-forms/final.plnkr.json

@@ -5,17 +5,13 @@
     "styles.css",
 
     "app/app.component.ts",
-    "app/app.component.html",
-    "app/app.component.css",
     "app/app.module.ts",
     "app/data-model.ts",
     "app/hero.service.ts",
-    "app/hero-detail/hero-detail.component.html",
-    "app/hero-detail/hero-detail.component.ts",
-    "app/hero-detail/hero-detail.component.css",
-    "app/hero-list/hero-list.component.html",
-    "app/hero-list/hero-list.component.ts",
-    "app/hero-list/hero-list.component.css",
+    "app/hero-detail.component.html",
+    "app/hero-detail.component.ts",
+    "app/hero-list.component.html",
+    "app/hero-list.component.ts",
 
     "main-final.ts",
     "index-final.html"

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

@@ -6,6 +6,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+    <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/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main-final.js').catch(function(err){ console.error(err); });
+    </script>
   </head>
 
   <body>

aio/content/examples/service-worker-getting-started/e2e/app.e2e-spec.ts

@@ -1,44 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, element, by } from 'protractor';
-
-
-describe('sw-example App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to Service Workers!');
-  });
-
-  it('should display the Angular logo', () => {
-    let logo = element(by.css('img'));
-    page.navigateTo();
-    expect(logo.isPresent()).toBe(true);
-  });
-
-  it('should show a header for the list of links', () => {
-    const listHeader = element(by.css('app-root > h2'));
-    expect(listHeader.getText()).toEqual('Here are some links to help you start:');
-  });
-
-  it('should show a list of links', function () {
-      element.all(by.css('ul > li > h2 > a')).then((items) => {
-        expect(items.length).toBe(4);
-        expect(items[0].getText()).toBe('Angular Service Worker Intro');
-        expect(items[1].getText()).toBe('Tour of Heroes');
-        expect(items[2].getText()).toBe('CLI Documentation');
-        expect(items[3].getText()).toBe('Angular blog');
-      });
-  });
-   // Check for a rejected promise as the service worker is not enabled
-   it('SwUpdate.checkForUpdate() should return a rejected promise', () => {
-    const button = element(by.css('button'));
-    const rejectMessage = element(by.css('p'));
-    button.click();
-    expect(rejectMessage.getText()).toContain('rejected: ');
-  });
-});

aio/content/examples/service-worker-getting-started/package.json

@@ -1,50 +0,0 @@
-{
-  "name": "angular.io-example",
-  "version": "0.0.0",
-  "license": "MIT",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^5.0.0",
-    "@angular/common": "^5.0.0",
-    "@angular/compiler": "^5.0.0",
-    "@angular/core": "^5.0.0",
-    "@angular/forms": "^5.0.0",
-    "@angular/http": "^5.0.0",
-    "@angular/service-worker": "^5.0.0",
-    "@angular/platform-browser": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^5.0.0",
-    "@angular/router": "^5.0.0",
-    "core-js": "^2.4.1",
-    "rxjs": "^5.5.2",
-    "zone.js": "^0.8.14"
-  },
-  "devDependencies": {
-    "@angular/cli": "1.5.4",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/language-service": "^5.0.0",
-    "@types/jasmine": "~2.5.53",
-    "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
-    "codelyzer": "^4.0.1",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
-    "ts-node": "~3.2.0",
-    "tslint": "~5.7.0",
-    "typescript": "~2.4.2"
-  }
-}

aio/content/examples/service-worker-getting-started/plnkr.json

@@ -1,5 +0,0 @@
-{
-    "description": "Service Worker",
-    "basePath": "src/",
-    "tags": ["service worker"]
-  }

aio/content/examples/service-worker-getting-started/src/app/app.component.html

@@ -1,27 +0,0 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{title}}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-
-<button id="check" (click)="updateCheck()">Check for Update</button>
-<p id="checkResult">{{updateCheckText}}</p>
-
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/service-worker-intro">Angular Service Worker Intro</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-

aio/content/examples/service-worker-getting-started/src/app/app.component.spec.ts

@@ -1,27 +0,0 @@
-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('Service Workers');
-  }));
-  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 Service Workers!');
-  }));
-});

aio/content/examples/service-worker-getting-started/src/app/app.component.ts

@@ -1,20 +0,0 @@
-import { Component } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html'
-})
-export class AppComponent {
-  title = 'Service Workers';
-  updateCheckText = '';
-
-  constructor(private update: SwUpdate) {}
-
-  updateCheck(): void {
-      this.update
-        .checkForUpdate()
-        .then(() => this.updateCheckText = 'resolved')
-        .catch(err => this.updateCheckText = `rejected: ${err.message}`);
-    }
-}

aio/content/examples/service-worker-getting-started/src/app/app.module.ts

@@ -1,31 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-
-// #docregion sw-import
-import { ServiceWorkerModule } from '@angular/service-worker';
-import { environment } from '../environments/environment';
-// #enddocregion sw-import
-
-import { CheckForUpdateService } from './check-for-update.service';
-import { LogUpdateService } from './log-update.service';
-import { PromptUpdateService } from './prompt-update.service';
-
-// #docregion sw-module
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
-  ],
-  providers: [
-    CheckForUpdateService,
-    LogUpdateService,
-    PromptUpdateService,
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-// #enddocregion sw-module

aio/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts

@@ -1,15 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker';
-
-
-// #docregion sw-check-update
-import { interval } from 'rxjs/observable/interval';
-
-@Injectable()
-export class CheckForUpdateService {
-
-  constructor(updates: SwUpdate) {
-    interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate());
-  }
-}
-// #enddocregion sw-check-update

aio/content/examples/service-worker-getting-started/src/app/log-update.service.ts

@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker';
-
-// #docregion sw-update
-@Injectable()
-export class LogUpdateService {
-
-  constructor(updates: SwUpdate) {
-    updates.available.subscribe(event => {
-      console.log('current version is', event.current);
-      console.log('available version is', event.available);
-    });
-    updates.activated.subscribe(event => {
-      console.log('old version was', event.previous);
-      console.log('new version is', event.current);
-    });
-  }
-}
-// #enddocregion sw-update

aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts

@@ -1,20 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker';
-
-function promptUser(event): boolean {
-  return true;
-}
-
-// #docregion sw-activate
-@Injectable()
-export class PromptUpdateService {
-
-  constructor(updates: SwUpdate) {
-    updates.available.subscribe(event => {
-      if (promptUser(event)) {
-        updates.activateUpdate().then(() => document.location.reload());
-      }
-    });
-  }
-}
-// #enddocregion sw-activate

aio/content/examples/service-worker-getting-started/src/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>SwExample</title>
-  <base href="/">
-
-</head>
-<body>
-  <app-root></app-root>
-</body>
-</html>

aio/content/examples/service-worker-getting-started/src/main.ts

@@ -1,12 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));

aio/content/examples/service-worker-getting-started/src/ngsw-config.json

@@ -1,28 +0,0 @@
-
-{
-  "index": "/index.html",
-  "assetGroups": [{
-    "name": "app",
-    "installMode": "prefetch",
-    "resources": {
-      "files": [
-        "/favicon.ico",
-        "/index.html"
-      ],
-      "versionedFiles": [
-        "/*.bundle.css",
-        "/*.bundle.js",
-        "/*.chunk.js"
-      ]
-    }
-  }, {
-    "name": "assets",
-    "installMode": "lazy",
-    "updateMode": "prefetch",
-    "resources": {
-      "files": [
-        "/assets/**"
-      ]
-    }
-  }]
-}

aio/content/examples/structural-directives/e2e/app.e2e-spec.ts

@@ -37,7 +37,7 @@ describe('Structural Directives', function () {
     expect(paragraph.count()).toEqual(1);
   });
 
-  it('appUnless should show 3 paragraph (A)s and (B)s at the start', function () {
+  it('myUnless should show 3 paragraph (A)s and (B)s at the start', function () {
     const paragraph = element.all(by.css('p.unless'));
     expect(paragraph.count()).toEqual(3);
     for (let i = 0; i < 3; i++) {
@@ -45,7 +45,7 @@ describe('Structural Directives', function () {
     }
   });
 
-  it('appUnless should show 1 paragraph (B) after toggling condition', function () {
+  it('myUnless should show 1 paragraph (B) after toggling condition', function () {
     const toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0);
     const paragraph = element.all(by.css('p.unless'));
 

aio/content/examples/structural-directives/src/app/app.component.html

@@ -6,7 +6,7 @@
 
 <blockquote>
 <!-- #docregion built-in, asterisk, ngif -->
-<div *ngIf="hero" class="name">{{hero.name}}</div>
+<div *ngIf="hero" >{{hero.name}}</div>
 <!-- #enddocregion built-in, asterisk, ngif -->
 </blockquote>
 
@@ -51,7 +51,7 @@
 <p>&lt;ng-template&gt; element</p>
 <!-- #docregion ngif-template -->
 <ng-template [ngIf]="hero">
-  <div class="name">{{hero.name}}</div>
+  <div>{{hero.name}}</div>
 </ng-template>
 <!-- #enddocregion ngif-template -->
 
@@ -188,7 +188,7 @@
 
 <hr>
 
-<h2 id="appUnless">UnlessDirective</h2>
+<h2 id="myUnless">UnlessDirective</h2>
 <p>
   The condition is currently
   <span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
@@ -198,31 +198,31 @@
     Toggle condition to {{condition ? 'false' : 'true'}}
   </button>
 </p>
-<!-- #docregion appUnless-->
+<!-- #docregion myUnless-->
 <p *appUnless="condition" class="unless a">
   (A) This paragraph is displayed because the condition is false.
 </p>
 
 <p *appUnless="!condition" class="unless b">
   (B) Although the condition is true,
-  this paragraph is displayed because appUnless is set to false.
+  this paragraph is displayed because myUnless is set to false.
 </p>
-<!-- #enddocregion appUnless-->
+<!-- #enddocregion myUnless-->
 
 
 <h4>UnlessDirective with template</h4>
 
-<!-- #docregion appUnless-1 -->
+<!-- #docregion myUnless-1 -->
 <p *appUnless="condition">Show this sentence unless the condition is true.</p>
-<!-- #enddocregion appUnless-1 -->
+<!-- #enddocregion myUnless-1 -->
 
 <p *appUnless="condition" class="code unless">
-  (A) &lt;p *appUnless="condition" class="code unless"&gt;
+  (A) &lt;p *myUnless="condition" class="code unless"&gt;
 </p>
 
 <ng-template [appUnless]="condition">
   <p class="code unless">
-    (A) &lt;ng-template [appUnless]="condition"&gt;
+    (A) &lt;ng-template [myUnless]="condition"&gt;
   </p>
 </ng-template>
 

aio/content/examples/structural-directives/src/app/unless.directive.ts

@@ -8,7 +8,7 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  * Add the template content to the DOM unless the condition is true.
 // #enddocregion no-docs
  *
- * If the expression assigned to `appUnless` evaluates to a truthy value
+ * If the expression assigned to `myUnless` evaluates to a truthy value
  * then the templated elements are removed removed from the DOM,
  * the templated elements are (re)inserted into the DOM.
  *
@@ -18,8 +18,8 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  *
  * ### Syntax
  *
- * - `<div *appUnless="condition">...</div>`
- * - `<ng-template [appUnless]="condition"><div>...</div></ng-template>`
+ * - `<div *myUnless="condition">...</div>`
+ * - `<ng-template [myUnless]="condition"><div>...</div></ng-template>`
  *
 // #docregion no-docs
  */

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

@@ -9,6 +9,6 @@ export class MessageService {
   }
 
   clear() {
-    this.messages = [];
+    this.messages.length = 0;
   }
 }

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

@@ -9,6 +9,6 @@ export class MessageService {
   }
 
   clear() {
-    this.messages = [];
+    this.messages.length = 0;
   }
 }

aio/content/examples/toh-pt6/src/app/message.service.ts

@@ -9,6 +9,6 @@ export class MessageService {
   }
 
   clear() {
-    this.messages = [];
+    this.messages.length = 0;
   }
 }

aio/content/examples/universal/src/app/message.service.ts

@@ -9,6 +9,6 @@ export class MessageService {
   }
 
   clear() {
-    this.messages = [];
+    this.messages.length = 0;
   }
 }

aio/content/guide/aot-compiler.md

@@ -2,7 +2,7 @@
 
 The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase _before_ the browser downloads and runs that code.
 
-This guide explains how to build with the AOT compiler and how to write Angular metadata that AOT can compile.
+This guide explains how to to build with the AOT compiler and how to write Angular metadata that AOT can compile.
 
 <div class="l-sub-section">
 
@@ -409,7 +409,7 @@ function; it can only contain a single `return` statement.
 
 The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes.
 Review the [source code](https://github.com/angular/angular/blob/master/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code")
-for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodule).
+for these methods to see how macros can simplify configuration of complex Angular modules.
 
 ### Metadata rewriting
 

aio/content/guide/component-styles.md

@@ -179,7 +179,7 @@ to a component's `@Component` decorator:
 <code-tabs>
   <code-pane title="src/app/hero-app.component.ts (CSS in file)" path="component-styles/src/app/hero-app.component.1.ts"></code-pane>
   <code-pane title="src/app/hero-app.component.css" path="component-styles/src/app/hero-app.component.1.css"></code-pane>
-</code-tabs> 
+</code-tabs>
 
 <div class="alert is-critical">
 
@@ -245,8 +245,7 @@ See the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-
 
 ### Non-CSS style files
 
-If you're building with the CLI, 
-you can write style files in [sass](http://sass-lang.com/), [less](http://lesscss.org/), or [stylus](http://stylus-lang.com/) and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`, `.styl`) as in the following example:
+You can write style files in [sass](http://sass-lang.com/), [less](http://lesscss.org/), or [stylus](http://stylus-lang.com/) and specify those files in the `styleUrls` metadata, e.g.,
 
 <code-example>
 @Component({
@@ -257,18 +256,10 @@ you can write style files in [sass](http://sass-lang.com/), [less](http://lesscs
 ...
 </code-example>
 
-The CLI build process runs the pertinent CSS preprocessor.
+The CLI build process runs the corresponding CSS pre-processors.
 
-When generating a component file with `ng generate component`, the CLI emits an empty CSS styles file (`.css`) by default.
-You can configure the CLI to default to your preferred CSS preprocessor 
-as explained in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
-"CSS Preprocessor integration").
-
-<div class="alert is-important">
-
-Style strings added to the `@Component.styles` array _must be written in CSS_ because the CLI cannot apply a preprocessor to inline styles.
-
-</div>
+You can also configure the CLI to default to your preferred CSS pre-processer 
+as explained in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors).
 
 {@a view-encapsulation}
 

aio/content/guide/dependency-injection.md

@@ -160,7 +160,7 @@ Providing the `UserService` with an Angular module is a good choice.
 <div class="l-sub-section">
 
 To be precise, Angular module providers are registered with the root injector
-_unless the module is_ [lazy loaded](guide/ngmodule#lazy-load-DI).
+_unless the module is_ [lazy loaded](guide/ngmodule#lazy-load).
 In this sample, all modules are _eagerly loaded_ when the application starts,
 so all module providers are registered with the app's root injector.
 

aio/content/guide/i18n.md

@@ -8,6 +8,7 @@ See the <live-example downloadOnly name="i18n">i18n Example</live-example> for a
 an AOT-compiled app, translated into French.
 
 {@a angular-i18n}
+
 ## Angular and i18n
 
 Angular simplifies the following aspects of internationalization:
@@ -61,23 +62,6 @@ For more information about Unicode locale identifiers, see the
 For a complete list of locales supported by Angular, see 
 [the Angular repository](https://github.com/angular/angular/tree/master/packages/common/locales).
 
-The locale identifiers used by CLDR and Angular are based on [BCP47](http://www.rfc-editor.org/rfc/bcp/bcp47.txt).
-These specifications change over time; the following table maps previous identifiers to current ones at
-time of writing:
-
-| Locale name                   | Old locale id     | New locale id |
-|-------------------------------|-------------------|---------------|
-| Indonesian                    | in                | id            |
-| Hebrew                        | iw                | he            |
-| Romanian Moldova              | mo                | ro-MD         |
-| Norwegian Bokmål              | no, no-NO         | nb            |
-| Serbian Latin                 | sh                | sr-Latn       |
-| Filipino                      | tl                | fil           |
-| Portuguese Brazil             | pt-BR             | pt            |
-| Chinese Simplified            | zh-cn, zh-Hans-CN | zh-Hans       |
-| Chinese Traditional           | zh-tw, zh-Hant-TW | zh-Hant       |
-| Chinese Traditional Hong Kong | zh-hk             | zh-Hant-HK    |
-
 
 ## i18n pipes
 
@@ -94,14 +78,6 @@ If you want to import locale data for other languages, you can do it manually:
 <code-example path="i18n/doc-files/app.locale_data.ts" region="import-locale" title="src/app/app.module.ts" linenums="false">
 </code-example>
 
-The first parameter is an object containing the locale data imported from `@angular/common/locales`.
-By default, the imported locale data is registered with the locale id that is defined in the Angular
-locale data itself.
-If you want to register the imported locale data with another locale id, use the second parameter to
-specify a custom locale id. For example, Angular's locale data defines the locale id for French as
-"fr". You can use the second parameter to associate the imported French locale data with the custom
-locale id "fr-FR" instead of "fr".
-
 The files in `@angular/common/locales` contain most of the locale data that you 
 need, but some advanced formatting options might only be available in the extra dataset that you can
 import from `@angular/common/locales/extra`. An error message informs you when this is the case.
@@ -142,6 +118,7 @@ in the target language.
 You need to build and deploy a separate version of the app for each supported language.
 
 {@a i18n-attribute}
+
 ### Mark text with the i18n attribute
 
 The Angular `i18n` attribute marks translatable content. Place it on every element tag whose fixed
@@ -167,6 +144,7 @@ To mark the greeting for translation, add the `i18n` attribute to the `<h1>` tag
 
 
 {@a help-translator}
+
 ### Help the translator with a description and meaning
 
 To translate a text message accurately, the translator may need additional information or context. 
@@ -197,6 +175,7 @@ text messages with different descriptions (not different meanings), then they ar
 
 
 {@a custom-id}
+
 ### Set a custom id for persistence and maintenance
 
 The angular i18n extractor tool generates a file with a translation unit entry for each `i18n`
@@ -271,6 +250,7 @@ the same text, `Bonjour`:
 
 
 {@a no-element}
+
 ### Translate text without creating an element
 
 If there is a section of text that you would like to translate, you can wrap it in a `<span>` tag.
@@ -282,6 +262,7 @@ The `<ng-container>` is transformed into an html comment:
 </code-example>
 
 {@a translate-attributes}
+
 ## Add i18n translation attributes
 
 You also can translate attributes.
@@ -305,6 +286,7 @@ You also can assign a meaning, description, and id with the `i18n-x="<meaning>|<
 syntax.
 
 {@a plural-ICU}
+
 ## Translate singular and plural
 
 Different languages have different pluralization rules.
@@ -360,6 +342,7 @@ for two, three, or any other number if the pluralization rules were different. F
 </div>
 
 {@a select-ICU}
+
 ## Select among alternative text messages
 
 If your template needs to display different text messages depending on the value of a variable, you
@@ -377,6 +360,7 @@ The message maps those values to the appropriate translations:
 </code-example>
 
 {@a nesting-ICUS}
+
 ## Nesting plural and select ICU expressions
 
 You can also nest different ICU expressions together, as shown in this example:
@@ -385,6 +369,7 @@ You can also nest different ICU expressions together, as shown in this example:
 </code-example>
 
 {@a ng-xi18n}
+
 ## Create a translation source file with _ng xi18n_
 
 Use the `ng xi18n` command provided by the CLI to extract the text messages marked with `i18n` into
@@ -409,6 +394,7 @@ package, or you can manually use the CLI Webpack plugin `ExtractI18nPlugin` from
 </div>
 
 {@a other-formats}
+
 ### Other translation formats
 
 Angular i18n tooling supports three translation formats:
@@ -436,6 +422,7 @@ The sample in this guide uses the default XLIFF 1.2 format.
 </div>
 
 {@a ng-xi18n-options}
+
 ### Other options
 
 You can specify the output path used by the CLI to extract your translation source file with
@@ -469,6 +456,7 @@ file. This information is not used by Angular, but external translation tools ma
 
 
 {@a translate}
+
 ## Translate text messages
 
 The `ng xi18n` command generates a translation source file named `messages.xlf` in the project `src`
@@ -478,6 +466,7 @@ The next step is to translate this source file into the specific language
 translation files. The example in this guide creates a French translation file.
 
 {@a localization-folder}
+
 ### Create a localization folder
 
 Most apps are translated into more than one other language. For this reason, it is standard practice
@@ -511,6 +500,7 @@ For this example:
 If you were translating to other languages, you would repeat these steps for each target language.
 
 {@a translate-text-nodes}
+
 ### Translate text nodes
 
 In a large translation project, you would send the `messages.fr.xlf` file to a French translator who
@@ -554,6 +544,7 @@ This sample file is easy to translate without a special editor or knowledge of F
 </div>
 
 {@a translate-plural-select}
+
 ## Translate plural and select expressions
 
 _Plural_ and _select_ ICU expressions are extracted separately, so they require special attention
@@ -564,6 +555,7 @@ elsewhere in the source template. In this example, you know the translation unit
 must be just below the translation unit for the logo.
 
 {@a translate-plural}
+
 ### Translate _plural_
 
 To translate a `plural`, translate its ICU format match values:
@@ -575,6 +567,7 @@ You can add or remove plural cases, with each language having its own cardinalit
 [CLDR plural rules](http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html).)
 
 {@a translate-select}
+
 ### Translate _select_
 
 Below is the content of our example `select` ICU expression in the component template:
@@ -605,6 +598,7 @@ Here they are together, after translation:
 </code-example>
 
 {@a translate-nested}
+
 ### Translate a nested expression
 
 A nested expression is similar to the previous examples. As in the previous example, there are 
@@ -627,6 +621,7 @@ The entire template translation is complete. The next section describes how to l
 into the app.
 
 {@a app-pre-translation}
+
 ### The app and its translation file
 
 The sample app and its translation file are now as follows:
@@ -645,6 +640,7 @@ The sample app and its translation file are now as follows:
 </code-tabs>
 
 {@a merge}
+
 ## Merge the completed translation file into the app
 
 To merge the translated text into component templates, compile the app with the completed
@@ -660,11 +656,12 @@ format that Angular understands, such as `.xtb`.
 How you provide this information depends upon whether you compile with
 the JIT compiler or the AOT compiler.
 
-  * With [AOT](guide/i18n#merge-aot), you pass the information as a CLI parameter.
-  * With [JIT](guide/i18n#merge-jit), you provide the information at bootstrap time.
+  * With [AOT](guide/i18n#aot), you pass the information as a CLI parameter.
+  * With [JIT](guide/i18n#jit), you provide the information at bootstrap time.
 
 
-{@a merge-aot}
+{@a aot}
+
 ### Merge with the AOT compiler
 
 The AOT (_Ahead-of-Time_) compiler is part of a build process that produces a small, fast,
@@ -688,7 +685,8 @@ guide:
   ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr
 </code-example>
 
-{@a merge-jit}
+{@a jit}
+
 ### Merge with the JIT compiler
 
 The JIT compiler compiles the app in the browser as the app loads.
@@ -715,29 +713,3 @@ Then provide the `LOCALE_ID` in the main module:
 
 <code-example path="i18n/doc-files/app.module.ts" title="src/app/app.module.ts" linenums="false">
 </code-example>
-
-
-{@a missing-translation}
-### Report missing translations
-By default, when a translation is missing, the build succeeds but generates a warning such as
-`Missing translation for message "foo"`. You can configure the level of warning that is generated by
-the Angular compiler:
-
-* Error: throw an error. If you are using AOT compilation, the build will fail. If you are using JIT
-compilation, the app will fail to load.
-* Warning (default): show a 'Missing translation' warning in the console or shell.
-* Ignore: do nothing.
-
-If you use the AOT compiler, specify the warning level by using the CLI parameter
-`--missingTranslation`. The example below shows how to set the warning level to error:
-
-<code-example language="sh" class="code-shell">
-  ng serve --aot --missingTranslation=error
-</code-example>
-
-If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding
-the 'MissingTranslationStrategy' property. The example below shows how to set the warning level to
-error:
-
-<code-example path="i18n/doc-files/main.3.ts" title="src/main.ts">
-</code-example>

aio/content/guide/lifecycle-hooks.md

@@ -140,7 +140,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
   </tr>
   <tr style='vertical-align:top'>
     <td>
-      <code>ngOnDestroy()</code>
+      <code>ngOnDestroy</code>
     </td>
     <td>