docs: add changelog for 5.0.1

-rw-r--r--  1 iminar  eng   14880 Nov  4 11:54
dist/0.b19e913fbdd6507d346b.chunk.js
-rw-r--r--  1 iminar  eng    1533 Nov  4 11:54
dist/inline.9183bfe0d60f43b6a772.bundle.js
-rw-r--r--  1 iminar  eng  486476 Nov  4 11:54
dist/main.f5445f99490330207c9c.bundle.js
-rw-r--r--  1 iminar  eng   37070 Nov  4 11:54
dist/polyfills.0dfca732c5a075c110d0.bundle.js

Closes #20184

.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

.pullapprove.yml

@@ -22,6 +22,7 @@
 # petebacondarwin - Pete Bacon Darwin
 # pkozlowski-opensource - Pawel Kozlowski
 # robwormald - Rob Wormald
+# tbosch - Tobias Bosch
 # tinayuangao - Tina Gao
 # vicb - Victor Berchet
 # vikerman - Vikram Subramanian
@@ -99,6 +100,7 @@ groups:
     users:
       - alexeagle
       - mhevery
+      - tbosch
       - vicb
       - IgorMinar #fallback
 
@@ -107,7 +109,8 @@ groups:
       files:
         - "packages/core/*"
     users:
-      - chuckjaz #primary
+      - tbosch #primary
+      - chuckjaz
       - mhevery
       - vicb
       - IgorMinar #fallback
@@ -129,7 +132,7 @@ groups:
         - "packages/compiler/src/i18n/*"
     users:
       - vicb #primary
-      - chuckjaz
+      - tbosch
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -138,8 +141,9 @@ groups:
       files:
         - "packages/compiler/*"
     users:
-      - chuckjaz #primary
+      - tbosch #primary
       - vicb
+      - chuckjaz
       - mhevery
       - IgorMinar #fallback
 
@@ -159,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
 
@@ -207,7 +212,7 @@ groups:
         - "packages/language-service/*"
     users:
       - chuckjaz #primary
-      # needs secondary
+      - tbosch #secondary
       - vicb
       - IgorMinar #fallback
       - mhevery #fallback
@@ -237,8 +242,8 @@ groups:
       files:
         - "packages/platform-browser/*"
     users:
-      - vicb #primary
+      - tbosch #primary
-      # needs secondary
+      - vicb #secondary
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -248,9 +253,9 @@ groups:
         - "packages/platform-server/*"
     users:
       - vikerman #primary
-      # needs secondary
       - alxhub
       - vicb
+      - tbosch
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -260,7 +265,7 @@ groups:
         - "packages/platform-webworker/*"
     users:
       - vicb #primary
-      # needs secondary
+      - tbosch #secondary
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -279,7 +284,7 @@ groups:
       files:
         - "packages/benchpress/*"
     users:
-      # needs primary
+      - tbosch #primary
       # needs secondary
       - IgorMinar #fallback
       - mhevery #fallback

CHANGELOG.md

@@ -1,172 +1,3 @@
-<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,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.
+* Make your changes in a new git branch:
-1. Make your changes in a new git branch:
 
      ```shell
      git checkout -b my-fix-branch master
      ```
 
-1. Create your patch, **including appropriate test cases**.
+* Create your patch, **including appropriate test cases**.
-1. Follow our [Coding Rules](#rules).
+* Follow our [Coding Rules](#rules).
-1. Run the full Angular test suite, as described in the [developer documentation][dev-doc],
+* 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,7 +5,8 @@ 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",
-    commit = "0.2.1",
+    # TODO(alexeagle): use the correct tag here.
+    commit = "2c6243df53fd33fdab283ebdd01582e4eb815db8",
 )
 
 load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")

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

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

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

@@ -4,7 +4,7 @@
   "files":[
     "!**/*.d.ts",
     "!**/*.js",
-    "!app/*.[0,1,2,3].*"
+    "!app/*.[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 appHighlight>Highlight me!</p>
+<p appHightlight>Highlight me!</p>
 <!-- #enddocregion applied,  -->
 
 <!-- #docregion color-1 -->
-<p appHighlight highlightColor="yellow">Highlighted in yellow</p>
+<p appHightlight highlightColor="yellow">Highlighted in yellow</p>
-<p appHighlight [highlightColor]="'orange'">Highlighted in orange</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/attribute-directives/src/app/highlight.directive.0.ts

@@ -1,9 +0,0 @@
-// #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,10 +1,8 @@
 /* tslint:disable:no-unused-variable */
 // #docregion
-import { Directive, ElementRef } from '@angular/core';
+import { Directive, ElementRef, Input } from '@angular/core';
 
-@Directive({
+@Directive({ selector: '[appHighlight]' })
-  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,10 +1,7 @@
 /* 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]'
@@ -38,7 +35,7 @@ export class HighlightDirective {
   // #enddocregion color
 
   // #docregion color-2
-  @Input() appHighlight: string;
+  @Input() myHighlight: string;
   // #enddocregion color-2
 }
 

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

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

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

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

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

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

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

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

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

@@ -4,6 +4,7 @@
 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
 
@@ -22,7 +23,8 @@ 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,13 +1,15 @@
-import { AppConfig } from './app-config';
-export { AppConfig } from './app-config';
-
 // #docregion token
 import { InjectionToken } from '@angular/core';
 
-export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');
+export let 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,24 +1,32 @@
-// #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 {
-import { ProvidersModule } from './providers.module';
+  ProvidersComponent,
+  Provider1Component,
+  Provider3Component,
+  Provider4Component,
+  Provider5Component,
+  Provider6aComponent,
+  Provider6bComponent,
+  Provider7Component,
+  Provider8Component,
+  Provider9Component,
+  Provider10Component,
+} from './providers.component';
 
 // #docregion ngmodule
 @NgModule({
   imports: [
-    BrowserModule,
+    BrowserModule
-    ProvidersModule
   ],
   declarations: [
     AppComponent,
@@ -27,19 +35,26 @@ import { ProvidersModule } from './providers.module';
     // #enddocregion ngmodule
     HeroListComponent,
     InjectorComponent,
-    TestComponent
+    TestComponent,
+    ProvidersComponent,
+    Provider1Component,
+    Provider3Component,
+    Provider4Component,
+    Provider5Component,
+    Provider6aComponent,
+    Provider6bComponent,
+    Provider7Component,
+    Provider8Component,
+    Provider9Component,
+    Provider10Component,
     // #docregion ngmodule
   ],
-  // #docregion providers, providers-2
+  // #docregion ngmodule-providers
   providers: [
-    // #enddocregion providers
-    Logger,
-    // #docregion providers
     UserService,
     { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
   ],
-  // #enddocregion providers, providers-2
+  // #enddocregion ngmodule-providers
-  exports: [ CarComponent, HeroesComponent ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }

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

@@ -1,25 +0,0 @@
-
-/// 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

@@ -1,35 +0,0 @@
-
-/// 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,17 +1,16 @@
 // #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,6 +1,7 @@
 // #docplaster
 // #docregion
 import { Component }   from '@angular/core';
+
 import { Hero }        from './hero';
 // #enddocregion
 import { HeroService } from './hero.service.1';
@@ -14,9 +15,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,16 +1,17 @@
 /* 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

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

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

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

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

@@ -1,33 +0,0 @@
-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,11 +2,10 @@
 // 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 { Hero  } from './heroes/hero';
+import { HeroService }         from './heroes/hero.service';
-import { HeroService } from './heroes/hero.service';
+import { HeroListComponent }   from './heroes/hero-list.component';
-import { HeroListComponent } from './heroes/hero-list.component';
 
 @Component({
   selector: 'app-tests',
@@ -23,13 +22,12 @@ export class TestComponent {
 function runTests() {
 
   // #docregion spec
-  const expectedHeroes = [{name: 'A'}, {name: 'B'}]
+  let expectedHeroes = [{name: 'A'}, {name: 'B'}]
-  const mockService = <HeroService> {getHeroes: () => expectedHeroes }
+  let mockService = <HeroService> {getHeroes: () => expectedHeroes }
 
   it('should have heroes when HeroListComponent created', () => {
-    // Pass the mock to the constructor as the Angular injector would
+    let hlc = new HeroListComponent(mockService);
-    const component = new HeroListComponent(mockService);
+    expect(hlc.heroes.length).toEqual(expectedHeroes.length);
-    expect(component.heroes.length).toEqual(expectedHeroes.length);
   });
   // #enddocregion spec
 

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

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

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

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
+  template: '<app-hero-form></app-hero-form>'
-  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/hero-form.component';
+import { HeroFormComponent } from './hero-form.component';
 
 @NgModule({
   imports: [
@@ -15,7 +15,6 @@ import { HeroFormComponent } from './hero-form/hero-form.component';
     AppComponent,
     HeroFormComponent
   ],
-  providers: [],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }

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

@@ -2,12 +2,11 @@
 // #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

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

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';
+export const routes: Routes = [
-
-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: [
+  imports: [RouterModule.forRoot(routes)],
-    ContactModule,
-    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';
+export const routes: Routes = [
-
-// #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({
-  // #docregion imports
+  imports: [RouterModule.forRoot(routes)],
-  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 = '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
+  HighlightDirective as ContactHighlightDirective
-} from './contact/contact-highlight.directive';
+} 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 { ContactService } from './contact/contact.service';
+import { AwesomePipe }        from './contact/awesome.pipe';
-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 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 */
+/* App Root */
-// #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 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) ],
+  imports: [RouterModule.forChild([
-  exports: [ RouterModule ]
+    { 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) ],
+  imports: [RouterModule.forChild([
-  exports: [ RouterModule ]
+    { 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" >
+        name="name"  #name="ngModel" >
-    <!-- #enddocregion ngModel -->
-
     <div [hidden]="name.valid" class="alert alert-danger">
       Name is required
     </div>
   </div>
-
+  <br>
-  <div class="button-group">
+  <button type="submit" class="btn btn-default" [disabled]="!contactForm.form.valid">Save</button>
-    <button type="submit" class="btn btn-default"
+  <button type="button" class="btn" (click)="next()" [disabled]="!contactForm.form.valid">Next Contact</button>
-    [disabled]="!contactForm.form.valid">
+  <button type="button" class="btn" (click)="newContact()">New Contact</button>
-    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().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: [
+  imports:      [ CommonModule, FormsModule ],
-    CommonModule,
+  declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
-    FormsModule
+  exports:      [ ContactComponent ],
-  ],
+  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,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: [
+  imports:      [ CommonModule, FormsModule, ContactRoutingModule ],
-    CommonModule,
+  declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
-    FormsModule,
+  providers:    [ ContactService ]
-    ContactRoutingModule
-  ],
-  declarations: [
-    AwesomePipe,
-    ContactComponent,
-    ContactHighlightDirective
-  ],
-  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: [
+  imports:      [ SharedModule, ContactRoutingModule ],
-    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 { Injectable } 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) { }
@@ -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 {
+export class ContactService {
-// #enddocregion
-  constructor() { console.log('ContactService instance created.'); }
-  ngOnDestroy() { console.log('ContactService instance destroyed.'); }
 
-// #docregion
+  getContacts() {
-  getContacts(): Observable<Contact[]> {
+    return new Promise<Contact[]>(resolve => {
-    return of(CONTACTS).pipe(delay(FETCH_LATENCY));
+      setTimeout(() => { resolve(CONTACTS); }, FETCH_LATENCY);
+    });
   }
 
-  getContact(id: number | string): Observable<Contact> {
+  getContact(id: number | string) {
-    return of(CONTACTS.find(contact => contact.id === +id))
+    return this.getContacts()
-      .pipe(delay(FETCH_LATENCY));
+      .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(
-    console.log(`* Contact highlight called for ${el.nativeElement.tagName}`);
+      `* Contact highlight called for ${el.nativeElement.tagName}`);
-    // #docregion
   }
 }
-// #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 { Component, OnInit } 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 crises | async'>
+    <div *ngFor='let crisis of crisises | async'>
       <a routerLink="{{'../' + crisis.id}}">{{crisis.id}} - {{crisis.name}}</a>
     </div>
   `
 })
-export class CrisisListComponent {
+export class CrisisListComponent implements OnInit {
-  crises: Observable<Crisis[]>;
+  crisises: Promise<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,8 +1,4 @@
-import { Injectable, OnDestroy } from '@angular/core';
+import { Injectable } 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) { }
@@ -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 {
+export class CrisisService {
-  constructor() { console.log('CrisisService instance created.'); }
-  ngOnDestroy() { console.log('CrisisService instance destroyed.'); }
 
-  getCrises(): Observable<Crisis[]> {
+  getCrises() {
-    return of(CRISES).pipe(delay(FETCH_LATENCY));
+    return new Promise<Crisis[]>(resolve => {
+      setTimeout(() => { resolve(CRISES); }, FETCH_LATENCY);
+    });
   }
 
-  getCrisis(id: number | string): Observable<Crisis> {
+  getCrisis(id: number | string) {
-    return of(CRISES.find(crisis => crisis.id === +id))
+    return this.getCrises()
-      .pipe(delay(FETCH_LATENCY));
+      .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 { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 
 import { Hero,
          HeroService } from './hero.service';
@@ -12,9 +11,11 @@ import { Hero,
     </div>
   `
 })
-export class HeroListComponent {
+export class HeroListComponent implements OnInit {
-  heroes: Observable<Hero[]>;
+  heroes: Promise<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,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 { Injectable } 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) { }
@@ -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.'); }
+  getHeroes() {
-  ngOnDestroy() { console.log('HeroService instance destroyed.'); }
+    return new Promise<Hero[]>(resolve => {
-
+      setTimeout(() => { resolve(HEROES); }, FETCH_LATENCY);
-  getHeroes(): Observable<Hero[]> {
+    });
-    return of(HEROES).pipe(delay(FETCH_LATENCY));
   }
 
-  getHero(id: number | string): Observable<Hero> {
+  getHero(id: number | string) {
-    return of(HEROES.find(hero => hero.id === +id))
+    return this.getHeroes()
-      .pipe(delay(FETCH_LATENCY));
+      .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(
-    console.log(`* AppRoot highlight called for ${el.nativeElement.tagName}`);
+      `* AppRoot highlight called for ${el.nativeElement.tagName}`);
-    // #docregion
   }
 }
-// #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/reactive-forms/debug.log

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

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

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

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

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

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

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

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

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

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

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