docs: add changelog for 5.1.1

Due to an overly agressive assert the compiler would generate
an internal error when referencing an enum declared in
namspace.

Fixes #18170

PR Close #20947

.bazelrc

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

.circleci/config.yml

@@ -7,17 +7,25 @@
 # 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: angular/ngcontainer:0.0.2
+    - image: *docker_image
 
 # 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/${CI_PULL_REQUEST//*pull\//}/merge"
+  post: git pull --ff-only origin "refs/pull/${CIRCLE_PULL_REQUEST//*pull\//}/merge"
 
 version: 2
 jobs:
@@ -26,8 +34,13 @@ 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: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          key: *cache_key
 
       - run: yarn install --frozen-lockfile --non-interactive
       - run: ./node_modules/.bin/gulp lint
@@ -38,13 +51,13 @@ jobs:
       - checkout:
           <<: *post_checkout
       - restore_cache:
-          key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          key: *cache_key
-
+      - run: bazel info release
       - run: bazel run @yarn//:yarn
-      - run: bazel build packages/...
+      - run: bazel build --config=ci packages/...
-      - run: bazel test @angular//...
+      - run: bazel test --config=ci packages/... @angular//...
       - save_cache:
-          key: angular-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          key: *cache_key
           paths:
             - "node_modules"
 

.nvmrc

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

.pullapprove.yml

@@ -22,7 +22,6 @@
 # petebacondarwin - Pete Bacon Darwin
 # pkozlowski-opensource - Pawel Kozlowski
 # robwormald - Rob Wormald
-# tbosch - Tobias Bosch
 # tinayuangao - Tina Gao
 # vicb - Victor Berchet
 # vikerman - Vikram Subramanian
@@ -45,6 +44,7 @@ groups:
         include:
           - "*"
         exclude:
+          - ".circleci/*"
           - "aio/*"
           - "integration/*"
           - "modules/*"
@@ -74,6 +74,7 @@ groups:
     users:
       - alexeagle #primary
       - chuckjaz
+      - IgorMinar
       - vikerman #fallback
 
   build-and-ci:
@@ -100,7 +101,6 @@ groups:
     users:
       - alexeagle
       - mhevery
-      - tbosch
       - vicb
       - IgorMinar #fallback
 
@@ -109,8 +109,7 @@ groups:
       files:
         - "packages/core/*"
     users:
-      - tbosch #primary
+      - chuckjaz #primary
-      - chuckjaz
       - mhevery
       - vicb
       - IgorMinar #fallback
@@ -132,7 +131,7 @@ groups:
         - "packages/compiler/src/i18n/*"
     users:
       - vicb #primary
-      - tbosch
+      - chuckjaz
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -141,9 +140,8 @@ groups:
       files:
         - "packages/compiler/*"
     users:
-      - tbosch #primary
+      - chuckjaz #primary
       - vicb
-      - chuckjaz
       - mhevery
       - IgorMinar #fallback
 
@@ -163,12 +161,11 @@ 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
 
@@ -212,7 +209,7 @@ groups:
         - "packages/language-service/*"
     users:
       - chuckjaz #primary
-      - tbosch #secondary
+      # needs secondary
       - vicb
       - IgorMinar #fallback
       - mhevery #fallback
@@ -242,8 +239,8 @@ groups:
       files:
         - "packages/platform-browser/*"
     users:
-      - tbosch #primary
+      - vicb #primary
-      - vicb #secondary
+      # needs secondary
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -253,9 +250,9 @@ groups:
         - "packages/platform-server/*"
     users:
       - vikerman #primary
+      # needs secondary
       - alxhub
       - vicb
-      - tbosch
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -265,7 +262,7 @@ groups:
         - "packages/platform-webworker/*"
     users:
       - vicb #primary
-      - tbosch #secondary
+      # needs secondary
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -284,7 +281,7 @@ groups:
       files:
         - "packages/benchpress/*"
     users:
-      - tbosch #primary
+      # needs primary
       # needs secondary
       - IgorMinar #fallback
       - mhevery #fallback

.travis.yml

@@ -2,7 +2,7 @@ language: node_js
 sudo: false
 dist: trusty
 node_js:
-  - '6.9.5'
+  - '8.9.1'
 
 addons:
 #  firefox: "38.0"

BUILD.bazel

@@ -1,4 +1,5 @@
 package(default_visibility = ["//visibility:public"])
+
 exports_files(["tsconfig.json"])
 
 # This rule belongs in node_modules/BUILD
@@ -11,17 +12,25 @@ 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",
-        "rxjs",
+        "tsutils",
-        "@types",
+        "@types/jasmine",
+        "@types/node",
+        "@types/source-map",
         "tsickle",
         "hammerjs",
         "protobufjs",
         "bytebuffer",
         "reflect-metadata",
+        "source-map-support",
         "minimist",
     ] for ext in [
         "*.js",

CHANGELOG.md

@@ -1,3 +1,203 @@
+<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)
+
+
+### Bug Fixes
+
+* **animations:** ensure final state() styles are applied within @.disabled animations ([#20267](https://github.com/angular/angular/issues/20267)) ([8b1a6b1](https://github.com/angular/angular/commit/8b1a6b1)), closes [#20266](https://github.com/angular/angular/issues/20266)
+* **compiler:** fix corner cases in shadow CSS ([5d1cd57](https://github.com/angular/angular/commit/5d1cd57))
+* **compiler:** recognize @NgModule with a redundant @Injectable ([#20320](https://github.com/angular/angular/issues/20320)) ([4cc6abb](https://github.com/angular/angular/commit/4cc6abb))
+* **compiler:** show explanatory text in template errors ([#20313](https://github.com/angular/angular/issues/20313)) ([424a323](https://github.com/angular/angular/commit/424a323))
+* **router:** 'merge' queryParamHandling strategy should be able to remove query params ([#19733](https://github.com/angular/angular/issues/19733)) ([b732fb9](https://github.com/angular/angular/commit/b732fb9)), closes [#18463](https://github.com/angular/angular/issues/18463) [#17202](https://github.com/angular/angular/issues/17202)
+
+
+<a name="5.1.0-beta.0"></a>
+# [5.1.0-beta.0](https://github.com/angular/angular/compare/5.0.0-rc.4...5.1.0-beta.0) (2017-11-08)
+
+### Bug Fixes
+
+* **compiler:** don't overwrite missingTranslation's value in JIT ([#19952](https://github.com/angular/angular/issues/19952)) ([799cbb9](https://github.com/angular/angular/commit/799cbb9))
+* **compiler:** report a reasonable error with invalid metadata ([#20062](https://github.com/angular/angular/issues/20062)) ([da22c48](https://github.com/angular/angular/commit/da22c48))
+* **compiler-cli:** don't report emit diagnostics when `--noEmitOnError` is off ([#20063](https://github.com/angular/angular/issues/20063)) ([8639995](https://github.com/angular/angular/commit/8639995))
+* **core:** `__symbol__` should return `__zone_symbol__` without zone.js loaded ([#19541](https://github.com/angular/angular/issues/19541)) ([678d1cf](https://github.com/angular/angular/commit/678d1cf))
+* **core:** should support event.stopImmediatePropagation ([#19222](https://github.com/angular/angular/issues/19222)) ([7083791](https://github.com/angular/angular/commit/7083791))
+* **platform-browser:** support Symbols in custom `jasmineToString()` method ([#19794](https://github.com/angular/angular/issues/19794)) ([5a6efa7](https://github.com/angular/angular/commit/5a6efa7))
+
+### Features
+
+* **compiler:** introduce `TestBed.overrideTemplateUsingTestingModule` ([a460066](https://github.com/angular/angular/commit/a460066)), closes [#19815](https://github.com/angular/angular/issues/19815)
+
+
 <a name="5.0.1"></a>
 ## [5.0.1](https://github.com/angular/angular/compare/5.0.0...5.0.1) (2017-11-08)
 

CONTRIBUTING.md

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

WORKSPACE

@@ -5,20 +5,51 @@ load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 git_repository(
     name = "build_bazel_rules_nodejs",
     remote = "https://github.com/bazelbuild/rules_nodejs.git",
-    # TODO(alexeagle): use the correct tag here.
+    tag = "0.3.1",
-    commit = "2c6243df53fd33fdab283ebdd01582e4eb815db8",
 )
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories")
 
+check_bazel_version("0.8.1")
 node_repositories(package_json = ["//:package.json"])
 
-local_repository(
+git_repository(
     name = "build_bazel_rules_typescript",
-    path = "node_modules/@bazel/typescript",
+    remote = "https://github.com/bazelbuild/rules_typescript.git",
+    tag = "0.6.0",
 )
 
+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/ajs-quick-reference/.angular-cli.1.json

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

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

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

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

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

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>
-    Amount: <input #amountBox (change)="0">
+    <label>Amount: <input #amountBox (change)="0"></label>
 
     <div *ngIf="amountBox.value">
     The sales tax is

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,5 +2,6 @@
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
 
-registerLocaleData(localeFr);
+// the second parameter 'fr' is optional
+registerLocaleData(localeFr, 'fr');
 // #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 localeFrCa from '@angular/common/locales/fr-CA';
+import localeFr from '@angular/common/locales/fr';
-import localeFrCaExtra from '@angular/common/locales/extra/fr-CA';
+import localeFrExtra from '@angular/common/locales/extra/fr';
 
-registerLocaleData(localeFrCa, localeFrCaExtra);
+registerLocaleData(localeFr, 'fr-FR', localeFrExtra);
 // #enddocregion import-locale-extra

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

@@ -93,22 +93,20 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
 
     <h4>-- AfterContent Logs --</h4>
     <p><button (click)="reset()">Reset</button></p>
-    <div *ngFor="let msg of logs">{{msg}}</div>
+    <div *ngFor="let msg of logger.logs">{{msg}}</div>
   </div>
   `,
   styles: ['.parent {background: burlywood}'],
   providers: [LoggerService]
 })
 export class AfterContentParentComponent {
-  logs: string[];
   show = true;
 
-  constructor(private logger: LoggerService) {
+  constructor(public logger: LoggerService) {
-    this.logs = logger.logs;
   }
 
   reset() {
-    this.logs.length = 0;
+    this.logger.clear();
     // 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,22 +95,20 @@ export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
 
     <h4>-- AfterView Logs --</h4>
     <p><button (click)="reset()">Reset</button></p>
-    <div *ngFor="let msg of logs">{{msg}}</div>
+    <div *ngFor="let msg of logger.logs">{{msg}}</div>
   </div>
   `,
   styles: ['.parent {background: burlywood}'],
   providers: [LoggerService]
 })
 export class AfterViewParentComponent {
-  logs: string[];
   show = true;
 
-  constructor(private logger: LoggerService) {
+  constructor(public logger: LoggerService) {
-    this.logs = logger.logs;
   }
 
   reset() {
-    this.logs.length = 0;
+    this.logger.clear();
     // 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.length = 0;
+      this.changeLog = [];
     }
 
     // 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.length = 0;
+    this.changeLog = [];
   }
 }
 

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

@@ -18,7 +18,7 @@ export class LoggerService {
     }
   }
 
-  clear() { this.logs.length = 0; }
+  clear() { this.logs = []; }
 
   // 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.length = 0; }
+  reset() { this.changeLog = []; }
 }
 
 /***************************************/

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 spyLog">{{msg}}</div>
+  <div *ngFor="let msg of logger.logs">{{msg}}</div>
 </div>

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

@@ -15,10 +15,8 @@ import { LoggerService }  from './logger.service';
 export class SpyParentComponent {
   newName = 'Herbie';
   heroes: string[] = ['Windstorm', 'Magneta'];
-  spyLog: string[];
 
-  constructor(private logger: LoggerService) {
+  constructor(public logger: LoggerService) {
-    this.spyLog = logger.logs;
   }
 
   addHero() {
@@ -34,7 +32,7 @@ export class SpyParentComponent {
   }
   reset() {
     this.logger.log('-- reset --');
-    this.heroes.length = 0;
+    this.heroes = [];
     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/highlight.directive.ts",
+    "app/contact/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/highlight.directive.ts",
+    "app/contact/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),
-      subtitle: element.all(by.css('app-title p i')).get(0),
+      welcome: 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.subtitle.getText()).toBe('Welcome, ' + (name ||  'Sherlock Holmes'));
+        expect(commons.welcome.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/highlight.directive.ts",
+    "app/contact/contact-highlight.directive.ts",
 
     "app/crisis/*.ts",
 

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

@@ -1,14 +1,19 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-export const routes: Routes = [
+import { ContactModule } from './contact/contact.module.3';
+
+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: [RouterModule.forRoot(routes)],
+  imports: [
+    ContactModule,
+    RouterModule.forRoot(routes)
+  ],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

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

@@ -2,18 +2,29 @@
 import { NgModule }             from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-export const routes: Routes = [
+import { ContactModule }    from './contact/contact.module';
+
+// #docregion routes
+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({
-  imports: [RouterModule.forRoot(routes)],
+  // #docregion imports
+  imports: [
+    ContactModule,
+    // #docregion forRoot
+    RouterModule.forRoot(routes),
+    // #enddocregion forRoot
+  ],
+  // #enddocregion imports
+  // #docregion exports
   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 = 'Minimal NgModule';
+  title = 'Angular Modules';
 }

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

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

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

@@ -5,11 +5,9 @@ import { Component } from '@angular/core';
   selector: 'app-root',
   // #docregion template
   template: `
-    <app-title [subtitle]="subtitle"></app-title>
+    <app-title></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,10 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   template: `
-    <app-title [subtitle]="subtitle"></app-title>
+    <app-title></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 [subtitle]="subtitle"></app-title>
+    <app-title></app-title>
     <nav>
       <a routerLink="contact" routerLinkActive="active">Contact</a>
       <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
@@ -14,6 +14,4 @@ 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 [subtitle]="subtitle"></app-title>
+    <app-title></app-title>
     <nav>
       <a routerLink="contact" routerLinkActive="active">Contact</a>
       <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
@@ -14,6 +14,4 @@ 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,17 +1,7 @@
-// #docplaster
-// #docregion
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import
+import { AppComponent }  from './app.component.0';
-// #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,14 +1,15 @@
 // #docplaster
 // #docregion
+/* Angular Imports */
 import { NgModule }           from '@angular/core';
 import { BrowserModule }      from '@angular/platform-browser';
 
-import
+/* App Imports */
 // #enddocregion
-       { AppComponent }       from './app.component.1';
+import { AppComponent }       from './app.component.1';
 /*
 // #docregion
-       { AppComponent }       from './app.component';
+import { AppComponent }       from './app.component';
 // #enddocregion
 */
 // #docregion
@@ -21,12 +22,9 @@ import { FormsModule }        from '@angular/forms';
 
 import { AwesomePipe }        from './contact/awesome.pipe';
 import { ContactComponent }   from './contact/contact.component.3';
-
-// #docregion import-contact-directive
 import {
-  HighlightDirective as ContactHighlightDirective
+  ContactHighlightDirective as ContactHighlightDirective
-} from './contact/highlight.directive';
+} from './contact/contact-highlight.directive';
-// #enddocregion import-contact-directive
 
 @NgModule({
 // #docregion imports

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

@@ -1,15 +1,16 @@
 // #docplaster
 // #docregion
+/* Angular Imports */
 import { NgModule }           from '@angular/core';
 import { BrowserModule }      from '@angular/platform-browser';
+import { FormsModule }        from '@angular/forms';
 
-/* App Root */
+/* App Imports */
-import
 // #enddocregion
-       { AppComponent }       from './app.component.1b';
+import { AppComponent }       from './app.component.1b';
 /*
 // #docregion
-       { AppComponent }       from './app.component';
+import { AppComponent }       from './app.component';
 // #enddocregion
 */
 // #docregion
@@ -18,25 +19,17 @@ import { TitleComponent }     from './title.component';
 import { UserService }        from './user.service';
 
 /* Contact Imports */
-import
 // #enddocregion
-       { ContactComponent }   from './contact/contact.component.3';
+import { ContactComponent } from './contact/contact.component.3';
 /*
 // #docregion
-       { ContactComponent }   from './contact/contact.component';
+import { ContactComponent } from './contact/contact.component';
 // #enddocregion
 */
 // #docregion
-import { ContactService }     from './contact/contact.service';
+import { AwesomePipe } from './contact/awesome.pipe';
-import { AwesomePipe }        from './contact/awesome.pipe';
+import { ContactService } from './contact/contact.service';
-
+import { ContactHighlightDirective } from './contact/contact-highlight.directive';
-// #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 Root */
+/* App Imports */
-import
 // #enddocregion
-       { AppComponent }       from './app.component.2';
+import { AppComponent }       from './app.component.2';
 /*
 // #docregion
-       { AppComponent }       from './app.component';
+import { AppComponent }       from './app.component';
 // #enddocregion
 */
 // #docregion
@@ -18,12 +18,11 @@ import { TitleComponent }     from './title.component';
 import { UserService }        from './user.service';
 
 /* Contact Imports */
-import
 // #enddocregion
-       { ContactModule }      from './contact/contact.module.2';
+import { ContactModule }      from './contact/contact.module.2';
 /*
 // #docregion
-       { ContactModule }      from './contact/contact.module';
+import { ContactModule }      from './contact/contact.module';
 // #enddocregion
 */
 // #docregion

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

@@ -1,25 +1,36 @@
 // #docplaster
 // #docregion
+/* Angular Imports */
 import { NgModule }           from '@angular/core';
 import { BrowserModule }      from '@angular/platform-browser';
 
-/* App Root */
+/* App Imports */
+// #enddocregion
 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 Root */
+/* App Imports */
 import { AppComponent }   from './app.component';
 
-/* Feature Modules */
+/* Core Modules */
-import { ContactModule }    from './contact/contact.module';
 import { CoreModule }       from './core/core.module';
 
 /* Routing Module */
@@ -18,7 +18,6 @@ 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-highlight.directive.ts

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

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

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

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

@@ -4,11 +4,13 @@ import { RouterModule }        from '@angular/router';
 import { ContactComponent }    from './contact.component';
 
 // #docregion routing
+const routes = [
+  { path: 'contact', component: ContactComponent}
+];
+
 @NgModule({
-  imports: [RouterModule.forChild([
+  imports: [ RouterModule.forChild(routes) ],
-    { path: 'contact', component: ContactComponent }
+  exports: [ RouterModule ]
-  ])],
-  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().then(contacts => {
+    this.contactService.getContacts().subscribe(contacts => {
       this.msg = '';
       this.contacts = contacts;
       this.contact = contacts[0];

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

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

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

@@ -6,18 +6,32 @@
   <!-- #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" >
+      name="name"  #name="ngModel" >
+    <!-- #enddocregion ngModel -->
+
     <div [hidden]="name.valid" class="alert alert-danger">
       Name is required
     </div>
   </div>
-  <br>
+
-  <button type="submit" class="btn btn-default" [disabled]="!contactForm.form.valid">Save</button>
+  <div class="button-group">
-  <button type="button" class="btn" (click)="next()" [disabled]="!contactForm.form.valid">Next Contact</button>
+    <button type="submit" class="btn btn-default"
-  <button type="button" class="btn" (click)="newContact()">New Contact</button>
+    [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>
 </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().then(contacts => {
+    this.contactService.getContacts().subscribe(contacts => {
       this.msg = '';
       this.contacts = contacts;
       this.contact = contacts[0];

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

@@ -0,0 +1,11 @@
+// #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,25 +5,32 @@ import { CommonModule }       from '@angular/common';
 import { FormsModule }        from '@angular/forms';
 
 import { AwesomePipe }        from './awesome.pipe';
-
-import
 // #enddocregion
-       { ContactComponent }   from './contact.component.3';
+import { ContactComponent }   from './contact.component.3';
 /*
 // #docregion
-       { ContactComponent }   from './contact.component';
+import { 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 ],
+  imports: [
-  declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
+    CommonModule,
-  exports:      [ ContactComponent ],
+    FormsModule
-  providers:    [ ContactService ]
+  ],
+  declarations: [
+    AwesomePipe,
+    ContactComponent,
+    ContactHighlightDirective
+  ],
+  // #docregion exports
+  exports:   [ ContactComponent ],
+  // #enddocregion exports
+  providers: [ ContactService ]
 })
 export class ContactModule { }
 // #enddocregion class

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

@@ -1,21 +1,43 @@
+// #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';
-import { HighlightDirective } from './highlight.directive';
 
+// #enddocregion
 import { ContactRoutingModule }   from './contact-routing.module.3';
+/*
+// #docregion
+import { ContactRoutingModule }   from './contact-routing.module';
+// #enddocregion
+*/
+// #docregion
 
 // #docregion class
 @NgModule({
-  imports:      [ CommonModule, FormsModule, ContactRoutingModule ],
+  imports: [
-  declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
+    CommonModule,
-  providers:    [ ContactService ]
+    FormsModule,
+    ContactRoutingModule
+  ],
+  declarations: [
+    AwesomePipe,
+    ContactComponent,
+    ContactHighlightDirective
+  ],
+  providers: [ ContactService ]
 })
 export class ContactModule { }
 // #enddocregion class

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

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

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

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

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

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

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).then(hero => this.hero = hero);
+    this.heroService.getHero(id).subscribe(hero => this.hero = hero);
   }
 }

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

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

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

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

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

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

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

@@ -1,12 +1,15 @@
+// #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';
-    console.log(
+    // #enddocregion
-      `* AppRoot highlight called for ${el.nativeElement.tagName}`);
+    console.log(`* AppRoot highlight called for ${el.nativeElement.tagName}`);
+    // #docregion
   }
 }
+// #enddocregion

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

@@ -1,9 +1,8 @@
-/* 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 attached element or an InputElement in gray */
+// Highlight the host element or any 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}} {{subtitle}}</h1>
+<h1 highlight>{{title}}</h1>
 <!-- #enddocregion v1 -->
 <!-- #docregion ngIf -->
 <p *ngIf="user">