docs: add changelog for 5.0.0-beta.6

PR Close #19005

.bazelrc

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

.circleci/config.yml

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

.gitignore

@@ -5,6 +5,7 @@ bazel-*
 e2e_test.*
 node_modules
 bower_components
+tools/gulp-tasks/cldr/cldr-data/
 
 # Include when developing application packages.
 pubspec.lock

.pullapprove.yml

@@ -69,7 +69,6 @@ groups:
           - "*.lock"
           - "tools/*"
         exclude:
-          - "tools/@angular/tsc-wrapped/*"
           - "tools/public_api_guard/*"
           - "aio/*"
     users:
@@ -136,8 +135,9 @@ groups:
   compiler-cli:
     conditions:
       files:
-        - "tools/@angular/tsc-wrapped/*"
+        - "packages/tsc-wrapped/*"
         - "packages/compiler-cli/*"
+        - "packages/bazel/*"
     users:
       - alexeagle
       - chuckjaz

BUILD.bazel

@@ -6,20 +6,25 @@ exports_files(["tsconfig.json"])
 # https://github.com/bazelbuild/bazel/issues/374#issuecomment-296217940
 filegroup(
     name = "node_modules",
-    srcs = glob([
-        # Performance workaround: list individual files
-        # This won't scale in the general case.
-        # TODO(alexeagle): figure out what to do
-        "node_modules/typescript/**",
-        "node_modules/zone.js/**",
-        "node_modules/rxjs/**/*.d.ts",
-        "node_modules/rxjs/**/*.js",
-        "node_modules/@types/**/*.d.ts",
-        "node_modules/tsickle/**",
-        "node_modules/hammerjs/**/*.d.ts",
-        "node_modules/protobufjs/**",
-        "node_modules/bytebuffer/**",
-        "node_modules/reflect-metadata/**",
-        "node_modules/minimist/**/*.js",
-    ]),
+    # Performance workaround: list individual files
+    # Reduces the number of files as inputs to nodejs_binary:
+    # bazel query "deps(:node_modules)" | wc -l
+    # This won't scale in the general case.
+    # TODO(alexeagle): figure out what to do
+    srcs = glob(["/".join(["node_modules", pkg, "**", ext]) for pkg in [
+        "typescript",
+        "zone.js",
+        "rxjs",
+        "@types",
+        "tsickle",
+        "hammerjs",
+        "protobufjs",
+        "bytebuffer",
+        "reflect-metadata",
+        "minimist",
+    ] for ext in [
+        "*.js",
+        "*.json",
+        "*.d.ts",
+    ]]),
 )

CHANGELOG.md

@@ -1,12 +1,54 @@
-<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.6"></a>
+# [5.0.0-beta.6](https://github.com/angular/angular/compare/5.0.0-beta.5...5.0.0-beta.6) (2017-09-03)
 
 
 ### Bug Fixes
 
-* **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)
+* **animations:** do not leak DOM nodes/styling for host triggered animations ([#18853](https://github.com/angular/angular/issues/18853)) ([fcadeb2](https://github.com/angular/angular/commit/fcadeb2)), closes [#18606](https://github.com/angular/angular/issues/18606)
+* **common:** fix a duplicate case in the locale switch ([#18941](https://github.com/angular/angular/issues/18941)) ([fdd5010](https://github.com/angular/angular/commit/fdd5010))
+* **common:** fix improper packaging for [@angular](https://github.com/angular)/common/http ([#18613](https://github.com/angular/angular/issues/18613)) ([65e26d7](https://github.com/angular/angular/commit/65e26d7))
+* **common:** fix XSSI prefix stripping by using JSON.parse always ([#18466](https://github.com/angular/angular/issues/18466)) ([452a7ae](https://github.com/angular/angular/commit/452a7ae)), closes [#18396](https://github.com/angular/angular/issues/18396) [#18453](https://github.com/angular/angular/issues/18453)
+* **common:** update closure-locale generation for tree shaking ([#18938](https://github.com/angular/angular/issues/18938)) ([946e5bd](https://github.com/angular/angular/commit/946e5bd))
+* **common:** use correct group separator for currency pipe ([#18932](https://github.com/angular/angular/issues/18932)) ([4ec5e28](https://github.com/angular/angular/commit/4ec5e28))
+* **common:** use v4 plurals when importing `DeprecatedI18NPipesModule` ([#18955](https://github.com/angular/angular/issues/18955)) ([30d53a8](https://github.com/angular/angular/commit/30d53a8))
+* **compiler:** always check summaries first before falling back to metadata from .d.ts files ([#18788](https://github.com/angular/angular/issues/18788)) ([f83b819](https://github.com/angular/angular/commit/f83b819))
+* **compiler:** always emit ngfactories with reexports ([#18788](https://github.com/angular/angular/issues/18788)) ([0262e37](https://github.com/angular/angular/commit/0262e37))
+* **compiler:** don’t emit stubs when we didn’t generate code for a file. ([#18788](https://github.com/angular/angular/issues/18788)) ([506d2e9](https://github.com/angular/angular/commit/506d2e9))
+* **compiler:** don’t reexport types in `.ngfactory` files ([#18788](https://github.com/angular/angular/issues/18788)) ([8c858d7](https://github.com/angular/angular/commit/8c858d7))
+* **compiler:** normalize the locale name ([#18963](https://github.com/angular/angular/issues/18963)) ([043f104](https://github.com/angular/angular/commit/043f104))
+* **compiler:** quote non identifiers in map keys. ([#18788](https://github.com/angular/angular/issues/18788)) ([2fbc92f](https://github.com/angular/angular/commit/2fbc92f))
+* **compiler:** treat absolute imports as package imports ([#18912](https://github.com/angular/angular/issues/18912)) ([fce7ae1](https://github.com/angular/angular/commit/fce7ae1))
+* **compiler:** use either summary or metadata information when reading .d.ts files ([#18912](https://github.com/angular/angular/issues/18912)) ([f1e526f](https://github.com/angular/angular/commit/f1e526f))
+* **compiler:** workaround bugs in TS when combining transformers ([#18912](https://github.com/angular/angular/issues/18912)) ([4059a72](https://github.com/angular/angular/commit/4059a72))
+* **compiler-cli:** fix memory leaks in watch mode ([#18961](https://github.com/angular/angular/issues/18961)) ([83e5deb](https://github.com/angular/angular/commit/83e5deb))
+* **compiler-cli:** use `--locale` parameter for transformers ([#18988](https://github.com/angular/angular/issues/18988)) ([22c4090](https://github.com/angular/angular/commit/22c4090))
+* **core:** complete EventEmitter in QueryList on component destroy ([#18902](https://github.com/angular/angular/issues/18902)) ([36d37cc](https://github.com/angular/angular/commit/36d37cc)), closes [#18741](https://github.com/angular/angular/issues/18741)
+* **tsc-wrapped:** decouple bundle index host from tsickle dependency ([#18999](https://github.com/angular/angular/issues/18999)) ([d1afadb](https://github.com/angular/angular/commit/d1afadb))
+* **upgrade:** deprecate the dynamic version of `ngUpgrade` ([450a13d](https://github.com/angular/angular/commit/450a13d))
+
+
+### Code Refactoring
+
+* **core:** remove deprecated `OpaqueToken` ([#18971](https://github.com/angular/angular/issues/18971)) ([3c4eef8](https://github.com/angular/angular/commit/3c4eef8))
+
+
+### Features
+
+* **http**: deprecate @angular/http in favor of @angular/common/http ([#18906](https://github.com/angular/angular/issues/18906)) ([72c7b6e](https://github.com/angular/angular/commit/72c7b6e))
+* **common:** accept object map for HttpClient headers & params ([#18490](https://github.com/angular/angular/issues/18490)) ([1b1d5f1](https://github.com/angular/angular/commit/1b1d5f1))
+* **common:** generate `closure-locale.ts` to tree shake locale data ([#18907](https://github.com/angular/angular/issues/18907)) ([4878936](https://github.com/angular/angular/commit/4878936))
+* **compiler:** set `enableLegacyTemplate` to false by default ([#18756](https://github.com/angular/angular/issues/18756)) ([56238fe](https://github.com/angular/angular/commit/56238fe))
+* **compiler-cli:** add watch mode to `ngc` ([#18818](https://github.com/angular/angular/issues/18818)) ([cf7d47d](https://github.com/angular/angular/commit/cf7d47d))
+* **compiler-cli:** add watch mode to `ngc` ([#18818](https://github.com/angular/angular/issues/18818)) ([06d01b2](https://github.com/angular/angular/commit/06d01b2))
+* **compiler-cli:** lower metadata `useValue` and `data` literal fields ([#18905](https://github.com/angular/angular/issues/18905)) ([0e64261](https://github.com/angular/angular/commit/0e64261))
+* **compiler-cli:** lower metadata `useValue` and `data` literal fields ([#18905](https://github.com/angular/angular/issues/18905)) ([c685cc2](https://github.com/angular/angular/commit/c685cc2))
+* **platform-server:** provide a DOM implementation on the server ([2f2d5f3](https://github.com/angular/angular/commit/2f2d5f3)), closes [#14638](https://github.com/angular/angular/issues/14638)
+
+
+### BREAKING CHANGES
+
+* core: `OpaqueToken` has been removed as it was deprecated since v4. Use `InjectionToken` instead.
+* compiler: the compiler option `enableLegacyTemplate` is now disabled by default as the `<template>` element has been deprecated since v4. Use `<ng-template>` instead. The option `enableLegacyTemplate` and the `<template>` element will both be removed in Angular v6.
 
 
 
@@ -29,6 +71,147 @@
 * **core:** add option to remove blank text nodes from compiled templates ([#18823](https://github.com/angular/angular/issues/18823)) ([b8b551c](https://github.com/angular/angular/commit/b8b551c))
 
 
+<a name="5.0.0-beta.5"></a>
+# [5.0.0-beta.5](https://github.com/angular/angular/compare/5.0.0-beta.4...5.0.0-beta.5) (2017-08-29)
+
+
+### Bug Fixes
+
+* **animations:** ensure animations are disabled on the element containing the @.disabled flag ([#18714](https://github.com/angular/angular/issues/18714)) ([791c7ef](https://github.com/angular/angular/commit/791c7ef))
+* **animations:** make sure @.disabled respects disabled parent/sub animation sequences ([#18715](https://github.com/angular/angular/issues/18715)) ([e25f05a](https://github.com/angular/angular/commit/e25f05a))
+* **animations:** make sure animation cancellations respect AUTO style values ([#18787](https://github.com/angular/angular/issues/18787)) ([29aa8b3](https://github.com/angular/angular/commit/29aa8b3)), closes [#17450](https://github.com/angular/angular/issues/17450)
+* **animations:** resolve error when using AnimationBuilder with platform-server ([#18642](https://github.com/angular/angular/issues/18642)) ([845c68f](https://github.com/angular/angular/commit/845c68f)), closes [#18635](https://github.com/angular/angular/issues/18635)
+* **animations:** restore auto-style support for removed DOM nodes ([#18787](https://github.com/angular/angular/issues/18787)) ([7062811](https://github.com/angular/angular/commit/7062811))
+* **compiler-cli:** propagate preserveWhitespaces option to codegen ([#18773](https://github.com/angular/angular/issues/18773)) ([8ea6c56](https://github.com/angular/angular/commit/8ea6c56))
+* **compiler-cli:** use forward slashes for ts.resolveModuleName ([#18784](https://github.com/angular/angular/issues/18784)) ([e228f2c](https://github.com/angular/angular/commit/e228f2c))
+* **core:** correct order in ContentChildren query result ([#18326](https://github.com/angular/angular/issues/18326)) ([f53f724](https://github.com/angular/angular/commit/f53f724)), closes [#16568](https://github.com/angular/angular/issues/16568)
+* **core:** make sure onStable runs in the right zone ([#18706](https://github.com/angular/angular/issues/18706)) ([713d7c2](https://github.com/angular/angular/commit/713d7c2))
+* **tsc-wrapped:** add metadata for `type` declarations ([#18704](https://github.com/angular/angular/issues/18704)) ([6e3498c](https://github.com/angular/angular/commit/6e3498c)), closes [#18675](https://github.com/angular/angular/issues/18675)
+* **tsc-wrapped:** make `test.sh tools` run the tsc-wrapped tests again ([#18683](https://github.com/angular/angular/issues/18683)) ([2da45e6](https://github.com/angular/angular/commit/2da45e6))
+
+
+### Code Refactoring
+
+* **common:** remove deprecated `NgFor` ([#18758](https://github.com/angular/angular/issues/18758)) ([ec56760](https://github.com/angular/angular/commit/ec56760))
+* **common:** remove deprecated `NgTemplateOutlet#ngOutletContext` ([#18780](https://github.com/angular/angular/issues/18780)) ([7522987](https://github.com/angular/angular/commit/7522987))
+* **compiler:** remove option `useDebug` ([#18778](https://github.com/angular/angular/issues/18778)) ([499d05d](https://github.com/angular/angular/commit/499d05d))
+* **compiler:** split compiler and core ([#18683](https://github.com/angular/angular/issues/18683)) ([0cc77b4](https://github.com/angular/angular/commit/0cc77b4))
+* **core:** remove deprecated `ChangeDetectionRef` argument in `DifferFactory#create` ([#18757](https://github.com/angular/angular/issues/18757)) ([be9713c](https://github.com/angular/angular/commit/be9713c))
+* **core:** remove deprecated `DebugNode#source` ([#18779](https://github.com/angular/angular/issues/18779)) ([d61b902](https://github.com/angular/angular/commit/d61b902))
+* **core:** remove deprecated `Testability#findBindings` ([#18782](https://github.com/angular/angular/issues/18782)) ([f2a2a6b](https://github.com/angular/angular/commit/f2a2a6b))
+* **core:** remove deprecated `TrackByFn` ([#18757](https://github.com/angular/angular/issues/18757)) ([596e9f4](https://github.com/angular/angular/commit/596e9f4))
+* **core:** remove deprecated parameter for `ErrorHandler` ([#18759](https://github.com/angular/angular/issues/18759)) ([8f41326](https://github.com/angular/angular/commit/8f41326))
+* **platform-browser:** remove deprecated `NgProbeToken` ([#18760](https://github.com/angular/angular/issues/18760)) ([d7f42bf](https://github.com/angular/angular/commit/d7f42bf))
+* **platform-webworker:** remove deprecated `PRIMITIVE` ([#18761](https://github.com/angular/angular/issues/18761)) ([a56468c](https://github.com/angular/angular/commit/a56468c))
+* **router:** remove deprecated `initialNavigation` options ([#18781](https://github.com/angular/angular/issues/18781)) ([d76761b](https://github.com/angular/angular/commit/d76761b))
+* **router:** remove deprecated `RouterOutlet` properties ([#18781](https://github.com/angular/angular/issues/18781)) ([d1c4a94](https://github.com/angular/angular/commit/d1c4a94))
+
+
+### Features
+
+* **animations:** allow @.disabled property to work without an expression ([#18713](https://github.com/angular/angular/issues/18713)) ([2159342](https://github.com/angular/angular/commit/2159342))
+* **animations:** report errors when invalid CSS properties are detected ([#18718](https://github.com/angular/angular/issues/18718)) ([409688f](https://github.com/angular/angular/commit/409688f)), closes [#18701](https://github.com/angular/angular/issues/18701)
+* **common:** add an empty DeprecatedI18NPipesModule module ([#18737](https://github.com/angular/angular/issues/18737)) ([83713dd](https://github.com/angular/angular/commit/83713dd))
+* **common:** drop use of the Intl API to improve browser support ([#18284](https://github.com/angular/angular/issues/18284)) ([079d884](https://github.com/angular/angular/commit/079d884)), closes [#10809](https://github.com/angular/angular/issues/10809) [#9524](https://github.com/angular/angular/issues/9524) [#7008](https://github.com/angular/angular/issues/7008) [#9324](https://github.com/angular/angular/issues/9324) [#7590](https://github.com/angular/angular/issues/7590) [#6724](https://github.com/angular/angular/issues/6724) [#3429](https://github.com/angular/angular/issues/3429) [#17576](https://github.com/angular/angular/issues/17576) [#17478](https://github.com/angular/angular/issues/17478) [#17319](https://github.com/angular/angular/issues/17319) [#17200](https://github.com/angular/angular/issues/17200) [#16838](https://github.com/angular/angular/issues/16838) [#16624](https://github.com/angular/angular/issues/16624) [#16625](https://github.com/angular/angular/issues/16625) [#16591](https://github.com/angular/angular/issues/16591) [#14131](https://github.com/angular/angular/issues/14131) [#12632](https://github.com/angular/angular/issues/12632) [#11376](https://github.com/angular/angular/issues/11376) [#11187](https://github.com/angular/angular/issues/11187)
+* **compiler:** allow multiple exportAs names ([3a50098](https://github.com/angular/angular/commit/3a50098))
+* **compiler:** make `.ngsummary.json` files portable ([2572bf5](https://github.com/angular/angular/commit/2572bf5))
+* **compiler:** use typescript for resolving resource paths ([43226cb](https://github.com/angular/angular/commit/43226cb))
+* **forms:** add updateOn and ngFormOptions to NgForm ([0d45828](https://github.com/angular/angular/commit/0d45828))
+
+
+### BREAKING CHANGES
+
+#### Deprecated code
+* router: `RouterOutlet` properties `locationInjector` and `locationFactoryResolver` have been removed as they were deprecated since v4.
+* common: `NgFor` has been removed as it was deprecated since v4. Use `NgForOf` instead. This does not impact the use of`*ngFor` in your templates.
+* common: `NgTemplateOutlet#ngOutletContext` has been removed as it was deprecated since v4. Use `NgTemplateOutlet#ngTemplateOutletContext` instead.
+* core: `Testability#findBindings` has been removed as it was deprecated since v4. Use `Testability#findProviders` instead.
+* core: `DebugNode#source` has been removed as it was deprecated since v4.
+* router: the values `true`, `false`, `legacy_enabled` and `legacy_disabled` for the router parameter `initialNavigation` have been removed as they were deprecated. Use `enabled` or `disabled` instead.
+* core: `DifferFactory.create` no longer takes ChangeDetectionRef as a first argument as it was not used and deprecated since v4.
+* core: `TrackByFn` has been removed because it was deprecated since v4. Use `TrackByFunction` instead.
+* platform-webworker: `PRIMITIVE` has been removed as it was deprecated since v4. Use `SerializerTypes.PRIMITIVE` instead.
+* platform-browser: `NgProbeToken` has been removed from `@angular/platform-browser` as it was deprecated since v4. Import it from `@angular/core` instead.
+* core: `ErrorHandler` no longer takes a parameter as it was not used and deprecated since v4.
+* compiler: the option `useDebug` for the compiler has been removed as it had no effect and was deprecated since v4.
+
+#### Other breaking changes
+* compiler: - `@angular/platform-server` now additionally depends on
+  `@angular/platform-browser-dynamic` as a peer dependency.
+* common: Because of multiple bugs and browser inconsistencies, we have dropped the intl api in favor of data exported from the Unicode Common Locale Data Repository (CLDR).
+Unfortunately we had to change the i18n pipes (date, number, currency, percent) and there are some breaking changes.
+  ##### I18n pipes:
+  - Breaking change:
+    - By default Angular now only contains locale data for the language `en-US`, if you set the value of `LOCALE_ID` to another locale, you will have to import new locale data for this language because we don't use the intl API anymore.
+  - Features:
+    - you don't need to use the intl polyfill for Angular anymore.
+    - all i18n pipes now have an additional last parameter `locale` which allows you to use a specific locale instead of the one defined in the token `LOCALE_ID` (whose default value is `en-US`).
+    - the new locale data extracted from CLDR are now available to developers as well and can be used through an API (which should be especially useful for library authors).
+    - you can still use the old pipes for now, but their names have been changed and they are no longer included in the `CommonModule`. To use them, you will have to import the `DeprecatedI18NPipesModule` after the `CommonModule` (the order is important):
+
+    ```ts
+    import { NgModule } from '@angular/core';
+    import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common';
+
+    @NgModule({
+      imports: [
+        CommonModule,
+        // import deprecated module after
+        DeprecatedI18NPipesModule
+      ]
+    })
+    export class AppModule { }
+    ```
+
+    Don't forget that you will still need to import the intl API polyfill if you want to use those deprecated pipes.
+
+  ##### Date pipe
+  - Breaking changes:
+    - the predefined formats (`short`, `shortTime`, `shortDate`, `medium`, ...) now use the patterns given by CLDR (like it was in AngularJS) instead of the ones from the intl API. You might notice some changes, e.g. `shortDate` will be `8/15/17` instead of `8/15/2017` for `en-US`.
+    - the narrow version of eras is now `GGGGG` instead of `G`, the format `G` is now similar to `GG` and `GGG`.
+    - the narrow version of months is now `MMMMM` instead of `L`, the format `L` is now the short standalone version of months.
+    - the narrow version of the week day is now `EEEEE` instead of `E`, the format `E` is now similar to `EE` and `EEE`.
+    - the timezone `z` will now fallback to `O` and output `GMT+1` instead of the complete zone name (e.g. `Pacific Standard Time`), this is because the quantity of data required to have all the zone names in all of the existing locales is too big.
+    - the timezone `Z` will now output the ISO8601 basic format, e.g. `+0100`, you should now use `ZZZZ` to get `GMT+01:00`.
+
+    | Field type | Format        | Example value         | v4 | v5            |
+    |------------|---------------|-----------------------|----|---------------|
+    | Eras       | Narrow        | A for AD              | G  | GGGGG         |
+    | Months     | Narrow        | S for September       | L  | MMMMM         |
+    | Week day   | Narrow        | M for Monday          | E  | EEEEE         |
+    | Timezone   | Long location | Pacific Standard Time | z  | Not available |
+    | Timezone   | Long GMT      | GMT+01:00             | Z  | ZZZZ          |
+
+  - Features
+    - new predefined formats `long`, `full`, `longTime`, `fullTime`.
+    - the format `yyy` is now supported, e.g. the year `52` will be `052` and the year `2017` will be `2017`.
+    - standalone months are now supported with the formats `L` to `LLLLL`.
+    - week of the year is now supported with the formats `w` and `ww`, e.g. weeks `5` and `05`.
+    - week of the month is now supported with the format `W`, e.g. week `3`.
+    - fractional seconds are now supported with the format `S` to `SSS`.
+    - day periods for AM/PM now supports additional formats `aa`, `aaa`, `aaaa` and `aaaaa`. The formats `a` to `aaa` are similar, while `aaaa` is the wide version if available (e.g. `ante meridiem` for `am`), or equivalent to `a` otherwise, and `aaaaa` is the narrow version (e.g. `a` for `am`).
+    - extra day periods are now supported with the formats `b` to `bbbbb` (and `B` to `BBBBB` for the standalone equivalents), e.g. `morning`, `noon`, `afternoon`, ....
+    - the short non-localized timezones are now available with the format `O` to `OOOO`. The formats `O` to `OOO` will output `GMT+1` while the format `OOOO` will be `GMT+01:00`.
+    - the ISO8601 basic time zones are now available with the formats `Z` to `ZZZZZ`. The formats `Z` to `ZZZ` will output `+0100`, while the format `ZZZZ` will be `GMT+01:00` and `ZZZZZ` will be `+01:00`.
+
+  - Bug fixes
+    - the date pipe will now work exactly the same across all browsers, which will fix a lot of bugs for safari and IE.
+    - eras can now be used on their own without the date, e.g. the format `GG` will be `AD` instead of `8 15, 2017 AD`.
+
+  ##### Currency pipe
+  - Breaking change:
+    - the default value for `symbolDisplay` is now `symbol` instead of `code`. This means that by default you will see `$4.99` for `en-US` instead of `USD4.99` previously.
+
+  * Deprecation:
+    - the second parameter of the currency pipe (`symbolDisplay`) is no longer a boolean, it now takes the values `code`, `symbol` or `symbol-narrow`. A boolean value is still valid for now, but it is deprecated and it will print a warning message in the console.
+
+  - Features:
+    - you can now choose between `code`, `symbol` or `symbol-narrow` which gives you access to more options for some currencies (e.g. the canadian dollar with the code `CAD` has the symbol `CA$` and the symbol-narrow `$`).
+
+  ##### Percent pipe
+  - Breaking change
+    - if you don't specify the number of digits to round to, the local format will be used (and it usually rounds numbers to 0 digits, instead of not rounding previously), e.g. `{{ 3.141592 | percent }}` will output `314%` for the locale `en-US` instead of `314.1592%` previously.
+
 
 <a name="4.3.6"></a>
 ## [4.3.6](https://github.com/angular/angular/compare/4.3.5...4.3.6) (2017-08-23)
@@ -98,6 +281,90 @@
 * **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="5.0.0-beta.3"></a>
+# [5.0.0-beta.3](https://github.com/angular/angular/compare/5.0.0-beta.2...5.0.0-beta.3) (2017-08-09)
+
+
+### Bug Fixes
+
+* **animations:** revert container/queried animations accordingly during cancel ([#18516](https://github.com/angular/angular/issues/18516)) ([c0c03dc](https://github.com/angular/angular/commit/c0c03dc))
+* **animations:** support persisting dynamic styles within animation states ([#18468](https://github.com/angular/angular/issues/18468)) ([05472cb](https://github.com/angular/angular/commit/05472cb)), closes [#18423](https://github.com/angular/angular/issues/18423) [#17505](https://github.com/angular/angular/issues/17505)
+* **benchpress:** compile cleanly with TS 2.4 ([#18455](https://github.com/angular/angular/issues/18455)) ([e25b3dd](https://github.com/angular/angular/commit/e25b3dd))
+* **common:** don't recreate view when context shape doesn't change ([#18277](https://github.com/angular/angular/issues/18277)) ([685cc26](https://github.com/angular/angular/commit/685cc26)), closes [#13407](https://github.com/angular/angular/issues/13407)
+* **compiler:** cleanly compile with TypeScript 2.4 ([#18456](https://github.com/angular/angular/issues/18456)) ([7c47b62](https://github.com/angular/angular/commit/7c47b62))
+* **compiler:** ignore [@import](https://github.com/import) in multi-line css ([#18452](https://github.com/angular/angular/issues/18452)) ([1dca575](https://github.com/angular/angular/commit/1dca575)), closes [#18038](https://github.com/angular/angular/issues/18038)
+* **compiler-cli:** disable buggy expression lowering ([#18513](https://github.com/angular/angular/issues/18513)) ([ca695e0](https://github.com/angular/angular/commit/ca695e0))
+* **compiler-cli:** fix and re-enable expression lowering ([#18570](https://github.com/angular/angular/issues/18570)) ([6f2038c](https://github.com/angular/angular/commit/6f2038c)), closes [#18388](https://github.com/angular/angular/issues/18388)
+* **compiler-cli:** modified ngc to throw all errors, not just syntax ([#18388](https://github.com/angular/angular/issues/18388)) ([5651e4a](https://github.com/angular/angular/commit/5651e4a))
+* **compiler-cli:** remove minimist dependency of compiler-cli/index ([#18532](https://github.com/angular/angular/issues/18532)) ([5b7432b](https://github.com/angular/angular/commit/5b7432b))
+* **core:** fix platform-browser-dynamic ([#18576](https://github.com/angular/angular/issues/18576)) ([f0a5501](https://github.com/angular/angular/commit/f0a5501))
+* **core:** forbid destroyed views to be inserted or moved in VC ([#18568](https://github.com/angular/angular/issues/18568)) ([e54bd59](https://github.com/angular/angular/commit/e54bd59)), closes [#17780](https://github.com/angular/angular/issues/17780)
+
+### Features
+
+* **core:** Create StaticInjector which does not depend on Reflect polyfill. ([d9d00bd](https://github.com/angular/angular/commit/d9d00bd))
+* **forms:** add default updateOn values for groups and arrays ([#18536](https://github.com/angular/angular/issues/18536)) ([ff5c58b](https://github.com/angular/angular/commit/ff5c58b))
+* **forms:** add updateOn blur option to FormControls ([#18408](https://github.com/angular/angular/issues/18408)) ([333a708](https://github.com/angular/angular/commit/333a708)), closes [#7113](https://github.com/angular/angular/issues/7113)
+* **forms:** add updateOn submit option to FormControls ([#18514](https://github.com/angular/angular/issues/18514)) ([f69561b](https://github.com/angular/angular/commit/f69561b))
+
+### Performance Improvements
+
+* switch angular to use StaticInjector instead of ReflectiveInjector ([fcadbf4](https://github.com/angular/angular/commit/fcadbf4)), closes [#18496](https://github.com/angular/angular/issues/18496)
+
+
+### BREAKING CHANGES
+
+* `platformXXXX()` no longer accepts providers which depend on reflection.
+Specifically the method signature when from `Provider[]` to
+`StaticProvider[]`.
+
+Example:
+Before:
+```
+[
+  MyClass,
+  {provide: ClassA, useClass: SubClassA}
+]
+
+```
+
+After:
+```
+[
+  {provide: MyClass, deps: [Dep1,...]},
+  {provide: ClassA, useClass: SubClassA, deps: [Dep1,...]}
+]
+```
+
+NOTE: This only applies to platform creation and providers for the JIT
+compiler. It does not apply to `@Component` or `@NgModule` provides
+declarations.
+
+Benchpress note: Previously Benchpress also supported reflective
+provides, which now require static providers.
+
+DEPRECATION:
+
+- `ReflectiveInjector` is now deprecated as it will be remove. Use
+  `Injector.create` as a replacement.
+
+<a name="5.0.0-beta.2"></a>
+# [5.0.0-beta.2](https://github.com/angular/angular/compare/5.0.0-beta.1...5.0.0-beta.2) (2017-08-02)
+
+
+### Bug Fixes
+
+* **compiler:** do not consider arguments when determining recursion ([e64b54b](https://github.com/angular/angular/commit/e64b54b))
+* **compiler:** fix for element needing implicit parent placed in top-level ng-container ([381471d](https://github.com/angular/angular/commit/381471d)), closes [#18314](https://github.com/angular/angular/issues/18314)
+
+
+### Features
+
+* **forms:** add options arg to abstract controls ([ebef5e6](https://github.com/angular/angular/commit/ebef5e6))
+* **router:** add events tracking activation of individual routes ([49cd851](https://github.com/angular/angular/commit/49cd851))
+
+
 <a name="4.3.3"></a>
 ## [4.3.3](https://github.com/angular/angular/compare/4.3.2...4.3.3) (2017-08-02)
 
@@ -105,6 +372,36 @@
 
 * **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 +419,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)
 

WORKSPACE

@@ -1,17 +1,21 @@
 load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 
 git_repository(
-   name = "build_bazel_rules_typescript",
-   remote = "https://github.com/bazelbuild/rules_typescript.git",
-   tag = "0.0.5",
+    name = "build_bazel_rules_nodejs",
+    remote = "https://github.com/bazelbuild/rules_nodejs.git",
+    tag = "0.0.2",
 )
 
-load("@build_bazel_rules_typescript//:defs.bzl", "node_repositories")
+load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")
 
-node_repositories(package_json = "//:package.json")
+node_repositories(package_json = ["//:package.json"])
 
-git_repository(
-    name = "build_bazel_rules_angular",
-    remote = "https://github.com/bazelbuild/rules_angular.git",
-    tag = "0.0.1",
+local_repository(
+    name = "build_bazel_rules_typescript",
+    path = "node_modules/@bazel/typescript",
+)
+
+local_repository(
+    name = "angular",
+    path = "packages/bazel",
 )

aio/content/examples/dependency-injection/e2e-spec.ts

@@ -117,7 +117,7 @@ describe('Dependency Injection Tests', function () {
       expect(element(by.css('#p8')).getText()).toEqual(expectedMsg);
     });
 
-    it('P9 (OpaqueToken) displays as expected', function () {
+    it('P9 (InjectionToken) displays as expected', function () {
       expectedMsg = 'APP_CONFIG Application title is Dependency Injection';
       expect(element(by.css('#p9')).getText()).toEqual(expectedMsg);
     });

aio/content/examples/i18n/src/app/app.locale_data.ts

@@ -0,0 +1,6 @@
+// #docregion import-locale
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+
+registerLocaleData(localeFr);
+// #enddocregion import-locale

aio/content/examples/i18n/src/app/app.locale_data_extra.ts

@@ -0,0 +1,7 @@
+// #docregion import-locale-extra
+import { registerLocaleData } from '@angular/common';
+import localeEnGB from '@angular/common/locales/en-GB';
+import localeEnGBExtra from '@angular/common/locales/extra/en-GB';
+
+registerLocaleData(localeEnGB, localeEnGBExtra);
+// #enddocregion import-locale-extra

aio/content/examples/i18n/src/app/i18n-providers.ts

@@ -1,15 +1,15 @@
 // #docplaster
 // #docregion without-missing-translation
-import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID, MissingTranslationStrategy } from '@angular/core';
+import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID, MissingTranslationStrategy, StaticProvider } from '@angular/core';
 import { CompilerConfig } from '@angular/compiler';
 
-export function getTranslationProviders(): Promise<Object[]> {
+export function getTranslationProviders(): Promise<StaticProvider[]> {
 
   // Get the locale id from the global
   const locale = document['locale'] as string;
 
   // return no providers if fail to get translation file for locale
-  const noProviders: Object[] = [];
+  const noProviders: StaticProvider[] = [];
 
   // No locale or U.S. English: no translation providers
   if (!locale || locale === 'en-US') {

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

@@ -92,22 +92,22 @@
   </div>
 
   <div>
-    The <code>hero.id</code> in the &lt;template *ngIf&gt; disappears:
+    The <code>hero.id</code> in the &lt;ng-template *ngIf&gt; disappears:
     <p>
-      <template *ngIf="showId">
+      <ng-template *ngIf="showId">
         Id: ({{hero.id}})
-      </template>
+      </ng-template>
       Name: {{hero.name}}
     </p>
   </div>
 
   <div>
-    The <code>hero.id</code> in the &lt;template [ngIf]&gt;
+    The <code>hero.id</code> in the &lt;ng-template [ngIf]&gt;
     is unaffected by the <span>p-span</span> CSS:
     <p>
-      <template [ngIf]="showId">
+      <ng-template [ngIf]="showId">
         Id: ({{hero.id}})
-      </template>
+      </ng-template>
       Name: {{hero.name}}
     </p>
   </div>

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

@@ -28,7 +28,7 @@ describe('Pipes', function () {
 
   it('should be able to toggle birthday formats', function () {
     let birthDayEle = element(by.css('hero-birthday2 > p'));
-    expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/1988`);
+    expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/88`);
     let buttonEle = element(by.cssContainingText('hero-birthday2 > button', 'Toggle Format'));
     expect(buttonEle.isDisplayed()).toBe(true);
     buttonEle.click().then(function() {

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,21 +1,18 @@
 // #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';
 
-import { Crisis, CrisisService }  from './crisis.service';
+import { Crisis, CrisisService } from './crisis.service';
 
 @Injectable()
 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

@@ -1,9 +1,8 @@
 // #docplaster
 // #docregion
 import 'rxjs/add/operator/switchMap';
-import { Component, OnInit, HostBinding }   from '@angular/core';
+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 { Component, OnInit }              from '@angular/core';
+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 { Component, OnInit }      from '@angular/core';
+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]">
-          <span class="badge">{{ hero.id }}</span>{{ hero.name }}
-        </a>
-        // #enddocregion nav-to-detail
+      <li *ngFor="let hero of heroes | async"
+        (click)="onSelect(hero)">
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
       </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]">
-          <span class="badge">{{ hero.id }}</span>{{ hero.name }}
-        </a>
+      <li *ngFor="let hero of heroes | async"
+        [class.selected]="isSelected(hero)"
+        (click)="onSelect(hero)">
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
       </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/structural-directives/e2e-spec.ts

@@ -18,9 +18,9 @@ describe('Structural Directives', function () {
     expect(allLis.get(0).getText()).toEqual('Mr. Nice');
   });
 
-  it('ngSwitch have three <happy-hero> instances', function () {
+  it('ngSwitch have two <happy-hero> instances', function () {
     const happyHeroEls = element.all(by.tagName('happy-hero'));
-    expect(happyHeroEls.count()).toEqual(3);
+    expect(happyHeroEls.count()).toEqual(2);
   });
 
   it('should toggle *ngIf="hero" with a button', function () {

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

@@ -55,11 +55,6 @@
 </ng-template>
 <!-- #enddocregion ngif-template -->
 
-<p>template attribute</p>
-<!-- #docregion ngif-template-attr -->
-<div template="ngIf hero">{{hero.name}}</div>
-<!-- #enddocregion ngif-template-attr -->
-
 <hr>
 
 <h2 id="ng-container">&lt;ng-container&gt;</h2>
@@ -131,14 +126,7 @@
 </div>
 
 <!--#enddocregion inside-ngfor -->
-<p class="code">&lt;div template="ngFor let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd"&gt;</p>
-<!--#docregion inside-ngfor -->
-<div template="ngFor let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
-  ({{i}}) {{hero.name}}
-</div>
-
-<!--#enddocregion inside-ngfor -->
-<p class="code">&lt;template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"&gt;</p>
+<p class="code">&lt;ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"/&gt;</p>
 <!--#docregion inside-ngfor -->
 <ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
   <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
@@ -169,16 +157,6 @@
 </div>
 <!-- #enddocregion built-in, ngswitch -->
 
-<h4>NgSwitch with <i>template</i> attribute</h4>
-<!-- #docregion ngswitch-template-attr -->
-<div [ngSwitch]="hero?.emotion">
-  <happy-hero    template="ngSwitchCase 'happy'"    [hero]="hero"></happy-hero>
-  <sad-hero      template="ngSwitchCase 'sad'"      [hero]="hero"></sad-hero>
-  <confused-hero template="ngSwitchCase 'confused'" [hero]="hero"></confused-hero>
-  <unknown-hero  template="ngSwitchDefault"         [hero]="hero"></unknown-hero>
-</div>
-<!-- #enddocregion ngswitch-template-attr -->
-
 <h4>NgSwitch with &lt;ng-template&gt;</h4>
 <!-- #docregion ngswitch-template -->
 <div [ngSwitch]="hero?.emotion">
@@ -199,7 +177,7 @@
 
 <hr>
 
-<h2>&lt;template&gt;</h2>
+<h2>&lt;ng-template&gt;</h2>
 <!-- #docregion template-tag -->
 <p>Hip!</p>
 <ng-template>
@@ -238,13 +216,13 @@
 <p *myUnless="condition">Show this sentence unless the condition is true.</p>
 <!-- #enddocregion myUnless-1 -->
 
-<p template="myUnless condition" class="code unless">
-  (A) &lt;p template="myUnless condition" class="code unless"&gt;
+<p *myUnless="condition" class="code unless">
+  (A) &lt;p *myUnless="condition" class="code unless"&gt;
 </p>
 
 <ng-template [myUnless]="condition">
   <p class="code unless">
-    (A) &lt;template [myUnless]="condition"&gt;
+    (A) &lt;ng-template [myUnless]="condition"&gt;
   </p>
 </ng-template>
 

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

@@ -19,8 +19,7 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
  * ### Syntax
  *
  * - `<div *myUnless="condition">...</div>`
- * - `<div template="myUnless condition">...</div>`
- * - `<template [myUnless]="condition"><div>...</div></template>`
+ * - `<ng-template [myUnless]="condition"><div>...</div></ng-template>`
  *
 // #docregion no-docs
  */

aio/content/examples/template-syntax/src/app/app.component.html

@@ -78,11 +78,11 @@
 
 <p>Template input variable expression context (let hero)</p>
 <!-- template hides the following; plenty of examples later -->
-<template>
+<ng-template>
   <!-- #docregion context-var -->
   <div *ngFor="let hero of heroes">{{hero.name}}</div>
   <!-- #enddocregion context-var -->
-</template>
+</ng-template>
 
 <p>Template reference variable expression context (#heroInput)</p>
 <div (keyup)="0" class="context">

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/guide/browser-support.md

@@ -347,7 +347,7 @@ Here are the features which may require additional polyfills:
 
     <td>
 
-    [Date](api/common/DatePipe), [currency](api/common/CurrencyPipe), [decimal](api/common/DecimalPipe) and [percent](api/common/PercentPipe) pipes
+    If you use the following deprecated i18n pipes: [date](api/common/DeprecatedDatePipe), [currency](api/common/DeprecatedCurrencyPipe), [decimal](api/common/DeprecatedDecimalPipe) and [percent](api/common/DeprecatedPercentPipe)
     </td>
 
     <td>

aio/content/guide/i18n.md

@@ -40,6 +40,28 @@ You need to build and deploy a separate version of the application for each supp
 
 {@a i18n-attribute}
 
+## i18n pipes
+
+Angular pipes can help you with internationalization: the `DatePipe`, `CurrencyPipe`, `DecimalPipe`
+and `PercentPipe` use locale data to format your data based on your `LOCALE_ID`.
+
+By default Angular only contains locale data for the language `en-US`, if you set the value of
+`LOCALE_ID` to another locale, you will have to import new locale data for this language:
+
+<code-example path="i18n/src/app/app.locale_data.ts" region="import-locale" title="src/app/app.locale_data.ts" linenums="false">
+</code-example>
+
+<div class="l-sub-section">
+
+Note that the files in `@angular/common/locales` contain most of the locale data that you will
+need, but some advanced formatting options might only be available in the extra dataset that you can
+import from `@angular/common/locales/extra`:
+
+<code-example path="i18n/src/app/app.locale_data_extra.ts" region="import-locale-extra" title="src/app/app.locale_data_extra.ts" linenums="false">
+</code-example>
+
+</div>
+
 ## Mark text with the _i18n_ attribute
 
 The Angular `i18n` attribute is a marker for translatable content.

aio/content/guide/language-service.md

@@ -0,0 +1,176 @@
+# Angular Language Service
+
+The Angular Language Service is a way to get completions, errors, 
+hints, and navigation inside your Angular templates whether they 
+are external in an HTML file or embedded in annotations/decorators 
+in a string. The Angular Language Service autodetects that you are 
+opening an Angular file, reads your `tsconfig.json` file, finds all the 
+templates you have in your application, and then provides language 
+services for any templates that you open.
+
+
+## Autocompletion
+
+Autocompletion can speed up your development time by providing you with 
+contextual possibilities and hints as you type. This example shows 
+autocomplete in an interpolation. As you type it out, 
+you can hit tab to complete.
+
+<figure>
+  <img src="generated/images/guide/language-service/language-completion.gif" alt="autocompletion">
+</figure>
+
+There are also completions within 
+elements. Any elements you have as a component selector will 
+show up in the completion list.
+
+## Error checking
+
+The Angular Language Service can also forewarn you of mistakes in your code. 
+In this example, Angular doesn't know what `orders` is or where it comes from. 
+
+<figure>
+  <img src="generated/images/guide/language-service/language-error.gif" alt="error checking">
+</figure>
+
+## Navigation
+
+Navigation allows you to hover to 
+see where a component, directive, module, etc. is from and then 
+click and press F12 to go directly to its definition.
+
+<figure>
+  <img src="generated/images/guide/language-service/language-navigation.gif" alt="navigation">
+</figure>
+
+
+## Angular Language Service in your editor
+
+Angular Language Service is currently available for [Visual Studio Code](https://code.visualstudio.com/) and 
+[WebStorm](https://www.jetbrains.com/webstorm). 
+
+### Visual Studio Code
+
+In Visual Studio Code, install Angular Language Service from the store, 
+which is accessible from the bottom icon on the left menu pane. 
+You can also use the VS Quick Open (⌘+P) to search for the extension. When you've opened it, 
+enter the following command: 
+
+```sh
+ext install ng-template
+```
+
+Then click the install button to install the Angular Language Service. 
+
+
+### WebStorm
+
+In webstorm, you have to install the language service as a dev dependency. 
+When Angular sees this dev dependency, it provides the 
+language service inside of WebStorm. Webstorm then gives you 
+colorization inside the template and autocomplete in addition to the Angular Language Service.
+
+Here's the dev dependency 
+you need to have in `package.json`:
+
+```json
+
+devDependencies {
+	"@angular/language-service": "^4.0.0"
+}
+```
+
+Then in the terminal window at the root of your project, 
+install the `devDependencies` with `npm` or `yarn`: 
+
+```sh
+npm install 
+```
+*OR* 
+
+```sh
+yarn
+```
+
+*OR* 
+
+```sh
+yarn install
+```
+
+
+### Sublime Text
+
+In [Sublime Text](https://www.sublimetext.com/), you first need an extension to allow Typescript. 
+Install the latest version of typescript in a local `node_modules` directory:
+
+```sh
+npm install --save-dev typescript
+```
+
+Then install the Angular Language Service in the same location:
+```sh
+npm install --save-dev @angular/language-service
+```
+
+Starting with TypeScript 2.3, TypeScript has a language service plugin model that the language service can use. 
+
+Next, in your user preferences (`Cmd+,` or `Ctrl+,`), add:
+
+```json
+"typescript-tsdk": "<path to your folder>/node_modules/typescript/lib"
+```
+
+
+## Installing in your project
+
+You can also install Angular Language Service in your project with the 
+following `npm` command:
+
+```sh
+npm install --save-dev @angular/language-service
+```
+Additionally, add the following to the `"compilerOptions"` section of 
+your project's `tsconfig.json`.
+
+```json
+  "plugins": [
+      {"name": "@angular/language-service"}
+  ]
+```
+Note that this only provides diagnostics and completions in `.ts` 
+files. You need a custom sublime plugin (or modifications to the current plugin) 
+for completions in HTML files.
+
+
+## How the Language Service works
+
+When you use an editor with a language service, there's an 
+editor process which starts a separate language process/service 
+to which it speaks through an [RPC](https://en.wikipedia.org/wiki/Remote_procedure_call). 
+Any time you type inside of the editor, it sends information to the other process to 
+track the state of your project. When you trigger a completion list within a template, the editor process first parses the template into an HTML AST, or [abstract syntax tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree). Then the Angular compiler interprets 
+what module the template is part of, the scope you're in, and the component selector. Then it figures out where in the template AST your cursor is. When it determines the 
+context, it can then determine what the children can be.
+
+It's a little more involved if you are in an interpolation. If you have an interpolation of `{{data.---}}` inside a `div` and need the completion list after `data.---`, the compiler can't use the HTML AST to find the answer. The HTML AST can only tell the compiler that there is some text with the characters "`{{data.---}}`". That's when the template parser produces an expression AST, which resides within the template AST. The Angular Language Services then looks at `data.---` within its context and asks the TypeScript Language Service what the members of data are. TypeScript then returns the list of possibilities.
+
+
+For more in-depth information, see the 
+[Angular Language Service API](https://github.com/angular/angular/blob/master/packages/language-service/src/types.ts)
+
+
+
+
+
+
+
+
+<hr>
+
+## More on Information
+
+For more information, see [Chuck Jazdzewski's presentation](https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s) on the Angular Language 
+Service from [ng-conf](https://www.ng-conf.org/) 2017.
+
+

aio/content/guide/metadata.md

@@ -16,7 +16,7 @@ In the following example, the `@Component()` metadata object and the class const
 ```typescript
 @Component({
   selector: 'app-typical',
-  template: 'div>A typical component for {{data.name}}</div>
+  template: '<div>A typical component for {{data.name}}</div>'
 )}
 export class TypicalComponent {
   @Input() data: TypicalData;
@@ -280,13 +280,7 @@ Most importantly, the compiler only generates code to create instances of certai
 
 ### New instances
 
-The compiler only allows metadata that create instances of these Angular classes.
-
-Class            | Module
------------------|--------------
-`OpaqueToken`    | `@angular/core`
-`InjectionToken` | `@angular/core`
-
+The compiler only allows metadata that create instances of the class `InjectionToken` from `@angular/core`.
 
 ### Annotations/Decorators
 

aio/content/guide/pipes.md

@@ -46,24 +46,6 @@ Inside the interpolation expression, you flow the component's `birthday` value t
 function on the right. All pipes work this way.
 
 
-<div class="l-sub-section">
-
-
-
-The `Date` and `Currency` pipes need the *ECMAScript Internationalization API*.
-Safari and other older browsers don't support it. You can add support with a polyfill.
-
-
-<code-example language="html">
-  &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"&gt;&lt;/script&gt;
-
-</code-example>
-
-
-
-</div>
-
-
 
 
 ## Built-in pipes

aio/content/guide/router.md

@@ -204,149 +204,6 @@ application using the `Router` service and the `routerState` property.
 Each `ActivatedRoute` in the `RouterState` provides methods to traverse up and down the route tree
 to get information from parent, child and sibling routes.
 
-{@a activated-route}
-
-
-### Activated route
-
-The route path and parameters are available through an injected router service called the
-[ActivatedRoute](api/router/ActivatedRoute).
-It has a great deal of useful information including:
-
-<table>
-  <tr>
-    <th>
-      Property
-    </th>
-
-    <th>
-      Description
-    </th>
-  </tr>
-
-  <tr>
-    <td>
-      <code>url</code>
-    </td>
-    <td>
-
-    An `Observable` of the route path(s), represented as an array of strings for each part of the route path.
-
-    </td>
-  </tr>
-
-  <tr>
-    <td>
-      <code>data</code>
-    </td>
-    <td>
-
-    An `Observable` that contains the `data` object provided for the route. Also contains any resolved values from the [resolve guard](#resolve-guard).
-
-    </td>
-  </tr>
-
-  <tr>
-    <td>
-      <code>paramMap</code>
-    </td>
-    <td>
-
-    An `Observable` that contains a [map](api/router/ParamMap) of the required and [optional parameters](#optional-route-parameters) specific to the route. The map supports retrieving single and multiple values from the same parameter.
-
-    </td>
-  </tr>
-
-  <tr>
-    <td>
-      <code>queryParamMap</code>
-    </td>
-    <td>
-
-    An `Observable` that contains a [map](api/router/ParamMap) of the [query parameters](#query-parameters) available to all routes.
-    The map supports retrieving single and multiple values from the query parameter.
-
-    </td>
-  </tr>
-
-  <tr>
-    <td>
-      <code>fragment</code>
-    </td>
-    <td>
-
-    An `Observable` of the URL [fragment](#fragment) available to all routes.
-
-    </td>
-  </tr>
-
-  <tr>
-    <td>
-      <code>outlet</code>
-    </td>
-    <td>
-
-    The name of the `RouterOutlet` used to render the route. For an unnamed outlet, the outlet name is _primary_.
-
-    </td>
-  </tr>
-
-  <tr>
-    <td>
-      <code>routeConfig</code>
-    </td>
-    <td>
-
-    The route configuration used for the route that contains the origin path.
-
-    </td>
-  </tr>
-
-    <tr>
-    <td>
-      <code>parent</code>
-    </td>
-    <td>
-
-    The route's parent `ActivatedRoute` when this route is a [child route](#child-routing-component).
-
-    </td>
-  </tr>
-
-  <tr>
-    <td>
-      <code>firstChild</code>
-    </td>
-    <td>
-
-    Contains the first `ActivatedRoute` in the list of this route's child routes.
-
-    </td>
-  </tr>
-
-  <tr>
-    <td>
-      <code>children</code>
-    </td>
-    <td>
-
-    Contains all the [child routes](#child-routing-component) activated under the current route.
-
-    </td>
-  </tr>
-</table>
-
-<div class="l-sub-section">
-
-Two older properties are still available. They are less capable than their replacements, discouraged, and may be deprecated in a future Angular version.
-
-**`params`** &mdash; An `Observable` that contains the required and [optional parameters](#optional-route-parameters) specific to the route. Use `paramMap` instead.
-
-**`queryParams`** &mdash; An `Observable` that contains the [query parameters](#query-parameters) available to all routes.
-Use `queryParamMap` instead.
-
-</div>
-
 ### Router events
 
 During each navigation, the `Router` emits navigation events through the `Router.events` property. These events range from when the navigation starts and ends to many points in between. The full list of navigation events is displayed in the table below.
@@ -390,7 +247,7 @@ During each navigation, the `Router` emits navigation events through the `Router
     </td>
     <td>
 
-      An [event](api/router/RouteConfigLoadStart) triggered before the `Router`
+      An [event](api/router/RouteConfigLoadStart) triggered before the `Router` 
       [lazy loads](#asynchronous-routing) a route configuration.
 
     </td>
@@ -424,7 +281,7 @@ During each navigation, the `Router` emits navigation events through the `Router
     </td>
     <td>
 
-      An [event](api/router/NavigationCancel) triggered when navigation is canceled.
+      An [event](api/router/NavigationCancel) triggered when navigation is canceled. 
       This is due to a [Route Guard](#guards) returning false during navigation.
 
     </td>
@@ -1067,7 +924,7 @@ When the application launches, the initial URL in the browser bar is something l
   localhost:3000
 </code-example>
 
-That doesn't match any of the concrete configured routes which means
+That doesn't match any of the concrete configured routes which means 
 the router falls through to the wildcard route and displays the `PageNotFoundComponent`.
 
 The application needs a **default route** to a valid page.
@@ -1476,7 +1333,7 @@ Create a new `heroes-routing.module.ts` in the `heroes` folder
 using the same techniques you learned while creating the `AppRoutingModule`.
 
 
-<code-example path="router/src/app/heroes/heroes-routing.module.1.ts" title="src/app/heroes/heroes-routing.module.ts">
+<code-example path="router/src/app/heroes/heroes-routing.module.ts" title="src/app/heroes/heroes-routing.module.ts">
 
 </code-example>
 
@@ -1646,7 +1503,7 @@ Return to the `HeroesRoutingModule` and look at the route definitions again.
 The route to `HeroDetailComponent` has a twist.
 
 
-<code-example path="router/src/app/heroes/heroes-routing.module.1.ts" linenums="false" title="src/app/heroes/heroes-routing.module.ts (excerpt)" region="hero-detail-route">
+<code-example path="router/src/app/heroes/heroes-routing.module.ts" linenums="false" title="src/app/heroes/heroes-routing.module.ts (excerpt)" region="hero-detail-route">
 
 </code-example>
 
@@ -1690,6 +1547,52 @@ a route for some other hero.
 </div>
 
 
+
+{@a navigate}
+
+
+### Navigate to hero detail imperatively
+
+Users *will not* navigate to the detail component by clicking a link
+so you won't add a new `RouterLink` anchor tag to the shell.
+
+Instead, when the user *clicks* a hero in the list, you'll ask the router
+to navigate to the hero detail view for the selected hero.
+
+Start in the `HeroListComponent`.
+Revise its constructor so that it acquires the `Router` and the `HeroService` by dependency injection:
+
+
+<code-example path="router/src/app/heroes/hero-list.component.1.ts" linenums="false" title="src/app/heroes/hero-list.component.ts (constructor)" region="ctor">
+
+</code-example>
+
+
+
+Make the following few changes to the component's template:
+
+
+<code-example path="router/src/app/heroes/hero-list.component.1.ts" linenums="false" title="src/app/heroes/hero-list.component.ts (template)" region="template">
+
+</code-example>
+
+
+
+The template defines an `*ngFor` repeater such as [you've seen before](guide/displaying-data#ngFor).
+There's a `(click)` [event binding](guide/template-syntax#event-binding) to the component's
+`onSelect` method which you implement as follows:
+
+
+<code-example path="router/src/app/heroes/hero-list.component.1.ts" linenums="false" title="src/app/heroes/hero-list.component.ts (select)" region="select">
+
+</code-example>
+
+
+
+The component's `onSelect` calls the router's **`navigate`** method with a _link parameters array_.
+You can use this same syntax in a `RouterLink` if you decide later to navigate in HTML template rather than in component code.
+
+
 {@a route-parameters}
 
 
@@ -1726,9 +1629,152 @@ the `HeroDetailComponent` via the `ActivatedRoute` service.
 
 </div>
 
+
+
 {@a activated-route}
 
-### _Activated Route_ in action
+
+### ActivatedRoute: the one-stop-shop for route information
+
+The route path and parameters are available through an injected router service called the
+[ActivatedRoute](api/router/ActivatedRoute).
+It has a great deal of useful information including:
+
+<table>
+  <tr>
+    <th>
+      Property
+    </th>
+
+    <th>
+      Description
+    </th>
+  </tr>
+
+  <tr>
+    <td>
+      <code>url</code>
+    </td>
+    <td>
+
+    An `Observable` of the route path(s), represented as an array of strings for each part of the route path.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>data</code>
+    </td>
+    <td>
+
+    An `Observable` that contains the `data` object provided for the route. Also contains any resolved values from the [resolve guard](#resolve-guard).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>paramMap</code>
+    </td>
+    <td>
+
+    An `Observable` that contains a [map](api/router/ParamMap) of the required and [optional parameters](#optional-route-parameters) specific to the route. The map supports retrieving single and multiple values from the same parameter.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>queryParamMap</code>
+    </td>
+    <td>
+
+    An `Observable` that contains a [map](api/router/ParamMap) of the [query parameters](#query-parameters) available to all routes. 
+    The map supports retrieving single and multiple values from the query parameter.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>fragment</code>
+    </td>
+    <td>
+
+    An `Observable` of the URL [fragment](#fragment) available to all routes.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>outlet</code>
+    </td>
+    <td>
+
+    The name of the `RouterOutlet` used to render the route. For an unnamed outlet, the outlet name is _primary_.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>routeConfig</code>
+    </td>
+    <td>
+
+    The route configuration used for the route that contains the origin path.
+
+    </td>
+  </tr>
+
+    <tr>
+    <td>
+      <code>parent</code>
+    </td>
+    <td>
+
+    The route's parent `ActivatedRoute` when this route is a [child route](#child-routing-component).
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>firstChild</code>
+    </td>
+    <td>
+
+    Contains the first `ActivatedRoute` in the list of this route's child routes.
+
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      <code>children</code>
+    </td>
+    <td>
+
+    Contains all the [child routes](#child-routing-component) activated under the current route.
+
+    </td>
+  </tr>
+</table>
+
+<div class="l-sub-section">
+
+Two older properties are still available. They are less capable than their replacements, discouraged, and may be deprecated in a future Angular version.
+
+**`params`** &mdash; An `Observable` that contains the required and [optional parameters](#optional-route-parameters) specific to the route. Use `paramMap` instead.
+
+**`queryParams`** &mdash; An `Observable` that contains the [query parameters](#query-parameters) available to all routes. 
+Use `queryParamMap` instead.
+
+</div>
+
+#### _Activated Route_ in action
 
 Import the `Router`, `ActivatedRoute`, and `ParamMap` tokens from the router package.
 
@@ -1767,19 +1813,20 @@ pull the hero `id` from the parameters and retrieve the hero to display.
 
 </code-example>
 
-The `paramMap` processing is a bit tricky. When the map changes, you `get()`
+The `paramMap` processing is a bit tricky. When the map changes, you `get()` 
 the `id` parameter from the changed parameters.
 
-Then you tell the `HeroService` to fetch the hero with that `id` and return the result of the `HeroService` request.
+Then you tell the `HeroService` to fetch the hero with that `id` and return the result of the `HeroService` request. 
 
 You might think to use the RxJS `map` operator.
 But the `HeroService` returns an `Observable<Hero>`.
+Your subscription wants the `Hero`, not an `Observable<Hero>`.
 So you flatten the `Observable` with the `switchMap` operator instead.
 
 The `switchMap` operator also cancels previous in-flight requests. If the user re-navigates to this route
 with a new `id` while the `HeroService` is still retrieving the old `id`, `switchMap` discards that old request and returns the hero for the new `id`.
 
-The observable `Subscription` will be handled by the `AsyncPipe` and the component's `hero` property will be (re)set with the retrieved hero.
+Finally, you activate the observable with `subscribe` method and (re)set the component's `hero` property with the retrieved hero.
 
 #### _ParamMap_ API
 
@@ -1814,7 +1861,7 @@ to handle parameter access for both route parameters (`paramMap`) and query para
     </td>
     <td>
 
-    Returns the parameter name value (a `string`) if present, or `null` if the parameter name is not in the map. Returns the _first_ element if the parameter value is actually an array of values.
+    Returns the parameter name value (a `string`) if present, or `null` if the parameter name is not in the map. Returns the _first_ element if the parameter value is actually an array of values. 
 
     </td>
   </tr>
@@ -2007,7 +2054,7 @@ The router embedded the `id` value in the navigation URL because you had defined
 as a route parameter with an `:id` placeholder token in the route `path`:
 
 
-<code-example path="router/src/app/heroes/heroes-routing.module.1.ts" linenums="false" title="src/app/heroes/heroes-routing.module.ts (hero-detail-route)" region="hero-detail-route">
+<code-example path="router/src/app/heroes/heroes-routing.module.ts" linenums="false" title="src/app/heroes/heroes-routing.module.ts (hero-detail-route)" region="hero-detail-route">
 
 </code-example>
 
@@ -2143,9 +2190,17 @@ Then you inject the `ActivatedRoute` in the `HeroListComponent` constructor.
 The `ActivatedRoute.paramMap` property is an `Observable` map of route parameters. The `paramMap` emits a new map of values that includes `id`
 when the user navigates to the component. In `ngOnInit` you subscribe to those values, set the `selectedId`, and get the heroes.
 
+Add an `isSelected` method that returns `true` when a hero's `id` matches the selected `id`.
 
-Update the template with a [class binding](guide/template-syntax#class-binding).
-The binding adds the `selected` CSS class when the comparison returns `true` and removes it when `false`.
+
+<code-example path="router/src/app/heroes/hero-list.component.ts" linenums="false" title="src/app/heroes/hero-list.component.ts (isSelected)" region="isSelected">
+
+</code-example>
+
+
+
+Finally, update the template with a [class binding](guide/template-syntax#class-binding) to that `isSelected` method.
+The binding adds the `selected` CSS class when the method returns `true` and removes it when `false`.
 Look for it within the repeated `<li>` tag as shown here:
 
 
@@ -2384,7 +2439,7 @@ Here are the relevant files for this version of the sample application.
 
   </code-pane>
 
-  <code-pane title="heroes-routing.module.ts" path="router/src/app/heroes/heroes-routing.module.1.ts">
+  <code-pane title="heroes-routing.module.ts" path="router/src/app/heroes/heroes-routing.module.ts">
 
   </code-pane>
 
@@ -2638,15 +2693,40 @@ The router then calculates the target URL based on the active route's location.
 {@a nav-to-crisis}
 
 
-### Navigate to crisis list with a relative URL
+### Navigate to crisis detail with a relative URL
+
+Update the *Crisis List* `onSelect` method to use relative navigation so you don't have
+to start from the top of the route configuration.
 
 You've already injected the `ActivatedRoute` that you need to compose the relative navigation path.
 
-When using a `RouterLink` to navigate instead of the `Router` service, you'd use the _same_
+<code-example path="router/src/app/crisis-center/crisis-list.component.ts" linenums="false" title="src/app/crisis-center/crisis-list.component.ts (constructor)" region="ctor">
+
+</code-example>
+
+
+
+When you visit the *Crisis Center*, the ancestor path is `/crisis-center`,
+so you only need to add the `id` of the *Crisis Center* to the existing path.
+
+
+<code-example path="router/src/app/crisis-center/crisis-list.component.ts" linenums="false" title="src/app/crisis-center/crisis-list.component.ts (relative navigation)" region="onSelect">
+
+</code-example>
+
+
+
+If you were using a `RouterLink` to navigate instead of the `Router` service, you'd use the _same_
 link parameters array, but you wouldn't provide the object with the `relativeTo` property.
 The `ActivatedRoute` is implicit in a `RouterLink` directive.
 
 
+<code-example path="router/src/app/crisis-center/crisis-list.component.1.ts" linenums="false" title="src/app/crisis-center/crisis-list.component.ts (relative routerLink)" region="relative-navigation-router-link">
+
+</code-example>
+
+
+
 Update the `gotoCrises` method of the `CrisisDetailComponent` to navigate back to the *Crisis Center* list using relative path navigation.
 
 
@@ -2655,6 +2735,7 @@ Update the `gotoCrises` method of the `CrisisDetailComponent` to navigate back t
 </code-example>
 
 
+
 Notice that the path goes up a level using the `../` syntax.
 If the current crisis `id` is `3`, the resulting path back to the crisis list is  `/crisis-center/;id=3;foo=foo`.
 
@@ -3334,7 +3415,8 @@ is like waiting for the server asynchronously.
 
 The `DialogService`, provided in the `AppModule` for app-wide use, does the asking.
 
-It returns an `Observable` that *resolves* when the user eventually decides what to do: either
+It returns a [promise](http://exploringjs.com/es6/ch_promises.html) that
+*resolves* when the user eventually decides what to do: either
 to discard changes and navigate away (`true`) or to preserve the pending changes and stay in the crisis editor (`false`).
 
 
@@ -3459,12 +3541,8 @@ Be explicit. Implement the `Resolve` interface with a type of `Crisis`.
 Inject the `CrisisService` and `Router` and implement the `resolve()` method.
 That method could return a `Promise`, an `Observable`, or a synchronous return value.
 
-The `CrisisService.getCrisis` method returns an Observable.
-Return that observable to prevent the route from loading until the data is fetched.
-The `Router` guards require an Observable to `complete`, meaning it has emitted all
-of its values. You use the `take` operator with an argument of `1` to ensure that the
-Observable completes after retrieving the first value from the Observable returned by the
-`getCrisis` method.
+The `CrisisService.getCrisis` method returns a promise.
+Return that promise to prevent the route from loading until the data is fetched.
 If it doesn't return a valid `Crisis`, navigate the user back to the `CrisisListComponent`,
 canceling the previous in-flight navigation to the `CrisisDetailComponent`.
 
@@ -3502,15 +3580,12 @@ The router looks for that method and calls it if found.
 Don't worry about all the ways that the user  could navigate away.
 That's the router's job. Write this class and let the router take it from there.
 
-1. The Observable provided to the Router _must_ complete.
-If the Observable does not complete, the navigation will not continue.
-
 The relevant *Crisis Center* code for this milestone follows.
 
 
 <code-tabs>
 
-  <code-pane title="app.component.ts" path="router/src/app/app.component.6.ts">
+  <code-pane title="app.component.ts" path="router/src/app/app.component.ts">
 
   </code-pane>
 
@@ -3966,52 +4041,6 @@ Verify this by logging in to the `Admin` feature area and noting that the `crisi
 It's also logged to the browser's console.
 
 
-{@a redirect-advanced}
-
-## Migrating URLs with Redirects
-
-You've setup the routes for navigating around your application. You've used navigation imperatively and declaratively to many different routes. But like any application, requirements change over time. You've setup links and navigation to `/heroes` and `/hero/:id` from the `HeroListComponent` and `HeroDetailComponent` components. If there was a requirement that links to `heroes` become `superheroes`, you still want the previous URLs to navigate correctly. You also don't want to go and update every link in your application, so redirects makes refactoring routes trivial.
-
-
-{@a url-refactor}
-
-### Changing /heroes to /superheroes
-
-Let's take the `Hero` routes and migrate them to new URLs. The `Router` checks for redirects in your configuration before navigating, so each redirect is triggered when needed. To support this change, you'll add redirects from the old routes to the new routes in the `heroes-routing.module`.
-
-<code-example path="router/src/app/heroes/heroes-routing.module.ts" linenums="false" title="src/app/heroes/heroes-routing.module.ts (heroes redirects)">
-
-</code-example>
-
-
-You'll notice two different types of redirects. The first change is from  `/heroes` to `/superheroes` without any parameters. This is a straightforward redirect, unlike the change from `/hero/:id` to `/superhero/:id`, which includes the `:id` route parameter. Router redirects also use powerful pattern matching, so the `Router` inspects the URL and replaces route parameters in the `path` with their appropriate destination. Previously, you navigated to a URL such as `/hero/15` with a route parameter `id` of `15`.
-
-<div class="l-sub-section">
-
-The `Router` also supports [query parameters](#query-parameters) and the [fragment](#fragment) when using redirects.
-
-* When using absolute redirects, the `Router` will use the query parameters and the fragment from the redirectTo in the route config.
-* When using relative redirects, the `Router` use the query params and the fragment from the source URL.
-
-</div>
-
-Before updating the `app-routing.module.ts`, you'll need to consider an important rule. Currently, our empty path route redirects to `/heroes`, which redirects to `/superheroes`. This _won't_ work and is by design as the `Router` handles redirects once at each level of routing configuration. This prevents chaining of redirects, which can lead to endless redirect loops.
-
-So instead, you'll update the empty path route in `app-routing.module.ts` to redirect to `/superheroes`.
-
-<code-example path="router/src/app/app-routing.module.ts" linenums="false" title="src/app/app-routing.module.ts (superheroes redirect)">
-
-</code-example>
-
-Since `RouterLink`s aren't tied to route configuration, you'll need to update the associated router links so they remain active when the new route is active. You'll update the `app.component.ts` template for the `/heroes` routerLink.
-
-<code-example path="router/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (superheroes active routerLink)">
-
-</code-example>
-
-With the redirects setup, all previous routes now point to their new destinations and both URLs still function as intended.
-
-
 {@a inspect-config}
 
 

aio/content/guide/structural-directives.md

@@ -208,17 +208,7 @@ Here is `*ngIf` displaying the hero's name if `hero` exists.
 
 
 The asterisk is "syntactic sugar" for something a bit more complicated.
-Internally, Angular desugars it in two stages.
-First, it translates the `*ngIf="..."` into a template _attribute_, `template="ngIf ..."`,  like this.
-
-
-<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngif-template-attr)" region="ngif-template-attr">
-
-</code-example>
-
-
-
-Then it translates the template _attribute_ into a `<ng-template>` _element_, wrapped around the host element, like this.
+Internally, Angular translates the `*ngIf` _attribute_ into a `<ng-template>` _element_, wrapped around the host element, like this.
 
 
 <code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngif-template)" region="ngif-template">
@@ -230,8 +220,7 @@ Then it translates the template _attribute_ into a `<ng-template>` _element_, wr
 * The `*ngIf` directive moved to the `<ng-template>` element where it became a property binding,`[ngIf]`.
 * The rest of the `<div>`, including its class attribute, moved inside the `<ng-template>` element.
 
-None of these forms are actually rendered.
-Only the finished product ends up in the DOM.
+The first form is not actually rendered, only the finished product ends up in the DOM.
 
 
 <figure>
@@ -252,10 +241,9 @@ The [`NgFor`](guide/structural-directives#ngFor) and [`NgSwitch...`](guide/struc
 
 ## Inside _*ngFor_
 
-Angular transforms the `*ngFor` in similar fashion from asterisk (*) syntax through
-template _attribute_ to `<ng-template>` _element_.
+Angular transforms the `*ngFor` in similar fashion from asterisk (*) syntax to `<ng-template>` _element_.
 
-Here's a full-featured application of `NgFor`, written all three ways:
+Here's a full-featured application of `NgFor`, written both ways:
 
 
 <code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (inside-ngfor)" region="inside-ngfor">
@@ -313,7 +301,7 @@ It's intended source is implicit.
 Angular sets `let-hero` to the value of the context's `$implicit` property
 which `NgFor` has initialized with the hero for the current iteration.
 
-* The [API guide](api/common/NgFor "API: NgFor")
+* The [API guide](api/common/NgForOf "API: NgFor")
 describes additional `NgFor` directive properties and context properties.
 
 These microsyntax mechanisms are available to you when you write your own structural directives.
@@ -415,16 +403,7 @@ The `<unknown-hero>` is the host element for the `*ngSwitchDefault`.
 
 
 As with other structural directives, the `NgSwitchCase` and `NgSwitchDefault`
-can be desugared into the template _attribute_ form.
-
-
-<code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngswitch-template-attr)" region="ngswitch-template-attr">
-
-</code-example>
-
-
-
-That, in turn, can be desugared into the `<ng-template>` element form.
+can be desugared into the `<ng-template>` element form.
 
 
 <code-example path="structural-directives/src/app/app.component.html" linenums="false" title="src/app/app.component.html (ngswitch-template)" region="ngswitch-template">
@@ -438,7 +417,7 @@ That, in turn, can be desugared into the `<ng-template>` element form.
 
 ## Prefer the asterisk (*) syntax.
 
-The asterisk (*) syntax is more clear than the other desugared forms.
+The asterisk (*) syntax is more clear than the desugared form.
 Use [&lt;ng-container&gt;](guide/structural-directives#ng-container) when there's no single element
 to host the directive.
 

aio/content/guide/template-syntax.md

@@ -1361,8 +1361,8 @@ to group elements when there is no suitable host element for the directive.
 _This_ section is an introduction to the common structural directives:
 
 * [`NgIf`](guide/template-syntax#ngIf) - conditionally add or remove an element from the DOM
-* [`NgFor`](guide/template-syntax#ngFor) - repeat a template for each item in a list
 * [`NgSwitch`](guide/template-syntax#ngSwitch) - a set of directives that switch among alternative views
+* [NgForOf](guide/template-syntax#ngFor) - repeat a template for each item in a list
 
 <hr/>
 
@@ -1437,18 +1437,18 @@ described below.
 
 {@a ngFor}
 
-### NgFor
+### NgForOf
 
-`NgFor` is a _repeater_ directive &mdash; a way to present a list of items.
+`NgForOf` is a _repeater_ directive &mdash; a way to present a list of items.
 You define a block of HTML that defines how a single item should be displayed.
 You tell Angular to use that block as a template for rendering each item in the list.
 
-Here is an example of `NgFor` applied to a simple `<div>`:
+Here is an example of `NgForOf` applied to a simple `<div>`:
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgFor-1" title="src/app/app.component.html" linenums="false">
 </code-example>
 
-You can also apply an `NgFor` to a component element, as in this example:
+You can also apply an `NgForOf` to a component element, as in this example:
 
 <code-example path="template-syntax/src/app/app.component.html" region="NgFor-2" title="src/app/app.component.html" linenums="false">
 </code-example>
@@ -1485,10 +1485,10 @@ Learn about the _microsyntax_ in the [_Structural Directives_](guide/structural-
 ### Template input variables
 
 The `let` keyword before `hero` creates a _template input variable_ called `hero`.
-The `ngFor` directive iterates over the `heroes` array returned by the parent component's `heroes` property
+The `NgForOf` directive iterates over the `heroes` array returned by the parent component's `heroes` property
 and sets `hero` to the current item from the array during each iteration.
 
-You reference the `hero` input variable within the `ngFor` host element
+You reference the `hero` input variable within the `NgForOf` host element
 (and within its descendents) to access the hero's properties.
 Here it is referenced first in an interpolation
 and then passed in a binding to the `hero` property of the `<hero-detail>` component.
@@ -1501,7 +1501,7 @@ Learn more about _template input variables_ in the
 
 #### *ngFor with _index_
 
-The `index` property of the `NgFor` directive context  returns the zero-based index of the item in each iteration.
+The `index` property of the `NgForOf` directive context returns the zero-based index of the item in each iteration.
 You can capture the `index` in a template input variable and use it in the template.
 
 The next example captures the `index` in a variable named `i` and displays it with the hero name like this.
@@ -1511,8 +1511,8 @@ The next example captures the `index` in a variable named `i` and displays it wi
 
 <div class="l-sub-section">
 
-Learn about the other `NgFor` context values such as `last`, `even`,
-and `odd` in the [NgFor API reference](api/common/NgFor).
+Learn about the other `NgForOf` context values such as `last`, `even`,
+and `odd` in the [NgForOf API reference](api/common/NgForOf).
 
 </div>
 
@@ -1520,7 +1520,7 @@ and `odd` in the [NgFor API reference](api/common/NgFor).
 
 #### *ngFor with _trackBy_
 
-The `NgFor` directive may perform poorly, especially with large lists.
+The `NgForOf` directive may perform poorly, especially with large lists.
 A small change to one item, an item removed, or an item added can trigger a cascade of DOM manipulations.
 
 For example, re-querying the server could reset the list with all new hero objects.
@@ -1531,7 +1531,7 @@ But Angular sees only a fresh list of new object references.
 It has no choice but to tear down the old DOM elements and insert all new DOM elements.
 
 Angular can avoid this churn with `trackBy`.
-Add a method to the component that returns the value `NgFor` _should_ track.
+Add a method to the component that returns the value `NgForOf` _should_ track.
 In this case, that value is the hero's `id`.
 
 <code-example path="template-syntax/src/app/app.component.ts" region="trackByHeroes" title="src/app/app.component.ts" linenums="false">

aio/content/marketing/contributors.json

@@ -80,6 +80,15 @@
    "group": "Angular"
  },
 
+ "aaronzhang": {
+   "name": "Aaron Zhang (章小飞)",
+   "picture": "xiaofei.jpg",
+   "twitter": "",
+   "website": "http://github.com/damoqiongqiu",
+   "bio": "Aaron is Angular's developer PM in China. He is the lead for angular.cn and social channels in China, and helps developers in China's enterprise and open source communities to be successful with Angular. One of the earliest Angular developers in China since Angular 2012, he translated the first books on Angular into Chinese. Aaron joined the Google team in 2016.",
+   "group": "Angular"
+ },
+
  "tobias": {
    "name": "Tobias Bosch",
    "picture": "tobias.jpg",
@@ -582,14 +591,5 @@
     "website": "https://amcdnl.com",
     "bio": "Austin is an software architect with a passion for JavaScript and Angular. Austin loves to share his experiences with other like-minded developers by giving talks, blogging, podcasting and open-sourcing.",
     "group": "Angular"
-  },
-
-  "nirkaufman": {
-    "name": "Nir Kaufman",
-    "picture": "nirkaufman.jpg",
-    "twitter": "nirkaufman",
-    "website": "http://ngnir.life/",
-    "bio": "Nir is a Principal Frontend Consultant & Head of the Angular department at 500Tech, Google Developer Expert and community leader. He organizes the largest Angular meetup group in Israel (Angular-IL), talks and teaches about front-end technologies around the world. He is also the author of two books about Angular and the founder of the 'Frontend Band'.",
-    "group": "GDE"
   }
 }

aio/content/marketing/index.html

@@ -1,10 +1,10 @@
-<!--FULL HEADER BLOCK-->
+<!-- FULL HEADER BLOCK -->
 <header>
 
-  <!--BACKGROUND IMAGE-->
+  <!-- BACKGROUND IMAGE -->
   <div class="background-sky hero"></div>
 
-<!--INTRO SECTION -->
+  <!-- INTRO SECTION -->
   <section id="intro">
 
     <!-- LOGO -->
@@ -12,31 +12,33 @@
       <img src="assets/images/logos/angular/angular.svg"/>
     </div>
 
-      <!-- CONTAINER     -->
+    <!-- CONTAINER -->
     <div class="homepage-container">
-      <!-- container content starts -->
-
       <div class="hero-headline no-toc">One framework.<br>Mobile &amp; desktop.</div>
       <a class="button hero-cta" href="guide/quickstart">Get Started</a>
-  </div><!-- CONTAINER END -->
-  </section>
+    </div>
 
+  </section>
 
 </header>
 
+<!-- MAIN CONTENT -->
 <article>
+
+  <h1 class="no-toc" style="display: none"></h1>
+
   <div class="home-rows">
 
-    <!--Announcement Bar-->
+    <!-- Announcement Bar -->
     <div class="homepage-container">
       <div class="announcement-bar">
         <img src="generated/images/marketing/home/angular-mix.png" height="40" width="151">
         <p>Join us at our newest event, October 2017</p>
         <a class="button" href="https://angularmix.com/">Learn More</a>
-     </div>
+      </div>
     </div>
 
-    <!-- Group 1-->
+    <!-- Group 1 -->
     <div layout="row" layout-xs="column" class="home-row homepage-container">
       <div class="promo-img-container promo-1">
         <div>
@@ -53,7 +55,8 @@
       </div>
     </div>
     <hr>
-    <!-- Group 2-->
+
+    <!-- Group 2 -->
     <div layout="row" layout-xs="column" class="home-row">
       <div class="text-container">
         <div class="text-block">
@@ -71,7 +74,7 @@
     </div>
     <hr>
 
-    <!-- Group 3-->
+    <!-- Group 3 -->
     <div layout="row" layout-xs="column" class="home-row">
       <div class="promo-img-container promo-3">
         <div><img src="generated/images/marketing/home/joyful-development.svg" alt="IDE example"></div>
@@ -88,9 +91,8 @@
     </div>
     <hr>
 
-    <!-- Group 4-->
+    <!-- Group 4 -->
     <div layout="row" layout-xs="column" class="home-row">
-
       <div class="text-container">
         <div class="text-block l-pad-top-2">
           <div class="text-headline">Loved by Millions</div>
@@ -105,20 +107,19 @@
       </div>
     </div>
 
-  <!-- CTA CARDS -->
-  <div layout="row" layout-xs="column" class="home-row">
-
-    <a href="guide/quickstart">
-      <div class="card">
+    <!-- CTA CARDS -->
+    <div layout="row" layout-xs="column" class="home-row">
+      <a href="guide/quickstart">
+        <div class="card">
           <img src="generated/images/marketing/home/code-icon.svg" height="70px">
           <div class="card-text-container">
             <div class="text-headline">Get Started</div>
             <p>Start building your Angular application.</p>
           </div>
-      </div>
-    </a>
-  </div>
+        </div>
+      </a>
+    </div>
 
-  </div> <!-- end of home rows -->
+  </div><!-- end of home rows -->
 
 </article>

aio/content/marketing/resources.json

@@ -130,13 +130,6 @@
             "rev": true,
             "title": "Apollo",
             "url": "http://docs.apollostack.com/apollo-client/angular2.html"
-          },
-          "ab4": {
-            "desc": "Angular Commerce is a solution for building modern e-commerce applications with power of Google Firebase. Set of components is design agnostic and allows to easily extend functionality.",
-            "logo": "",
-            "rev": true,
-            "title": "AngularCommerce",
-            "url": "https://github.com/NodeArt/angular-commerce"
           }
         }
       },
@@ -327,10 +320,10 @@
             "url": "https://www.ag-grid.com/best-angular-2-data-grid/"
           },
           "jqwidgets": {
-            "desc": "Angular UI Components including data grid, tree grid, pivot grid, scheduler, charts, editors and other multi-purpose components",
+            "desc": "Angular UI Components including Grids, Charts, Scheduling and more.",
             "rev": true,
             "title": "jQWidgets",
-            "url": "https://www.jqwidgets.com/angular/"
+            "url": "http://www.jqwidgets.com/angular/"
           },
           "amexio": {
             "desc": "Amexio (Angular MetaMagic EXtensions for Inputs and Outputs)  is a rich set of Angular components powered by Bootstrap for Responsive Design. UI Components include Standard Form Components, Data Grids, Tree Grids, Tabs etc. Open Source (Apache 2 License) & Free and backed by MetaMagic Global Inc",

aio/content/navigation.json

@@ -288,6 +288,11 @@
           "title": "Internationalization (i18n)",
           "tooltip": "Translate the app's template text into multiple languages."
         },
+        {
+          "url": "guide/language-service",
+          "title": "Language Service",
+          "tooltip": "Use Angular Language Service to speed up dev time."
+        },
         {
           "url": "guide/security",
           "title": "Security",
@@ -380,12 +385,6 @@
       "title": "API",
       "tooltip": "Details of the Angular classes and values.",
       "url": "api"
-    },
-    {
-      "url": "guide/change-log",
-      "title": "Change Log",
-      "tooltip": "Angular Documentation Change Log",
-      "hidden": true
     }
   ],
 
@@ -419,7 +418,7 @@
       "title": "Help",
       "children": [
         {
-          "url": "https://stackoverflow.com/questions/tagged/angular",
+          "url": "http://stackoverflow.com/questions/tagged/angular2",
           "title": "Stack Overflow",
           "tooltip": "Stack Overflow: where the community answers your technical Angular questions."
         },

aio/e2e/app.e2e-spec.ts

@@ -92,12 +92,4 @@ describe('site App', function() {
     // Todo: add test to confirm tracking URL when navigate.
   });
 
-  describe('search', () => {
-    it('should find pages when searching by a partial word in the title', () => {
-      page.enterSearch('ngCont');
-      expect(page.getSearchResults().map(link => link.getText())).toContain('NgControl');
-      page.enterSearch('accessor');
-      expect(page.getSearchResults().map(link => link.getText())).toContain('ControlValueAccessor');
-    });
-  });
 });

aio/e2e/app.po.ts

@@ -1,4 +1,4 @@
-import { browser, element, by, promise, ElementFinder, ExpectedConditions } from 'protractor';
+import { browser, element, by, promise, ElementFinder } from 'protractor';
 
 const githubRegex = /https:\/\/github.com\/angular\/angular\//;
 
@@ -50,18 +50,6 @@ export class SitePage {
     return browser.executeScript('window.scrollTo(0, document.body.scrollHeight)');
   }
 
-  enterSearch(query: string) {
-    const input = element(by.css('.search-container input[type=search]'));
-    input.clear();
-    input.sendKeys(query);
-  }
-
-  getSearchResults() {
-    const results = element.all(by.css('.search-results li'));
-    browser.wait(ExpectedConditions.presenceOf(results.first()), 8000);
-    return results;
-  }
-
   /**
    * Replace the ambient Google Analytics tracker with homebrew spy
    * don't send commands to GA during e2e testing!

aio/package.json

@@ -82,7 +82,7 @@
     "concurrently": "^3.4.0",
     "cross-spawn": "^5.1.0",
     "dgeni": "^0.4.7",
-    "dgeni-packages": "^0.21.2",
+    "dgeni-packages": "^0.20.0",
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",

aio/scripts/_payload-limits.sh

@@ -2,9 +2,13 @@
 
 set -u -e -o pipefail
 
-declare -A limitUncompressed
-limitUncompressed=(["inline"]=1600 ["main"]=525000 ["polyfills"]=38000)
-declare -A limitGzip7
-limitGzip7=(["inline"]=1000 ["main"]=127000 ["polyfills"]=12500)
-declare -A limitGzip9
-limitGzip9=(["inline"]=1000 ["main"]=127000 ["polyfills"]=12500)
+declare -A payloadLimits
+payloadLimits["aio", "uncompressed", "inline"]=1600
+payloadLimits["aio", "uncompressed", "main"]=525000
+payloadLimits["aio", "uncompressed", "polyfills"]=38000
+payloadLimits["aio", "gzip7", "inline"]=1000
+payloadLimits["aio", "gzip7", "main"]=127000
+payloadLimits["aio", "gzip7", "polyfills"]=12500
+payloadLimits["aio", "gzip9", "inline"]=1000
+payloadLimits["aio", "gzip9", "main"]=127000
+payloadLimits["aio", "gzip9", "polyfills"]=12500

aio/scripts/deploy-to-firebase.sh

@@ -27,7 +27,7 @@ else
   readonly majorVersionStable=${STABLE_BRANCH%%.*}
 
   # Do not deploy if the major version is not less than the stable branch major version
-  if [[ $majorVersion -ge $majorVersionStable ]]; then
+  if [[ !( "$majorVersion" < "$majorVersionStable" ) ]]; then
     echo "Skipping deploy of branch \"${TRAVIS_BRANCH}\" to firebase."
     echo "We only deploy archive branches with the major version less than the stable branch: \"${STABLE_BRANCH}\""
     exit 0

aio/scripts/payload.sh

@@ -4,79 +4,10 @@ set -eu -o pipefail
 
 readonly thisDir=$(cd $(dirname $0); pwd)
 readonly parentDir=$(dirname $thisDir)
-readonly PROJECT_NAME="angular-payload-size"
 
+# Track payload size functions
+source ../scripts/ci/payload-size.sh
 source ${thisDir}/_payload-limits.sh
 
-failed=false
-payloadData=""
-for filename in dist/*.bundle.js; do
-  size=$(stat -c%s "$filename")
-  label=$(echo "$filename" | sed "s/.*\///" | sed "s/\..*//")
-  payloadData="$payloadData\"uncompressed/$label\": $size, "
+trackPayloadSize "aio" "dist/*.bundle.js" true true
 
-
-  gzip -7 $filename -c >> "${filename}7.gz"
-  size7=$(stat -c%s "${filename}7.gz")
-  payloadData="$payloadData\"gzip7/$label\": $size7, "
-
-  gzip -9 $filename -c >> "${filename}9.gz"
-  size9=$(stat -c%s "${filename}9.gz")
-  payloadData="$payloadData\"gzip9/$label\": $size9, "
-
-  if [[ $size -gt ${limitUncompressed[$label]} ]]; then
-    failed=true
-    echo "Uncompressed $label size is $size which is greater than ${limitUncompressed[$label]}"
-  elif [[ $size7 -gt ${limitGzip7[$label]} ]]; then
-    failed=true
-    echo "Gzip7 $label size is $size7 which is greater than ${limitGzip7[$label]}"
-  elif [[ $size9 -gt ${limitGzip9[$label]} ]]; then
-    failed=true
-    echo "Gzip9 $label size is $size9 which is greater than ${limitGzip9[$label]}"
-  fi
-done
-
-# Add Timestamp
-timestamp=$(date +%s)
-payloadData="$payloadData\"timestamp\": $timestamp, "
-
-# Add change source: application, dependencies, or 'application+dependencies'
-applicationChanged=false
-dependenciesChanged=false
-if [[ $(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir | grep -v aio/yarn.lock | grep -v content) ]]; then
-  applicationChanged=true
-fi
-if [[ $(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir/yarn.lock) ]]; then
-  dependenciesChanged=true
-fi
-
-if $dependenciesChanged && $applicationChanged; then
-  change='application+dependencies'
-elif $dependenciesChanged; then
-  # only yarn.lock changed
-  change='dependencies'
-elif $applicationChanged; then
-  change='application'
-else
-  # Nothing changed in aio/
-  exit 0
-fi
-message=$(echo $TRAVIS_COMMIT_MESSAGE | sed 's/"/\\"/g' | sed 's/\\/\\\\/g')
-payloadData="$payloadData\"change\": \"$change\", \"message\": \"$message\""
-
-payloadData="{${payloadData}}"
-
-echo $payloadData
-
-if [[ "$TRAVIS_PULL_REQUEST" == "false" ]]; then
-  readonly safeBranchName=$(echo $TRAVIS_BRANCH | sed -e 's/\./_/g')
-  readonly dbPath=/payload/aio/$safeBranchName/$TRAVIS_COMMIT
-
-  # WARNING: FIREBASE_TOKEN should NOT be printed.
-  set +x
-  firebase database:update --data "$payloadData" --project $PROJECT_NAME --confirm --token "$ANGULAR_PAYLOAD_FIREBASE_TOKEN" $dbPath
-fi
-
-if [[ $failed = true ]]; then
-  exit 1
-fi

aio/src/app/search/search-worker.js

@@ -9,18 +9,7 @@ var SEARCH_TERMS_URL = '/generated/docs/app/search-data.json';
 importScripts('/assets/js/lunr.min.js');
 
 var index;
-var pages /* : SearchInfo */ = {};
-
-// interface SearchInfo {
-//  [key: string]: PageInfo;
-// }
-
-// interface PageInfo {
-//   path: string;
-//   type: string,
-//   titleWords: string;
-//   keyWords: string;
-// }
+var pages = {};
 
 self.onmessage = handleMessage;
 
@@ -60,7 +49,15 @@ function handleMessage(message) {
 // Use XHR to make a request to the server
 function makeRequest(url, callback) {
 
-  // The JSON file that is loaded should be an array of PageInfo:
+  // The JSON file that is loaded should be an array of SearchTerms:
+  //
+  // export interface SearchTerms {
+  //   path: string;
+  //   type: string,
+  //   titleWords: string;
+  //   keyWords: string;
+  // }
+
   var searchDataRequest = new XMLHttpRequest();
   searchDataRequest.onload = function() {
     callback(JSON.parse(this.responseText));
@@ -71,11 +68,11 @@ function makeRequest(url, callback) {
 
 
 // Create the search index from the searchInfo which contains the information about each page to be indexed
-function loadIndex(searchInfo /*: SearchInfo */) {
+function loadIndex(searchInfo) {
   return function(index) {
     // Store the pages data to be used in mapping query results back to pages
     // Add search terms from each page to the search index
-    searchInfo.forEach(function(page /*: PageInfo */) {
+    searchInfo.forEach(function(page) {
       index.add(page);
       pages[page.path] = page;
     });
@@ -84,19 +81,7 @@ function loadIndex(searchInfo /*: SearchInfo */) {
 
 // Query the index and return the processed results
 function queryIndex(query) {
-  try {
-    if (query.length) {
-      // Add a relaxed search in the title for the first word in the query
-      // E.g. if the search is "ngCont guide" then we search for "ngCont guide titleWords:ngCont*"
-      var titleQuery = 'titleWords:*' + query.split(' ', 1)[0] + '*';
-      var results = index.search(query + ' ' + titleQuery);
-      // Map the hits into info about each page to be returned as results
-      return results.map(function(hit) { return pages[hit.ref]; });
-    }
-  } catch(e) {
-    // If the search query cannot be parsed the index throws an error
-    // Log it and recover
-    console.log(e);
-  }
-  return [];
+  var results = index.search(query);
+  // Only return the array of paths to pages
+  return results.map(function(hit) { return pages[hit.ref]; });
 }

aio/src/styles/1-layouts/_footer.scss

@@ -104,7 +104,7 @@ footer::after {
     right: 0;
     background:
         url('../src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 0 left 0 repeat,
-        url('../src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 80px left 160px repeat;
+        url('../src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 80px left 168px repeat;
     opacity: 0.05;
     background-size: 320px auto;
 }

aio/tools/examples/example-boilerplate.js

@@ -41,12 +41,9 @@ const ANGULAR_PACKAGES = [
   'platform-browser-dynamic',
   'platform-server',
   'router',
+  'tsc-wrapped',
   'upgrade',
 ];
-const ANGULAR_TOOLS_PACKAGES_PATH = path.resolve(ANGULAR_DIST_PATH, 'tools', '@angular');
-const ANGULAR_TOOLS_PACKAGES = [
-  'tsc-wrapped'
-];
 
 const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
 
@@ -63,7 +60,6 @@ class ExampleBoilerPlate {
     // Replace the Angular packages with those from the dist folder, if necessary
     if (useLocal) {
       ANGULAR_PACKAGES.forEach(packageName => this.overridePackage(ANGULAR_PACKAGES_PATH, packageName));
-      ANGULAR_TOOLS_PACKAGES.forEach(packageName => this.overridePackage(ANGULAR_TOOLS_PACKAGES_PATH, packageName));
     }
 
     // Get all the examples folders, indicated by those that contain a `example-config.json` file
@@ -137,4 +133,4 @@ module.exports = new ExampleBoilerPlate();
 // If this file was run directly then run the main function,
 if (require.main === module) {
   module.exports.main();
-}
+}

aio/tools/examples/example-boilerplate.spec.js

@@ -32,7 +32,7 @@ describe('example-boilerplate tool', () => {
       // for example
       expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/packages-dist'), 'common');
       expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/packages-dist'), 'core');
-      expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/tools/@angular'), 'tsc-wrapped');
+      expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/packages-dist'), 'tsc-wrapped');
     });
 
     it('should process all the example folders', () => {

aio/tools/examples/shared/boilerplate/src/systemjs.config.js

@@ -18,7 +18,6 @@
       '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
       '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
@@ -32,7 +31,6 @@
 
       // other libraries
       'rxjs':                      'npm:rxjs',
-      'tslib':                     'npm:tslib/tslib.js',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
     },
     // packages tells the System loader how to load when no filename and/or no extension

aio/tools/examples/shared/boilerplate/src/systemjs.config.web.build.js

@@ -42,7 +42,6 @@
       '@angular/animations/browser': 'ng:animations-builds/master/bundles/animations-browser.umd.js',
       '@angular/core': 'ng:core-builds/master/bundles/core.umd.js',
       '@angular/common': 'ng:common-builds/master/bundles/common.umd.js',
-      '@angular/common/http': 'ng:common-builds/master/bundles/common-http.umd.js',
       '@angular/compiler': 'ng:compiler-builds/master/bundles/compiler.umd.js',
       '@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js',
       '@angular/platform-browser/animations': 'ng:animations-builds/master/bundles/platform-browser-animations.umd.js',
@@ -57,7 +56,6 @@
       // angular testing umd bundles (overwrite the shim mappings)
       '@angular/core/testing': 'ng:core-builds/master/bundles/core-testing.umd.js',
       '@angular/common/testing': 'ng:common-builds/master/bundles/common-testing.umd.js',
-      '@angular/common/http/testing': 'ng:common-builds/master/bundles/common-http-testing.umd.js',
       '@angular/compiler/testing': 'ng:compiler-builds/master/bundles/compiler-testing.umd.js',
       '@angular/platform-browser/testing': 'ng:platform-browser-builds/master/bundles/platform-browser-testing.umd.js',
       '@angular/platform-browser-dynamic/testing': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic-testing.umd.js',
@@ -67,7 +65,6 @@
 
       // other libraries
       'rxjs':                      'npm:rxjs@5.0.1',
-      'tslib':                     'npm:tslib/tslib.js',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
       'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
       'typescript':                'npm:typescript@2.3.2/lib/typescript.js',

aio/tools/examples/shared/boilerplate/src/systemjs.config.web.js

@@ -39,7 +39,6 @@
       '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
       '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
@@ -53,7 +52,6 @@
 
       // other libraries
       'rxjs':                      'npm:rxjs@5.0.1',
-      'tslib':                     'npm:tslib/tslib.js',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
       'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
       'typescript':                'npm:typescript@2.3.2/lib/typescript.js',

aio/tools/examples/shared/package.json

@@ -25,7 +25,7 @@
     "@angular/router": "~4.3.1",
     "@angular/tsc-wrapped": "~4.3.1",
     "@angular/upgrade": "~4.3.1",
-    "angular-in-memory-web-api": "~0.4.0",
+    "angular-in-memory-web-api": "~0.3.2",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
     "systemjs": "0.19.39",

aio/tools/examples/shared/yarn.lock

@@ -325,9 +325,9 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
-angular-in-memory-web-api@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.4.0.tgz#996715f37d8a4e659e154fedf76c4726470cb8d8"
+angular-in-memory-web-api@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.3.2.tgz#8836d9e2534d37b728f3cb5a1caf6fe1e7fbbecd"
 
 angular2-template-loader@^0.6.0:
   version "0.6.2"
@@ -5163,18 +5163,18 @@ request-progress@~2.0.1:
   dependencies:
     throttleit "^1.0.0"
 
-request@2, request@^2.72.0, request@^2.78.0, request@^2.79.0, request@~2.79.0:
-  version "2.79.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
+request@2, request@^2.72.0, request@^2.79.0, request@^2.81.0:
+  version "2.81.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
   dependencies:
     aws-sign2 "~0.6.0"
     aws4 "^1.2.1"
-    caseless "~0.11.0"
+    caseless "~0.12.0"
     combined-stream "~1.0.5"
     extend "~3.0.0"
     forever-agent "~0.6.1"
     form-data "~2.1.1"
-    har-validator "~2.0.6"
+    har-validator "~4.2.1"
     hawk "~3.1.3"
     http-signature "~1.1.0"
     is-typedarray "~1.0.0"
@@ -5182,10 +5182,12 @@ request@2, request@^2.72.0, request@^2.78.0, request@^2.79.0, request@~2.79.0:
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.7"
     oauth-sign "~0.8.1"
-    qs "~6.3.0"
+    performance-now "^0.2.0"
+    qs "~6.4.0"
+    safe-buffer "^5.0.1"
     stringstream "~0.0.4"
     tough-cookie "~2.3.0"
-    tunnel-agent "~0.4.1"
+    tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
 request@2.78.0:
@@ -5213,18 +5215,18 @@ request@2.78.0:
     tough-cookie "~2.3.0"
     tunnel-agent "~0.4.1"
 
-request@^2.81.0:
-  version "2.81.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0"
+request@^2.78.0, request@~2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de"
   dependencies:
     aws-sign2 "~0.6.0"
     aws4 "^1.2.1"
-    caseless "~0.12.0"
+    caseless "~0.11.0"
     combined-stream "~1.0.5"
     extend "~3.0.0"
     forever-agent "~0.6.1"
     form-data "~2.1.1"
-    har-validator "~4.2.1"
+    har-validator "~2.0.6"
     hawk "~3.1.3"
     http-signature "~1.1.0"
     is-typedarray "~1.0.0"
@@ -5232,12 +5234,10 @@ request@^2.81.0:
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.7"
     oauth-sign "~0.8.1"
-    performance-now "^0.2.0"
-    qs "~6.4.0"
-    safe-buffer "^5.0.1"
+    qs "~6.3.0"
     stringstream "~0.0.4"
     tough-cookie "~2.3.0"
-    tunnel-agent "^0.6.0"
+    tunnel-agent "~0.4.1"
     uuid "^3.0.0"
 
 require-directory@^2.1.1:

aio/tools/transforms/angular-api-package/index.js

@@ -27,11 +27,7 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
   .processor(require('./processors/simplifyMemberAnchors'))
 
   // Where do we get the source files?
-  .config(function(readTypeScriptModules, readFilesProcessor, collectExamples, tsParser) {
-
-    // Tell TypeScript how to load modules that start with with `@angular`
-    tsParser.options.paths = { '@angular/*': [API_SOURCE_PATH + '/*'] };
-    tsParser.options.baseUrl = '.';
+  .config(function(readTypeScriptModules, readFilesProcessor, collectExamples) {
 
     // API files are typescript
     readTypeScriptModules.basePath = API_SOURCE_PATH;
@@ -128,5 +124,4 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
     convertToJsonProcessor.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
     postProcessHtml.docTypes = convertToJsonProcessor.docTypes.concat(DOCS_TO_CONVERT);
     autoLinkCode.docTypes = DOCS_TO_CONVERT;
-    autoLinkCode.codeElements = ['code', 'code-example', 'code-pane'];
   });

aio/tools/transforms/angular-base-package/post-processors/auto-link-code.js

@@ -3,69 +3,34 @@ const is = require('hast-util-is-element');
 const textContent = require('hast-util-to-string');
 
 /**
- * Automatically add in a link to the relevant document for code blocks.
- * E.g. `<code>MyClass</code>` becomes `<code><a href="path/to/myclass">MyClass</a></code>`
+ * Automatically add in a link to the relevant document for simple
+ * code blocks, e.g. `<code>MyClass</code>` becomes
+ * `<code><a href="path/to/myclass">MyClass</a></code>`
  *
- * @property docTypes an array of strings.
- * Only docs that have one of these docTypes will be linked to.
+ * @property docTypes an array of strings. Only docs that have one of these docTypes
+ * will be linked to.
  * Usually set to the API exported docTypes, e.g. "class", "function", "directive", etc.
- *
- * @property codeElements an array of strings.
- * Only text contained in these elements will be linked to.
- * Usually set to "code" but also "code-example" for angular.io.
  */
 module.exports = function autoLinkCode(getDocFromAlias) {
   autoLinkCodeImpl.docTypes = [];
-  autoLinkCodeImpl.codeElements = ['code'];
   return autoLinkCodeImpl;
 
   function autoLinkCodeImpl()  {
     return (ast) => {
-      visit(ast, 'element', (node, ancestors) => {
-        // Only interested in code elements that are not inside links
-        if (autoLinkCodeImpl.codeElements.some(elementType => is(node, elementType)) &&
-            ancestors.every(ancestor => !is(ancestor, 'a'))) {
-          visit(node, 'text', (node, ancestors) => {
-            // Only interested in text nodes that are not inside links
-            if (ancestors.every(ancestor => !is(ancestor, 'a'))) {
-
-              const parent = ancestors[ancestors.length-1];
-              const index = parent.children.indexOf(node);
-
-              // Can we convert the whole text node into a doc link?
-              const docs = getDocFromAlias(node.value);
-              if (foundValidDoc(docs)) {
-                parent.children.splice(index, 1, createLinkNode(docs[0], node.value));
-              } else {
-                // Parse the text for words that we can convert to links
-                const nodes = textContent(node).split(/([A-Za-z0-9_]+)/)
-                  .filter(word => word.length)
-                  .map(word => {
-                    const docs = getDocFromAlias(word);
-                    return foundValidDoc(docs) ?
-                              createLinkNode(docs[0], word) : // Create a link wrapping the text node.
-                              { type: 'text', value: word };  // this is just text so push a new text node
-                  });
-
-                // Replace the text node with the links and leftover text nodes
-                Array.prototype.splice.apply(parent.children, [index, 1].concat(nodes));
-              }
-            }
-          });
+      visit(ast, (node, ancestors) => {
+        if (is(node, 'code') && ancestors.every(ancestor => !is(ancestor, 'a'))) {
+          const docs = getDocFromAlias(textContent(node));
+          if (docs.length === 1 && autoLinkCodeImpl.docTypes.indexOf(docs[0].docType) !== -1) {
+            const link = {
+              type: 'element',
+              tagName: 'a',
+              properties: { href: docs[0].path },
+              children: node.children
+            };
+            node.children = [link];
+          }
         }
       });
     };
   }
-  function foundValidDoc(docs) {
-    return docs.length === 1 && autoLinkCodeImpl.docTypes.indexOf(docs[0].docType) !== -1;
-  }
-
-  function createLinkNode(doc, text) {
-    return {
-      type: 'element',
-      tagName: 'a',
-      properties: { href: doc.path, class: 'code-anchor' },
-      children: [{ type: 'text', value: text }]
-    };
-  }
 };

aio/tools/transforms/angular-base-package/post-processors/auto-link-code.spec.js

@@ -9,7 +9,7 @@ describe('autoLinkCode post-processor', () => {
     const dgeni = new Dgeni([testPackage]);
     const injector = dgeni.configureInjector();
     autoLinkCode = injector.get('autoLinkCode');
-    autoLinkCode.docTypes = ['class', 'pipe', 'function', 'const'];
+    autoLinkCode.docTypes = ['class', 'pipe'];
     aliasMap = injector.get('aliasMap');
     processor = injector.get('postProcessHtml');
     processor.docTypes = ['test-doc'];
@@ -20,14 +20,14 @@ describe('autoLinkCode post-processor', () => {
     aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
     const doc = { docType: 'test-doc', renderedContent: '<code>MyClass</code>' };
     processor.$process([doc]);
-    expect(doc.renderedContent).toEqual('<code><a href="a/b/myclass" class="code-anchor">MyClass</a></code>');
+    expect(doc.renderedContent).toEqual('<code><a href="a/b/myclass">MyClass</a></code>');
   });
 
   it('should insert an anchor into every code item that matches an alias of an API doc', () => {
     aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass', 'foo.MyClass'], path: 'a/b/myclass' });
     const doc = { docType: 'test-doc', renderedContent: '<code>foo.MyClass</code>' };
     processor.$process([doc]);
-    expect(doc.renderedContent).toEqual('<code><a href="a/b/myclass" class="code-anchor">foo.MyClass</a></code>');
+    expect(doc.renderedContent).toEqual('<code><a href="a/b/myclass">foo.MyClass</a></code>');
   });
 
   it('should ignore code items that do not match a link to an API doc', () => {
@@ -43,35 +43,4 @@ describe('autoLinkCode post-processor', () => {
     processor.$process([doc]);
     expect(doc.renderedContent).toEqual('<a href="..."><div><code>MyClass</code></div></a>');
   });
-
-  it('should ignore code items match an API doc but are not in the list of acceptable docTypes', () => {
-    aliasMap.addDoc({ docType: 'directive', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
-    const doc = { docType: 'test-doc', renderedContent: '<code>MyClass</code>' };
-    processor.$process([doc]);
-    expect(doc.renderedContent).toEqual('<code>MyClass</code>');
-  });
-
-  it('should insert anchors for individual text nodes within a code block', () => {
-    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
-    const doc = { docType: 'test-doc', renderedContent: '<code><span>MyClass</span><span>MyClass</span></code>' };
-    processor.$process([doc]);
-    expect(doc.renderedContent).toEqual('<code><span><a href="a/b/myclass" class="code-anchor">MyClass</a></span><span><a href="a/b/myclass" class="code-anchor">MyClass</a></span></code>');
-  });
-
-  it('should insert anchors for words that match within text nodes in a code block', () => {
-    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
-    aliasMap.addDoc({ docType: 'function', id: 'myFunc', aliases: ['myFunc'], path: 'ng/myfunc' });
-    aliasMap.addDoc({ docType: 'const', id: 'MY_CONST', aliases: ['MY_CONST'], path: 'ng/my_const' });
-    const doc = { docType: 'test-doc', renderedContent: '<code>myFunc() {\n  return new MyClass(MY_CONST);\n}</code>' };
-    processor.$process([doc]);
-    expect(doc.renderedContent).toEqual('<code><a href="ng/myfunc" class="code-anchor">myFunc</a>() {\n  return new <a href="a/b/myclass" class="code-anchor">MyClass</a>(<a href="ng/my_const" class="code-anchor">MY_CONST</a>);\n}</code>');
-  });
-
-  it('should work with custom elements', () => {
-    autoLinkCode.codeElements = ['code-example'];
-    aliasMap.addDoc({ docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass' });
-    const doc = { docType: 'test-doc', renderedContent: '<code-example>MyClass</code-example>' };
-    processor.$process([doc]);
-    expect(doc.renderedContent).toEqual('<code-example><a href="a/b/myclass" class="code-anchor">MyClass</a></code-example>');
-  });
 });

aio/tools/transforms/angular-base-package/post-processors/h1-checker.js

@@ -34,5 +34,5 @@ function getText(h1) {
     (node.properties.ariaHidden === 'true' || node.properties['aria-hidden'] === 'true')
   ));
 
-  return toString(cleaned);
-}
+  return cleaned ? toString(cleaned) : '';
+}

aio/tools/transforms/angular-base-package/post-processors/h1-checker.spec.js

@@ -69,4 +69,14 @@ describe('h1Checker postprocessor', () => {
     processor.$process([doc]);
     expect(doc.vFile.title).toEqual('What is Angular?');
   });
-});
+
+  it('should not break if the h1 is empty (except for an aria-hidden anchor)', () => {
+    const doc = {
+      docType: 'a',
+      renderedContent: `
+        <h1><a aria-hidden="true"></a></h1>
+      `
+    };
+    expect(() => processor.$process([doc])).not.toThrow();
+  });
+});

aio/tools/transforms/templates/api/class.template.html

@@ -7,8 +7,8 @@
 {% block additional %}{% endblock %}
 {% include "includes/description.html" %}
 {$ memberHelpers.renderMemberDetails(doc.statics, 'static-members', 'static-member', 'Static Members') $}
-{% if doc.constructorDoc %}{$ memberHelpers.renderMemberDetails([doc.constructorDoc], 'constructors', 'constructor', 'Constructor') $}{% endif %}
+{% include "includes/constructor.html" %}
 {$ memberHelpers.renderMemberDetails(doc.members, 'instance-members', 'instance-member', 'Members') $}
-{% block annotations %}{% include "includes/annotations.html" %}{% endblock %}
+{% include "includes/annotations.html" %}
 
 {% endblock %}

aio/tools/transforms/templates/api/directive.template.html

@@ -9,5 +9,3 @@
   {$ directiveHelper.renderBindings(doc.outputs, 'outputs', 'output', 'Outputs') $}
   {% include "includes/export-as.html" %}
 {% endblock %}
-
-{% block annotations %}{% endblock %}

aio/tools/transforms/templates/api/includes/annotations.html

@@ -2,7 +2,7 @@
 <section class="annotations">
   <h2>Annotations</h2>
   {%- for decorator in doc.decorators %}
-    <code-example hideCopy="true" class="no-box api-heading">@{$ decorator.name $}({$ decorator.arguments $})</code-example>
+    <code-example hideCopy="true" class="no-box api-heading">@{$ decorator.name $}{$ params.paramList(decorator.arguments) $}</code-example>
     {% if not decorator.notYetDocumented %}{$ decorator.description | marked $}{% endif %}
   {% endfor %}
 </section>

aio/tools/transforms/templates/api/includes/class-overview.html

@@ -4,11 +4,10 @@
 <h2>Overview</h2>
 <code-example language="ts" hideCopy="true">
 {$ doc.docType $} {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {
-{%- if doc.constructorDoc %}{% if not doc.constructorDoc.internal %}
-  <a class="code-anchor" href="#{$ doc.constructorDoc.anchor $}">{$ memberHelper.renderMember(doc.constructorDoc, 1) $}</a>{% endif %}{% endif -%}
 {%- if doc.statics.length %}{% for member in doc.statics %}{% if not member.internal %}
-  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif -%}
-{$ memberHelper.renderMembers(doc) $}
+  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
+{%- if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
+  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
 }
 </code-example>
 </section>

aio/tools/transforms/templates/api/includes/constructor.html

@@ -0,0 +1,8 @@
+{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
+<section class="constructor">
+  <a id="{$ doc.constructorDoc.name $}"></a>
+  <h2>Constructor</h2>
+  <code-example hideCopy="true" class="no-box api-heading">{$ doc.constructorDoc.name $}{$ params.paramList(doc.constructorDoc.parameters) $}</code-example>
+  {% if not doc.constructorDoc.notYetDocumented %}{$ doc.constructorDoc.description | marked $}{% endif %}
+</section>
+{% endif %}

aio/tools/transforms/templates/api/includes/decorator-overview.html

@@ -3,7 +3,8 @@
 <section class="decorator-overview">
   <h2>Metadata Overview</h2>
 <code-example language="ts" hideCopy="true">
-@{$ doc.name $}{$ doc.typeParams | escape $}({ {$ memberHelper.renderMembers(doc) $}
+@{$ doc.name $}{$ doc.typeParams | escape $}({ {% if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
+  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
 })
 </code-example>
 </section>

aio/tools/transforms/templates/api/includes/directive-overview.html

@@ -3,11 +3,12 @@
 <section class="{$ doc.docType $}-overview">
   <h2>Overview</h2>
 <code-example language="ts" hideCopy="true">{% for decorator in doc.decorators %}
-@{$ decorator.name $}({$ decorator.arguments $}){% endfor %}
+<a href="#annotations">@{$ decorator.name $}{$ params.paramList(decorator.arguments) $}</a>{% endfor %}
 class {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {
 {%- if doc.statics.length %}{% for member in doc.statics %}{% if not member.internal %}
-  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif -%}
-{$ memberHelper.renderMembers(doc) $}
+  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
+{%- if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
+  <a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
 }
 </code-example>
 </section>

aio/tools/transforms/templates/api/includes/selectors.html

@@ -1,9 +1,10 @@
 {%- if doc.selector %}
 <section class="selectors">
   <h2>Selectors</h2>
-  <code-example hideCopy="true" class="no-box api-heading selector">
-  {%- for selector in doc.selector.split(',') %}
-  {$ selector $}{% endfor %}
-  </code-example>
+  {% for selector in doc.selector.split(',') %}
+  <div class="selector">
+    <code>{$ selector $}</code>
+  </div>
+  {% endfor %}
 </section>
 {% endif %}

aio/tools/transforms/templates/api/lib/memberHelpers.html

@@ -2,20 +2,13 @@
 
 {%- macro renderHeritage(exportDoc) -%}
   {%- if exportDoc.extendsClauses.length %} extends {% for clause in exportDoc.extendsClauses -%}
-  <a class="code-anchor" href="{$ clause.doc.path $}">{$ clause.text $}</a>{% if not loop.last %}, {% endif -%}
+  {$ clause $}{% if not loop.last %}, {% endif -%}
   {% endfor %}{% endif %}
   {%- if exportDoc.implementsClauses.length %} implements {% for clause in exportDoc.implementsClauses -%}
-  <a class="code-anchor" href="{$ clause.doc.path $}">{$ clause.text $}</a>{% if not loop.last %}, {% endif -%}
+  {$ clause $}{% if not loop.last %}, {% endif -%}
   {% endfor %}{% endif %}
 {%- endmacro -%}
 
-{%- macro renderMembers(doc) -%}
-{%- if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
-  <a class="code-anchor" href="{$ doc.path $}#{$ member.anchor $}">{$ renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
-{%- for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
-  // inherited from <a class="code-anchor" href="{$ ancestor.doc.path $}">{$ ancestor.doc.id $}</a>{$ renderMembers(ancestor.doc) $}{% endif %}{% endfor %}
-{%- endmacro -%}
-
 {%- macro renderMember(member, truncateLines) -%}
     {%- if member.accessibility !== 'public' %}{$ member.accessibility $} {% endif -%}
     {%- if member.isGetAccessor %}get {% endif -%}

aio/yarn.lock

@@ -2002,9 +2002,9 @@ devtools-timeline-model@1.1.6:
     chrome-devtools-frontend "1.0.401423"
     resolve "1.1.7"
 
-dgeni-packages@^0.21.2:
-  version "0.21.2"
-  resolved "https://registry.yarnpkg.com/dgeni-packages/-/dgeni-packages-0.21.2.tgz#b031194176507b7c7d1c9735ea14664970763866"
+dgeni-packages@^0.20.0:
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/dgeni-packages/-/dgeni-packages-0.20.0.tgz#e7da99b0a119ee2eb584202d054a5aa01f23e208"
   dependencies:
     canonical-path "0.0.2"
     catharsis "^0.8.1"
@@ -2026,7 +2026,7 @@ dgeni-packages@^0.21.2:
     source-map-support "^0.4.15"
     spdx-license-list "^2.1.0"
     stringmap "^0.2.2"
-    typescript "2.4"
+    typescript "^2.3.4"
 
 dgeni@^0.4.7:
   version "0.4.7"
@@ -7619,7 +7619,7 @@ typescript@2.3.2, "typescript@>=2.0.0 <2.5.0":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.2.tgz#f0f045e196f69a72f06b25fd3bd39d01c3ce9984"
 
-typescript@2.4, typescript@^2.3.3:
+typescript@^2.3.3, typescript@^2.3.4:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.1.tgz#c3ccb16ddaa0b2314de031e7e6fee89e5ba346bc"
 

build.sh

@@ -26,7 +26,8 @@ PACKAGES=(core
   benchpress)
 
 NODE_PACKAGES=(compiler-cli
-  benchpress)
+  benchpress
+  tsc-wrapped)
 
 BUILD_ALL=true
 BUNDLE=true
@@ -86,7 +87,7 @@ done
 #######################################
 isIgnoredDirectory() {
   name=$(basename ${1})
-  if [[ -f "${1}" || "${name}" == "src" || "${name}" == "test" || "${name}" == "integrationtest" ]]; then
+  if [[ -f "${1}" || "${name}" == "src" || "${name}" == "test" || "${name}" == "integrationtest" || "${name}" == "locales" ]]; then
     return 0
   else
     return 1
@@ -107,76 +108,36 @@ containsElement () {
   return 1
 }
 
-#######################################
-# Downlevel ES2015 to ESM/ES5
-# Arguments:
-#   param1 - Source folder
-#   param2 - Naming suffix to apply. Must end in ".ts" (defaults to .es5.ts)
-# Returns:
-#   None
-#######################################
-downlevelES2015() {
-  # Iterate over the files in this directory, converting to .es5.ts
-  regex="(.+).js"
-  for file in ${1}/*.js ; do
-    if [[ ${file} =~ $regex ]]; then
-      ts_file="${BASH_REMATCH[1]}${2:-".es5.ts"}"
-      cp ${file} ${ts_file}
-
-      echo "======           $TSC ${ts_file} --target es5 --module es2015 --noLib --sourceMap --importHelpers"
-      ($TSC ${ts_file} --target es5 --module es2015 --noLib --sourceMap --importHelpers) > /dev/null 2>&1 || true
-      mapSources "${BASH_REMATCH[1]}${2:-".es5.js"}"
-      rm -f ${ts_file}
-    fi
-  done
-
-  # Recurse for sub directories
-  for DIR in ${1}/* ; do
-    isIgnoredDirectory ${DIR} && continue
-    downlevelES2015 ${DIR}
-  done
-}
-
 #######################################
 # Rollup index files recursively, ignoring blacklisted directories
 # Arguments:
 #   param1 - Base source folder
 #   param2 - Destination directory
-#   param3 - Config file
 # Returns:
 #   None
 #######################################
 rollupIndex() {
   # Iterate over the files in this directory, rolling up each into ${2} directory
   local regex=".+/(.+)/index.js"
-  if [[ "${1}/index.js" =~ $regex ]]; then
-    in_file="${1}/index.js"
-    out_file="${2}/${BASH_REMATCH[1]}.js"
+  in_file="${1}/index.js"
+  out_file="${2}/index.js"
 
-    echo "======           $ROLLUP -i ${in_file} -o ${out_file}"
+  BANNER_TEXT=`cat ${LICENSE_BANNER}`
 
-    if [[ -f "${3}" ]]; then
-      $ROLLUP -i ${in_file} -o ${out_file} -c ${3} --sourcemap
-    else
-      $ROLLUP -i ${in_file} -o ${out_file} --sourcemap
-    fi
-    cat ${LICENSE_BANNER} > ${out_file}.tmp
-    cat ${out_file} >> ${out_file}.tmp
-    mv ${out_file}.tmp ${out_file}
-
-    mapSources "${out_file}"
-
-    # Recurse for sub directories
-    for DIR in ${1}/* ; do
-      isIgnoredDirectory ${DIR} && continue
-      # NOTE: We need to re-run this regex and use the new match as Bash doesn't have closures
-      if [[ "${1}/index.js" =~ $regex ]]; then
-        rollupIndex ${DIR} ${2}/${BASH_REMATCH[1]} "$(dirname $3)/${BASH_REMATCH[1]}/rollup.config.js"
-      fi
-    done
+  if [[ -f ${in_file} ]]; then
+    echo "===========           $ROLLUP -i ${in_file} -o ${out_file} -c ${ROOT_DIR}/rollup.config.js --sourcemap"
+    $ROLLUP -i ${in_file} -o ${out_file} --sourcemap -f es --banner "$BANNER_TEXT" >/dev/null 2>&1
   fi
-}
 
+  # Recurse for sub directories
+  for DIR in ${1}/* ; do
+    isIgnoredDirectory ${DIR} && continue
+    # NOTE: We need to re-run this regex and use the new match as Bash doesn't have closures
+    if [[ "${DIR}/index.js" =~ $regex ]]; then
+      rollupIndex ${DIR} ${2}/${BASH_REMATCH[1]}
+    fi
+  done
+}
 
 #######################################
 # Recursively runs rollup on any entry point that has a "rollup.config.js" file
@@ -186,17 +147,11 @@ rollupIndex() {
 #   None
 #######################################
 runRollup() {
-  local regex="dest: ['\"](.+)['\"],*"
   if [[ -f "${1}/rollup.config.js" ]]; then
     cd ${1}
 
     echo "======           $ROLLUP -c ${1}/rollup.config.js"
-    $ROLLUP -c rollup.config.js --sourcemap
-
-    local dest_line=$(cat "${1}/rollup.config.js" | grep 'dest:')
-    if [[ ${dest_line} =~ $regex ]]; then
-      mapSources "${BASH_REMATCH[1]}"
-    fi
+    $ROLLUP -c rollup.config.js --sourcemap >/dev/null 2>&1
 
     # Recurse for sub directories
     for DIR in ${1}/* ; do
@@ -241,7 +196,6 @@ minify() {
     if [[ "${base_file}" =~ $regex && "${base_file##*.}" != "map" ]]; then
       local out_file=$(dirname "${file}")/${BASH_REMATCH[1]}.min.js
       $UGLIFYJS -c --screw-ie8 --comments -o ${out_file} --source-map ${out_file}.map --source-map-include-sources ${file}
-      mapSources "${out_file}"
     fi
   done
 }
@@ -252,19 +206,18 @@ minify() {
 #   param1 - Source directory
 #   param2 - Out dir
 #   param3 - Package Name
-#   param4 - Is child (are we recursing?)
 # Returns:
 #   None
 #######################################
 compilePackage() {
   echo "======      [${3}]: COMPILING: ${NGC} -p ${1}/tsconfig-build.json"
   # For NODE_PACKAGES items (not getting rolled up)
-  if containsElement "${PACKAGE}" "${NODE_PACKAGES[@]}"; then
+  if containsElement "${3}" "${NODE_PACKAGES[@]}"; then
     $TSC -p ${1}/tsconfig-build.json
   else
     local package_name=$(basename "${2}")
     $NGC -p ${1}/tsconfig-build.json
-    echo "======           Create ${1}/../${package_name}.d.ts re-export file for Closure"
+    echo "======           Create ${1}/../${package_name}.d.ts re-export file for tsickle"
     echo "$(cat ${LICENSE_BANNER}) ${N} export * from './${package_name}/index'" > ${2}/../${package_name}.d.ts
     echo "{\"__symbolic\":\"module\",\"version\":3,\"metadata\":{},\"exports\":[{\"from\":\"./${package_name}/index\"}],\"flatModuleIndexRedirect\":true}" > ${2}/../${package_name}.metadata.json
   fi
@@ -274,24 +227,31 @@ compilePackage() {
     BASE_DIR=$(basename "${DIR}")
     # Skip over directories that are not nested entry points
     [[ -e ${DIR}/tsconfig-build.json && "${BASE_DIR}" != "integrationtest" ]] || continue
-    compilePackage ${DIR} ${2}/${BASE_DIR} ${3} true
+    compilePackage ${DIR} ${2}/${BASE_DIR} ${3}
   done
 }
 
 #######################################
-# Moves typings and metadata files appropriately
+# Recursively compile package
 # Arguments:
-#   param1 - Source of typings & metadata files
-#   param2 - Root of destination directory
-#   param3 - Package name (needed to correspond to name of d.ts and metadata.json files)
+#   param1 - Source directory
+#   param2 - Out dir
+#   param3 - Package Name
 # Returns:
 #   None
 #######################################
-moveTypings() {
-  if [[ -f ${1}/index.d.ts && -f ${1}/index.metadata.json ]]; then
-    mv ${1}/index.d.ts ${1}/${2}.d.ts
-    mv ${1}/index.metadata.json ${1}/${2}.metadata.json
-  fi
+compilePackageES5() {
+  echo "======      [${3}]: COMPILING: ${NGC} -p ${1}/tsconfig-build.json --target es5 -d false --outDir ${2} --importHelpers true --sourceMap"
+  local package_name=$(basename "${2}")
+  $NGC -p ${1}/tsconfig-build.json --target es5 -d false --outDir ${2} --importHelpers true --sourceMap
+
+  for DIR in ${1}/* ; do
+    [ -d "${DIR}" ] || continue
+    BASE_DIR=$(basename "${DIR}")
+    # Skip over directories that are not nested entry points
+    [[ -e ${DIR}/tsconfig-build.json && "${BASE_DIR}" != "integrationtest" ]] || continue
+    compilePackageES5 ${DIR} ${2} ${3}
+  done
 }
 
 #######################################
@@ -314,17 +274,14 @@ addNgcPackageJson() {
   done
 }
 
-#######################################
-# This is read by NGC to be able to find the flat module index.
-# Arguments:
-#   param1 - JavaScript file on which to re-map sources
-# Returns:
-#   None
-#######################################
-mapSources() {
-  if [[ -f "${1}.map" ]]; then
-    $MAP_SOURCES -f "${1}"
-  fi
+updateVersionReferences() {
+  NPM_DIR="$1"
+  (
+    echo "======      VERSION: Updating version references in ${NPM_DIR}"
+    cd ${NPM_DIR}
+    echo "======       EXECUTE: perl -p -i -e \"s/0\.0\.0\-PLACEHOLDER/${VERSION}/g\" $""(grep -ril 0\.0\.0\-PLACEHOLDER .)"
+    perl -p -i -e "s/0\.0\.0\-PLACEHOLDER/${VERSION}/g" $(grep -ril 0\.0\.0\-PLACEHOLDER .) < /dev/null 2> /dev/null
+  )
 }
 
 VERSION="${VERSION_PREFIX}${VERSION_SUFFIX}"
@@ -333,8 +290,7 @@ echo "====== BUILDING: Version ${VERSION}"
 N="
 "
 TSC=`pwd`/node_modules/.bin/tsc
-NGC="node --max-old-space-size=3000 dist/tools/@angular/tsc-wrapped/src/main"
-MAP_SOURCES="node `pwd`/scripts/build/map_sources.js "
+NGC="node --max-old-space-size=3000 `pwd`/dist/packages-dist/tsc-wrapped/src/main"
 UGLIFYJS=`pwd`/node_modules/.bin/uglifyjs
 TSCONFIG=./tools/tsconfig.json
 ROLLUP=`pwd`/node_modules/.bin/rollup
@@ -345,8 +301,6 @@ if [[ ${BUILD_TOOLS} == true ]]; then
     rm -rf ./dist/tools/
     mkdir -p ./dist/tools/
     $(npm bin)/tsc -p ${TSCONFIG}
-
-    cp ./tools/@angular/tsc-wrapped/package.json ./dist/tools/@angular/tsc-wrapped
   travisFoldEnd "build tools"
 fi
 
@@ -398,11 +352,11 @@ if [[ ${BUILD_ALL} == true && ${TYPECHECK_ALL} == true ]]; then
 
   TSCONFIG="packages/tsconfig.json"
   travisFoldStart "tsc -p ${TSCONFIG}" "no-xtrace"
-    $NGC -p ${TSCONFIG}
+    $TSC -p ${TSCONFIG}
   travisFoldEnd "tsc -p ${TSCONFIG}"
   TSCONFIG="modules/tsconfig.json"
   travisFoldStart "tsc -p ${TSCONFIG}" "no-xtrace"
-    $NGC -p ${TSCONFIG}
+    $TSC -p ${TSCONFIG}
   travisFoldEnd "tsc -p ${TSCONFIG}"
 
 fi
@@ -414,6 +368,22 @@ if [[ ${BUILD_ALL} == true ]]; then
   fi
 fi
 
+if [[ ${BUILD_TOOLS} == true || ${BUILD_ALL} == true ]]; then
+  echo "====== (tsc-wrapped)COMPILING: \$(npm bin)/tsc -p packages/tsc-wrapped/tsconfig.json ====="
+  $(npm bin)/tsc -p packages/tsc-wrapped/tsconfig.json
+  echo "====== (tsc-wrapped)COMPILING: \$(npm bin)/tsc -p packages/tsc-wrapped/tsconfig-build.json ====="
+  $(npm bin)/tsc -p packages/tsc-wrapped/tsconfig-build.json
+  cp ./packages/tsc-wrapped/package.json ./dist/packages-dist/tsc-wrapped
+  cp ./packages/tsc-wrapped/README.md ./dist/packages-dist/tsc-wrapped
+  updateVersionReferences dist/packages-dist/tsc-wrapped
+
+  rsync -a packages/bazel/ ./dist/packages-dist/bazel
+  # Remove BEGIN-INTERNAL...END-INTERAL blocks
+  # https://stackoverflow.com/questions/24175271/how-can-i-match-multi-line-patterns-in-the-command-line-with-perl-style-regex
+  perl -0777 -n -i -e "s/(?m)^.*BEGIN-INTERNAL[\w\W]*END-INTERNAL.*\n//g; print" $(grep -ril BEGIN-INTERNAL dist/packages-dist/bazel) < /dev/null 2> /dev/null
+  updateVersionReferences dist/packages-dist/bazel
+fi
+
 for PACKAGE in ${PACKAGES[@]}
 do
   travisFoldStart "build package: ${PACKAGE}" "no-xtrace"
@@ -422,8 +392,10 @@ do
   SRC_DIR=${ROOT_DIR}/${PACKAGE}
   ROOT_OUT_DIR=${PWD}/dist/packages
   OUT_DIR=${ROOT_OUT_DIR}/${PACKAGE}
+  OUT_DIR_ESM5=${ROOT_OUT_DIR}/${PACKAGE}/esm5
   NPM_DIR=${PWD}/dist/packages-dist/${PACKAGE}
-  MODULES_DIR=${NPM_DIR}/@angular
+  ESM15_DIR=${NPM_DIR}/esm15
+  ESM5_DIR=${NPM_DIR}/esm5
   BUNDLES_DIR=${NPM_DIR}/bundles
 
   LICENSE_BANNER=${ROOT_DIR}/license-banner.txt
@@ -442,15 +414,15 @@ do
 
       echo "======        Copy ${PACKAGE} typings"
       rsync -a --exclude=*.js --exclude=*.js.map ${OUT_DIR}/ ${NPM_DIR}
-      moveTypings ${NPM_DIR} ${PACKAGE}
 
       (
         cd  ${SRC_DIR}
         echo "======         Rollup ${PACKAGE}"
-        rollupIndex ${OUT_DIR} ${MODULES_DIR} ${ROOT_DIR}
+        rollupIndex ${OUT_DIR} ${ESM15_DIR} ${ROOT_DIR}
 
-        echo "======         Downleveling ES2015 to ESM/ES5"
-        downlevelES2015 ${MODULES_DIR}
+        echo "======         Produce ESM5 version"
+        compilePackageES5 ${SRC_DIR} ${OUT_DIR_ESM5} ${PACKAGE}
+        rollupIndex ${OUT_DIR_ESM5} ${ESM5_DIR} ${ROOT_DIR}
 
         echo "======         Run rollup conversions on ${PACKAGE}"
         runRollup ${SRC_DIR}
@@ -458,6 +430,11 @@ do
         minify ${BUNDLES_DIR}
 
       ) 2>&1 | grep -v "as external dependency"
+
+      if [[ ${PACKAGE} == "common" ]]; then
+        echo "======      Copy i18n locale data"
+        rsync -a --exclude=*.d.ts --exclude=*.metadata.json ${OUT_DIR}/locales/ ${NPM_DIR}/locales
+      fi
     else
       echo "======        Copy ${PACKAGE} node tool"
       rsync -a ${OUT_DIR}/ ${NPM_DIR}
@@ -472,12 +449,7 @@ do
 
 
   if [[ -d ${NPM_DIR} ]]; then
-    (
-      echo "======      VERSION: Updating version references"
-      cd ${NPM_DIR}
-      echo "======       EXECUTE: perl -p -i -e \"s/0\.0\.0\-PLACEHOLDER/${VERSION}/g\" $""(grep -ril 0\.0\.0\-PLACEHOLDER .)"
-      perl -p -i -e "s/0\.0\.0\-PLACEHOLDER/${VERSION}/g" $(grep -ril 0\.0\.0\-PLACEHOLDER .) < /dev/null 2> /dev/null
-    )
+    updateVersionReferences ${NPM_DIR}
   fi
 
   travisFoldEnd "build package: ${PACKAGE}"

docs/DEBUG.md

@@ -0,0 +1,59 @@
+# Debugging Angular
+
+The Angular project has comprehensive unit tests for the core packages and the tools.
+The core packages are tested both in the browser (via Karma) and on the server (via Node.js).
+
+## Debugging in Karma
+
+Run the unit tests as normal using via the `./test.sh` script. For example:
+
+```bash
+./test.sh browserNoRouter
+```
+
+Once the initial build has completed and the Karma server has started up, you can go to the
+Chrome browser that is automatically opened, usually pointing to `http://localhost:9876`.
+The script will sit watching for code changes, recompiling the changed files and triggering
+further runs of the unit tests in the browser.
+
+In this browser there is a "DEBUG" link (in the top right corner). Clicking this link will
+open up a new tab that will run the unit tests and will not timeout, giving you time to
+step through the code.
+
+Open up this tab's developer console to access the source code viewer where you can set
+breakpoints and interrogate the current stack and variables.
+
+It is useful to focus your debugging on one test at a time by changing that test to be
+defined using the `fit(...)` function, rather than `it(...)`. Moreover it can be helpful
+to place a `debugger` statement in this `fit` clause to cause the debugger to stop when
+it hits this test.
+
+## Debugging in Node
+
+Run the unit tests as normal using the `./test.sh` script, but add the `--debug` flag to
+the command. For example:
+
+```bash
+./test.sh node --debug
+```
+
+Once the initial building has completed, the script will watch for code changes, recompiling
+and running the unit tests via a tool call `cjs-jasmine`. Due to the `--debug` flag, each
+test run will create a debugging server listening on a port (such as 9229), which can be
+connected to by a debugger.
+
+You can use Chrome as the debugger by navigating to `chrome://inspect` then clicking the
+"Open dedicated DevTools for Node" link. This will open up a Developer console, which will
+automatically connect to the debugging server.
+
+It is useful to focus your debugging on one test at a time by changing that test to be
+defined using the `fit(...)` function, rather than `it(...)`. Moreover it can be helpful
+to place a `debugger` statement in this `fit` clause to cause the debugger to stop when
+it hits this test.
+
+**Problem with node 6:** at the time of writing, the node process does not tell the Chrome
+debugger when it has completed, and so the debugger is not able to automatically disconnect
+from listening to the debugging server. To solve this, just close the developer tools window
+after each run of the unit tests, before making changes to the code.  This is fixed in node 8
+and may be backported to node 6. This issue is tracked in
+https://github.com/nodejs/node/pull/12814#issuecomment-309908579.

docs/DEVELOPER.md

@@ -126,6 +126,8 @@ $ ./test.sh tools            # Run angular tooling (not framework) tests
 
 You should execute the 3 test suites before submitting a PR to github.
 
+See [DEBUG.md](DEBUG.md) for information on debugging the code while running the unit tests.
+
 All the tests are executed on our Continuous Integration infrastructure and a PR could only be merged once the tests pass.
 
 - CircleCI fails if your code is not formatted properly,
@@ -177,7 +179,7 @@ First time, you need to create the github repositories:
 
 ``` shell
 $ export TOKEN=[get one from https://github.com/settings/tokens]
-$ CREATE_REPOS=1 ./scripts/publish/publish-build-artifacts.sh [github username]
+$ CREATE_REPOS=1 TRAVIS= ./scripts/ci/publish-build-artifacts.sh [github username]
 ```
 
 For subsequent snapshots, just run

gulpfile.js

@@ -42,3 +42,6 @@ gulp.task('serve', loadTask('serve', 'default'));
 gulp.task('serve-examples', loadTask('serve', 'examples'));
 gulp.task('changelog', loadTask('changelog'));
 gulp.task('check-env', () => {/* this is a noop because the env test ran already above */});
+gulp.task('cldr:extract', loadTask('cldr', 'extract'));
+gulp.task('cldr:download', loadTask('cldr', 'download'));
+gulp.task('cldr:gen-closure-locale', loadTask('cldr', 'closure'));

integration/.gitignore

@@ -1,10 +1,13 @@
 built/
 dist/
 vendor/
+yarn.lock
+.ng-cli/
+cli-*/**
 */src/*.d.ts
 */src/*.js
 **/*.ngfactory.ts
 **/*.ngsummary.json
 **/*.ngsummary.ts
 */yarn*
-*/.yarn_local_cache*
+**/.yarn_local_cache*