docs: add changelog for 5.0.0-beta.3

This commit adds support for setting default `updateOn` values
in `FormGroups` and `FormArrays`. If you set `updateOn` to
’blur’` at the group level, all child controls will default to `’blur’`,
unless the child has explicitly specified a different `updateOn` value.

```
const c = new FormGroup({
   one: new FormControl()
}, {updateOn: blur});
```

 It's worth noting that parent groups will always update their value and
validity immediately upon value/validity updates from children. In other
words, if a group is set to update on blur and its children are individually
set to update on change, the group will still update on change with its
children; its default value will simply not be used.

.circleci/config.yml

@@ -42,7 +42,7 @@ jobs:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
 
       - run: bazel run @build_bazel_rules_typescript_node//:bin/npm install
-      - run: bazel build ...
+      - run: bazel build packages/...
       - save_cache:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
           paths:

.pullapprove.yml

@@ -69,8 +69,8 @@ groups:
           - "*.lock"
           - "tools/*"
         exclude:
-          - "tools/@angular/tsc-wrapped/*"
           - "tools/public_api_guard/*"
+          - "tools/ngc-wrapped/*"
           - "aio/*"
     users:
       - IgorMinar #primary
@@ -136,8 +136,9 @@ groups:
   compiler-cli:
     conditions:
       files:
-        - "tools/@angular/tsc-wrapped/*"
+        - "packages/tsc-wrapped/*"
         - "packages/compiler-cli/*"
+        - "tools/ngc-wrapped/*"
     users:
       - alexeagle
       - chuckjaz

CHANGELOG.md

@@ -1,110 +1,126 @@
-<a name="4.4.0"></a>
-# [4.4.0](https://github.com/angular/angular/compare/4.4.0-RC.0...4.4.0) (2017-09-15)
+<a name="5.0.0-beta.3"></a>
+# [5.0.0-beta.3](https://github.com/angular/angular/compare/5.0.0-beta.2...5.0.0-beta.3) (2017-08-09)
 
 
 ### Bug Fixes
 
-* **tsc-wrapped:** deduplicate metadata for re-exported modules ([48ae1a6](https://github.com/angular/angular/commit/48ae1a6))
-* **tsc-wrapped:** fix metadata symbol reference ([f6a7183](https://github.com/angular/angular/commit/f6a7183))
-* **upgrade:** remove code setting id attribute. ([#19182](https://github.com/angular/angular/issues/19182)) ([b20c5d2](https://github.com/angular/angular/commit/b20c5d2)), closes [#18446](https://github.com/angular/angular/issues/18446)
-
-
-
-<a name="4.4.0-RC.0"></a>
-# [4.4.0-RC.0](https://github.com/angular/angular/compare/4.3.6...4.4.0-RC.0) (2017-09-02)
-
-
-### Bug Fixes
-
-* **animations:** do not leak DOM nodes/styling for host triggered animations ([#18853](https://github.com/angular/angular/issues/18853)) ([1cc3fe2](https://github.com/angular/angular/commit/1cc3fe2)), closes [#18606](https://github.com/angular/angular/issues/18606)
-* **common:** fix improper packaging for [@angular](https://github.com/angular)/common/http ([#18613](https://github.com/angular/angular/issues/18613)) ([a203a95](https://github.com/angular/angular/commit/a203a95))
-* **common:** fix XSSI prefix stripping by using JSON.parse always ([#18466](https://github.com/angular/angular/issues/18466)) ([8821723](https://github.com/angular/angular/commit/8821723)), closes [#18396](https://github.com/angular/angular/issues/18396) [#18453](https://github.com/angular/angular/issues/18453)
-* **compiler:** normalize the locale name ([#18963](https://github.com/angular/angular/issues/18963)) ([497e017](https://github.com/angular/angular/commit/497e017))
-* **core:** complete EventEmitter in QueryList on component destroy ([#18902](https://github.com/angular/angular/issues/18902)) ([7d137d7](https://github.com/angular/angular/commit/7d137d7)), closes [#18741](https://github.com/angular/angular/issues/18741)
-
+* **animations:** revert container/queried animations accordingly during cancel ([#18516](https://github.com/angular/angular/issues/18516)) ([c0c03dc](https://github.com/angular/angular/commit/c0c03dc))
+* **animations:** support persisting dynamic styles within animation states ([#18468](https://github.com/angular/angular/issues/18468)) ([05472cb](https://github.com/angular/angular/commit/05472cb)), closes [#18423](https://github.com/angular/angular/issues/18423) [#17505](https://github.com/angular/angular/issues/17505)
+* **benchpress:** compile cleanly with TS 2.4 ([#18455](https://github.com/angular/angular/issues/18455)) ([e25b3dd](https://github.com/angular/angular/commit/e25b3dd))
+* **common:** don't recreate view when context shape doesn't change ([#18277](https://github.com/angular/angular/issues/18277)) ([685cc26](https://github.com/angular/angular/commit/685cc26)), closes [#13407](https://github.com/angular/angular/issues/13407)
+* **compiler:** cleanly compile with TypeScript 2.4 ([#18456](https://github.com/angular/angular/issues/18456)) ([7c47b62](https://github.com/angular/angular/commit/7c47b62))
+* **compiler:** ignore [@import](https://github.com/import) in multi-line css ([#18452](https://github.com/angular/angular/issues/18452)) ([1dca575](https://github.com/angular/angular/commit/1dca575)), closes [#18038](https://github.com/angular/angular/issues/18038)
+* **compiler-cli:** disable buggy expression lowering ([#18513](https://github.com/angular/angular/issues/18513)) ([ca695e0](https://github.com/angular/angular/commit/ca695e0))
+* **compiler-cli:** fix and re-enable expression lowering ([#18570](https://github.com/angular/angular/issues/18570)) ([6f2038c](https://github.com/angular/angular/commit/6f2038c)), closes [#18388](https://github.com/angular/angular/issues/18388)
+* **compiler-cli:** modified ngc to throw all errors, not just syntax ([#18388](https://github.com/angular/angular/issues/18388)) ([5651e4a](https://github.com/angular/angular/commit/5651e4a))
+* **compiler-cli:** remove minimist dependency of compiler-cli/index ([#18532](https://github.com/angular/angular/issues/18532)) ([5b7432b](https://github.com/angular/angular/commit/5b7432b))
+* **core:** fix platform-browser-dynamic ([#18576](https://github.com/angular/angular/issues/18576)) ([f0a5501](https://github.com/angular/angular/commit/f0a5501))
+* **core:** forbid destroyed views to be inserted or moved in VC ([#18568](https://github.com/angular/angular/issues/18568)) ([e54bd59](https://github.com/angular/angular/commit/e54bd59)), closes [#17780](https://github.com/angular/angular/issues/17780)
 
 ### Features
 
-* **compiler:** allow multiple exportAs names ([#18723](https://github.com/angular/angular/issues/18723)) ([7ec28fe](https://github.com/angular/angular/commit/7ec28fe))
-* **core:** add option to remove blank text nodes from compiled templates ([#18823](https://github.com/angular/angular/issues/18823)) ([b8b551c](https://github.com/angular/angular/commit/b8b551c))
-
-
-
-<a name="4.3.6"></a>
-## [4.3.6](https://github.com/angular/angular/compare/4.3.5...4.3.6) (2017-08-23)
-
-
-### Bug Fixes
-
-* **animations:** ensure animations are disabled on the element containing the @.disabled flag ([#18714](https://github.com/angular/angular/issues/18714)) ([5d68c83](https://github.com/angular/angular/commit/5d68c83))
-* **animations:** make sure @.disabled respects disabled parent/sub animation sequences ([#18715](https://github.com/angular/angular/issues/18715)) ([c3dcbf9](https://github.com/angular/angular/commit/c3dcbf9))
-* **animations:** make sure animation cancellations respect AUTO style values ([#18787](https://github.com/angular/angular/issues/18787)) ([9a754f9](https://github.com/angular/angular/commit/9a754f9)), closes [#17450](https://github.com/angular/angular/issues/17450)
-* **animations:** resolve error when using AnimationBuilder with platform-server ([#18642](https://github.com/angular/angular/issues/18642)) ([f9b2905](https://github.com/angular/angular/commit/f9b2905)), closes [#18635](https://github.com/angular/angular/issues/18635)
-* **animations:** restore auto-style support for removed DOM nodes ([#18787](https://github.com/angular/angular/issues/18787)) ([e1f45a3](https://github.com/angular/angular/commit/e1f45a3))
-* **core:** correct order in ContentChildren query result ([#18326](https://github.com/angular/angular/issues/18326)) ([fec3b1a](https://github.com/angular/angular/commit/fec3b1a)), closes [#16568](https://github.com/angular/angular/issues/16568)
-* **core:** make sure onStable runs in the right zone ([#18706](https://github.com/angular/angular/issues/18706)) ([ee5591d](https://github.com/angular/angular/commit/ee5591d))
-
-
-### Features
-
-* **animations:** allow @.disabled property to work without an expression ([#18713](https://github.com/angular/angular/issues/18713)) ([ac58914](https://github.com/angular/angular/commit/ac58914))
-* **common:** add an empty DeprecatedI18NPipesModule module ([793f31b](https://github.com/angular/angular/commit/793f31b))
-
-
-
-<a name="5.0.0-beta.4"></a>
-# [5.0.0-beta.4](https://github.com/angular/angular/compare/5.0.0-beta.3...5.0.0-beta.4) (2017-08-16)
-
-
-### Bug Fixes
-
-* **compiler:** Don't strip CSS source maps ([64b4be9](https://github.com/angular/angular/commit/64b4be9))
-* **forms:** re-assigning options should not clear select ([32ff21c](https://github.com/angular/angular/commit/32ff21c)), closes [#18330](https://github.com/angular/angular/issues/18330)
-* **language-service:** remove tsickle dependency ([bc22ff1](https://github.com/angular/angular/commit/bc22ff1))
-
-
-### Features
-
-* **common:** mark NgTemplateOutlet API as stable ([0a73e8d](https://github.com/angular/angular/commit/0a73e8d))
-* **forms:** add status to `AbstractControlDirective` ([233ef93](https://github.com/angular/angular/commit/233ef93))
-* **forms:** add updateOn support to ngModelOptions ([1cfa79c](https://github.com/angular/angular/commit/1cfa79c))
-
+* **core:** Create StaticInjector which does not depend on Reflect polyfill. ([d9d00bd](https://github.com/angular/angular/commit/d9d00bd))
+* **forms:** add default updateOn values for groups and arrays ([#18536](https://github.com/angular/angular/issues/18536)) ([ff5c58b](https://github.com/angular/angular/commit/ff5c58b))
+* **forms:** add updateOn blur option to FormControls ([#18408](https://github.com/angular/angular/issues/18408)) ([333a708](https://github.com/angular/angular/commit/333a708)), closes [#7113](https://github.com/angular/angular/issues/7113)
+* **forms:** add updateOn submit option to FormControls ([#18514](https://github.com/angular/angular/issues/18514)) ([f69561b](https://github.com/angular/angular/commit/f69561b))
 
 ### Performance Improvements
 
-* **core:** add option to remove blank text nodes from compiled templates ([d2c0d98](https://github.com/angular/angular/commit/d2c0d98))
-* **core:** Remove decorator DSL which depends on Reflect ([cac130e](https://github.com/angular/angular/commit/cac130e))
+* switch angular to use StaticInjector instead of ReflectiveInjector ([fcadbf4](https://github.com/angular/angular/commit/fcadbf4)), closes [#18496](https://github.com/angular/angular/issues/18496)
 
 
+### BREAKING CHANGES
 
-<a name="4.3.5"></a>
-## [4.3.5](https://github.com/angular/angular/compare/4.3.4...4.3.5) (2017-08-16)
+* `platformXXXX()` no longer accepts providers which depend on reflection.
+Specifically the method signature when from `Provider[]` to
+`StaticProvider[]`.
+
+Example:
+Before:
+```
+[
+  MyClass,
+  {provide: ClassA, useClass: SubClassA}
+]
+
+```
+
+After:
+```
+[
+  {provide: MyClass, deps: [Dep1,...]},
+  {provide: ClassA, useClass: SubClassA, deps: [Dep1,...]}
+]
+```
+
+NOTE: This only applies to platform creation and providers for the JIT
+compiler. It does not apply to `@Component` or `@NgModule` provides
+declarations.
+
+Benchpress note: Previously Benchpress also supported reflective
+provides, which now require static providers.
+
+DEPRECATION:
+
+- `ReflectiveInjector` is now deprecated as it will be remove. Use
+  `Injector.create` as a replacement.
+
+<a name="5.0.0-beta.2"></a>
+# [5.0.0-beta.2](https://github.com/angular/angular/compare/5.0.0-beta.1...5.0.0-beta.2) (2017-08-02)
 
 
 ### Bug Fixes
 
-* **core:** forbid destroyed views to be inserted or moved in VC ([972538b](https://github.com/angular/angular/commit/972538b)), closes [#18615](https://github.com/angular/angular/issues/18615)
-* **forms:** re-assigning options should not clear select ([a1624f2](https://github.com/angular/angular/commit/a1624f2)), closes [#18330](https://github.com/angular/angular/issues/18330)
+* **compiler:** do not consider arguments when determining recursion ([e64b54b](https://github.com/angular/angular/commit/e64b54b))
+* **compiler:** fix for element needing implicit parent placed in top-level ng-container ([381471d](https://github.com/angular/angular/commit/381471d)), closes [#18314](https://github.com/angular/angular/issues/18314)
 
 
-<a name="4.3.4"></a>
-## [4.3.4](https://github.com/angular/angular/compare/4.3.3...4.3.4) (2017-08-10)
+### Features
+
+* **forms:** add options arg to abstract controls ([ebef5e6](https://github.com/angular/angular/commit/ebef5e6))
+* **router:** add events tracking activation of individual routes ([49cd851](https://github.com/angular/angular/commit/49cd851))
 
-### Bug Fixes
 
-* **animations:** revert container/queried animations accordingly during cancel ([#18516](https://github.com/angular/angular/issues/18516)) ([5a165eb](https://github.com/angular/angular/commit/5a165eb))
-* **animations:** support persisting dynamic styles within animation states ([#18468](https://github.com/angular/angular/issues/18468)) ([e0660b1](https://github.com/angular/angular/commit/e0660b1)), closes [#18423](https://github.com/angular/angular/issues/18423) [#17505](https://github.com/angular/angular/issues/17505)
-* **benchpress:** compile cleanly with TS 2.4 ([#18455](https://github.com/angular/angular/issues/18455)) ([5afc7ab](https://github.com/angular/angular/commit/5afc7ab))
-* **compiler:** cleanly compile with TypeScript 2.4 ([#18456](https://github.com/angular/angular/issues/18456)) ([5e4054b](https://github.com/angular/angular/commit/5e4054b))
-* **compiler:** ignore [@import](https://github.com/import) in multi-line css ([#18452](https://github.com/angular/angular/issues/18452)) ([e7e7622](https://github.com/angular/angular/commit/e7e7622)), closes [#18038](https://github.com/angular/angular/issues/18038)
 
 <a name="4.3.3"></a>
 ## [4.3.3](https://github.com/angular/angular/compare/4.3.2...4.3.3) (2017-08-02)
 
+
 ### Bug Fixes
 
 * **compiler:** fix for element needing implicit parent placed in top-level ng-container ([f5cbc2e](https://github.com/angular/angular/commit/f5cbc2e)), closes [#18314](https://github.com/angular/angular/issues/18314)
 
+
+
+<a name="5.0.0-beta.1"></a>
+# [5.0.0-beta.1](https://github.com/angular/angular/compare/5.0.0-beta.0...5.0.0-beta.1) (2017-07-27)
+
+
+### Bug Fixes
+
+* **animations:** export BrowserModule as apart of BrowserAnimationsModule ([#18263](https://github.com/angular/angular/issues/18263)) ([fd0cc01](https://github.com/angular/angular/commit/fd0cc01))
+* **compiler:** add equiv & disp attributes to Xliff2 ICU placeholders ([#18283](https://github.com/angular/angular/issues/18283)) ([38ec05f](https://github.com/angular/angular/commit/38ec05f)), closes [#17344](https://github.com/angular/angular/issues/17344)
+* **compiler:** allow numbers for ICU message cases in lexer ([#18095](https://github.com/angular/angular/issues/18095)) ([a3a5429](https://github.com/angular/angular/commit/a3a5429)), closes [#17799](https://github.com/angular/angular/issues/17799)
+* **core:** invoke error handler outside of the Angular Zone ([#18269](https://github.com/angular/angular/issues/18269)) ([7ae7573](https://github.com/angular/angular/commit/7ae7573)), closes [#17073](https://github.com/angular/angular/issues/17073) [#7774](https://github.com/angular/angular/issues/7774)
+* **platform-server:** don't clobber parse5 properties when setting ([#18237](https://github.com/angular/angular/issues/18237)) ([a094769](https://github.com/angular/angular/commit/a094769)), closes [#17050](https://github.com/angular/angular/issues/17050)
+* **router:** child CanActivate guard should wait for parent to complete ([#18110](https://github.com/angular/angular/issues/18110)) ([086f4aa](https://github.com/angular/angular/commit/086f4aa)), closes [#15670](https://github.com/angular/angular/issues/15670)
+* **router:** should throw when lazy loaded module doesn't define any routes ([#15001](https://github.com/angular/angular/issues/15001)) ([82923a3](https://github.com/angular/angular/commit/82923a3)), closes [#14596](https://github.com/angular/angular/issues/14596)
+* **upgrade:** ensure downgraded components are created in the Angular zone ([#18209](https://github.com/angular/angular/issues/18209)) ([43c33d5](https://github.com/angular/angular/commit/43c33d5))
+* **upgrade:** throw error if trying to get injector before setting ([#18209](https://github.com/angular/angular/issues/18209)) ([d31dc7b](https://github.com/angular/angular/commit/d31dc7b))
+
+
+### Features
+
+* **compiler:** add representation of placeholders to xliff & xmb ([b3085e9](https://github.com/angular/angular/commit/b3085e9)), closes [#17345](https://github.com/angular/angular/issues/17345)
+
+
+### Performance Improvements
+
+* latest tsickle to tree shake: abstract class methods & interfaces ([#18236](https://github.com/angular/angular/issues/18236)) ([b7a6f52](https://github.com/angular/angular/commit/b7a6f52))
+* **core:** use native addEventListener for faster rendering. ([#18107](https://github.com/angular/angular/issues/18107)) ([6279e50](https://github.com/angular/angular/commit/6279e50))
+
+
+
 <a name="4.3.2"></a>
 ## [4.3.2](https://github.com/angular/angular/compare/4.3.1...4.3.2) (2017-07-26)
 
@@ -122,6 +138,35 @@
 
 
 
+<a name="5.0.0-beta.0"></a>
+# [5.0.0-beta.0](https://github.com/angular/angular/compare/4.3.0...5.0.0-beta.0) (2017-07-19)
+
+
+### Bug Fixes
+
+* **animations:** always camelcase style property names that contain auto styles ([d22f8f5](https://github.com/angular/angular/commit/d22f8f5)), closes [#17938](https://github.com/angular/angular/issues/17938)
+* **animations:** capture cancelled animation styles within grouped animations ([23146c9](https://github.com/angular/angular/commit/23146c9)), closes [#17170](https://github.com/angular/angular/issues/17170)
+* **animations:** do not crash animations if a nested component fires CD during CD ([5db6f38](https://github.com/angular/angular/commit/5db6f38)), closes [#18193](https://github.com/angular/angular/issues/18193)
+* **animations:** make sure @.disabled works in non-animation components ([5344be5](https://github.com/angular/angular/commit/5344be5))
+* **common:** send flushed body as error instead of null ([5c62e30](https://github.com/angular/angular/commit/5c62e30)), closes [#18181](https://github.com/angular/angular/issues/18181)
+* **compiler:** ensure jit external id arguments names are unique ([95635c1](https://github.com/angular/angular/commit/95635c1))
+* **compiler-cli:** don't generate empty <target/> when extracting xliff ([65c9e13](https://github.com/angular/angular/commit/65c9e13)), closes [#15754](https://github.com/angular/angular/issues/15754)
+* **platform-server:** provide XhrFactory for HttpClient ([8076482](https://github.com/angular/angular/commit/8076482))
+* **router:** canDeactivate guards should run from bottom to top ([e20cfe1](https://github.com/angular/angular/commit/e20cfe1)), closes [#15657](https://github.com/angular/angular/issues/15657)
+* **router:** should navigate to the same url when config changes ([eb6fb5f](https://github.com/angular/angular/commit/eb6fb5f)), closes [#15535](https://github.com/angular/angular/issues/15535)
+* **router:** should run resolvers for the same route concurrently ([ad3029e](https://github.com/angular/angular/commit/ad3029e)), closes [#14279](https://github.com/angular/angular/issues/14279)
+* **router:** terminal route in custom matcher ([b399cb2](https://github.com/angular/angular/commit/b399cb2))
+* **upgrade:** allow accessing AngularJS injector from downgraded module ([a5205c6](https://github.com/angular/angular/commit/a5205c6))
+
+
+### Features
+
+* **animations:** support :increment and :decrement transition aliases ([6f45519](https://github.com/angular/angular/commit/6f45519))
+* **upgrade:** propagate touched state of NgModelController ([59c23c7](https://github.com/angular/angular/commit/59c23c7))
+* **upgrade:** support lazy-loading Angular module into AngularJS app ([30e76fc](https://github.com/angular/angular/commit/30e76fc))
+
+
+
 <a name="4.3.1"></a>
 ## [4.3.1](https://github.com/angular/angular/compare/4.3.0...4.3.1) (2017-07-19)
 
@@ -1193,6 +1238,7 @@ templates is unaffected. We expect no or little impact on apps from this change,
 
 ### Features
 
+* **aio:** add initial angular-cli scaffold ([#14118](https://github.com/angular/angular/issues/14118)) ([e130bc1](https://github.com/angular/angular/commit/e130bc1))
 * **common:** rename underlying `NgFor` class and add a type parameter ([#14104](https://github.com/angular/angular/issues/14104)) ([86b2b25](https://github.com/angular/angular/commit/86b2b25))
 * **compiler:** allow missing translations ([#14113](https://github.com/angular/angular/issues/14113)) ([8775ab9](https://github.com/angular/angular/commit/8775ab9)), closes [#13861](https://github.com/angular/angular/issues/13861)
 * **compiler:** do not parse xtb messages not needed by angular ([#14111](https://github.com/angular/angular/issues/14111)) ([f7fba74](https://github.com/angular/angular/commit/f7fba74)), closes [#14046](https://github.com/angular/angular/issues/14046)

aio/README.md

@@ -26,7 +26,7 @@ Here are the most important tasks you might need to use:
 * `yarn docs-lint` - check that the doc gen code follows our style rules.
 * `yarn docs-test` - run the unit tests for the doc generation code.
 
-* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally. Add the option `-- --local` to use your local version of Angular contained in the "dist" folder.
+* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally.
 * `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
 * `yarn generate-plunkers` - generate the plunker files that are used by the `live-example` tags in the docs.
 * `yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs.
@@ -34,7 +34,6 @@ Here are the most important tasks you might need to use:
 * `yarn example-e2e` - run all e2e tests for examples
   - `yarn example-e2e -- --setup` - force webdriver update & other setup, then run tests
   - `yarn example-e2e -- --filter=foo` - limit e2e tests to those containing the word "foo"
-  - `yarn example-e2e -- --setup --local` - run e2e tests with the local version of Angular contained in the "dist" folder
 
 * `yarn build-ie-polyfills` - generates a js file of polyfills that can be loaded in Internet Explorer.
 

aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts

@@ -32,8 +32,7 @@ export class BuildCreator extends EventEmitter {
       then(() => Promise.all([this.exists(prDir), this.exists(shaDir)])).
       then(([prDirExisted, shaDirExisted]) => {
         if (shaDirExisted) {
-          const publicOrNot = isPublic ? 'public' : 'non-public';
-          throw new UploadError(409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
+          throw new UploadError(409, `Request to overwrite existing directory: ${shaDir}`);
         }
 
         dirToRemoveOnError = prDirExisted ? shaDir : prDir;

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts

@@ -110,7 +110,6 @@ describe('upload-server (on HTTP)', () => {
       const authorizationHeader2 = isPublic ?
         authorizationHeader : `--header "Authorization: ${c.BV_verify_verifiedNotTrusted}"`;
       const cmdPrefix = curl('', `${authorizationHeader2} ${xFileHeader}`);
-      const overwriteRe = RegExp(`^Request to overwrite existing ${isPublic ? 'public' : 'non-public'} directory`);
 
 
       it('should not overwrite existing builds', done => {
@@ -121,7 +120,7 @@ describe('upload-server (on HTTP)', () => {
         expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
 
         h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9}`).
-          then(h.verifyResponse(409, overwriteRe)).
+          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
           then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
           then(done);
       });
@@ -142,7 +141,7 @@ describe('upload-server (on HTTP)', () => {
         expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
 
         h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9Almost}`).
-          then(h.verifyResponse(409, overwriteRe)).
+          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
           then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
           then(done);
       });
@@ -311,7 +310,7 @@ describe('upload-server (on HTTP)', () => {
           expect(h.buildExists(pr, sha0, isPublic)).toBe(false);
 
           uploadBuild(sha0).
-            then(h.verifyResponse(409, overwriteRe)).
+            then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
             then(() => {
               checkPrVisibility(isPublic);
               expect(h.readBuildFile(pr, sha0, 'index.html', isPublic)).toContain(pr);

aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts

@@ -153,8 +153,7 @@ describe('BuildCreator', () => {
         it('should abort and skip further operations if the build does already exist', done => {
           existsValues[shaDir] = true;
           bc.create(pr, sha, archive, isPublic).catch(err => {
-            const publicOrNot = isPublic ? 'public' : 'non-public';
-            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
+            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
             expect(shellMkdirSpy).not.toHaveBeenCalled();
             expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
             expect(bcEmitSpy).not.toHaveBeenCalled();
@@ -170,8 +169,7 @@ describe('BuildCreator', () => {
           expect(bcExistsSpy(shaDir)).toBe(false);
 
           bc.create(pr, sha, archive, isPublic).catch(err => {
-            const publicOrNot = isPublic ? 'public' : 'non-public';
-            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
+            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
             expect(shellMkdirSpy).not.toHaveBeenCalled();
             expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
             expect(bcEmitSpy).not.toHaveBeenCalled();

aio/aio-builds-setup/dockerbuild/scripts-js/tslint.json

@@ -6,7 +6,7 @@
     "interface-name": [true, "never-prefix"],
     "max-classes-per-file": [true, 4],
     "no-consecutive-blank-lines": [true, 2],
-    "no-console": [false],
+    "no-console": false,
     "no-namespace": [true, "allow-declarations"],
     "no-string-literal": false,
     "quotemark": [true, "single"],

aio/aio-builds-setup/docs/overview--http-status-codes.md

@@ -46,8 +46,8 @@ with a bried explanation of what they mean:
   Request method other than POST.
 
 - **409 (Conflict)**:
-  Request to overwrite existing (public or non-public) directory (e.g. deploy existing build or
-  change PR visibility when the destination directory does already exist).
+  Request to overwrite existing directory (e.g. deploy existing build or change PR visibility when
+  the destination directory does already exist).
 
 - **413 (Payload Too Large)**:
   Payload larger than size specified in `AIO_UPLOAD_MAX_SIZE`.
@@ -71,8 +71,7 @@ with a bried explanation of what they mean:
   Request method other than POST.
 
 - **409 (Conflict)**:
-  Request to overwrite existing (public or non-public) directory (i.e. directories for both
-  visibilities exist).
+  Request to overwrite existing directory (i.e. directories for both visibilities exist).
   (Normally, this should not happen.)
 
 

aio/content/examples/.gitignore

@@ -55,6 +55,10 @@ dist/
 !testing/src/browser-test-shim.js
 !testing/karma*.js
 
+# TS to JS
+!ts-to-js/js*/**/*.js
+ts-to-js/js*/**/system*.js
+
 # webpack
 !webpack/**/config/*.js
 !webpack/**/*webpack*.js

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

@@ -12,13 +12,13 @@ describe('Router', () => {
   beforeAll(() => browser.get(''));
 
   function getPageStruct() {
-    const hrefEles = element.all(by.css('my-app > nav a'));
+    const hrefEles = element.all(by.css('my-app a'));
     const crisisDetail = element.all(by.css('my-app > ng-component > ng-component > ng-component > div')).first();
     const heroDetail = element(by.css('my-app > ng-component > div'));
 
     return {
       hrefs: hrefEles,
-      activeHref: element(by.css('my-app > nav a.active')),
+      activeHref: element(by.css('my-app a.active')),
 
       crisisHref: hrefEles.get(0),
       crisisList: element.all(by.css('my-app > ng-component > ng-component li')),

aio/content/examples/router/src/app.css

@@ -15,10 +15,6 @@
   height: 1.6em;
   border-radius: 4px;
 }
-.items li a {
-  display: block;
-  text-decoration: none;
-}
 .items li:hover {
   color: #607D8B;
   background-color: #DDD;

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

@@ -28,7 +28,7 @@ const appRoutes: Routes = [
     data: { preload: true }
   },
   // #enddocregion preload-v2
-  { path: '',   redirectTo: '/superheroes', pathMatch: 'full' },
+  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];
 

aio/content/examples/router/src/app/app.component.6.ts

@@ -1,23 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-app',
-  // #docregion template
-  template: `
-    <h1 class="title">Angular Router</h1>
-    <nav>
-      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
-      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
-      <a routerLink="/admin" routerLinkActive="active">Admin</a>
-      <a routerLink="/login" routerLinkActive="active">Login</a>
-      <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
-    </nav>
-    <router-outlet></router-outlet>
-    <router-outlet name="popup"></router-outlet>
-  `
-  // #enddocregion template
-})
-export class AppComponent {
-}

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

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
     <h1 class="title">Angular Router</h1>
     <nav>
       <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
-      <a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
       <a routerLink="/admin" routerLinkActive="active">Admin</a>
       <a routerLink="/login" routerLinkActive="active">Login</a>
       <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>

aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts

@@ -1,6 +1,5 @@
 // #docregion
 import { Injectable }           from '@angular/core';
-import { Observable }           from 'rxjs/Observable';
 import { CanDeactivate,
          ActivatedRouteSnapshot,
          RouterStateSnapshot }  from '@angular/router';
@@ -14,7 +13,7 @@ export class CanDeactivateGuard implements CanDeactivate<CrisisDetailComponent>
     component: CrisisDetailComponent,
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
-  ): Observable<boolean> | boolean {
+  ): Promise<boolean> | boolean {
     // Get the Crisis Center ID
     console.log(route.paramMap.get('id'));
 
@@ -26,7 +25,7 @@ export class CanDeactivateGuard implements CanDeactivate<CrisisDetailComponent>
       return true;
     }
     // Otherwise ask the user with the dialog service and return its
-    // observable which resolves to true or false when the user decides
+    // promise which resolves to true or false when the user decides
     return component.dialogService.confirm('Discard changes?');
   }
 }

aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts

@@ -1,8 +1,5 @@
 // #docregion
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/take';
 import { Injectable }             from '@angular/core';
-import { Observable }             from 'rxjs/Observable';
 import { Router, Resolve, RouterStateSnapshot,
          ActivatedRouteSnapshot } from '@angular/router';
 
@@ -12,10 +9,10 @@ import { Crisis, CrisisService }  from './crisis.service';
 export class CrisisDetailResolver implements Resolve<Crisis> {
   constructor(private cs: CrisisService, private router: Router) {}
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {
     let id = route.paramMap.get('id');
 
-    return this.cs.getCrisis(id).take(1).map(crisis => {
+    return this.cs.getCrisis(id).then(crisis => {
       if (crisis) {
         return crisis;
       } else { // id not found

aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts

@@ -3,7 +3,6 @@
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute, Router, ParamMap } from '@angular/router';
-import { Observable }                       from 'rxjs/Observable';
 
 import { slideInDownAnimation }   from '../animations';
 import { Crisis, CrisisService }  from './crisis.service';
@@ -46,8 +45,7 @@ export class CrisisDetailComponent implements OnInit {
   // #docregion ngOnInit
   ngOnInit() {
     this.route.paramMap
-      .switchMap((params: ParamMap) =>
-        this.service.getCrisis(params.get('id')))
+      .switchMap((params: ParamMap) => this.service.getCrisis(params.get('id')))
       .subscribe((crisis: Crisis) => {
         if (crisis) {
           this.editName = crisis.name;
@@ -68,13 +66,13 @@ export class CrisisDetailComponent implements OnInit {
     this.gotoCrises();
   }
 
-  canDeactivate(): Observable<boolean> | boolean {
+  canDeactivate(): Promise<boolean> | boolean {
     // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
     if (!this.crisis || this.crisis.name === this.editName) {
       return true;
     }
     // Otherwise ask the user with the dialog service and return its
-    // observable which resolves to true or false when the user decides
+    // promise which resolves to true or false when the user decides
     return this.dialogService.confirm('Discard changes?');
   }
 

aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts

@@ -2,7 +2,6 @@
 // #docregion
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
 
 import { slideInDownAnimation }   from '../animations';
 import { Crisis }         from './crisis.service';
@@ -63,13 +62,13 @@ export class CrisisDetailComponent implements OnInit {
   // #enddocregion cancel-save
 
   // #docregion canDeactivate
-  canDeactivate(): Observable<boolean> | boolean {
+  canDeactivate(): Promise<boolean> | boolean {
     // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
     if (!this.crisis || this.crisis.name === this.editName) {
       return true;
     }
     // Otherwise ask the user with the dialog service and return its
-    // observable which resolves to true or false when the user decides
+    // promise which resolves to true or false when the user decides
     return this.dialogService.confirm('Discard changes?');
   }
   // #enddocregion canDeactivate

aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts

@@ -1,7 +1,7 @@
-
+import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }              from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
 import { Observable }            from 'rxjs/Observable';
@@ -10,34 +10,35 @@ import { Observable }            from 'rxjs/Observable';
   // #docregion relative-navigation-router-link
   template: `
     <ul class="items">
-      <li *ngFor="let crisis of crises$ | async"
-        [class.selected]="crisis.id === selectedId">
-        <a [routerLink]="[crisis.id]">
-          <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
+      <li *ngFor="let crisis of crises | async">
+        <a [routerLink]="[crisis.id]"
+           [class.selected]="isSelected(crisis)">
+          <span class="badge">{{ crisis.id }}</span>
+          {{ crisis.name }}
         </a>
       </li>
-    </ul>
-
-    <router-outlet></router-outlet>
-    `
+    </ul>`
   // #enddocregion relative-navigation-router-link
 })
 export class CrisisListComponent implements OnInit {
-  crises$: Observable<Crisis[]>;
+  crises: Observable<Crisis[]>;
   selectedId: number;
 
-
   constructor(
     private service: CrisisService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private router: Router
   ) {}
 
-
   ngOnInit() {
-    this.crises$ = this.route.paramMap
+    this.crises = this.route.paramMap
       .switchMap((params: ParamMap) => {
         this.selectedId = +params.get('id');
         return this.service.getCrises();
       });
   }
+
+  isSelected(crisis: Crisis) {
+    return crisis.id === this.selectedId;
+  }
 }

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

@@ -1,19 +1,20 @@
 // #docregion
 import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }      from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, Router, ParamMap } from '@angular/router';
+
+import { Observable }            from 'rxjs/Observable';
 
 import { Crisis, CrisisService } from './crisis.service';
-import { Observable }            from 'rxjs/Observable';
 
 @Component({
   template: `
     <ul class="items">
-      <li *ngFor="let crisis of crises$ | async"
-        [class.selected]="crisis.id === selectedId">
-        <a [routerLink]="[crisis.id]">
-          <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
-        </a>
+      <li *ngFor="let crisis of crises | async"
+        (click)="onSelect(crisis)"
+        [class.selected]="isSelected(crisis)">
+          <span class="badge">{{ crisis.id }}</span>
+          {{ crisis.name }}
       </li>
     </ul>
 
@@ -21,21 +22,35 @@ import { Observable }            from 'rxjs/Observable';
   `
 })
 export class CrisisListComponent implements OnInit {
-  crises$: Observable<Crisis[]>;
+  crises: Observable<Crisis[]>;
   selectedId: number;
 
   // #docregion ctor
   constructor(
     private service: CrisisService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private router: Router
   ) {}
   // #enddocregion ctor
 
+  isSelected(crisis: Crisis) {
+    return crisis.id === this.selectedId;
+  }
+
   ngOnInit() {
-    this.crises$ = this.route.paramMap
+    this.crises = this.route.paramMap
       .switchMap((params: ParamMap) => {
         this.selectedId = +params.get('id');
         return this.service.getCrises();
       });
   }
+
+  // #docregion onSelect
+  onSelect(crisis: Crisis) {
+    this.selectedId = crisis.id;
+
+    // Navigate with relative link
+    this.router.navigate([crisis.id], { relativeTo: this.route });
+  }
+  // #enddocregion onSelect
 }

aio/content/examples/router/src/app/crisis-center/crisis.service.ts

@@ -1,9 +1,5 @@
 // #docplaster
 // #docregion , mock-crises
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/map';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-
 export class Crisis {
   constructor(public id: number, public name: string) { }
 }
@@ -16,18 +12,20 @@ const CRISES = [
 ];
 // #enddocregion mock-crises
 
+let crisesPromise = Promise.resolve(CRISES);
+
 import { Injectable } from '@angular/core';
 
 @Injectable()
 export class CrisisService {
-  static nextCrisisId = 100;
-  private crises$: BehaviorSubject<Crisis[]> = new BehaviorSubject<Crisis[]>(CRISES);
 
-  getCrises() { return this.crises$; }
+  static nextCrisisId = 100;
+
+  getCrises() { return crisesPromise; }
 
   getCrisis(id: number | string) {
-    return this.getCrises()
-      .map(crises => crises.find(crisis => crisis.id === +id));
+    return crisesPromise
+      .then(crises => crises.find(crisis => crisis.id === +id));
   }
 
   // #enddocregion
@@ -35,8 +33,7 @@ export class CrisisService {
     name = name.trim();
     if (name) {
       let crisis = new Crisis(CrisisService.nextCrisisId++, name);
-      CRISES.push(crisis);
-      this.crises$.next(CRISES);
+      crisesPromise.then(crises => crises.push(crisis));
     }
   }
   // #docregion

aio/content/examples/router/src/app/dialog.service.ts

@@ -1,8 +1,5 @@
 // #docregion
-import 'rxjs/add/observable/of';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-
 /**
  * Async modal dialog service
  * DialogService makes this app easier to test by faking this service.
@@ -12,11 +9,11 @@ import { Observable } from 'rxjs/Observable';
 export class DialogService {
   /**
    * Ask user to confirm an action. `message` explains the action and choices.
-   * Returns observable resolving to `true`=confirm or `false`=cancel
+   * Returns promise resolving to `true`=confirm or `false`=cancel
    */
-  confirm(message?: string): Observable<boolean> {
-    const confirmation = window.confirm(message || 'Is it OK?');
-
-    return Observable.of(confirmation);
+  confirm(message?: string) {
+    return new Promise<boolean>(resolve => {
+      return resolve(window.confirm(message || 'Is it OK?'));
+    });
   };
 }

aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts

@@ -4,7 +4,6 @@
 import 'rxjs/add/operator/switchMap';
 // #enddocregion rxjs-operator-import
 import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 // #docregion imports
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 // #enddocregion imports
@@ -14,7 +13,7 @@ import { Hero, HeroService } from './hero.service';
 @Component({
   template: `
   <h2>HEROES</h2>
-  <div *ngIf="hero$ | async as hero">
+  <div *ngIf="hero">
     <h3>"{{ hero.name }}"</h3>
     <div>
       <label>Id: </label>{{ hero.id }}</div>
@@ -29,7 +28,7 @@ import { Hero, HeroService } from './hero.service';
   `
 })
 export class HeroDetailComponent implements OnInit  {
-  hero$: Observable<Hero>;
+  hero: Hero;
 
   // #docregion ctor
   constructor(
@@ -41,9 +40,10 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.hero$ = this.route.paramMap
+    this.route.paramMap
       .switchMap((params: ParamMap) =>
-        this.service.getHero(params.get('id')));
+        this.service.getHero(params.get('id')))
+      .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit
 

aio/content/examples/router/src/app/heroes/hero-detail.component.2.ts

@@ -2,14 +2,13 @@
 // #docregion
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Observable }             from 'rxjs/Observable';
 
 import { Hero, HeroService } from './hero.service';
 
 @Component({
   template: `
   <h2>HEROES</h2>
-  <div *ngIf="hero$ | async as hero">
+  <div *ngIf="hero">
     <h3>"{{ hero.name }}"</h3>
     <div>
       <label>Id: </label>{{ hero.id }}</div>
@@ -24,7 +23,7 @@ import { Hero, HeroService } from './hero.service';
   `
 })
 export class HeroDetailComponent implements OnInit  {
-  hero$: Observable<Hero>;
+  hero: Hero;
 
   constructor(
     private route: ActivatedRoute,
@@ -36,7 +35,8 @@ export class HeroDetailComponent implements OnInit  {
   ngOnInit() {
     let id = this.route.snapshot.paramMap.get('id');
 
-    this.hero$ = this.service.getHero(id);
+    this.service.getHero(id)
+      .then((hero: Hero) => this.hero = hero);
   }
   // #enddocregion snapshot
 

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

@@ -4,7 +4,6 @@
 import 'rxjs/add/operator/switchMap';
 // #enddocregion rxjs-operator-import
 import { Component, OnInit, HostBinding } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 
 import { slideInDownAnimation } from '../animations';
@@ -14,7 +13,7 @@ import { Hero, HeroService }  from './hero.service';
 @Component({
   template: `
   <h2>HEROES</h2>
-  <div *ngIf="hero$ | async as hero">
+  <div *ngIf="hero">
     <h3>"{{ hero.name }}"</h3>
     <div>
       <label>Id: </label>{{ hero.id }}</div>
@@ -23,7 +22,7 @@ import { Hero, HeroService }  from './hero.service';
       <input [(ngModel)]="hero.name" placeholder="name"/>
     </div>
     <p>
-      <button (click)="gotoHeroes(hero)">Back</button>
+      <button (click)="gotoHeroes()">Back</button>
     </p>
   </div>
   `,
@@ -36,7 +35,7 @@ export class HeroDetailComponent implements OnInit {
   @HostBinding('style.position')  position = 'absolute';
 // #enddocregion host-bindings
 
-  hero$: Observable<Hero>;
+  hero: Hero;
 
   // #docregion ctor
   constructor(
@@ -48,15 +47,16 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.hero$ = this.route.paramMap
+    this.route.paramMap
       .switchMap((params: ParamMap) =>
-        this.service.getHero(params.get('id')));
+        this.service.getHero(params.get('id')))
+      .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
   // #docregion gotoHeroes
-  gotoHeroes(hero: Hero) {
-    let heroId = hero ? hero.id : null;
+  gotoHeroes() {
+    let heroId = this.hero ? this.hero.id : null;
     // Pass along the hero id if available
     // so that the HeroList component can select that hero.
     // Include a junk 'foo' property for fun.

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

@@ -3,7 +3,6 @@
 // TODO SOMEDAY: Feature Componetized like HeroCenter
 import { Component, OnInit }   from '@angular/core';
 import { Router }              from '@angular/router';
-import { Observable }          from 'rxjs/Observable';
 
 import { Hero, HeroService }   from './hero.service';
 
@@ -12,12 +11,9 @@ import { Hero, HeroService }   from './hero.service';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="let hero of heroes$ | async">
-        // #docregion nav-to-detail
-        <a [routerLink]="['/hero', hero.id]">
+      <li *ngFor="let hero of heroes | async"
+        (click)="onSelect(hero)">
         <span class="badge">{{ hero.id }}</span> {{ hero.name }}
-        </a>
-        // #enddocregion nav-to-detail
       </li>
     </ul>
 
@@ -26,7 +22,7 @@ import { Hero, HeroService }   from './hero.service';
   // #enddocregion template
 })
 export class HeroListComponent implements OnInit {
-  heroes$: Observable<Hero[]>;
+  heroes: Promise<Hero[]>;
 
   // #docregion ctor
   constructor(
@@ -36,8 +32,16 @@ export class HeroListComponent implements OnInit {
   // #enddocregion ctor
 
   ngOnInit() {
-    this.heroes$ = this.service.getHeroes();
+    this.heroes = this.service.getHeroes();
   }
+
+  // #docregion select
+  onSelect(hero: Hero) {
+    // #docregion nav-to-detail
+    this.router.navigate(['/hero', hero.id]);
+    // #enddocregion nav-to-detail
+  }
+  // #enddocregion select
 }
 // #enddocregion
 

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

@@ -7,7 +7,7 @@ import { Observable } from 'rxjs/Observable';
 // #enddocregion rxjs-imports
 import { Component, OnInit } from '@angular/core';
 // #docregion import-router
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 // #enddocregion import-router
 
 import { Hero, HeroService }  from './hero.service';
@@ -17,11 +17,10 @@ import { Hero, HeroService }  from './hero.service';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="let hero of heroes$ | async"
-        [class.selected]="hero.id === selectedId">
-        <a [routerLink]="['/hero', hero.id]">
+      <li *ngFor="let hero of heroes | async"
+        [class.selected]="isSelected(hero)"
+        (click)="onSelect(hero)">
         <span class="badge">{{ hero.id }}</span> {{ hero.name }}
-        </a>
       </li>
     </ul>
 
@@ -31,17 +30,18 @@ import { Hero, HeroService }  from './hero.service';
 })
 // #docregion ctor
 export class HeroListComponent implements OnInit {
-  heroes$: Observable<Hero[]>;
+  heroes: Observable<Hero[]>;
 
   private selectedId: number;
 
   constructor(
     private service: HeroService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private router: Router
   ) {}
 
   ngOnInit() {
-    this.heroes$ = this.route.paramMap
+    this.heroes = this.route.paramMap
       .switchMap((params: ParamMap) => {
         // (+) before `params.get()` turns the string into a number
         this.selectedId = +params.get('id');
@@ -49,6 +49,16 @@ export class HeroListComponent implements OnInit {
       });
   }
   // #enddocregion ctor
+
+  // #docregion isSelected
+  isSelected(hero: Hero) { return hero.id === this.selectedId; }
+  // #enddocregion isSelected
+
+  // #docregion select
+  onSelect(hero: Hero) {
+    this.router.navigate(['/hero', hero.id]);
+  }
+  // #enddocregion select
 // #docregion ctor
 }
 // #enddocregion

aio/content/examples/router/src/app/heroes/hero.service.ts

@@ -1,14 +1,11 @@
 // #docregion
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/map';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
 
 export class Hero {
   constructor(public id: number, public name: string) { }
 }
 
-const HEROES = [
+let HEROES = [
   new Hero(11, 'Mr. Nice'),
   new Hero(12, 'Narco'),
   new Hero(13, 'Bombasto'),
@@ -17,13 +14,15 @@ const HEROES = [
   new Hero(16, 'RubberMan')
 ];
 
+let heroesPromise = Promise.resolve(HEROES);
+
 @Injectable()
 export class HeroService {
-  getHeroes() { return Observable.of(HEROES); }
+  getHeroes() { return heroesPromise; }
 
   getHero(id: number | string) {
-    return this.getHeroes()
+    return heroesPromise
       // (+) before `id` turns the string into a number
-      .map(heroes => heroes.find(hero => hero.id === +id));
+      .then(heroes => heroes.find(hero => hero.id === +id));
   }
 }

aio/content/examples/router/src/app/heroes/heroes-routing.module.1.ts

@@ -1,24 +0,0 @@
-// #docregion
-import { NgModule }             from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { HeroListComponent }    from './hero-list.component';
-import { HeroDetailComponent }  from './hero-detail.component';
-
-const heroesRoutes: Routes = [
-  { path: 'heroes',  component: HeroListComponent },
-// #docregion hero-detail-route
-  { path: 'hero/:id', component: HeroDetailComponent }
-// #enddocregion hero-detail-route
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forChild(heroesRoutes)
-  ],
-  exports: [
-    RouterModule
-  ]
-})
-export class HeroRoutingModule { }
-// #enddocregion

aio/content/examples/router/src/app/heroes/heroes-routing.module.ts

@@ -6,10 +6,10 @@ import { HeroListComponent }    from './hero-list.component';
 import { HeroDetailComponent }  from './hero-detail.component';
 
 const heroesRoutes: Routes = [
-  { path: 'heroes', redirectTo: '/superheroes' },
-  { path: 'hero/:id', redirectTo: '/superhero/:id' },
-  { path: 'superheroes',  component: HeroListComponent },
-  { path: 'superhero/:id', component: HeroDetailComponent }
+  { path: 'heroes',  component: HeroListComponent },
+// #docregion hero-detail-route
+  { path: 'hero/:id', component: HeroDetailComponent }
+// #enddocregion hero-detail-route
 ];
 
 @NgModule({

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

@@ -35,7 +35,7 @@ export class HeroDetailComponent {
   @Input() prefix = '';
 
   // #docregion deleteRequest
-  // This component makes a request but it can't actually delete a hero.
+  // This component make a request but it can't actually delete a hero.
   deleteRequest = new EventEmitter<Hero>();
 
   delete() {

aio/content/examples/testing/karma-test-shim.js

@@ -44,7 +44,6 @@ System.config({
   map: {
     '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
     '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
-    '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',
     '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
     '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
     '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',

aio/content/examples/testing/karma.conf.js

@@ -52,10 +52,6 @@ module.exports = function(config) {
       { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
       { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
 
-      // tslib (TS helper fns such as `__extends`)
-      { pattern: 'node_modules/tslib/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/tslib/**/*.js.map', included: false, watched: false },
-
       // Paths loaded via module imports:
       // Angular itself
       { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },

aio/content/examples/ts-to-js/e2e-spec.ts

@@ -0,0 +1,77 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('TypeScript to Javascript tests', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should display the basic component example', function () {
+    testTag('hero-view', 'Hero Detail: Windstorm');
+  });
+
+  it('should display the component example with lifecycle methods', function () {
+    testTag('hero-lifecycle', 'Hero: Windstorm');
+  });
+
+  it('should display component with DI example', function () {
+    testTag('hero-di', 'Hero: Windstorm');
+  });
+
+  it('should display component with DI using @Inject example', function () {
+    testTag('hero-di-inject', 'Hero: Windstorm');
+  });
+
+  it('should support optional, attribute, and query injections', function () {
+    let app = element(by.css('hero-di-inject-additional'));
+    let h1 = app.element(by.css('h1'));
+    let okMsg = app.element(by.css('p'));
+
+    expect(h1.getText()).toBe('Tour of Heroes');
+    app.element(by.buttonText('OK')).click();
+    expect(okMsg.getText()).toBe('OK!');
+  });
+
+  it('should support component with inputs and outputs', function () {
+    let app = element(by.css('hero-io'));
+    let confirmComponent = app.element(by.css('app-confirm'));
+
+    confirmComponent.element(by.buttonText('OK')).click();
+    expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
+
+    confirmComponent.element(by.buttonText('Cancel')).click();
+    expect(app.element(by.cssContainingText('span', 'Cancel clicked')).isPresent()).toBe(true);
+  });
+
+  it('should support host bindings and host listeners', function() {
+    let app = element(by.css('hero-host'));
+    let h1 = app.element(by.css('h1'));
+
+    expect(app.getAttribute('class')).toBe('heading');
+    expect(app.getAttribute('title')).toContain('Tooltip');
+
+    h1.click();
+    expect(h1.getAttribute('class')).toBe('active');
+
+    h1.click();
+    browser.actions().doubleClick(h1.getWebElement()).perform();
+    expect(h1.getAttribute('class')).toBe('active');
+  });
+
+  it('should support content and view queries', function() {
+    let app = element(by.css('hero-queries'));
+    let windstorm = app.element(by.css('view-child:first-child'));
+
+    app.element(by.css('button')).click();
+    expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
+    expect(windstorm.element(by.css('content-child')).getText()).toBe('Active');
+  });
+
+  function testTag(selector: string, expectedText: string) {
+    let component = element(by.css(selector));
+    expect(component.getText()).toBe(expectedText);
+  }
+
+});

aio/content/examples/ts-to-js/js-es6-decorators/example-config.json

@@ -0,0 +1,3 @@
+{
+  "build": "build:babel"
+}

aio/content/examples/ts-to-js/js-es6-decorators/plnkr.json

@@ -0,0 +1,9 @@
+{
+  "description": "TypeScript to JavaScript",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["cookbook"]
+}

aio/content/examples/ts-to-js/js-es6-decorators/src/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "angular2"
+  ]
+}

aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.es6

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html',
+  styles: [
+    // See hero-di-inject-additional.component
+    'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
+    '.heading {font-style: italic}'
+  ]
+})
+export class AppComponent {
+  title = 'ES6 JavaScript with Decorators';
+}

aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.component.html

@@ -0,0 +1,31 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Decorators</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<hero-host-meta></hero-host-meta>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>

aio/content/examples/ts-to-js/js-es6-decorators/src/app/app.module.es6

@@ -0,0 +1,55 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroHostMetaComponent } from './hero-host-meta.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    ConfirmComponent,
+    HeroComponent,
+    HeroDIComponent,
+    HeroDIInjectComponent,
+    HeroDIInjectAdditionalComponent,
+    HeroHostComponent, HeroHostMetaComponent,
+    HeroIOComponent,
+    HeroLifecycleComponent,
+    HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+    HeroTitleComponent
+  ],
+  providers: [
+    DataService,
+    { provide: 'heroName', useValue: 'Windstorm' }
+  ],
+  bootstrap: [ AppComponent ],
+
+  // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+})
+export class AppModule { }
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import

aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.es6

@@ -0,0 +1,21 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'app-confirm',
+  templateUrl: './confirm.component.html'
+})
+export class ConfirmComponent {
+  @Input() okMsg = '';
+  @Input('cancelMsg') notOkMsg = '';
+  @Output() ok = new EventEmitter();
+  @Output('cancel') notOk = new EventEmitter();
+
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+// #enddocregion

aio/content/examples/ts-to-js/js-es6-decorators/src/app/confirm.component.html

@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>

aio/content/examples/ts-to-js/js-es6-decorators/src/app/data.service.es6

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class DataService {
+  constructor() { }
+
+  getHeroName() {
+    return 'Windstorm';
+  }
+}

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject-additional.component.es6

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-di-inject-additional',
+  template: `<hero-title title="Tour of Heroes"></hero-title>`
+})
+export class HeroComponent { }

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di-inject.component.es6

@@ -0,0 +1,13 @@
+import { Component, Inject } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-di-inject',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  constructor(@Inject('heroName') name) {
+    this.name = name;
+  }
+}
+// #enddocregion

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-di.component.es6

@@ -0,0 +1,15 @@
+// #docregion
+import { Component }   from '@angular/core';
+import { DataService } from './data.service';
+
+@Component({
+  selector: 'hero-di',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  name = '';
+  constructor(dataService: DataService) {
+    this.name = dataService.getHeroName();
+  }
+}
+// #enddocregion

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host-meta.component.es6

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host-meta',
+  template: `
+    <h1 [class.active]="active">Hero Host in Metadata</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  host: {
+    // HostBindings to the <hero-host-meta> element
+    '[title]': 'title',
+    '[class.heading]': 'headingClass',
+
+    // HostListeners on the entire <hero-host-meta> element
+    '(click)': 'clicked()',
+    '(mouseenter)': 'enter($event)',
+    '(mouseleave)': 'leave($event)'
+  },
+  // Styles within (but excluding) the <hero-host-meta> element
+  styles: ['.active {background-color: coral;}']
+})
+export class HeroHostMetaComponent {
+  title = 'Hero Host in Metadata Tooltip';
+  headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  clicked() {
+    this.clicks += 1;
+  }
+
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-host.component.es6

@@ -0,0 +1,39 @@
+import { Component, HostBinding, HostListener } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host',
+  template: `
+    <h1 [class.active]="active">Hero Host in Decorators</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  // Styles within (but excluding) the <hero-host> element
+  styles: ['.active {background-color: yellow;}']
+})
+export class HeroHostComponent {
+  // HostBindings to the <hero-host> element
+  @HostBinding() title = 'Hero Host in Decorators Tooltip';
+  @HostBinding('class.heading') headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  // HostListeners on the entire <hero-host> element
+  @HostListener('click')
+  clicked() {
+    this.clicks += 1;
+  }
+
+  @HostListener('mouseenter', ['$event'])
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  @HostListener('mouseleave', ['$event'])
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-io.component.es6

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-io',
+  template: `
+    <app-confirm [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+    </app-confirm>
+    <span *ngIf="okClicked">OK clicked</span>
+    <span *ngIf="cancelClicked">Cancel clicked</span>
+  `
+})
+export class HeroIOComponent {
+  okClicked     = false;
+  cancelClicked = false;
+
+  onOk() {
+    this.okClicked = true;
+  }
+
+  onCancel() {
+    this.cancelClicked = true;
+  }
+}

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-lifecycle.component.es6

@@ -0,0 +1,14 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-lifecycle',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  name = '';
+  ngOnInit() {
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
+  }
+}

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-queries.component.es6

@@ -0,0 +1,81 @@
+import {
+  Component,
+  ContentChild,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+
+@Component({
+  selector: 'content-child',
+  template: `
+  <span class="content-child" *ngIf="active">
+    Active
+  </span>`
+})
+export class ContentChildComponent {
+  active = false;
+
+  activate() {
+    this.active = true;
+  }
+}
+
+////////////////////
+
+// #docregion content
+@Component({
+  selector: 'view-child',
+  template: `
+  <h2 [class.active]=active>
+    {{hero.name}}
+    <ng-content></ng-content>
+  </h2>`,
+  styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+  @Input() hero;
+  active = false;
+
+  @ContentChild(ContentChildComponent) content;
+
+  activate() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+  selector: 'hero-queries',
+  template: `
+    <view-child *ngFor="let hero of heroData" [hero]="hero">
+      <content-child></content-child>
+    </view-child>
+    <button (click)="activate()">{{buttonLabel}} All</button>
+  `
+})
+export class HeroQueriesComponent {
+  active = false;
+  heroData = [
+    {id: 1, name: 'Windstorm'},
+    {id: 2, name: 'LaughingGas'}
+  ];
+
+  @ViewChildren(ViewChildComponent) views;
+
+  activate() {
+    this.active = !this.active;
+    this.views.forEach(
+      view => view.activate()
+    );
+  }
+
+  get buttonLabel() {
+    return this.active ? 'Deactivate' : 'Activate';
+  }
+}
+// #enddocregion view

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.es6

@@ -0,0 +1,25 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+// #docregion templateUrl
+@Component({
+  selector: 'hero-title',
+  templateUrl: './hero-title.component.html'
+})
+// #enddocregion templateUrl
+export class HeroTitleComponent {
+  msg = '';
+  constructor(
+    @Inject('titlePrefix') @Optional() titlePrefix,
+    @Attribute('title') title
+  ) {
+    this.titlePrefix = titlePrefix;
+    this.title = title;
+  }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+// #enddocregion
+

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero-title.component.html

@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>

aio/content/examples/ts-to-js/js-es6-decorators/src/app/hero.component.es6

@@ -0,0 +1,15 @@
+// #docregion
+// #docregion metadata
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-view',
+  template: '<h1>{{title}}: {{getName()}}</h1>'
+})
+// #docregion appexport, class
+export class HeroComponent {
+  title = 'Hero Detail';
+  getName() {return 'Windstorm'; }
+}
+// #enddocregion appexport, class
+// #enddocregion metadata

aio/content/examples/ts-to-js/js-es6-decorators/src/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+</html>

aio/content/examples/ts-to-js/js-es6-decorators/src/main.es6

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

aio/content/examples/ts-to-js/js-es6/example-config.json

@@ -0,0 +1,3 @@
+{
+  "build": "build:babel"
+}

aio/content/examples/ts-to-js/js-es6/plnkr.json

@@ -0,0 +1,9 @@
+{
+  "description": "TypeScript to JavaScript",
+  "basePath": "src/",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["cookbook"]
+}

aio/content/examples/ts-to-js/js-es6/src/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015"
+  ]
+}

aio/content/examples/ts-to-js/js-es6/src/app/app.component.es6

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+export class AppComponent {
+  constructor() {
+    this.title = 'Plain ES6 JavaScript';
+  }
+}
+
+AppComponent.annotations = [
+  new Component({
+    selector: 'my-app',
+    templateUrl: './app.component.html',
+    styles: [
+      // See hero-di-inject-additional.component
+      'hero-host { border: 1px dashed black; display: block; padding: 4px;}',
+      '.heading {font-style: italic}'
+    ]
+  })
+];

aio/content/examples/ts-to-js/js-es6/src/app/app.component.html

@@ -0,0 +1,30 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Metadata</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>

aio/content/examples/ts-to-js/js-es6/src/app/app.module.es6

@@ -0,0 +1,56 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+export class AppModule { }
+
+AppModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule],
+    declarations: [
+      AppComponent,
+      ConfirmComponent,
+      HeroComponent,
+      HeroDIComponent,
+      HeroDIInjectComponent,
+      HeroDIInjectAdditionalComponent,
+      HeroHostComponent,
+      HeroIOComponent,
+      HeroLifecycleComponent,
+      HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+      HeroTitleComponent
+    ],
+    providers: [
+      DataService,
+      { provide: 'heroName', useValue: 'Windstorm' }
+    ],
+    bootstrap: [ AppComponent ],
+
+    // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+  })
+]
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import

aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.es6

@@ -0,0 +1,31 @@
+import { Component, EventEmitter } from '@angular/core';
+
+// #docregion
+export class ConfirmComponent {
+  constructor(){
+    this.ok    = new EventEmitter();
+    this.notOk = new EventEmitter();
+  }
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+
+ConfirmComponent.annotations = [
+  new Component({
+    selector: 'app-confirm',
+    templateUrl: './confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+];
+// #enddocregion

aio/content/examples/ts-to-js/js-es6/src/app/confirm.component.html

@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>

aio/content/examples/ts-to-js/js-es6/src/app/data.service.es6

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+export class DataService {
+  constructor() {
+  }
+  getHeroName() {
+    return 'Windstorm';
+  }
+}
+
+DataService.annotations = [
+  new Injectable()
+];

aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject-additional.component.es6

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+export class HeroComponent { }
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-di-inject-additional',
+    template: `<hero-title title="Tour of Heroes"></hero-title>`
+  })
+];

aio/content/examples/ts-to-js/js-es6/src/app/hero-di-inject.component.es6

@@ -0,0 +1,20 @@
+import { Component, Inject } from '@angular/core';
+
+// #docregion
+export class HeroComponent {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-di-inject',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];
+
+HeroComponent.parameters = [
+  [new Inject('heroName')]
+];
+// #enddocregion

aio/content/examples/ts-to-js/js-es6/src/app/hero-di.component.es6

@@ -0,0 +1,21 @@
+// #docregion
+import { Component }   from '@angular/core';
+import { DataService } from './data.service';
+
+export class HeroComponent {
+  constructor(dataService) {
+    this.name = dataService.getHeroName();
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-di',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];
+
+HeroComponent.parameters = [
+  [DataService]
+];
+// #enddocregion

aio/content/examples/ts-to-js/js-es6/src/app/hero-host.component.es6

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+
+// #docregion
+export class HeroHostComponent {
+  constructor() {
+    this.active = false;
+    this.clicks = 0;
+    this.headingClass = true;
+    this.title = 'Hero Host Tooltip';
+  }
+
+  clicked() {
+    this.clicks += 1;
+  }
+
+  enter(event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  leave(event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+
+// #docregion metadata
+HeroHostComponent.annotations = [
+  new Component({
+    selector: 'hero-host',
+    template: `
+      <h1 [class.active]="active">Hero Host</h1>
+      <div>Heading clicks: {{clicks}}</div>
+    `,
+    host: {
+      // HostBindings to the <hero-host> element
+      '[title]': 'title',
+      '[class.heading]': 'headingClass',
+      '(click)': 'clicked()',
+
+      // HostListeners on the entire <hero-host> element
+      '(mouseenter)': 'enter($event)',
+      '(mouseleave)': 'leave($event)'
+    },
+    // Styles within (but excluding) the <hero-host> element
+    styles: ['.active {background-color: yellow;}']
+  })
+];
+// #enddocregion metadata
+// #enddocregion

aio/content/examples/ts-to-js/js-es6/src/app/hero-io.component.es6

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+export class HeroIOComponent {
+  constructor() {
+    this.okClicked     = false;
+    this.cancelClicked = false;
+  }
+
+  onOk() {
+    this.okClicked = true;
+  }
+
+  onCancel() {
+    this.cancelClicked = true;
+  }
+}
+
+HeroIOComponent.annotations = [
+  new Component({
+    selector: 'hero-io',
+    template: `
+      <app-confirm [okMsg]="'OK'"
+                   [cancelMsg]="'Cancel'"
+                   (ok)="onOk()"
+                   (cancel)="onCancel()">
+      </app-confirm>
+      <span *ngIf="okClicked">OK clicked</span>
+      <span *ngIf="cancelClicked">Cancel clicked</span>
+    `
+  })
+];

aio/content/examples/ts-to-js/js-es6/src/app/hero-lifecycle.component.es6

@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+export class HeroComponent {
+  ngOnInit() {
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-lifecycle',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];

aio/content/examples/ts-to-js/js-es6/src/app/hero-queries.component.es6

@@ -0,0 +1,97 @@
+import {
+  Component,
+  ContentChild,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+
+export class ContentChildComponent {
+  constructor() {
+    this.active = false;
+  }
+
+  activate() {
+    this.active = !this.active;
+  }
+}
+
+ContentChildComponent.annotations = [
+  new Component({
+    selector: 'content-child',
+    template: `
+    <span class="content-child" *ngIf="active">
+      Active
+    </span>`
+  })
+];
+
+////////////////////
+
+// #docregion content
+export class ViewChildComponent {
+  constructor() {
+    this.active = false;
+  }
+
+  activate() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+}
+
+ViewChildComponent.annotations = [
+  new Component({
+    selector: 'view-child',
+    template: `<h2 [class.active]=active>
+      {{hero.name}}
+      <ng-content></ng-content>
+    </h2>`,
+    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+    inputs: ['hero'],
+    queries: {
+      content: new ContentChild(ContentChildComponent)
+    }
+  })
+];
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+export class HeroQueriesComponent {
+  constructor(){
+    this.active = false;
+    this.heroData = [
+      {id: 1, name: 'Windstorm'},
+      {id: 2, name: 'LaughingGas'}
+    ];
+  }
+
+  activate() {
+    this.active = !this.active;
+    this.views.forEach(
+      view => view.activate()
+    );
+  }
+
+  get buttonLabel() {
+    return this.active ? 'Deactivate' : 'Activate';
+  }
+}
+
+HeroQueriesComponent.annotations = [
+  new Component({
+    selector: 'hero-queries',
+    template: `
+      <view-child *ngFor="let hero of heroData" [hero]="hero">
+        <content-child></content-child>
+      </view-child>
+      <button (click)="activate()">{{buttonLabel}} All</button>
+    `,
+    queries: {
+      views: new ViewChildren(ViewChildComponent)
+    }
+  })
+];
+// #enddocregion view

aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.es6

@@ -0,0 +1,28 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+export class HeroTitleComponent {
+  constructor(titlePrefix, title) {
+    this.titlePrefix = titlePrefix;
+    this.title  = title;
+    this.msg = '';
+  }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+
+// #docregion templateUrl
+HeroTitleComponent.annotations = [
+  new Component({
+    selector: 'hero-title',
+    templateUrl: './hero-title.component.html'
+  })
+];
+// #enddocregion templateUrl
+
+HeroTitleComponent.parameters = [
+  [new Optional(), new Inject('titlePrefix')],
+  [new Attribute('title')]
+];

aio/content/examples/ts-to-js/js-es6/src/app/hero-title.component.html

@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>

aio/content/examples/ts-to-js/js-es6/src/app/hero.component.es6

@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion
+// #docregion metadata
+import { Component } from '@angular/core';
+
+// #docregion appexport, class
+export class HeroComponent {
+  constructor() {
+    this.title = 'Hero Detail';
+  }
+  getName() {return 'Windstorm'; }
+}
+// #enddocregion appexport, class
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-view',
+    template: '<h1>{{title}}: {{getName()}}</h1>'
+  })
+];
+// #enddocregion metadata

aio/content/examples/ts-to-js/js-es6/src/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+</html>

aio/content/examples/ts-to-js/js-es6/src/main.es6

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

aio/content/examples/ts-to-js/js/example-config.json

@@ -0,0 +1,3 @@
+{
+  "build": "build:babel"
+}

aio/content/examples/ts-to-js/js/plnkr.json

@@ -0,0 +1,8 @@
+{
+  "description": "TypeScript to JavaScript",
+  "basePath": "src/",
+  "files":[
+    "!**/karma*.*"
+  ],
+  "tags":["cookbook"]
+}

aio/content/examples/ts-to-js/js/src/app/app.component.html

@@ -0,0 +1,47 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#interfaces">Interfaces</a><br>
+<a href="#io-metadata">Input and Output Metadata</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<h4 id="class-metadata-dsl">Classes and Class Metadata (DSL)</h4>
+<hero-view-dsl></hero-view-dsl>
+
+<hr>
+<h4 id="interfaces">Interfaces</h4>
+<hero-lifecycle></hero-lifecycle>
+<h4 id="interfaces-dsl">Interfaces (DSL)</h4>
+<hero-lifecycle-dsl></hero-lifecycle-dsl>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+<h4 id="io-metadata-dsl">Input and Output Metadata (DSL)</h4>
+<hero-io-dsl></hero-io-dsl>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<h4 id="dependency-injection-dsl">Dependency Injection (DSL)</h4>
+<hero-di-dsl></hero-di-dsl>
+<hero-di-inject-dsl></hero-di-inject-dsl>
+<hero-di-inject-additional-dsl></hero-di-inject-additional-dsl>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<h4 id="host-metadata-dsl">Host Metadata (DSL)</h4>
+<hero-host-dsl></hero-host-dsl>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata (DSL)</h4>
+<hero-queries></hero-queries>

aio/content/examples/ts-to-js/js/src/app/app.component.js

@@ -0,0 +1,20 @@
+(function(app) {
+
+app.AppComponent = AppComponent;
+function AppComponent() {
+  this.title = 'ES5 JavaScript';
+}
+
+AppComponent.annotations = [
+  new ng.core.Component({
+    selector: 'my-app',
+    templateUrl: 'app/app.component.html',
+    styles: [
+      // See hero-di-inject-additional.component
+      'hero-host, hero-host-dsl { border: 1px dashed black; display: block; padding: 4px;}',
+      '.heading {font-style: italic}'
+    ]
+  })
+];
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/app.module.js

@@ -0,0 +1,46 @@
+(function(app) {
+
+app.AppModule = AppModule;
+function AppModule() { }
+
+AppModule.annotations = [
+  new ng.core.NgModule({
+    imports: [ ng.platformBrowser.BrowserModule ],
+    declarations: [
+      app.AppComponent,
+      app.ConfirmComponent, app.ConfirmDslComponent,
+      app.HeroComponent, app.HeroDslComponent,
+      app.HeroDIComponent, app.HeroDIDslComponent,
+      app.HeroDIInjectComponent, app.HeroDIInjectDslComponent,
+      app.HeroDIInjectAdditionalComponent, app.HeroDIInjectAdditionalDslComponent,
+      app.HeroHostComponent, app.HeroHostDslComponent,
+      app.HeroIOComponent, app.HeroIODslComponent,
+      app.HeroLifecycleComponent, app.HeroLifecycleDslComponent,
+      app.heroQueries.HeroQueriesComponent, app.heroQueries.ViewChildComponent, app.heroQueries.ContentChildComponent,
+      app.HeroTitleComponent, app.HeroTitleDslComponent
+    ],
+    providers: [
+      app.DataService,
+      { provide: 'heroName', useValue: 'Windstorm' }
+    ],
+    bootstrap: [ app.AppComponent ],
+
+    // schemas: [ ng.core.NO_ERRORS_SCHEMA ] // helpful for debugging!
+  })
+]
+
+})(window.app = window.app || {});
+
+
+///// For documentation only /////
+(function () {
+  // #docregion appimport
+  var HeroComponent = app.HeroComponent;
+  // #enddocregion appimport
+
+  // #docregion ng2import
+  var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
+  var LocationStrategy = ng.common.LocationStrategy;
+  var HashLocationStrategy = ng.common.HashLocationStrategy;
+  // #enddocregion ng2import
+})

aio/content/examples/ts-to-js/js/src/app/confirm.component.html

@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>

aio/content/examples/ts-to-js/js/src/app/confirm.component.js

@@ -0,0 +1,75 @@
+(function(app) {
+
+  // #docregion
+  app.ConfirmComponent = ConfirmComponent;
+
+  ConfirmComponent.annotations = [
+    new ng.core.Component({
+      selector: 'app-confirm',
+      templateUrl: 'app/confirm.component.html',
+      inputs: [
+        'okMsg',
+        'notOkMsg: cancelMsg'
+      ],
+      outputs: [
+        'ok',
+        'notOk: cancel'
+      ]
+    })
+  ];
+
+  function ConfirmComponent() {
+    this.ok    = new ng.core.EventEmitter();
+    this.notOk = new ng.core.EventEmitter();
+  }
+
+  ConfirmComponent.prototype.onOkClick = function() {
+    this.ok.emit(true);
+  }
+
+  ConfirmComponent.prototype.onNotOkClick = function() {
+    this.notOk.emit(true);
+  }
+  // #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////////
+
+(function(app) {
+
+  var old = app.ConfirmComponent;
+
+  // #docregion dsl
+  app.ConfirmComponent = ng.core.Component({
+    selector: 'app-confirm-dsl',
+    templateUrl: 'app/confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+  .Class({
+    constructor: function ConfirmComponent() {
+      this.ok    = new ng.core.EventEmitter();
+      this.notOk = new ng.core.EventEmitter();
+    },
+
+    onOkClick: function() {
+      this.ok.emit(true);
+    },
+
+    onNotOkClick: function() {
+      this.notOk.emit(true);
+    }
+  });
+  // #enddocregion dsl
+
+  app.ConfirmDslComponent = app.ConfirmComponent;
+  app.ConfirmComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/data.service.js

@@ -0,0 +1,10 @@
+(function(app) {
+
+  app.DataService = DataService;
+  function DataService() { }
+
+  DataService.prototype.getHeroName = function() {
+    return 'Windstorm';
+  };
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-di-inject-additional.component.js

@@ -0,0 +1,36 @@
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-di-inject-additional',
+      template: '<hero-title title="Tour of Heroes"></hero-title>'
+    })
+  ];
+
+  function HeroComponent() {}
+
+  app.HeroDIInjectAdditionalComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+////// DSL Version /////////
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-di-inject-additional-dsl',
+    template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
+  }).Class({
+    constructor: function HeroComponent() { }
+  });
+
+  app.HeroDIInjectAdditionalDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-di-inject.component.js

@@ -0,0 +1,51 @@
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-di-inject',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
+
+  HeroComponent.parameters = [ 'heroName' ];
+
+  function HeroComponent(name) {
+    this.name = name;
+  }
+  // #enddocregion
+
+  app.HeroDIInjectComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+/////// DSL version ////////
+
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-di-inject-dsl',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor: [
+      new ng.core.Inject('heroName'),
+      function HeroComponent(name) {
+        this.name = name;
+      }
+    ]
+  });
+  // #enddocregion dsl
+
+  app.HeroDIInjectDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-di.component.js

@@ -0,0 +1,51 @@
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-di',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
+
+  HeroComponent.parameters = [ app.DataService ];
+
+  function HeroComponent(dataService) {
+    this.name = dataService.getHeroName();
+  }
+  // #enddocregion
+
+  app.HeroDIComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+////// DSL Version /////
+
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-di-dsl',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor: [
+      app.DataService,
+      function HeroComponent(service) {
+        this.name = service.getHeroName();
+      }
+    ]
+  });
+  // #enddocregion dsl
+
+  app.HeroDIDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-host.component.js

@@ -0,0 +1,107 @@
+(function(app) {
+
+  var old = app.HeroComponent
+
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-host',
+      template:
+        '<h1 [class.active]="active">Hero Host</h1>' +
+        '<div>Heading clicks: {{clicks}}</div>',
+      host: {
+        // HostBindings to the <hero-host> element
+        '[title]': 'title',
+        '[class.heading]': 'headingClass',
+        '(click)': 'clicked()',
+
+        // HostListeners on the entire <hero-host> element
+        '(mouseenter)': 'enter($event)',
+        '(mouseleave)': 'leave($event)'
+      },
+      // Styles within (but excluding) the <hero-host> element
+      styles: ['.active {background-color: yellow;}']
+    })
+  ];
+
+  function HeroComponent() {
+    this.clicks = 0;
+    this.headingClass = true;
+    this.title = 'Hero Host Tooltip content';
+  }
+
+  HeroComponent.prototype.clicked = function() {
+    this.clicks += 1;
+  }
+
+  HeroComponent.prototype.enter = function(event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  HeroComponent.prototype.leave = function(event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+  // #enddocregion
+
+  app.HeroHostComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+//// DSL Version ////
+
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-host-dsl',
+    template: `
+      <h1 [class.active]="active">Hero Host (DSL)</h1>
+      <div>Heading clicks: {{clicks}}</div>
+    `,
+    host: {
+      // HostBindings to the <hero-host-dsl> element
+      '[title]': 'title',
+      '[class.heading]': 'headingClass',
+      '(click)': 'clicked()',
+
+      // HostListeners on the entire <hero-host-dsl> element
+      '(mouseenter)': 'enter($event)',
+      '(mouseleave)': 'leave($event)'
+    },
+    // Styles within (but excluding) the <hero-host-dsl> element
+    styles: ['.active {background-color: coral;}']
+  })
+  .Class({
+    constructor: function HeroComponent() {
+      this.clicks = 0;
+      this.headingClass = true;
+      this.title = 'Hero Host Tooltip DSL content';
+    },
+
+    clicked() {
+      this.clicks += 1;
+    },
+
+    enter(event) {
+      this.active = true;
+      this.headingClass = false;
+    },
+
+    leave(event) {
+      this.active = false;
+      this.headingClass = true;
+    }
+  });
+  // #enddocregion dsl
+
+  app.HeroHostDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-io-dsl.component.html

@@ -0,0 +1,7 @@
+<app-confirm-dsl [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+</app-confirm-dsl>
+<span *ngIf="okClicked">OK clicked</span>
+<span *ngIf="cancelClicked">Cancel clicked</span>

aio/content/examples/ts-to-js/js/src/app/hero-io.component.html

@@ -0,0 +1,7 @@
+<app-confirm [okMsg]="'OK'"
+             [cancelMsg]="'Cancel'"
+             (ok)="onOk()"
+             (cancel)="onCancel()">
+</app-confirm>
+<span *ngIf="okClicked">OK clicked</span>
+<span *ngIf="cancelClicked">Cancel clicked</span>

aio/content/examples/ts-to-js/js/src/app/hero-io.component.js

@@ -0,0 +1,52 @@
+(function(app) {
+
+  var old = app.HeroComponent
+
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-io',
+      templateUrl: 'app/hero-io.component.html'
+    })
+  ];
+
+  function HeroComponent() { }
+
+  HeroComponent.prototype.onOk = function() {
+    this.okClicked = true;
+  }
+
+  HeroComponent.prototype.onCancel = function() {
+    this.cancelClicked = true;
+  }
+
+  app.HeroIOComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+///// DSL Version ////
+
+(function(app) {
+
+  var old = app.HeroComponent
+
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-io-dsl',
+    templateUrl: 'app/hero-io-dsl.component.html'
+  })
+  .Class({
+    constructor: function HeroComponent() { },
+    onOk: function() {
+      this.okClicked = true;
+    },
+    onCancel: function() {
+      this.cancelClicked = true;
+    }
+  });
+
+  app.HeroIODslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-lifecycle.component.js

@@ -0,0 +1,52 @@
+// #docplaster
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion
+  app.HeroComponent = HeroComponent;
+
+  HeroComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-lifecycle',
+      template: '<h1>Hero: {{name}}</h1>'
+    })
+  ];
+
+  function HeroComponent() { }
+
+  HeroComponent.prototype.ngOnInit = function() {
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
+  };
+  // #enddocregion
+
+  app.HeroLifecycleComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});
+
+/////// DSL version ////
+
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-lifecycle-dsl',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor: function HeroComponent() { },
+    ngOnInit: function() {
+      // todo: fetch from server async
+      setTimeout(() => this.name = 'Windstorm', 0);
+    }
+  });
+  // #enddocregion dsl
+
+  app.HeroLifecycleDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-queries.component.js

@@ -0,0 +1,92 @@
+(function(app) {
+
+  app.heroQueries = app.heroQueries || {};
+
+  app.heroQueries.ContentChildComponent = ng.core.Component({
+    selector: 'content-child',
+    template:
+      '<span class="content-child" *ngIf="active">' +
+        'Active' +
+      '</span>'
+  }).Class({
+    constructor: function ContentChildComponent() {
+      this.active = false;
+    },
+
+    activate: function() {
+      this.active = !this.active;
+    }
+  });
+
+  ////////////////////
+
+  // #docregion content
+  app.heroQueries.ViewChildComponent = ng.core.Component({
+    selector: 'view-child',
+    template:
+      '<h2 [class.active]=active>' +
+        '{{hero.name}} ' +
+        '<ng-content></ng-content>' +
+      '</h2>',
+    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+    inputs: ['hero'],
+    queries: {
+      content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
+    }
+  })
+  .Class({
+    constructor: function HeroQueriesHeroComponent() {
+      this.active = false;
+    },
+
+    activate: function() {
+      this.active = !this.active;
+      this.content.activate();
+    }
+  });
+  // #enddocregion content
+
+  ////////////////////
+
+  // #docregion view
+  app.heroQueries.HeroQueriesComponent = ng.core.Component({
+    selector: 'hero-queries',
+    template:
+      '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
+        '<content-child></content-child>' +
+      '</view-child>' +
+      '<button (click)="activate()">{{buttonLabel}} All</button>',
+    queries: {
+      views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
+    }
+  })
+  .Class({
+    constructor: function HeroQueriesComponent() {
+      this.active = false;
+      this.heroData = [
+        {id: 1, name: 'Windstorm'},
+        {id: 2, name: 'LaughingGas'}
+      ];
+    },
+
+    activate: function() {
+      this.active = !this.active;
+      this.views.forEach(function(view) {
+        view.activate();
+      });
+    },
+  });
+
+  // #docregion defined-property
+  // add prototype property w/ getter outside the DSL
+  var proto = app.heroQueries.HeroQueriesComponent.prototype;
+  Object.defineProperty(proto, "buttonLabel", {
+      get: function () {
+          return this.active ? 'Deactivate' : 'Activate';
+      },
+      enumerable: true
+  });
+  // #enddocregion defined-property
+  // #enddocregion view
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero-title.component.html

@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>

aio/content/examples/ts-to-js/js/src/app/hero-title.component.js

@@ -0,0 +1,64 @@
+(function(app) {
+
+  // #docregion
+  app.HeroTitleComponent = HeroTitleComponent;
+
+  // #docregion templateUrl
+  HeroTitleComponent.annotations = [
+    new ng.core.Component({
+      selector: 'hero-title',
+      templateUrl: 'app/hero-title.component.html'
+    })
+  ];
+  // #enddocregion templateUrl
+
+  function HeroTitleComponent(titlePrefix, title) {
+      this.titlePrefix = titlePrefix;
+      this.title  = title;
+      this.msg = '';
+  }
+
+  HeroTitleComponent.prototype.ok = function() {
+    this.msg = 'OK!';
+  }
+
+  HeroTitleComponent.parameters = [
+    [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
+    [new ng.core.Attribute('title')]
+  ];
+  // #enddocregion
+
+})(window.app = window.app || {});
+
+////////// DSL version ////////////
+
+(function(app) {
+
+  var old = app.HeroTitleComponent;
+
+  // #docregion dsl
+  app.HeroTitleComponent = ng.core.Component({
+    selector: 'hero-title-dsl',
+    templateUrl: 'app/hero-title.component.html'
+  })
+  .Class({
+    constructor: [
+      [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
+      new ng.core.Attribute('title'),
+      function HeroTitleComponent(titlePrefix, title) {
+        this.titlePrefix = titlePrefix;
+        this.title  = title;
+        this.msg = '';
+      }
+    ],
+
+    ok: function() {
+      this.msg = 'OK!';
+    }
+  });
+  // #enddocregion dsl
+
+  app.HeroTitleDslComponent = app.HeroTitleComponent;
+  app.HeroTitleComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/app/hero.component.js

@@ -0,0 +1,53 @@
+// #docplaster
+(function(app) {
+
+// #docregion
+// #docregion appexport
+// #docregion metadata
+app.HeroComponent = HeroComponent; // "export"
+
+HeroComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-view',
+    template: '<h1>{{title}}: {{getName()}}</h1>'
+  })
+];
+
+// #docregion constructorproto
+function HeroComponent() {
+  this.title = "Hero Detail";
+}
+
+HeroComponent.prototype.getName = function() { return 'Windstorm'; };
+// #enddocregion constructorproto
+
+// #enddocregion metadata
+// #enddocregion appexport
+// #enddocregion
+
+})(window.app = window.app || {});
+
+//////////// DSL version ///////////
+
+(function(app) {
+
+  var old = app.HeroComponent;
+
+  // #docregion dsl
+  app.HeroComponent = ng.core.Component({
+    selector: 'hero-view-dsl',
+    template: '<h1>{{title}}: {{getName()}}</h1>',
+  })
+  .Class({
+    constructor: function HeroComponent() {
+      this.title = "Hero Detail";
+    },
+
+    getName: function() { return 'Windstorm'; }
+  });
+  // #enddocregion dsl
+
+  app.HeroDslComponent = app.HeroComponent;
+  app.HeroComponent = old;
+
+})(window.app = window.app || {});

aio/content/examples/ts-to-js/js/src/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
+
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+
+    <!-- Angular and RxJS umd scripts -->
+    <script src="node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
+    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
+    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
+
+    <!-- Application scripts -->
+    <script src="app/app.component.js"></script>
+    <script src="app/confirm.component.js"></script>
+    <script src="app/data.service.js"></script>
+    <script src="app/hero.component.js"></script>
+    <script src="app/hero-io.component.js"></script>
+    <script src="app/hero-di.component.js"></script>
+    <script src="app/hero-di-inject.component.js"></script>
+    <script src="app/hero-di-inject-additional.component.js"></script>
+    <script src="app/hero-host.component.js"></script>
+    <script src="app/hero-lifecycle.component.js"></script>
+    <script src="app/hero-queries.component.js"></script>
+    <script src="app/hero-title.component.js"></script>
+
+    <script src="app/app.module.js"></script>
+    <script src="main.js"></script>
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+</html>

aio/content/examples/ts-to-js/js/src/main.js

@@ -0,0 +1,9 @@
+(function(app) {
+
+var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
+
+document.addEventListener('DOMContentLoaded', function() {
+  platformBrowserDynamic().bootstrapModule(app.AppModule);
+});
+
+})(window.app = window.app || {});