release: cut the v6.1.0-beta.0 release

PR Close #24320

.circleci/README.md

@@ -0,0 +1,19 @@
+# Encryption
+
+Based on https://github.com/circleci/encrypted-files
+
+In the CircleCI web UI, we have a secret variable called `KEY`
+https://circleci.com/gh/angular/angular/edit#env-vars
+which is only exposed to non-fork builds
+(see "Pass secrets to builds from forked pull requests" under
+https://circleci.com/gh/angular/angular/edit#advanced-settings)
+
+We use this as a symmetric AES encryption key to encrypt tokens like
+a GitHub token that enables publishing snapshots.
+
+To create the github_token file, we take this approach:
+- Find the angular-builds:token in http://valentine
+- Go inside the ngcontainer docker image so you use the same version of openssl as we will at runtime: `docker run --rm -it angular/ngcontainer`
+- echo "https://[token]:@github.com" > credentials
+- openssl aes-256-cbc -e -in credentials -out .circleci/github_token -k $KEY
+- If needed, base64-encode the result so you can copy-paste it out of docker: `base64 github_token`

.circleci/config.yml

@@ -12,8 +12,8 @@
 ## IMPORTANT
 # If you change the `docker_image` version, also change the `cache_key` suffix and the version of
 # `com_github_bazelbuild_buildtools` in the `/WORKSPACE` file.
-var_1: &docker_image angular/ngcontainer:0.2.0
-var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.2.0
+var_1: &docker_image angular/ngcontainer:0.3.0
+var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.3.0
 
 # Define common ENV vars
 var_3: &define_env_vars
@@ -80,28 +80,32 @@ jobs:
 
       - run: ls /home/circleci/bazel_repository_cache || true
       - run: bazel info release
-      - run: bazel run @yarn//:yarn
+      - run: bazel run @nodejs//:yarn
       # Use bazel query so that we explicitly ask for all buildable targets to be built as well
       # This avoids waiting for the slowest build target to finish before running the first test
       # See https://github.com/bazelbuild/bazel/issues/4257
       # NOTE: Angular developers should typically just bazel build //packages/... or bazel test //packages/...
-      - run: bazel query --output=label //... | xargs bazel test
+      - run: bazel query --output=label //... | xargs bazel test --build_tag_filters=-ivy-only --test_tag_filters=-manual,-ivy-only
 
       # CircleCI will allow us to go back and view/download these artifacts from past builds.
       # Also we can use a service like https://buildsize.org/ to automatically track binary size of these artifacts.
+      # The destination keys need be format {projectName}/{context}/{fileName} so that the github-robot can process them for size calculations
+      # projectName should remain consistant to group files
+      # context and fileName can be almost anything (within usual URI rules)
+      # There should only be exactly 2 forward slashes in the path
+      # This is so they're backwards compatiable with the existing data we have on bundle sizes
       - store_artifacts:
           path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js
-          destination: packages/core/test/bundling/hello_world/bundle.min.js
+          destination: core/hello_world/bundle
       - store_artifacts:
           path: dist/bin/packages/core/test/bundling/todo/bundle.min.js
-          destination: packages/core/test/bundling/todo/bundle.min.js
+          destination: core/todo/bundle
       - store_artifacts:
           path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js.br
-          destination: packages/core/test/bundling/hello_world/bundle.min.js.br
+          destination: core/hello_world/bundle.br
       - store_artifacts:
           path: dist/bin/packages/core/test/bundling/todo/bundle.min.js.br
-          destination: packages/core/test/bundling/todo/bundle.min.js.br
-
+          destination: core/todo/bundle.br
       - save_cache:
           key: *cache_key
           paths:
@@ -127,7 +131,7 @@ jobs:
       - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
       - *setup-bazel-remote-cache
 
-      - run: bazel run @yarn//:yarn
+      - run: bazel run @nodejs//:yarn
       - run: scripts/build-packages-dist.sh
 
       # Save the npm packages from //packages/... for other workflow jobs to read
@@ -158,6 +162,16 @@ jobs:
   publish_snapshot:
     <<: *job_defaults
     steps:
+      # See below - ideally this job should not trigger for non-upstream builds.
+      # But since it does, we have to check this condition.
+      - run:
+          name: Skip this job for Pull Requests and Fork builds
+          # Note, `|| true` on the end makes this step always exit 0
+          command: '[[
+              -v CIRCLE_PR_NUMBER
+              || "$CIRCLE_PROJECT_USERNAME" != "angular"
+              || "$CIRCLE_PROJECT_REPONAME" != "angular"
+          ]] && circleci step halt || true'
       - checkout:
           <<: *post_checkout
       - attach_workspace:
@@ -166,6 +180,9 @@ jobs:
       # This is not compatible with our mechanism of using a Personal Access Token
       # Clear the global setting
       - run: git config --global --unset "url.ssh://git@github.com.insteadof"
+      - run:
+          name: Decrypt github credentials
+          command: 'openssl aes-256-cbc -d -in .circleci/github_token -k "${KEY}" -out ~/.git_credentials'
       - run: ./scripts/ci/publish-build-artifacts.sh
 
   aio_monitoring:
@@ -191,8 +208,7 @@ workflows:
           # Note: no filters on this job because we want it to run for all upstream branches
           # We'd really like to filter out pull requests here, but not yet available:
           # https://discuss.circleci.com/t/workflows-pull-request-filter/14396/4
-          # Instead, the publish-build-artifacts.sh script just terminates when
-          # CIRCLE_PR_NUMBER is set.
+          # Instead, the job just exits immediately at the first step.
           requires:
             # Only publish if tests and integration tests pass
             - test

.github/angular-robot.yml

@@ -1,5 +1,14 @@
 # Configuration for angular-robot
 
+#options for the size plugin
+size:
+  disabled: false
+  maxSizeIncrease: 1000
+  circleCiStatusName: "ci/circleci: build-packages-dist"
+  status:
+    disabled: false
+    context: "ci/angular: size"
+
 # options for the merge plugin
 merge:
   # the status will be added to your pull requests
@@ -36,10 +45,12 @@ merge:
       - "packages/language-service/**"
       - "**/.gitignore"
       - "**/.gitkeep"
+      - "**/package.json"
       - "**/tsconfig-build.json"
       - "**/tsconfig.json"
       - "**/rollup.config.js"
       - "**/BUILD.bazel"
+      - "packages/**/integrationtest/**"
       - "packages/**/test/**"
 
   # comment that will be added to a PR when there is a conflict, leave empty or set to false to disable

.pullapprove.yml

@@ -10,7 +10,6 @@
 # andrewseguin - Andrew Seguin
 # brandonroberts - Brandon Roberts
 # brocco - Mike Brocchi
-# chuckjaz - Chuck Jazdzewski
 # filipesilva - Filipe Silva
 # gkalpak - George Kalpakas
 # hansl - Hans Larsen
@@ -18,6 +17,7 @@
 # jasonaden - Jason Aden
 # kapunahelewong - Kapunahele Wong
 # kara - Kara Erickson
+# kyliau - Keen Yee Liau
 # matsko - Matias Niemelä
 # mhevery - Misko Hevery
 # petebacondarwin - Pete Bacon Darwin
@@ -94,7 +94,7 @@ groups:
           - "tools/bazel.rc"
     users:
       - alexeagle #primary
-      - chuckjaz
+      - kyliau
       - IgorMinar #fallback
       - mhevery
       - vikerman #fallback
@@ -133,7 +133,7 @@ groups:
         - "packages/core/*"
     users:
       - mhevery #primary
-      - chuckjaz
+      - jasonaden
       - kara
       - vicb
       - IgorMinar #fallback
@@ -237,7 +237,7 @@ groups:
       files:
         - "packages/language-service/*"
     users:
-      - chuckjaz #primary
+      - kyliau #primary
       # needs secondary
       - vicb
       - IgorMinar #fallback

BUILD.bazel

@@ -11,7 +11,7 @@ exports_files([
 # This ensures that package.json in subdirectories get installed as well.
 alias(
     name = "install",
-    actual = "@yarn//:yarn",
+    actual = "@nodejs//:yarn",
 )
 
 node_modules_filegroup(
@@ -44,14 +44,16 @@ filegroup(
         "//:node_modules/zone.js/dist/zone.js",
         "//:node_modules/zone.js/dist/zone-testing.js",
         "//:node_modules/zone.js/dist/task-tracking.js",
+        "//:test-events.js",
     ],
 )
 
 filegroup(
-    name = "angularjs",
-    # do not sort
+    name = "angularjs_scripts",
     srcs = [
-        "//:node_modules/angular/angular.js",
+        "//:node_modules/angular-1.5/angular.js",
+        "//:node_modules/angular-mocks-1.5/angular-mocks.js",
         "//:node_modules/angular-mocks/angular-mocks.js",
+        "//:node_modules/angular/angular.js",
     ],
 )

CHANGELOG.md

@@ -1,3 +1,324 @@
+<a name="6.1.0-beta.0"></a>
+## [6.1.0-beta.0](https://github.com/angular/angular/compare/6.0.0-rc.5...6.1.0-beta.0) (2018-06-06)
+
+
+### Bug Fixes
+
+* **animations:** do not throw errors when a destroyed component is animated ([#23836](https://github.com/angular/angular/issues/23836)) ([d2a8687](https://github.com/angular/angular/commit/d2a8687))
+* **animations:** Fix browser detection logic ([#24188](https://github.com/angular/angular/issues/24188)) ([b492b9e](https://github.com/angular/angular/commit/b492b9e))
+* **animations:** properly clean up queried element styles in safari/edge ([#23633](https://github.com/angular/angular/issues/23633)) ([da9ff25](https://github.com/angular/angular/commit/da9ff25))
+* **animations:** retain state styling for nodes that are moved around ([#23534](https://github.com/angular/angular/issues/23534)) ([65211f4](https://github.com/angular/angular/commit/65211f4))
+* **animations:** retain trigger-state for nodes that are moved around ([#24238](https://github.com/angular/angular/issues/24238)) ([8db928d](https://github.com/angular/angular/commit/8db928d))
+* **benchpress:** Fix promise chain in chrome_driver_extension. ([#23458](https://github.com/angular/angular/issues/23458)) ([d4b6c41](https://github.com/angular/angular/commit/d4b6c41))
+* **compiler:** avoid a crash in ngc-wrapped. ([#23468](https://github.com/angular/angular/issues/23468)) ([e1c4930](https://github.com/angular/angular/commit/e1c4930))
+* **compiler:** generate constant array for i18n attributes ([#23837](https://github.com/angular/angular/issues/23837)) ([cfde36d](https://github.com/angular/angular/commit/cfde36d))
+* **compiler:** generate core-compliant hostBindings property ([#24087](https://github.com/angular/angular/issues/24087)) ([01b5acd](https://github.com/angular/angular/commit/01b5acd)), closes [#24013](https://github.com/angular/angular/issues/24013)
+* **compiler:** handle undefined annotation metadata ([#23349](https://github.com/angular/angular/issues/23349)) ([ca776c5](https://github.com/angular/angular/commit/ca776c5))
+* **compiler-cli:** don't rely on incompatible TS method ([#23550](https://github.com/angular/angular/issues/23550)) ([b1f040f](https://github.com/angular/angular/commit/b1f040f))
+* **core:** avoid eager providers re-initialization ([#23559](https://github.com/angular/angular/issues/23559)) ([0c6dc45](https://github.com/angular/angular/commit/0c6dc45))
+* **core:** call ngOnDestroy on all services that have it ([#23755](https://github.com/angular/angular/issues/23755)) ([fc03427](https://github.com/angular/angular/commit/fc03427)), closes [#22466](https://github.com/angular/angular/issues/22466) [#22240](https://github.com/angular/angular/issues/22240) [#14818](https://github.com/angular/angular/issues/14818)
+* **elements:** always check to create strategy ([#23825](https://github.com/angular/angular/issues/23825)) ([b1cda36](https://github.com/angular/angular/commit/b1cda36))
+* **elements:** prevent closure renaming of platform properties ([#23843](https://github.com/angular/angular/issues/23843)) ([d4b8b24](https://github.com/angular/angular/commit/d4b8b24))
+* **forms:** properly handle special properties in FormGroup.get ([#22249](https://github.com/angular/angular/issues/22249)) ([9367e91](https://github.com/angular/angular/commit/9367e91)), closes [#17195](https://github.com/angular/angular/issues/17195)
+* **platform-server:** avoid clash between server and client style encapsulation attributes ([#24158](https://github.com/angular/angular/issues/24158)) ([b96a3c8](https://github.com/angular/angular/commit/b96a3c8))
+* **platform-server:** avoid dependency cycle when using http interceptor ([#24229](https://github.com/angular/angular/issues/24229)) ([60aa943](https://github.com/angular/angular/commit/60aa943)), closes [#23023](https://github.com/angular/angular/issues/23023)
+* **platform-server:** don't reflect innerHTML property to attibute ([#24213](https://github.com/angular/angular/issues/24213)) ([6a663a4](https://github.com/angular/angular/commit/6a663a4)), closes [#19278](https://github.com/angular/angular/issues/19278)
+* **platform-server:** provide Domino DOM types globally ([#24116](https://github.com/angular/angular/issues/24116)) ([c73196e](https://github.com/angular/angular/commit/c73196e)), closes [#23280](https://github.com/angular/angular/issues/23280) [#23133](https://github.com/angular/angular/issues/23133)
+* **router:** avoid freezing queryParams in-place ([#22663](https://github.com/angular/angular/issues/22663)) ([89f64e5](https://github.com/angular/angular/commit/89f64e5)), closes [#22617](https://github.com/angular/angular/issues/22617)
+* **router:** cache route handle if found ([#22475](https://github.com/angular/angular/issues/22475)) ([4cfa571](https://github.com/angular/angular/commit/4cfa571)), closes [#22474](https://github.com/angular/angular/issues/22474)
+* **router:** correct the segment parsing so it won't break on ampersand ([#23684](https://github.com/angular/angular/issues/23684)) ([553a680](https://github.com/angular/angular/commit/553a680))
+* **service-worker:** add badge to NOTIFICATION_OPTION_NAMES ([#23241](https://github.com/angular/angular/issues/23241)) ([fb59b2d](https://github.com/angular/angular/commit/fb59b2d)), closes [#23196](https://github.com/angular/angular/issues/23196)
+* **service-worker:** check platformBrowser before accessing navigator.serviceWorker ([#21231](https://github.com/angular/angular/issues/21231)) ([0bdd30e](https://github.com/angular/angular/commit/0bdd30e))
+* **service-worker:** correctly handle requests with empty `clientId` ([#23625](https://github.com/angular/angular/issues/23625)) ([e0ed59e](https://github.com/angular/angular/commit/e0ed59e)), closes [#23526](https://github.com/angular/angular/issues/23526)
+* **service-worker:** deprecate `versionedFiles` in asset-group resources ([#23584](https://github.com/angular/angular/issues/23584)) ([1d378e2](https://github.com/angular/angular/commit/1d378e2))
+
+
+### Features
+
+* **compiler:** support `// ...` and `// TODO` in mock compiler expectations ([#23441](https://github.com/angular/angular/issues/23441)) ([c6b206e](https://github.com/angular/angular/commit/c6b206e))
+* **compiler-cli:** update `tsickle` to `0.29.x` ([#24233](https://github.com/angular/angular/issues/24233)) ([f69ac67](https://github.com/angular/angular/commit/f69ac67))
+* **platform-browser:** add HammerJS lazy-loader symbols to public API ([#23943](https://github.com/angular/angular/issues/23943)) ([26fbf1d](https://github.com/angular/angular/commit/26fbf1d))
+* **platform-browser:** allow lazy-loading HammerJS ([#23906](https://github.com/angular/angular/issues/23906)) ([313bdce](https://github.com/angular/angular/commit/313bdce))
+* **platform-server:** use EventManagerPlugin on the server ([#24132](https://github.com/angular/angular/issues/24132)) ([d6595eb](https://github.com/angular/angular/commit/d6595eb))
+* **router:** add navigation execution context info to activation hooks ([#24204](https://github.com/angular/angular/issues/24204)) ([20c463e](https://github.com/angular/angular/commit/20c463e)), closes [#24202](https://github.com/angular/angular/issues/24202)
+
+
+<a name="6.0.4"></a>
+## [6.0.4](https://github.com/angular/angular/compare/6.0.3...6.0.4) (2018-06-06)
+
+
+### Bug Fixes
+
+* **animations:** Fix browser detection logic ([#24188](https://github.com/angular/angular/issues/24188)) ([c9eb491](https://github.com/angular/angular/commit/c9eb491))
+* **animations:** retain trigger-state for nodes that are moved around ([#24238](https://github.com/angular/angular/issues/24238)) ([19deca1](https://github.com/angular/angular/commit/19deca1))
+* **forms:** properly handle special properties in FormGroup.get ([#22249](https://github.com/angular/angular/issues/22249)) ([dc3e8aa](https://github.com/angular/angular/commit/dc3e8aa)), closes [#17195](https://github.com/angular/angular/issues/17195)
+* **platform-server:** avoid clash between server and client style encapsulation attributes ([#24158](https://github.com/angular/angular/issues/24158)) ([e9f2203](https://github.com/angular/angular/commit/e9f2203))
+* **platform-server:** avoid dependency cycle when using http interceptor ([#24229](https://github.com/angular/angular/issues/24229)) ([2991b1b](https://github.com/angular/angular/commit/2991b1b)), closes [#23023](https://github.com/angular/angular/issues/23023)
+* **platform-server:** don't reflect innerHTML property to attibute ([#24213](https://github.com/angular/angular/issues/24213)) ([c17098d](https://github.com/angular/angular/commit/c17098d)), closes [#19278](https://github.com/angular/angular/issues/19278)
+* **platform-server:** provide Domino DOM types globally ([#24116](https://github.com/angular/angular/issues/24116)) ([906b3ec](https://github.com/angular/angular/commit/906b3ec)), closes [#23280](https://github.com/angular/angular/issues/23280) [#23133](https://github.com/angular/angular/issues/23133)
+
+
+<a name="6.0.3"></a>
+## [6.0.3](https://github.com/angular/angular/compare/6.0.2...6.0.3) (2018-05-22)
+
+
+### Bug Fixes
+
+* **service-worker:** check platformBrowser before accessing navigator.serviceWorker ([#21231](https://github.com/angular/angular/issues/21231)) ([0ee5b7e](https://github.com/angular/angular/commit/0ee5b7e))
+
+
+
+<a name="6.0.2"></a>
+## [6.0.2](https://github.com/angular/angular/compare/6.0.1...6.0.2) (2018-05-15)
+
+
+### Bug Fixes
+
+* **animations:** do not throw errors when a destroyed component is animated ([#23836](https://github.com/angular/angular/issues/23836)) ([752b83a](https://github.com/angular/angular/commit/752b83a))
+* **service-worker:** deprecate `versionedFiles` in asset-group resources ([#23584](https://github.com/angular/angular/issues/23584)) ([c6b618d](https://github.com/angular/angular/commit/c6b618d))
+
+
+
+<a name="6.0.1"></a>
+# [6.0.1](https://github.com/angular/angular/compare/6.0.0...6.0.1) (2018-05-11)
+
+
+### Bug Fixes
+
+* **animations:** properly clean up queried element styles in safari/edge ([#23686](https://github.com/angular/angular/issues/23686)) ([3824e3f](https://github.com/angular/angular/commit/3824e3f))
+* **animations:** retain state styling for nodes that are moved around ([#23686](https://github.com/angular/angular/issues/23686)) ([05aa5e0](https://github.com/angular/angular/commit/05aa5e0))
+* **core:** call ngOnDestroy on all services that have it ([#23755](https://github.com/angular/angular/issues/23755)) ([5581e97](https://github.com/angular/angular/commit/5581e97)), closes [#22466](https://github.com/angular/angular/issues/22466) [#22240](https://github.com/angular/angular/issues/22240) [#14818](https://github.com/angular/angular/issues/14818)
+* **elements:** always check to create strategy ([#23825](https://github.com/angular/angular/issues/23825)) ([d280077](https://github.com/angular/angular/commit/d280077))
+* **router:** avoid freezing queryParams in-place ([#22663](https://github.com/angular/angular/issues/22663)) ([3d8799b](https://github.com/angular/angular/commit/3d8799b)), closes [#22617](https://github.com/angular/angular/issues/22617)
+* **router:** correct the segment parsing so it won't break on ampersand ([#23684](https://github.com/angular/angular/issues/23684)) ([8733843](https://github.com/angular/angular/commit/8733843))
+* **service-worker:** correctly handle requests with empty `clientId` ([#23625](https://github.com/angular/angular/issues/23625)) ([2254ac2](https://github.com/angular/angular/commit/2254ac2)), closes [#23526](https://github.com/angular/angular/issues/23526)
+
+
+
+<a name="6.0.0"></a>
+# [6.0.0](https://github.com/angular/angular/compare/6.0.0-beta.0...6.0.0) (2018-05-03)
+
+### Release Highlights & Update instructions
+
+Angular v6 is the first release of Angular that unifies the Framework, Material and CLI.
+
+To learn about the release highlights and our new CLI-powered update workflow for your projects please check out the [v6 release announcement](https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4).
+
+
+
+### Dependency updates
+
+* @angular/core now depends on
+  * TypeScript 2.7
+  * RxJS 6.0.0
+  * tslib 1.9.0
+* @angular/platform-server now depends on Domino 2.0
+
+
+
+### Small Features
+
+* **animations:** only use the WA-polyfill alongside AnimationBuilder ([#22143](https://github.com/angular/angular/issues/22143)) ([b2f366b](https://github.com/angular/angular/commit/b2f366b)), closes [#17496](https://github.com/angular/angular/issues/17496)
+* **animations:** expose `element` and `params` within transition matchers ([#22693](https://github.com/angular/angular/issues/22693)) ([58b94e6](https://github.com/angular/angular/commit/58b94e6))
+* **common:** better error message when non-template element used in NgIf ([#22274](https://github.com/angular/angular/issues/22274)) ([67cf11d](https://github.com/angular/angular/commit/67cf11d)), closes [#16410](https://github.com/angular/angular/issues/16410)
+* **common:** better error message when non-template element used in NgIf ([#22274](https://github.com/angular/angular/issues/22274)) ([67cf11d](https://github.com/angular/angular/commit/67cf11d)), closes [#16410](https://github.com/angular/angular/issues/16410)
+* **common:** export functions to format numbers, percents, currencies & dates ([#22423](https://github.com/angular/angular/issues/22423)) ([4180912](https://github.com/angular/angular/commit/4180912)), closes [#20536](https://github.com/angular/angular/issues/20536)
+* **compiler:** lower @NgModule ids if needed ([#23031](https://github.com/angular/angular/issues/23031)) ([bd024c0](https://github.com/angular/angular/commit/bd024c0))
+* **compiler:** implement "enableIvy" compiler option ([#21427](https://github.com/angular/angular/issues/21427)) ([64d16de](https://github.com/angular/angular/commit/64d16de))
+* **compiler:** mark @NgModules in provider lists for identification at runtime ([#22005](https://github.com/angular/angular/issues/22005)) ([2d5e7d1](https://github.com/angular/angular/commit/2d5e7d1))
+* **compiler:** add support for marker tags in xliff serializers ([#21250](https://github.com/angular/angular/issues/21250)) ([f74130c](https://github.com/angular/angular/commit/f74130c)), closes [#21078](https://github.com/angular/angular/issues/21078)
+* **compiler:** support for singleline, multiline & jsdoc comments ([#22715](https://github.com/angular/angular/issues/22715)) ([3b167be](https://github.com/angular/angular/commit/3b167be))
+* **compiler-cli:** lower loadChildren fields to allow dynamic module paths ([#23088](https://github.com/angular/angular/issues/23088)) ([550433a](https://github.com/angular/angular/commit/550433a))
+* **compiler-cli:** check unvalidated combination of ngc and TypeScript ([#22293](https://github.com/angular/angular/issues/22293)) ([3ceee99](https://github.com/angular/angular/commit/3ceee99)), closes [#20669](https://github.com/angular/angular/issues/20669)
+* **compiler-cli:** reflect static methods added to classes in metadata ([#21926](https://github.com/angular/angular/issues/21926)) ([eb8ddd2](https://github.com/angular/angular/commit/eb8ddd2))
+* **compiler-cli:** Check unvalidated combination of ngc and TypeScript ([#22293](https://github.com/angular/angular/issues/22293)) ([3ceee99](https://github.com/angular/angular/commit/3ceee99)), closes [#20669](https://github.com/angular/angular/issues/20669)
+* **compiler-cli:** add resource inlining to ngc ([#22615](https://github.com/angular/angular/issues/22615)) ([b5be18f](https://github.com/angular/angular/commit/b5be18f))
+* **compiler-cli:** require node 8 as runtime engine ([#22669](https://github.com/angular/angular/issues/22669)) ([c602563](https://github.com/angular/angular/commit/c602563))
+* **core:** add binding name to content changed error ([#20352](https://github.com/angular/angular/issues/20352)) ([d3bf54b](https://github.com/angular/angular/commit/d3bf54b))
+* **core:** optional generic type for ElementRef ([#20765](https://github.com/angular/angular/issues/20765)) ([d3d9aac](https://github.com/angular/angular/commit/d3d9aac)), closes [#13139](https://github.com/angular/angular/issues/13139)
+* **core:** set `preserveWhitespaces` to false by default ([#22046](https://github.com/angular/angular/issues/22046)) ([f1a0632](https://github.com/angular/angular/commit/f1a0632)), closes [#22027](https://github.com/angular/angular/issues/22027)
+* **core:** support metadata reflection for native class types ([#22356](https://github.com/angular/angular/issues/22356)) ([5c89d6b](https://github.com/angular/angular/commit/5c89d6b)), closes [#21731](https://github.com/angular/angular/issues/21731)
+* **core:** change @Injectable() to support tree-shakeable tokens ([#22005](https://github.com/angular/angular/issues/22005)) ([235a235](https://github.com/angular/angular/commit/235a235))
+* **core:** support metadata reflection for native class types ([#22356](https://github.com/angular/angular/issues/22356)) ([b7544cc](https://github.com/angular/angular/commit/b7544cc)), closes [#21731](https://github.com/angular/angular/issues/21731)
+* **core:** allow direct scoping of @Injectables to the root injector ([#22185](https://github.com/angular/angular/issues/22185)) ([7ac34e4](https://github.com/angular/angular/commit/7ac34e4))
+* **core:** add task tracking to Testability ([#16863](https://github.com/angular/angular/issues/16863)) ([37fedd0](https://github.com/angular/angular/commit/37fedd0))
+* **forms:** handle string with and without line boundary on pattern validator ([#19256](https://github.com/angular/angular/issues/19256)) ([54bf179](https://github.com/angular/angular/commit/54bf179))
+* **forms:** multiple validators for array method ([#20766](https://github.com/angular/angular/issues/20766)) ([941e88f](https://github.com/angular/angular/commit/941e88f)), closes [#20665](https://github.com/angular/angular/issues/20665)
+* **forms:** allow markAsPending to emit events ([#20212](https://github.com/angular/angular/issues/20212)) ([e86b64b](https://github.com/angular/angular/commit/e86b64b)), closes [#17958](https://github.com/angular/angular/issues/17958)
+* **platform-browser:** add token marking which the type of animation module nearest in the injector tree ([#23075](https://github.com/angular/angular/issues/23075)) ([b551f84](https://github.com/angular/angular/commit/b551f84))
+* **platform-browser:** do not throw error when Hammer.js not loaded ([#22257](https://github.com/angular/angular/issues/22257)) ([991300b](https://github.com/angular/angular/commit/991300b)), closes [#16992](https://github.com/angular/angular/issues/16992)
+* **platform-browser:** fix [#19604](https://github.com/angular/angular/issues/19604), can config hammerOptions ([#21979](https://github.com/angular/angular/issues/21979)) ([1d571b2](https://github.com/angular/angular/commit/1d571b2))
+* **platform-server:** bump Domino to v2.0 ([#22411](https://github.com/angular/angular/issues/22411)) ([d3827a0](https://github.com/angular/angular/commit/d3827a0))
+* **router:** add navigationSource and restoredState to NavigationStart event ([#21728](https://github.com/angular/angular/issues/21728)) ([c40ae7f](https://github.com/angular/angular/commit/c40ae7f))
+* **service-worker:** add support for configuring navigations URLs ([#23339](https://github.com/angular/angular/issues/23339)) ([08325aa](https://github.com/angular/angular/commit/08325aa)), closes [#20404](https://github.com/angular/angular/issues/20404)
+* **service-worker:** add helper script which will uninstall SW ([#21863](https://github.com/angular/angular/issues/21863)) ([b10540a](https://github.com/angular/angular/commit/b10540a))
+
+
+
+
+### Bug Fixes
+
+* **animations:** report correct totalTime value even during noOp animations ([#22225](https://github.com/angular/angular/issues/22225)) ([e1bf067](https://github.com/angular/angular/commit/e1bf067))
+* **animations:** avoid animation insertions during router back/refresh ([#21977](https://github.com/angular/angular/issues/21977)) ([f88fba0](https://github.com/angular/angular/commit/f88fba0)), closes [#19712](https://github.com/angular/angular/issues/19712)
+* **animations:** treat numeric state name values as strings ([#22923](https://github.com/angular/angular/issues/22923)) ([e5e1b0d](https://github.com/angular/angular/commit/e5e1b0d))
+* **animations:** report correct totalTime value even during noOp animations ([#22225](https://github.com/angular/angular/issues/22225)) ([e1bf067](https://github.com/angular/angular/commit/e1bf067))
+* **animations:** fix increment/decrement aliases example ([#18323](https://github.com/angular/angular/issues/18323)) ([d2aa8ac](https://github.com/angular/angular/commit/d2aa8ac))
+* **common:** NgClass should properly take className changes into account ([#21937](https://github.com/angular/angular/issues/21937)) ([4a42669](https://github.com/angular/angular/commit/4a42669)), closes [#21932](https://github.com/angular/angular/issues/21932)
+* **common:** fix the titlecase pipe ([#22600](https://github.com/angular/angular/issues/22600)) ([7966744](https://github.com/angular/angular/commit/7966744))
+* **common:** add locale currency values ([#21783](https://github.com/angular/angular/issues/21783)) ([420cc7a](https://github.com/angular/angular/commit/420cc7a)), closes [#20385](https://github.com/angular/angular/issues/20385)
+* **common:** round currencies based on decimal digits in `CurrencyPipe` ([#21783](https://github.com/angular/angular/issues/21783)) ([44154e7](https://github.com/angular/angular/commit/44154e7)), closes [#10189](https://github.com/angular/angular/issues/10189)
+* **common:** weaken AsyncPipe transform signature ([#22169](https://github.com/angular/angular/issues/22169)) ([be59c3a](https://github.com/angular/angular/commit/be59c3a))
+* **common:** http testing library should not convert null to a string when flushing a mock request ([#21417](https://github.com/angular/angular/issues/21417)) ([8b14488](https://github.com/angular/angular/commit/8b14488)), closes [#20744](https://github.com/angular/angular/issues/20744)
+* **common:** correct mapping of Observable methods ([#20518](https://github.com/angular/angular/issues/20518)) ([2639b4b](https://github.com/angular/angular/commit/2639b4b)), closes [#20516](https://github.com/angular/angular/issues/20516)
+* **common:** then and else template might be set to null ([#22298](https://github.com/angular/angular/issues/22298)) ([8115edc](https://github.com/angular/angular/commit/8115edc))
+* **common:** A null value should remove the style on IE ([#21679](https://github.com/angular/angular/issues/21679)) ([7d49443](https://github.com/angular/angular/commit/7d49443)), closes [#21064](https://github.com/angular/angular/issues/21064)
+* **common:** fallback to last defined value for named date and time formats ([#21299](https://github.com/angular/angular/issues/21299)) ([879756d](https://github.com/angular/angular/commit/879756d)), closes [#21282](https://github.com/angular/angular/issues/21282)
+* **common:** set correct timezone for ISO8601 dates in Safari ([#21506](https://github.com/angular/angular/issues/21506)) ([05208b8](https://github.com/angular/angular/commit/05208b8)), closes [#21491](https://github.com/angular/angular/issues/21491)
+* **compiler:** fix ICU select messages to use male/female/other ([#21713](https://github.com/angular/angular/issues/21713)) ([cb5090c](https://github.com/angular/angular/commit/cb5090c))
+* **compiler:** avoid a crash in ngc-wrapped. ([#23468](https://github.com/angular/angular/issues/23468)) ([0bc8443](https://github.com/angular/angular/commit/0bc8443))
+* **compiler:** handle undefined annotation metadata ([#23349](https://github.com/angular/angular/issues/23349)) ([b9431e8](https://github.com/angular/angular/commit/b9431e8))
+* **compiler:** don't typecheck all inputs ([#22899](https://github.com/angular/angular/issues/22899)) ([838a610](https://github.com/angular/angular/commit/838a610))
+* **compiler:** fix support for html-like text in translatable attributes ([#23053](https://github.com/angular/angular/issues/23053)) ([28058b7](https://github.com/angular/angular/commit/28058b7))
+* **compiler:** take quoting into account when determining if object literals can be shared ([#22942](https://github.com/angular/angular/issues/22942)) ([d98e9e7](https://github.com/angular/angular/commit/d98e9e7))
+* **compiler:** do not emit line/char in ngsummary files. ([#22840](https://github.com/angular/angular/issues/22840)) ([5c387a7](https://github.com/angular/angular/commit/5c387a7))
+* **compiler:** make unary plus operator consistent to JavaScript ([#22154](https://github.com/angular/angular/issues/22154)) ([72f8abd](https://github.com/angular/angular/commit/72f8abd)), closes [#22089](https://github.com/angular/angular/issues/22089)
+* **compiler:** allow tree-shakeable injectables to depend on string tokens ([#22376](https://github.com/angular/angular/issues/22376)) ([dd53447](https://github.com/angular/angular/commit/dd53447))
+* **compiler:** don't strip `/*# sourceURL ... */` ([#16088](https://github.com/angular/angular/issues/16088)) ([5f681f9](https://github.com/angular/angular/commit/5f681f9))
+* **compiler:** cache external reference resolution ([#21359](https://github.com/angular/angular/issues/21359)) ([e3e2fc0](https://github.com/angular/angular/commit/e3e2fc0))
+* **compiler:** make `.ngsummary.json` files idempotent ([#21448](https://github.com/angular/angular/issues/21448)) ([e64b1e9](https://github.com/angular/angular/commit/e64b1e9))
+* **compiler-cli:** shorten resolved module name in fileNameToModuleName to npm package name for typings ([#23231](https://github.com/angular/angular/issues/23231)) ([6199ea5](https://github.com/angular/angular/commit/6199ea5))
+* **compiler-cli:** strictMetadataEmit should not break on non-compliant libraries ([#23275](https://github.com/angular/angular/issues/23275)) ([5814355](https://github.com/angular/angular/commit/5814355)), closes [#22210](https://github.com/angular/angular/issues/22210)
+* **compiler-cli:** flat module index metadata should be transformed ([#23129](https://github.com/angular/angular/issues/23129)) ([f99cb5c](https://github.com/angular/angular/commit/f99cb5c))
+* **compiler-cli:** use numeric comparison for TypeScript version ([#22705](https://github.com/angular/angular/issues/22705)) ([193737a](https://github.com/angular/angular/commit/193737a)), closes [#22593](https://github.com/angular/angular/issues/22593)
+* **compiler-cli:** disableTypeScriptVersionCheck should be applied even for older tsc versions ([#22669](https://github.com/angular/angular/issues/22669)) ([3f70aba](https://github.com/angular/angular/commit/3f70aba))
+* **compiler-cli:** emit correct css string escape sequences ([#22776](https://github.com/angular/angular/issues/22776)) ([6e5e819](https://github.com/angular/angular/commit/6e5e819))
+* **compiler-cli:** do not fold errors past calls in the collector ([#21708](https://github.com/angular/angular/issues/21708)) ([dd86790](https://github.com/angular/angular/commit/dd86790))
+* **compiler-cli:** do not lower expressions in non-modules ([#21649](https://github.com/angular/angular/issues/21649)) ([7f93aad](https://github.com/angular/angular/commit/7f93aad))
+* **core:** fix [#20582](https://github.com/angular/angular/issues/20582), don't need to wrap zone in location change listener ([#20640](https://github.com/angular/angular/issues/20640)) ([f791e9f](https://github.com/angular/angular/commit/f791e9f))
+* **core:** fix proper propagation of subscriptions in EventEmitter ([#22016](https://github.com/angular/angular/issues/22016)) ([e81606c](https://github.com/angular/angular/commit/e81606c)), closes [#21999](https://github.com/angular/angular/issues/21999)
+* **core:** fix chained http call ([#20924](https://github.com/angular/angular/issues/20924)) ([7e3f9a4](https://github.com/angular/angular/commit/7e3f9a4)), closes [#20921](https://github.com/angular/angular/issues/20921)
+* **core:** should check Zone existence when scheduleMicroTask ([#20656](https://github.com/angular/angular/issues/20656)) ([3a86940](https://github.com/angular/angular/commit/3a86940))
+* **core:** avoid eager providers re-initialization ([#23559](https://github.com/angular/angular/issues/23559)) ([697b6c0](https://github.com/angular/angular/commit/697b6c0))
+* **core:** add stacktrace in log when error during cleanup component in TestBed ([#22162](https://github.com/angular/angular/issues/22162)) ([16d1700](https://github.com/angular/angular/commit/16d1700))
+* **core:** ensure initial value of QueryList length ([#21980](https://github.com/angular/angular/issues/21980)) ([#21982](https://github.com/angular/angular/issues/21982)) ([e56de10](https://github.com/angular/angular/commit/e56de10)), closes [#21980](https://github.com/angular/angular/issues/21980)
+* **core:** use appropriate inert document strategy for Firefox & Safari ([#17019](https://github.com/angular/angular/issues/17019)) ([a751649](https://github.com/angular/angular/commit/a751649))
+* **core:** properly handle function without prototype in reflector ([#22284](https://github.com/angular/angular/issues/22284)) ([a7ebf5a](https://github.com/angular/angular/commit/a7ebf5a)), closes [#19978](https://github.com/angular/angular/issues/19978)
+* **core:** require factory to be provided for shakeable InjectionToken ([#22207](https://github.com/angular/angular/issues/22207)) ([f755db7](https://github.com/angular/angular/commit/f755db7)), closes [#22205](https://github.com/angular/angular/issues/22205)
+* **core:** remove core animation import symbols ([#22692](https://github.com/angular/angular/issues/22692)) ([f5a98f4](https://github.com/angular/angular/commit/f5a98f4))
+* **forms:** improve error message for invalid value accessors ([#22731](https://github.com/angular/angular/issues/22731)) ([23cc3ef](https://github.com/angular/angular/commit/23cc3ef))
+* **forms:** make Validators.email support optional controls ([#20869](https://github.com/angular/angular/issues/20869)) ([140e7c0](https://github.com/angular/angular/commit/140e7c0))
+* **forms:** prevent event emission on enable/disable when emitEvent is false ([#12366](https://github.com/angular/angular/issues/12366)) ([#21018](https://github.com/angular/angular/issues/21018)) ([0bcfae7](https://github.com/angular/angular/commit/0bcfae7))
+* **forms:** set state before emitting a value from ngModelChange ([#21514](https://github.com/angular/angular/issues/21514)) ([9744a1c](https://github.com/angular/angular/commit/9744a1c)), closes [#21513](https://github.com/angular/angular/issues/21513)
+* **forms:** publish missing types ([#19941](https://github.com/angular/angular/issues/19941)) ([2707012](https://github.com/angular/angular/commit/2707012))
+* **forms:** set state before emitting a value from ngModelChange ([#21514](https://github.com/angular/angular/issues/21514)) ([3e6a86f](https://github.com/angular/angular/commit/3e6a86f)), closes [#21513](https://github.com/angular/angular/issues/21513)
+* **language-service:** Clear caches when program changes ([#21337](https://github.com/angular/angular/issues/21337)) ([43e1520](https://github.com/angular/angular/commit/43e1520)), closes [#19405](https://github.com/angular/angular/issues/19405)
+* **platform-browser:** add @Injectable where it was missing ([#22005](https://github.com/angular/angular/issues/22005)) ([0a1a397](https://github.com/angular/angular/commit/0a1a397))
+* **platform-browser:** support 0/false/null values in transfer_state ([#22179](https://github.com/angular/angular/issues/22179)) ([6435ecd](https://github.com/angular/angular/commit/6435ecd))
+* **platform-browser:** do not throw error when Hammer.js not loaded ([#22257](https://github.com/angular/angular/issues/22257)) ([991300b](https://github.com/angular/angular/commit/991300b)), closes [#16992](https://github.com/angular/angular/issues/16992)
+* **platform-browser:** fix [#19604](https://github.com/angular/angular/issues/19604), can config hammerOptions ([#21979](https://github.com/angular/angular/issues/21979)) ([1d571b2](https://github.com/angular/angular/commit/1d571b2))
+* **platform-server:** require node v8+ ([#23331](https://github.com/angular/angular/issues/23331)) ([bbfa1d3](https://github.com/angular/angular/commit/bbfa1d3))
+* **platform-server:** generate correct stylings for camel case names ([#22263](https://github.com/angular/angular/issues/22263)) ([40ba009](https://github.com/angular/angular/commit/40ba009)), closes [#19235](https://github.com/angular/angular/issues/19235)
+* **platform-server:** add styles to elements correctly ([#22527](https://github.com/angular/angular/issues/22527)) ([cd2ebd2](https://github.com/angular/angular/commit/cd2ebd2))
+* **router:** cache route handle if found ([#22475](https://github.com/angular/angular/issues/22475)) ([d8de648](https://github.com/angular/angular/commit/d8de648)), closes [#22474](https://github.com/angular/angular/issues/22474)
+* **router:** don't use spread operator to workaround an issue in closure compiler ([#22884](https://github.com/angular/angular/issues/22884)) ([e6c731f](https://github.com/angular/angular/commit/e6c731f))
+* **router:** make locationSyncBootstrapListener public due to change in output after TS 2.7 update in [#22669](https://github.com/angular/angular/issues/22669) ([#22896](https://github.com/angular/angular/issues/22896)) ([623d769](https://github.com/angular/angular/commit/623d769))
+* **router:** correct over-encoding of URL fragment ([#22687](https://github.com/angular/angular/issues/22687)) ([0bf6fa5](https://github.com/angular/angular/commit/0bf6fa5))
+* **router:** don't mutate route configs ([#22358](https://github.com/angular/angular/issues/22358)) ([45eff4c](https://github.com/angular/angular/commit/45eff4c)), closes [#22203](https://github.com/angular/angular/issues/22203)
+* **router:** fix URL serialization so special characters are only encoded where needed ([#22337](https://github.com/angular/angular/issues/22337)) ([094666d](https://github.com/angular/angular/commit/094666d)), closes [#10280](https://github.com/angular/angular/issues/10280)
+* **router:** don't use ParamsInheritanceStrategy in declarations ([#21574](https://github.com/angular/angular/issues/21574)) ([925e654](https://github.com/angular/angular/commit/925e654)), closes [#21456](https://github.com/angular/angular/issues/21456)
+* **service-worker:** add badge to NOTIFICATION_OPTION_NAMES ([#23241](https://github.com/angular/angular/issues/23241)) ([fb59b2d](https://github.com/angular/angular/commit/fb59b2d)), closes [#23196](https://github.com/angular/angular/issues/23196)
+* **service-worker:** let `*` match 0 characters in globs ([#23339](https://github.com/angular/angular/issues/23339)) ([6c2c958](https://github.com/angular/angular/commit/6c2c958))
+* **service-worker:** do not enter degraded mode when offline ([#22883](https://github.com/angular/angular/issues/22883)) ([9e9b8dd](https://github.com/angular/angular/commit/9e9b8dd)), closes [#21636](https://github.com/angular/angular/issues/21636)
+* **service-worker:** fix LruList bugs ([#22769](https://github.com/angular/angular/issues/22769)) ([8c2a578](https://github.com/angular/angular/commit/8c2a578)), closes [#22218](https://github.com/angular/angular/issues/22218) [#22768](https://github.com/angular/angular/issues/22768)
+* **service-worker:** ignore invalid `only-if-cached` requests ([#22883](https://github.com/angular/angular/issues/22883)) ([d9dc46e](https://github.com/angular/angular/commit/d9dc46e)), closes [#22362](https://github.com/angular/angular/issues/22362)
+* **service-worker:** properly handle invalid hashes in all scenarios ([#21288](https://github.com/angular/angular/issues/21288)) ([3951098](https://github.com/angular/angular/commit/3951098))
+* **upgrade:** correctly handle downgraded `OnPush` components ([#22209](https://github.com/angular/angular/issues/22209)) ([ad9ce5c](https://github.com/angular/angular/commit/ad9ce5c)), closes [#14286](https://github.com/angular/angular/issues/14286)
+* **upgrade:** propagate return value of resumeBootstrap ([#22754](https://github.com/angular/angular/issues/22754)) ([a2330ff](https://github.com/angular/angular/commit/a2330ff)), closes [#22723](https://github.com/angular/angular/issues/22723)
+* **upgrade:** two-way binding and listening for event ([#22772](https://github.com/angular/angular/issues/22772)) ([2b3de63](https://github.com/angular/angular/commit/2b3de63)), closes [#22734](https://github.com/angular/angular/issues/22734)
+* **upgrade:** correctly destroy nested downgraded component ([#22400](https://github.com/angular/angular/issues/22400)) ([8a85888](https://github.com/angular/angular/commit/8a85888)), closes [#22392](https://github.com/angular/angular/issues/22392)
+* **upgrade:** correctly handle `=` bindings in `[@angular](https://github.com/angular)/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([f089bf5](https://github.com/angular/angular/commit/f089bf5))
+* **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([13ab91e](https://github.com/angular/angular/commit/13ab91e)), closes [#22175](https://github.com/angular/angular/issues/22175)
+
+
+
+### Possible Breaking Changes
+
+* **animations:** When animation is triggered within a disabled zone, the associated event (which an instance of AnimationEvent) will no longer report the totalTime as 0 (it will emit the actual time of the animation).
+
+  To detect if an animation event is reporting a disabled animation then the `event.disabled` property can be used instead.
+
+
+* **compiler:** The `<template>` tag was deprecated in Angular v4 to avoid collisions (i.e. when using Web Components).
+
+  This change removes support for `<template>`. `<ng-template>` should be used instead.
+
+  BEFORE:
+
+      <!-- html template -->
+      <template>some template content</template>
+
+      # tsconfig.json
+      {
+        # ...
+        "angularCompilerOptions": {
+          # ...
+          # This option is no more supported and will have no effect
+          "enableLegacyTemplate": [true|false]
+        }
+      }
+
+  AFTER:
+
+      <!-- html template -->
+      <ng-template>some template content</ng-template>
+
+* **core:** it is no longer possible to import animation-related functions from @angular/core. All animation symbols must now be imported from @angular/animations.
+
+
+* **forms:** - `AbstractControl#statusChanges` now emits an event of `'PENDING'` when you call `AbstractControl#markAsPending`
+  - Previously it did not emit an event when you called `markAsPending`
+  - To migrate you would need to ensure that if you are filtering or checking events from `statusChanges` that you account for the new event when calling `markAsPending`
+
+
+* **forms:** ngModelChange is now emitted after the value/validity is updated on its control.
+
+  Previously, ngModelChange was emitted before its underlying control was updated.
+  This was fine if you passed through the value directly through the $event keyword, e.g.
+
+  ```
+  <input [(ngModel)]="name" (ngModelChange)="onChange($event)">
+
+  onChange(value) {
+     console.log(value);               // would log updated value
+  }
+  ```
+
+  However, if you had a handler for the ngModelChange event that checked the value through the control,
+  you would get the old value rather than the updated value. e.g:
+
+  ```
+  <input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">
+
+  onChange(ngModel: NgModel) {
+    console.log(ngModel.value);        // would log old value, not updated value
+  }
+  ```
+
+  Now the value and validity will be updated before the ngModelChange event is emitted,
+  so the same setup will log the updated value.
+
+  ```
+  onChange(ngModel: NgModel) {
+     console.log(ngModel.value);       // will log updated value
+  }
+  ```
+
+  We think this order will be less confusing when the control is checked directly.
+  You will only need to update your app if it has relied on this bug to keep track of the old control value.
+  If that is the case, you should be able to track the old value directly by saving it on your component.
+
+
+
 <a name="5.2.10"></a>
 ## [5.2.10](https://github.com/angular/angular/compare/5.2.9...5.2.10) (2018-04-16)
 
@@ -29,231 +350,6 @@
 
 
 
-<a name="6.0.0-rc.5"></a>
-## [6.0.0-rc.5](https://github.com/angular/angular/compare/6.0.0-rc.4...6.0.0-rc.5) (2018-04-14)
-
-
-### Bug Fixes
-
-* **compiler:** use correct global name in compiler.umd.js ([#23354](https://github.com/angular/angular/issues/23354)) ([b76dd3b](https://github.com/angular/angular/commit/b76dd3b)), closes [#23343](https://github.com/angular/angular/issues/23343)
-* **compiler-cli:** shorten resolved module name in fileNameToModuleName to npm package name for typings ([#23231](https://github.com/angular/angular/issues/23231)) ([6199ea5](https://github.com/angular/angular/commit/6199ea5))
-* **elements:** include schematics in npm distro ([#23350](https://github.com/angular/angular/issues/23350)) ([9fabe2f](https://github.com/angular/angular/commit/9fabe2f))
-* **service-worker:** let `*` match 0 characters in globs ([#23339](https://github.com/angular/angular/issues/23339)) ([6c2c958](https://github.com/angular/angular/commit/6c2c958))
-
-
-### Features
-
-* **platform-browser:** add token marking which the type of animation module nearest in the injector tree ([#23075](https://github.com/angular/angular/issues/23075)) ([b551f84](https://github.com/angular/angular/commit/b551f84))
-* **service-worker:** add support for configuring navigations URLs ([#23339](https://github.com/angular/angular/issues/23339)) ([08325aa](https://github.com/angular/angular/commit/08325aa)), closes [#20404](https://github.com/angular/angular/issues/20404)
-
-
-
-<a name="6.0.0-rc.4"></a>
-## [6.0.0-rc.4](https://github.com/angular/angular/compare/6.0.0-rc.3...6.0.0-rc.4) (2018-04-12)
-
-
-### Bug Fixes
-
-* **bazel:** set rollup output.name and amd.id ([#23274](https://github.com/angular/angular/issues/23274)) ([3e8eef6](https://github.com/angular/angular/commit/3e8eef6)), closes [#23238](https://github.com/angular/angular/issues/23238)
-* **common:** replace i18n locale undefined values by a const ([#23265](https://github.com/angular/angular/issues/23265)) ([5706810](https://github.com/angular/angular/commit/5706810)), closes [#22988](https://github.com/angular/angular/issues/22988)
-* **common:** workaround UMD/webpack limitation ([#23271](https://github.com/angular/angular/issues/23271)) ([5a298b1](https://github.com/angular/angular/commit/5a298b1)), closes [#23217](https://github.com/angular/angular/issues/23217)
-* **compiler:** Pretty print object instead of [Object object] ([#22689](https://github.com/angular/angular/issues/22689)) ([8555a3a](https://github.com/angular/angular/commit/8555a3a))
-* **compiler-cli:** strictMetadataEmit should not break on non-compliant libraries ([#23275](https://github.com/angular/angular/issues/23275)) ([5814355](https://github.com/angular/angular/commit/5814355)), closes [#22210](https://github.com/angular/angular/issues/22210)
-* **elements:** avoid exception when window is undefined ([#23324](https://github.com/angular/angular/issues/23324)) ([af46d09](https://github.com/angular/angular/commit/af46d09))
-* **platform-server:** require node v8+ ([#23331](https://github.com/angular/angular/issues/23331)) ([bbfa1d3](https://github.com/angular/angular/commit/bbfa1d3))
-
-
-### Features
-
-* **elements:** add schematics ([#23298](https://github.com/angular/angular/issues/23298)) ([37d2cb4](https://github.com/angular/angular/commit/37d2cb4))
-
-
-
-<a name="6.0.0-rc.3"></a>
-## [6.0.0-rc.3](https://github.com/angular/angular/compare/6.0.0-rc.2...6.0.0-rc.3) (2018-04-06)
-
-
-### Bug Fixes
-
-* **bazel:** don't produce ngfactory files for ng_packages ([#23237](https://github.com/angular/angular/issues/23237)) ([da58a55](https://github.com/angular/angular/commit/da58a55))
-* **compiler-cli:** don't lower expressions in flat module metadata ([#23226](https://github.com/angular/angular/issues/23226)) ([11ea3a3](https://github.com/angular/angular/commit/11ea3a3))
-
-
-
-<a name="6.0.0-rc.2"></a>
-## [6.0.0-rc.2](https://github.com/angular/angular/compare/6.0.0-rc.1...6.0.0-rc.2) (2018-04-05)
-
-
-### Bug Fixes
-
-* **common:** `locales` are not being shipped ([#23136](https://github.com/angular/angular/issues/23136)) ([7ca7720](https://github.com/angular/angular/commit/7ca7720))
-* **common:** properly take className changes into account ([#21937](https://github.com/angular/angular/issues/21937)) ([4a42669](https://github.com/angular/angular/commit/4a42669)), closes [#21932](https://github.com/angular/angular/issues/21932)
-* **compiler-cli:** flat module index metadata should be transformed ([#23129](https://github.com/angular/angular/issues/23129)) ([f99cb5c](https://github.com/angular/angular/commit/f99cb5c))
-* **core:** inject() should always work in an NgModule injection scope ([#23148](https://github.com/angular/angular/issues/23148)) ([fab6b39](https://github.com/angular/angular/commit/fab6b39)), closes [angular/material2#10586](https://github.com/angular/material2/issues/10586)
-* **forms:** improve error message for invalid value accessors ([#22731](https://github.com/angular/angular/issues/22731)) ([23cc3ef](https://github.com/angular/angular/commit/23cc3ef))
-* **upgrade:** correctly handle downgraded `OnPush` components ([#22209](https://github.com/angular/angular/issues/22209)) ([ad9ce5c](https://github.com/angular/angular/commit/ad9ce5c)), closes [#14286](https://github.com/angular/angular/issues/14286)
-* **upgrade:** propagate return value of resumeBootstrap ([#22754](https://github.com/angular/angular/issues/22754)) ([a2330ff](https://github.com/angular/angular/commit/a2330ff)), closes [#22723](https://github.com/angular/angular/issues/22723)
-
-
-### Features
-
-* **compiler-cli:** lower loadChildren fields to allow dynamic module paths ([#23088](https://github.com/angular/angular/issues/23088)) ([550433a](https://github.com/angular/angular/commit/550433a))
-
-
-
-<a name="6.0.0-rc.1"></a>
-## [6.0.0-rc.1](https://github.com/angular/angular/compare/6.0.0-rc.0...6.0.0-rc.1) (2018-03-30)
-
-
-### Bug Fixes
-
-* **animations:** avoid animation insertions during router back/refresh ([#21977](https://github.com/angular/angular/issues/21977)) ([f88fba0](https://github.com/angular/angular/commit/f88fba0)), closes [#19712](https://github.com/angular/angular/issues/19712)
-* **animations:** treat numeric state name values as strings ([#22923](https://github.com/angular/angular/issues/22923)) ([e5e1b0d](https://github.com/angular/angular/commit/e5e1b0d))
-* **bazel:** complete the rollup globals list for all angular entrypoints ([#23080](https://github.com/angular/angular/issues/23080)) ([439030f](https://github.com/angular/angular/commit/439030f))
-* **bazel:** don't inline tslib into fesms ([#23044](https://github.com/angular/angular/issues/23044)) ([0049743](https://github.com/angular/angular/commit/0049743))
-* **bazel:** don't try to do flatmoduleindex under Blaze ([#23083](https://github.com/angular/angular/issues/23083)) ([be10bf5](https://github.com/angular/angular/commit/be10bf5))
-* **bazel:** downlevel decorators in fesm5 files ([#23078](https://github.com/angular/angular/issues/23078)) ([481b22e](https://github.com/angular/angular/commit/481b22e))
-* **bazel:** ng_package packages attr not forwarded to npm_package ([#22967](https://github.com/angular/angular/issues/22967)) ([2aabbc5](https://github.com/angular/angular/commit/2aabbc5))
-* **bazel:** ng_package should include private exports in fesms ([#23054](https://github.com/angular/angular/issues/23054)) ([0d9140c](https://github.com/angular/angular/commit/0d9140c))
-* **bazel:** pass --global option to rollup ([#23073](https://github.com/angular/angular/issues/23073)) ([45e090b](https://github.com/angular/angular/commit/45e090b))
-* **common:** titlecase pipe ([#22600](https://github.com/angular/angular/issues/22600)) ([7966744](https://github.com/angular/angular/commit/7966744))
-* **compiler:** don't typecheck all inputs ([#22899](https://github.com/angular/angular/issues/22899)) ([838a610](https://github.com/angular/angular/commit/838a610))
-* consistently rewrite Injector to INJECTOR ([#23008](https://github.com/angular/angular/issues/23008)) ([884bf0e](https://github.com/angular/angular/commit/884bf0e))
-* **compiler:** fix support for html-like text in translatable attributes ([#23053](https://github.com/angular/angular/issues/23053)) ([28058b7](https://github.com/angular/angular/commit/28058b7))
-* **compiler:** take quoting into account when determining if object literals can be shared ([#22942](https://github.com/angular/angular/issues/22942)) ([d98e9e7](https://github.com/angular/angular/commit/d98e9e7))
-* **compiler-cli:** use numeric comparison for TypeScript version ([#22705](https://github.com/angular/angular/issues/22705)) ([193737a](https://github.com/angular/angular/commit/193737a)), closes [#22593](https://github.com/angular/angular/issues/22593)
-* **core:** don't override ngInjectableDef in the decorator if present on the type ([#22943](https://github.com/angular/angular/issues/22943)) ([6f01917](https://github.com/angular/angular/commit/6f01917))
-* **service-worker:** do not enter degraded mode when offline ([#22883](https://github.com/angular/angular/issues/22883)) ([9e9b8dd](https://github.com/angular/angular/commit/9e9b8dd)), closes [#21636](https://github.com/angular/angular/issues/21636)
-* **service-worker:** fix LruList bugs ([#22769](https://github.com/angular/angular/issues/22769)) ([8c2a578](https://github.com/angular/angular/commit/8c2a578)), closes [#22218](https://github.com/angular/angular/issues/22218) [#22768](https://github.com/angular/angular/issues/22768)
-* **service-worker:** ignore invalid `only-if-cached` requests ([#22883](https://github.com/angular/angular/issues/22883)) ([d9dc46e](https://github.com/angular/angular/commit/d9dc46e)), closes [#22362](https://github.com/angular/angular/issues/22362)
-
-
-### Features
-
-* **bazel:** prefix private-export (barred-latin-o) symbols ([#23007](https://github.com/angular/angular/issues/23007)) ([27e14b2](https://github.com/angular/angular/commit/27e14b2))
-* **compiler:** lower @NgModule ids if needed ([#23031](https://github.com/angular/angular/issues/23031)) ([bd024c0](https://github.com/angular/angular/commit/bd024c0))
-
-
-
-<a name="6.0.0-rc.0"></a>
-# [6.0.0-rc.0](https://github.com/angular/angular/compare/6.0.0-beta.8...6.0.0-rc.0) (2018-03-21)
-
-v6 framework is now feature complete, the cli and material/cdk parts of the v6 release and other integrations are still
-in works and will be completed by the time we cut v6.0.0.
-
-Please [file new issues](https://github.com/angular/angular/issues/new) at our issue tracker with as many details as
-possible, and ideally also a include a good reproduction of the problem.
-
-### Bug Fixes
-
-* **bazel:** correct expected outs for external sources in ng_module ([#22755](https://github.com/angular/angular/issues/22755)) ([bfe077a](https://github.com/angular/angular/commit/bfe077a))
-* **compiler:** do not emit line/char in ngsummary files. ([#22840](https://github.com/angular/angular/issues/22840)) ([5c387a7](https://github.com/angular/angular/commit/5c387a7))
-* correct several esm2015 entry-points in package.jsons ([#22892](https://github.com/angular/angular/issues/22892)) ([7d095b9](https://github.com/angular/angular/commit/7d095b9))
-* **router:** don't use spread operator to workaround an issue in closure compiler ([#22884](https://github.com/angular/angular/issues/22884)) ([e6c731f](https://github.com/angular/angular/commit/e6c731f))
-* **router:** make locationSyncBootstrapListener public due to change in output after TS 2.7 update in [#22669](https://github.com/angular/angular/issues/22669) ([#22896](https://github.com/angular/angular/issues/22896)) ([623d769](https://github.com/angular/angular/commit/623d769))
-* **upgrade:** two-way binding and listening for event ([#22772](https://github.com/angular/angular/issues/22772)) ([2b3de63](https://github.com/angular/angular/commit/2b3de63)), closes [#22734](https://github.com/angular/angular/issues/22734)
-
-
-### Features
-
-* **core:** update the package output of build.sh to [APF v6](https://goo.gl/jB3GVv) ([#22808](https://github.com/angular/angular/issues/22808)) ([ce63dc6](https://github.com/angular/angular/commit/ce63dc6))
-* **core:** upgrade rxjs to 6.0.0-beta.0, please see this [RxJS Upgrade Guide](https://goo.gl/osWFzo) for more info ([#22573](https://github.com/angular/angular/issues/22573)) ([b43f8bc](https://github.com/angular/angular/commit/b43f8bc))
-
-
-
-<a name="6.0.0-beta.8"></a>
-## [6.0.0-beta.8](https://github.com/angular/angular/compare/6.0.0-beta.7...6.0.0-beta.8) (2018-03-16)
-
-
-### Bug Fixes
-
-* **aio:** constrain error logging to improve reporting ([#22713](https://github.com/angular/angular/issues/22713)) ([049757b](https://github.com/angular/angular/commit/049757b))
-* **compiler-cli:** annotate Ivy fields as [@nocollapse](https://github.com/nocollapse) in closure mode ([#22691](https://github.com/angular/angular/issues/22691)) ([6e00410](https://github.com/angular/angular/commit/6e00410))
-* **compiler-cli:** disableTypeScriptVersionCheck should be applied even for older tsc versions ([#22669](https://github.com/angular/angular/issues/22669)) ([3f70aba](https://github.com/angular/angular/commit/3f70aba))
-* **compiler-cli:** emit correct css string escape sequences ([#22776](https://github.com/angular/angular/issues/22776)) ([6e5e819](https://github.com/angular/angular/commit/6e5e819))
-* **compiler-cli:** enableResourceInlining handles both styles and styleUrls ([#22688](https://github.com/angular/angular/issues/22688)) ([40315be](https://github.com/angular/angular/commit/40315be))
-* **compiler-cli:** generate proper exports.* identifiers in cjs output ([#22564](https://github.com/angular/angular/issues/22564)) ([0d8deb0](https://github.com/angular/angular/commit/0d8deb0))
-* **compiler-cli:** resolve resource URLs before loading them under enableResourceInlining ([#22688](https://github.com/angular/angular/issues/22688)) ([123efba](https://github.com/angular/angular/commit/123efba))
-* **core:** remove core animation import symbols ([#22692](https://github.com/angular/angular/issues/22692)) ([f5a98f4](https://github.com/angular/angular/commit/f5a98f4))
-* **elements:** fix elements test bootstrap ([#22839](https://github.com/angular/angular/issues/22839)) ([5d82d8d](https://github.com/angular/angular/commit/5d82d8d))
-* overloading a function doesn't generate all of the signatures ([#22569](https://github.com/angular/angular/issues/22569)) ([e8326e6](https://github.com/angular/angular/commit/e8326e6))
-* **platform-server:** add styles to elements correctly ([#22527](https://github.com/angular/angular/issues/22527)) ([cd2ebd2](https://github.com/angular/angular/commit/cd2ebd2))
-* **router:** correct over-encoding of URL fragment ([#22687](https://github.com/angular/angular/issues/22687)) ([0bf6fa5](https://github.com/angular/angular/commit/0bf6fa5))
-
-
-### Code Refactoring
-
-* **compiler:** Drop support for the deprecated `<template>`. Use `<ng-template>` instead ([#22783](https://github.com/angular/angular/issues/22783)) ([0ebd577](https://github.com/angular/angular/commit/0ebd577))
-
-
-### Features
-
-* **aio:** add hack, remove me ([#22413](https://github.com/angular/angular/issues/22413)) ([4d506ac](https://github.com/angular/angular/commit/4d506ac))
-* **aio:** migrate embedded comp to elements ([#22413](https://github.com/angular/angular/issues/22413)) ([7c9b411](https://github.com/angular/angular/commit/7c9b411))
-* **aio:** update payload size ([#22413](https://github.com/angular/angular/issues/22413)) ([400460c](https://github.com/angular/angular/commit/400460c))
-* **animations:** expose `element` and `params` within transition matchers ([#22693](https://github.com/angular/angular/issues/22693)) ([58b94e6](https://github.com/angular/angular/commit/58b94e6))
-* **bazel:** change ng_package rule to APF v6 ([#22782](https://github.com/angular/angular/issues/22782)) ([88b3198](https://github.com/angular/angular/commit/88b3198))
-* **compiler:** support for singleline, multiline & jsdoc comments ([#22715](https://github.com/angular/angular/issues/22715)) ([3b167be](https://github.com/angular/angular/commit/3b167be))
-* **compiler-cli:** add resource inlining to ngc ([#22615](https://github.com/angular/angular/issues/22615)) ([b5be18f](https://github.com/angular/angular/commit/b5be18f))
-* **compiler-cli:** require node 8 as runtime engine ([#22669](https://github.com/angular/angular/issues/22669)) ([c602563](https://github.com/angular/angular/commit/c602563))
-* **core:** add task tracking to Testability ([#16863](https://github.com/angular/angular/issues/16863)) ([37fedd0](https://github.com/angular/angular/commit/37fedd0))
-* **elements:** add polyfill for elements es5 shim ([#22413](https://github.com/angular/angular/issues/22413)) ([863aff1](https://github.com/angular/angular/commit/863aff1))
-* **elements:** add support for creating custom elements ([#22413](https://github.com/angular/angular/issues/22413)) ([22b96b9](https://github.com/angular/angular/commit/22b96b9))
-* **elements:** add tests for component factory strategy ([#22413](https://github.com/angular/angular/issues/22413)) ([d2be675](https://github.com/angular/angular/commit/d2be675))
-* **elements:** another polyfill solution ([#22413](https://github.com/angular/angular/issues/22413)) ([cf3ff7d](https://github.com/angular/angular/commit/cf3ff7d))
-* **elements:** fix lint ([#22413](https://github.com/angular/angular/issues/22413)) ([0b45dfa](https://github.com/angular/angular/commit/0b45dfa))
-* **elements:** fix payload size ([#22413](https://github.com/angular/angular/issues/22413)) ([fe21437](https://github.com/angular/angular/commit/fe21437))
-* **elements:** fix test ([#22413](https://github.com/angular/angular/issues/22413)) ([44f637a](https://github.com/angular/angular/commit/44f637a))
-* **elements:** George's comments ([#22413](https://github.com/angular/angular/issues/22413)) ([46efd4b](https://github.com/angular/angular/commit/46efd4b))
-* **elements:** injector create ([#22413](https://github.com/angular/angular/issues/22413)) ([87f60bc](https://github.com/angular/angular/commit/87f60bc))
-* **elements:** make bazel happy ([#22413](https://github.com/angular/angular/issues/22413)) ([39a12d2](https://github.com/angular/angular/commit/39a12d2))
-* **elements:** provide type, not factory; remove config need ([#22413](https://github.com/angular/angular/issues/22413)) ([1936808](https://github.com/angular/angular/commit/1936808))
-* **elements:** rebase ([#22413](https://github.com/angular/angular/issues/22413)) ([d72f445](https://github.com/angular/angular/commit/d72f445))
-* **elements:** remove attribute/input from config ([#22413](https://github.com/angular/angular/issues/22413)) ([688096b](https://github.com/angular/angular/commit/688096b))
-* **elements:** rename API to createCustomElement ([#22413](https://github.com/angular/angular/issues/22413)) ([167fdf7](https://github.com/angular/angular/commit/167fdf7))
-* **elements:** update package.json with latest ([#22413](https://github.com/angular/angular/issues/22413)) ([2e450f6](https://github.com/angular/angular/commit/2e450f6))
-* mark angular packages as side-effect free ([#22785](https://github.com/angular/angular/issues/22785)) ([44de10e](https://github.com/angular/angular/commit/44de10e))
-* tree-shakeable providers API updates ([#22655](https://github.com/angular/angular/issues/22655)) ([db56836](https://github.com/angular/angular/commit/db56836))
-* update tslib to 1.9.0 ([#22667](https://github.com/angular/angular/issues/22667)) ([489fec1](https://github.com/angular/angular/commit/489fec1))
-
-
-### BREAKING CHANGES
-
-* **compiler:** The `<template>` tag was deprecated in Angular v4 to avoid collisions (i.e. when
-using Web Components).
-
-This commit removes support for `<template>`. `<ng-template>` should be used
-instead.
-
-BEFORE:
-
-    <!-- html template -->
-    <template>some template content</template>
-
-    # tsconfig.json
-    {
-      # ...
-      "angularCompilerOptions": {
-        # ...
-        # This option is no more supported and will have no effect
-        "enableLegacyTemplate": [true|false]
-      }
-    }
-
-AFTER:
-
-    <!-- html template -->
-    <ng-template>some template content</ng-template>
-* **core:** it is no longer possible to import
-animation-related functions from @angular/core. All
-animation symbols must now be imported from @angular/animations.
-* after this change, npm and yarn will issue incompatible peerDependencies warning
-
-We don't expect this to actually break an application, but the application/library package.json
-will need to be updated to provide tslib 1.9.0 or higher.
-
-
-
 <a name="5.2.9"></a>
 ## [5.2.9](https://github.com/angular/angular/compare/5.2.8...5.2.9) (2018-03-14)
 
@@ -265,18 +361,6 @@ will need to be updated to provide tslib 1.9.0 or higher.
 
 
 
-<a name="6.0.0-beta.7"></a>
-# [6.0.0-beta.7](https://github.com/angular/angular/compare/6.0.0-beta.6...6.0.0-beta.7) (2018-03-07)
-
-
-### Bug Fixes
-
-* **bazel:** fixes for ng_package on Windows ([#22597](https://github.com/angular/angular/issues/22597)) ([4c40812](https://github.com/angular/angular/commit/4c40812))
-* **compiler:** allow tree-shakeable injectables to depend on string tokens ([#22376](https://github.com/angular/angular/issues/22376)) ([dd53447](https://github.com/angular/angular/commit/dd53447))
-* **router:** fix URL serialization so special characters are only encoded where needed ([#22337](https://github.com/angular/angular/issues/22337)) ([fa974c7](https://github.com/angular/angular/commit/fa974c7)), closes [#10280](https://github.com/angular/angular/issues/10280)
-
-
-
 <a name="5.2.8"></a>
 ## [5.2.8](https://github.com/angular/angular/compare/5.2.7...5.2.8) (2018-03-07)
 
@@ -291,63 +375,6 @@ will need to be updated to provide tslib 1.9.0 or higher.
 * **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([a9a0e27](https://github.com/angular/angular/commit/a9a0e27)), closes [#22175](https://github.com/angular/angular/issues/22175)
 
 
-<a name="6.0.0-beta.6"></a>
-# [6.0.0-beta.6](https://github.com/angular/angular/compare/6.0.0-beta.5...6.0.0-beta.6) (2018-02-28)
-
-
-### Bug Fixes
-
-* **animations:** only use the WA-polyfill alongside AnimationBuilder ([#22143](https://github.com/angular/angular/issues/22143)) ([b2f366b](https://github.com/angular/angular/commit/b2f366b)), closes [#17496](https://github.com/angular/angular/issues/17496)
-* **animations:** report correct totalTime value even during noOp animations ([#22225](https://github.com/angular/angular/issues/22225)) ([e1bf067](https://github.com/angular/angular/commit/e1bf067))
-* **bazel:** ng_package includes transitive .d.ts and flatModuleMetadata ([#22499](https://github.com/angular/angular/issues/22499)) ([aabe16c](https://github.com/angular/angular/commit/aabe16c)), closes [#22419](https://github.com/angular/angular/issues/22419)
-* **common:** correct mapping of Observable methods ([#20518](https://github.com/angular/angular/issues/20518)) ([2639b4b](https://github.com/angular/angular/commit/2639b4b)), closes [#20516](https://github.com/angular/angular/issues/20516)
-* **common:** then and else template might be set to null ([#22298](https://github.com/angular/angular/issues/22298)) ([8115edc](https://github.com/angular/angular/commit/8115edc))
-* **compiler-cli:** add missing entry point to package, update tsickle ([#22295](https://github.com/angular/angular/issues/22295)) ([28ac244](https://github.com/angular/angular/commit/28ac244))
-* **core:** export inject() from [@angular](https://github.com/angular)/core ([#22389](https://github.com/angular/angular/issues/22389)) ([f8749bf](https://github.com/angular/angular/commit/f8749bf)), closes [#22388](https://github.com/angular/angular/issues/22388)
-* **core:** properly handle function without prototype in reflector ([#22284](https://github.com/angular/angular/issues/22284)) ([a7ebf5a](https://github.com/angular/angular/commit/a7ebf5a)), closes [#19978](https://github.com/angular/angular/issues/19978)
-* **core:** require factory to be provided for shakeable InjectionToken ([#22207](https://github.com/angular/angular/issues/22207)) ([f755db7](https://github.com/angular/angular/commit/f755db7)), closes [#22205](https://github.com/angular/angular/issues/22205)
-* **forms:** set state before emitting a value from ngModelChange ([#21514](https://github.com/angular/angular/issues/21514)) ([3e6a86f](https://github.com/angular/angular/commit/3e6a86f)), closes [#21513](https://github.com/angular/angular/issues/21513)
-* **platform-server:** generate correct stylings for camel case names ([#22263](https://github.com/angular/angular/issues/22263)) ([40ba009](https://github.com/angular/angular/commit/40ba009)), closes [#19235](https://github.com/angular/angular/issues/19235)
-* **router:** don't mutate route configs ([#22358](https://github.com/angular/angular/issues/22358)) ([45eff4c](https://github.com/angular/angular/commit/45eff4c)), closes [#22203](https://github.com/angular/angular/issues/22203)
-* **router:** fix URL serialization so special characters are only encoded where needed ([#22337](https://github.com/angular/angular/issues/22337)) ([094666d](https://github.com/angular/angular/commit/094666d)), closes [#10280](https://github.com/angular/angular/issues/10280)
-* **upgrade:** correctly destroy nested downgraded component ([#22400](https://github.com/angular/angular/issues/22400)) ([8a85888](https://github.com/angular/angular/commit/8a85888)), closes [#22392](https://github.com/angular/angular/issues/22392)
-* **upgrade:** correctly handle `=` bindings in `[@angular](https://github.com/angular)/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([f089bf5](https://github.com/angular/angular/commit/f089bf5))
-* **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([13ab91e](https://github.com/angular/angular/commit/13ab91e)), closes [#22175](https://github.com/angular/angular/issues/22175)
-
-
-### Features
-
-* **bazel:** add an ng_package rule ([#22221](https://github.com/angular/angular/issues/22221)) ([b43b164](https://github.com/angular/angular/commit/b43b164))
-* **bazel:** introduce a binary stamping feature ([#22176](https://github.com/angular/angular/issues/22176)) ([bba65e0](https://github.com/angular/angular/commit/bba65e0))
-* **bazel:** ng_module produces bundle index ([#22176](https://github.com/angular/angular/issues/22176)) ([029dbf0](https://github.com/angular/angular/commit/029dbf0))
-* **bazel:** ng_package adds package.json props ([#22499](https://github.com/angular/angular/issues/22499)) ([b6c9410](https://github.com/angular/angular/commit/b6c9410)), closes [#22416](https://github.com/angular/angular/issues/22416)
-* **common:** better error message when non-template element used in NgIf ([#22274](https://github.com/angular/angular/issues/22274)) ([67cf11d](https://github.com/angular/angular/commit/67cf11d)), closes [#16410](https://github.com/angular/angular/issues/16410)
-* **common:** export functions to format numbers, percents, currencies & dates ([#22423](https://github.com/angular/angular/issues/22423)) ([4180912](https://github.com/angular/angular/commit/4180912)), closes [#20536](https://github.com/angular/angular/issues/20536)
-* **compiler-cli:** Check unvalidated combination of ngc and TypeScript ([#22293](https://github.com/angular/angular/issues/22293)) ([3ceee99](https://github.com/angular/angular/commit/3ceee99)), closes [#20669](https://github.com/angular/angular/issues/20669)
-* **core:** set preserveWhitespaces to false by default ([#22046](https://github.com/angular/angular/issues/22046)) ([f1a0632](https://github.com/angular/angular/commit/f1a0632)), closes [#22027](https://github.com/angular/angular/issues/22027)
-* **core:** support metadata reflection for native class types ([#22356](https://github.com/angular/angular/issues/22356)) ([5c89d6b](https://github.com/angular/angular/commit/5c89d6b)), closes [#21731](https://github.com/angular/angular/issues/21731)
-* **core:** support metadata reflection for native class types ([#22356](https://github.com/angular/angular/issues/22356)) ([b7544cc](https://github.com/angular/angular/commit/b7544cc)), closes [#21731](https://github.com/angular/angular/issues/21731)
-* **forms:** allow markAsPending to emit events ([#20212](https://github.com/angular/angular/issues/20212)) ([e86b64b](https://github.com/angular/angular/commit/e86b64b)), closes [#17958](https://github.com/angular/angular/issues/17958)
-* allow direct scoping of @Injectables to the root injector ([#22185](https://github.com/angular/angular/issues/22185)) ([7ac34e4](https://github.com/angular/angular/commit/7ac34e4))
-* **platform-browser:** do not throw error when Hammer.js not loaded ([#22257](https://github.com/angular/angular/issues/22257)) ([991300b](https://github.com/angular/angular/commit/991300b)), closes [#16992](https://github.com/angular/angular/issues/16992)
-* **platform-browser:** fix [#19604](https://github.com/angular/angular/issues/19604), can config hammerOptions ([#21979](https://github.com/angular/angular/issues/21979)) ([1d571b2](https://github.com/angular/angular/commit/1d571b2))
-* **platform-server:** bump Domino to v2.0 ([#22411](https://github.com/angular/angular/issues/22411)) ([d3827a0](https://github.com/angular/angular/commit/d3827a0))
-
-
-### BREAKING CHANGES
-
-* **platform-server:** * Bump the dependency on Domino to 2.0 to resolve issues with
-  namespacing
-* **forms:** - `AbstractControl#statusChanges` now emits an event of `'PENDING'` when you call `AbstractControl#markAsPending`
-- Previously it did not emit an event when you called `markAsPending`
-- To migrate you would need to ensure that if you are filtering or checking events from `statusChanges` that you account for the new event when calling `markAsPending`
-* **animations:** When animation is trigged within a disabled zone, the
-associated event (which an instance of AnimationEvent) will no longer
-report the totalTime as 0 (it will emit the actual time of the
-animation). To detect if an animation event is reporting a disabled
-animation then the `event.disabled` property can be used instead.
-
-
 
 <a name="5.2.7"></a>
 ## [5.2.7](https://github.com/angular/angular/compare/5.2.6...5.2.7) (2018-02-28)
@@ -361,72 +388,7 @@ animation then the `event.disabled` property can be used instead.
 * **upgrade:** correctly handle `=` bindings in `[@angular](https://github.com/angular)/upgrade` ([#22167](https://github.com/angular/angular/issues/22167)) ([6638390](https://github.com/angular/angular/commit/6638390))
 * **upgrade:** fix empty transclusion content with AngularJS@>=1.5.8 ([#22167](https://github.com/angular/angular/issues/22167)) ([a9a0e27](https://github.com/angular/angular/commit/a9a0e27)), closes [#22175](https://github.com/angular/angular/issues/22175)
 
-<a name="6.0.0-beta.5"></a>
-# [6.0.0-beta.5](https://github.com/angular/angular/compare/6.0.0-beta.4...6.0.0-beta.5) (2018-02-22)
 
-### Bug Fixes
-
-* **animations:** report correct totalTime value even during noOp animations ([#22225](https://github.com/angular/angular/issues/22225)) ([e1bf067](https://github.com/angular/angular/commit/e1bf067))
-* **common:** correct mapping of Observable methods ([#20518](https://github.com/angular/angular/issues/20518)) ([2639b4b](https://github.com/angular/angular/commit/2639b4b)), closes [#20516](https://github.com/angular/angular/issues/20516)
-* **common:** then and else template might be set to null ([#22298](https://github.com/angular/angular/issues/22298)) ([8115edc](https://github.com/angular/angular/commit/8115edc))
-* **compiler-cli:** add missing entry point to package, update tsickle ([#22295](https://github.com/angular/angular/issues/22295)) ([28ac244](https://github.com/angular/angular/commit/28ac244))
-* **core:** properly handle function without prototype in reflector ([#22284](https://github.com/angular/angular/issues/22284)) ([a7ebf5a](https://github.com/angular/angular/commit/a7ebf5a)), closes [#19978](https://github.com/angular/angular/issues/19978)
-* **core:** require factory to be provided for shakeable InjectionToken ([#22207](https://github.com/angular/angular/issues/22207)) ([f755db7](https://github.com/angular/angular/commit/f755db7)), closes [#22205](https://github.com/angular/angular/issues/22205)
-* **forms:** set state before emitting a value from ngModelChange ([#21514](https://github.com/angular/angular/issues/21514)) ([3e6a86f](https://github.com/angular/angular/commit/3e6a86f)), closes [#21513](https://github.com/angular/angular/issues/21513)
-* **core:** set `preserveWhitespaces` to false by default ([#22046](https://github.com/angular/angular/issues/22046)) ([f1a0632](https://github.com/angular/angular/commit/f1a0632)), closes [#22027](https://github.com/angular/angular/issues/22027)
-
-### Features
-
-* **common:** better error message when non-template element used in NgIf ([#22274](https://github.com/angular/angular/issues/22274)) ([67cf11d](https://github.com/angular/angular/commit/67cf11d)), closes [#16410](https://github.com/angular/angular/issues/16410)
-* **compiler-cli:** Check unvalidated combination of ngc and TypeScript ([#22293](https://github.com/angular/angular/issues/22293)) ([3ceee99](https://github.com/angular/angular/commit/3ceee99)), closes [#20669](https://github.com/angular/angular/issues/20669)
-* **core:** support metadata reflection for native class types ([#22356](https://github.com/angular/angular/issues/22356)) ([5c89d6b](https://github.com/angular/angular/commit/5c89d6b)), closes [#21731](https://github.com/angular/angular/issues/21731)
-* **platform-browser:** do not throw error when Hammer.js not loaded ([#22257](https://github.com/angular/angular/issues/22257)) ([991300b](https://github.com/angular/angular/commit/991300b)), closes [#16992](https://github.com/angular/angular/issues/16992)
-* **platform-browser:** fix [#19604](https://github.com/angular/angular/issues/19604), can config hammerOptions ([#21979](https://github.com/angular/angular/issues/21979)) ([1d571b2](https://github.com/angular/angular/commit/1d571b2))
-
-### BREAKING CHANGES
-
-* **animations:** When animation is triggered within a disabled zone, the
-associated event (which an instance of AnimationEvent) will no longer
-report the totalTime as 0 (it will emit the actual time of the
-animation). To detect if an animation event is reporting a disabled
-animation then the `event.disabled` property can be used instead.
-
-* **forms:** ngModelChange is now emitted after the value/validity is updated on its control.
-
-Previously, ngModelChange was emitted before its underlying control was updated.
-This was fine if you passed through the value directly through the $event keyword, e.g.
-
-```
-<input [(ngModel)]="name" (ngModelChange)="onChange($event)">
-
-onChange(value) {
-   console.log(value);               // would log updated value
-}
-```
-
-However, if you had a handler for the ngModelChange event that checked the value through the control,
-you would get the old value rather than the updated value. e.g:
-
-```
-<input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">
-
-onChange(ngModel: NgModel) {
-  console.log(ngModel.value);        // would log old value, not updated value
-}
-```
-
-Now the value and validity will be updated before the ngModelChange event is emitted,
-so the same setup will log the updated value.
-
-```
-onChange(ngModel: NgModel) {
-   console.log(ngModel.value);       // will log updated value
-}
-```
-
-We think this order will be less confusing when the control is checked directly.
-You will only need to update your app if it has relied on this bug to keep track of the old control value.
-If that is the case, you should be able to track the old value directly by saving it on your component.
 
 <a name="5.2.6"></a>
 ## [5.2.6](https://github.com/angular/angular/compare/5.2.5...5.2.6) (2018-02-22)
@@ -439,34 +401,7 @@ If that is the case, you should be able to track the old value directly by savin
 * **core:** properly handle function without prototype in reflector ([#22284](https://github.com/angular/angular/issues/22284)) ([5ec38f2](https://github.com/angular/angular/commit/5ec38f2)), closes [#19978](https://github.com/angular/angular/issues/19978)
 * **core:** support metadata reflection for native class types ([#22356](https://github.com/angular/angular/issues/22356)) ([ee91de9](https://github.com/angular/angular/commit/ee91de9)), closes [#21731](https://github.com/angular/angular/issues/21731)
 
-<a name="6.0.0-beta.4"></a>
-# [6.0.0-beta.4](https://github.com/angular/angular/compare/6.0.0-beta.3...6.0.0-beta.4) (2018-02-14)
 
-### Bug Fixes
-
-* **bazel:** allow TS to read ambient typings ([#21876](https://github.com/angular/angular/issues/21876)) ([b081dfe](https://github.com/angular/angular/commit/b081dfe)), closes [#21872](https://github.com/angular/angular/issues/21872)
-* **bazel:** improve error message for missing assets ([#22096](https://github.com/angular/angular/issues/22096)) ([dcf64a0](https://github.com/angular/angular/commit/dcf64a0)), closes [#22095](https://github.com/angular/angular/issues/22095)
-* **common:** add locale currency values ([#21783](https://github.com/angular/angular/issues/21783)) ([420cc7a](https://github.com/angular/angular/commit/420cc7a)), closes [#20385](https://github.com/angular/angular/issues/20385)
-* **common:** round currencies based on decimal digits in `CurrencyPipe` ([#21783](https://github.com/angular/angular/issues/21783)) ([44154e7](https://github.com/angular/angular/commit/44154e7)), closes [#10189](https://github.com/angular/angular/issues/10189)
-* **common:** weaken AsyncPipe transform signature ([#22169](https://github.com/angular/angular/issues/22169)) ([be59c3a](https://github.com/angular/angular/commit/be59c3a))
-* **compiler:** make unary plus operator consistent to JavaScript ([#22154](https://github.com/angular/angular/issues/22154)) ([72f8abd](https://github.com/angular/angular/commit/72f8abd)), closes [#22089](https://github.com/angular/angular/issues/22089)
-* **core:** add stacktrace in log when error during cleanup component in TestBed ([#22162](https://github.com/angular/angular/issues/22162)) ([16d1700](https://github.com/angular/angular/commit/16d1700))
-* **core:** ensure initial value of QueryList length ([#21980](https://github.com/angular/angular/issues/21980)) ([#21982](https://github.com/angular/angular/issues/21982)) ([e56de10](https://github.com/angular/angular/commit/e56de10)), closes [#21980](https://github.com/angular/angular/issues/21980)
-* **core:** use appropriate inert document strategy for Firefox & Safari ([#17019](https://github.com/angular/angular/issues/17019)) ([a751649](https://github.com/angular/angular/commit/a751649))
-* **forms:** make Validators.email support optional controls ([#20869](https://github.com/angular/angular/issues/20869)) ([140e7c0](https://github.com/angular/angular/commit/140e7c0))
-* **forms:** prevent event emission on enable/disable when emitEvent is false ([#12366](https://github.com/angular/angular/issues/12366)) ([#21018](https://github.com/angular/angular/issues/21018)) ([0bcfae7](https://github.com/angular/angular/commit/0bcfae7))
-* **forms:** set state before emitting a value from ngModelChange ([#21514](https://github.com/angular/angular/issues/21514)) ([9744a1c](https://github.com/angular/angular/commit/9744a1c)), closes [#21513](https://github.com/angular/angular/issues/21513)
-* **language-service:** correct instructions to install the language service ([#22000](https://github.com/angular/angular/issues/22000)) ([b37cee3](https://github.com/angular/angular/commit/b37cee3))
-* **platform-browser:** add @Injectable where it was missing ([#22005](https://github.com/angular/angular/issues/22005)) ([0a1a397](https://github.com/angular/angular/commit/0a1a397))
-* **platform-browser:** support 0/false/null values in transfer_state ([#22179](https://github.com/angular/angular/issues/22179)) ([6435ecd](https://github.com/angular/angular/commit/6435ecd))
-
-
-### Features
-
-* **bazel:** allow explicit specification of factories ([#22003](https://github.com/angular/angular/issues/22003)) ([e442881](https://github.com/angular/angular/commit/e442881))
-* **compiler:** mark @NgModules in provider lists for identification at runtime ([#22005](https://github.com/angular/angular/issues/22005)) ([2d5e7d1](https://github.com/angular/angular/commit/2d5e7d1))
-* **forms:** multiple validators for array method ([#20766](https://github.com/angular/angular/issues/20766)) ([941e88f](https://github.com/angular/angular/commit/941e88f)), closes [#20665](https://github.com/angular/angular/issues/20665)
-* change @Injectable() to support tree-shakeable tokens ([#22005](https://github.com/angular/angular/issues/22005)) ([235a235](https://github.com/angular/angular/commit/235a235))
 
 <a name="5.2.5"></a>
 ## [5.2.5](https://github.com/angular/angular/compare/5.2.4...5.2.5) (2018-02-14)
@@ -485,34 +420,6 @@ If that is the case, you should be able to track the old value directly by savin
 * **language-service:** correct instructions to install the language service ([#22000](https://github.com/angular/angular/issues/22000)) ([0b23573](https://github.com/angular/angular/commit/0b23573))
 * **platform-browser:** support 0/false/null values in transfer_state ([#22179](https://github.com/angular/angular/issues/22179)) ([da6ab91](https://github.com/angular/angular/commit/da6ab91))
 
-<a name="6.0.0-beta.3"></a>
-# [6.0.0-beta.3](https://github.com/angular/angular/compare/6.0.0-beta.2...6.0.0-beta.3) (2018-02-07)
-
-### Bug Fixes
-
-* **common:** don't convert null to a string when flushing a mock request ([#21417](https://github.com/angular/angular/issues/21417)) ([8b14488](https://github.com/angular/angular/commit/8b14488)), closes [#20744](https://github.com/angular/angular/issues/20744)
-* **core:** fix [#20582](https://github.com/angular/angular/issues/20582), don't need to wrap zone in location change listener ([#20640](https://github.com/angular/angular/issues/20640)) ([f791e9f](https://github.com/angular/angular/commit/f791e9f))
-* **core:** fix proper propagation of subscriptions in EventEmitter ([#22016](https://github.com/angular/angular/issues/22016)) ([e81606c](https://github.com/angular/angular/commit/e81606c)), closes [#21999](https://github.com/angular/angular/issues/21999)
-* **core:** should check Zone existence when scheduleMicroTask ([#20656](https://github.com/angular/angular/issues/20656)) ([3a86940](https://github.com/angular/angular/commit/3a86940))
-* **forms:** publish missing types ([#19941](https://github.com/angular/angular/issues/19941)) ([2707012](https://github.com/angular/angular/commit/2707012))
-* **ivy:** generate correct interpolations ([#21946](https://github.com/angular/angular/issues/21946)) ([3cc1d76](https://github.com/angular/angular/commit/3cc1d76))
-* **ivy:** generate lifecycle pattern ([#21865](https://github.com/angular/angular/issues/21865)) ([f816666](https://github.com/angular/angular/commit/f816666))
-* **ivy:** improve `bindV` perf and memory usage ([#21881](https://github.com/angular/angular/issues/21881)) ([0846784](https://github.com/angular/angular/commit/0846784))
-* **ivy:** remove unnecessary parameter of NgOnChangesFeature ([#21879](https://github.com/angular/angular/issues/21879)) ([65cf1ad](https://github.com/angular/angular/commit/65cf1ad))
-
-
-### Features
-
-* **compiler-cli:** reflect static methods added to classes in metadata ([#21926](https://github.com/angular/angular/issues/21926)) ([eb8ddd2](https://github.com/angular/angular/commit/eb8ddd2))
-* **ivy:** add canonical example of a pipe. ([#21834](https://github.com/angular/angular/issues/21834)) ([743d8bc](https://github.com/angular/angular/commit/743d8bc))
-* **ivy:** add support for attributes on ng-content nodes ([#21935](https://github.com/angular/angular/issues/21935)) ([1aa2947](https://github.com/angular/angular/commit/1aa2947))
-* **ivy:** memoize array literals in render3 ([#21973](https://github.com/angular/angular/issues/21973)) ([4d62be6](https://github.com/angular/angular/commit/4d62be6))
-
-
-### Performance Improvements
-
-* **ivy:** improve Uglify configuration in hello world integration test ([#21985](https://github.com/angular/angular/issues/21985)) ([7e51e52](https://github.com/angular/angular/commit/7e51e52))
-
 
 
 <a name="5.2.4"></a>
@@ -528,17 +435,6 @@ If that is the case, you should be able to track the old value directly by savin
 
 
 
-<a name="6.0.0-beta.2"></a>
-# [6.0.0-beta.2](https://github.com/angular/angular/compare/6.0.0-beta.1...6.0.0-beta.2) (2018-01-31)
-
-
-### Features
-
-* **router:** add navigationSource and restoredState to NavigationStart event ([#21728](https://github.com/angular/angular/issues/21728)) ([c40ae7f](https://github.com/angular/angular/commit/c40ae7f))
-* **service-worker:** add helper script which will uninstall SW ([#21863](https://github.com/angular/angular/issues/21863)) ([b10540a](https://github.com/angular/angular/commit/b10540a))
-
-
-
 <a name="5.2.3"></a>
 ## [5.2.3](https://github.com/angular/angular/compare/5.2.2...5.2.3) (2018-01-31)
 
@@ -556,32 +452,6 @@ If that is the case, you should be able to track the old value directly by savin
 
 
 
-<a name="6.0.0-beta.1"></a>
-# [6.0.0-beta.1](https://github.com/angular/angular/compare/6.0.0-beta.0...6.0.0-beta.1) (2018-01-25)
-
-
-### Bug Fixes
-
-* **common:** A null value should remove the style on IE ([#21679](https://github.com/angular/angular/issues/21679)) ([7d49443](https://github.com/angular/angular/commit/7d49443)), closes [#21064](https://github.com/angular/angular/issues/21064)
-* avoid triggering a cli bug ([#21611](https://github.com/angular/angular/issues/21611)) ([0eabd07](https://github.com/angular/angular/commit/0eabd07))
-* **common:** don't remove special characters when extracting CLDR data ([#21626](https://github.com/angular/angular/issues/21626)) ([135a282](https://github.com/angular/angular/commit/135a282))
-* **common:** extract plural function from i18n locale data files for TS 2.6 ([#21626](https://github.com/angular/angular/issues/21626)) ([97b18b2](https://github.com/angular/angular/commit/97b18b2)), closes [#21608](https://github.com/angular/angular/issues/21608)
-* **common:** fallback to last defined value for named date and time formats ([#21299](https://github.com/angular/angular/issues/21299)) ([879756d](https://github.com/angular/angular/commit/879756d)), closes [#21282](https://github.com/angular/angular/issues/21282)
-* **compiler:** add support for marker tags in xliff serializers ([#21250](https://github.com/angular/angular/issues/21250)) ([f74130c](https://github.com/angular/angular/commit/f74130c)), closes [#21078](https://github.com/angular/angular/issues/21078)
-* **compiler:** Don't strip `/*# sourceURL ... */` ([#16088](https://github.com/angular/angular/issues/16088)) ([5f681f9](https://github.com/angular/angular/commit/5f681f9))
-* **compiler:** fix ICU select messages to use male/female/other ([#21713](https://github.com/angular/angular/issues/21713)) ([cb5090c](https://github.com/angular/angular/commit/cb5090c))
-* **compiler-cli:** do not fold errors past calls in the collector ([#21708](https://github.com/angular/angular/issues/21708)) ([dd86790](https://github.com/angular/angular/commit/dd86790))
-* **compiler-cli:** do not lower expressions in non-modules ([#21649](https://github.com/angular/angular/issues/21649)) ([7f93aad](https://github.com/angular/angular/commit/7f93aad))
-* **router:** don't use ParamsInheritanceStrategy in declarations ([#21574](https://github.com/angular/angular/issues/21574)) ([925e654](https://github.com/angular/angular/commit/925e654)), closes [#21456](https://github.com/angular/angular/issues/21456)
-
-
-### Features
-
-* **compiler:** implement "enableIvy" compiler option ([#21427](https://github.com/angular/angular/issues/21427)) ([64d16de](https://github.com/angular/angular/commit/64d16de))
-* **core:** optional generic type for ElementRef ([#20765](https://github.com/angular/angular/issues/20765)) ([d3d9aac](https://github.com/angular/angular/commit/d3d9aac)), closes [#13139](https://github.com/angular/angular/issues/13139)
-
-
-
 <a name="5.2.2"></a>
 ## [5.2.2](https://github.com/angular/angular/compare/5.2.1...5.2.2) (2018-01-25)
 
@@ -601,36 +471,6 @@ If that is the case, you should be able to track the old value directly by savin
 
 
 
-<a name="6.0.0-beta.0"></a>
-# [6.0.0-beta.0](https://github.com/angular/angular/compare/5.2.0...6.0.0-beta.0) (2018-01-17)
-
-
-### Bug Fixes
-
-* **animations:** fix increment/decrement aliases example ([#18323](https://github.com/angular/angular/issues/18323)) ([d2aa8ac](https://github.com/angular/angular/commit/d2aa8ac))
-* **benchpress:** should still support selenium_webdriver < 3.6.0 ([#21477](https://github.com/angular/angular/issues/21477)) ([9b84a32](https://github.com/angular/angular/commit/9b84a32))
-* **common:** set correct timezone for ISO8601 dates in Safari ([#21506](https://github.com/angular/angular/issues/21506)) ([05208b8](https://github.com/angular/angular/commit/05208b8)), closes [#21491](https://github.com/angular/angular/issues/21491)
-* **compiler:** cache external reference resolution ([#21359](https://github.com/angular/angular/issues/21359)) ([e3e2fc0](https://github.com/angular/angular/commit/e3e2fc0))
-* **compiler:** make `.ngsummary.json` files idempotent ([#21448](https://github.com/angular/angular/issues/21448)) ([e64b1e9](https://github.com/angular/angular/commit/e64b1e9))
-* **core:** fix chained http call ([#20924](https://github.com/angular/angular/issues/20924)) ([7e3f9a4](https://github.com/angular/angular/commit/7e3f9a4)), closes [#20921](https://github.com/angular/angular/issues/20921)
-* **ivy:** Add workaround for AJD in google3 ([#21488](https://github.com/angular/angular/issues/21488)) ([6af3672](https://github.com/angular/angular/commit/6af3672))
-* **language-service:** Clear caches when program changes ([#21337](https://github.com/angular/angular/issues/21337)) ([43e1520](https://github.com/angular/angular/commit/43e1520)), closes [#19405](https://github.com/angular/angular/issues/19405)
-* **service-worker:** properly handle invalid hashes in all scenarios ([#21288](https://github.com/angular/angular/issues/21288)) ([3951098](https://github.com/angular/angular/commit/3951098))
-
-
-### Features
-
-* **bazel:** allow ng_module rules to control whether type checking is enabled ([#21460](https://github.com/angular/angular/issues/21460)) ([cffa0fe](https://github.com/angular/angular/commit/cffa0fe))
-* **core:** add binding name to content changed error ([#20352](https://github.com/angular/angular/issues/20352)) ([d3bf54b](https://github.com/angular/angular/commit/d3bf54b))
-* **forms:** handle string with and without line boundary on pattern validator ([#19256](https://github.com/angular/angular/issues/19256)) ([54bf179](https://github.com/angular/angular/commit/54bf179))
-
-
-### Performance Improvements
-
-* **ivy:** add missing dom element in render3_function tree benchmark ([#21476](https://github.com/angular/angular/issues/21476)) ([9b5a485](https://github.com/angular/angular/commit/9b5a485))
-
-
-
 <a name="5.2.1"></a>
 ## [5.2.1](https://github.com/angular/angular/compare/5.2.0...5.2.1) (2018-01-17)
 

README.md

@@ -5,10 +5,6 @@
 [![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://www.npmjs.com/@angular/core)
 
 
-[![Sauce Test Status](https://saucelabs.com/browser-matrix/angular2-ci.svg)](https://saucelabs.com/u/angular2-ci)
-
-*Safari (7+), iOS (7+) and IE mobile (11) are tested on [BrowserStack][browserstack].*
-
 # Angular
 
 Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages.
@@ -17,12 +13,19 @@ Angular is a development platform for building mobile and desktop web applicatio
 
 [Get started in 5 minutes][quickstart].
 
+
+## Changelog
+
+[Learn about the latest improvements][changelog]. 
+
+
 ## Want to help?
 
 Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our
 guidelines for [contributing][contributing] and then check out one of our issues in the [hotlist: community-help](https://github.com/angular/angular/labels/hotlist%3A%20community-help).
 
 [browserstack]: https://www.browserstack.com/automate/public-build/LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06
-[contributing]: http://github.com/angular/angular/blob/master/CONTRIBUTING.md
-[quickstart]: https://angular.io/docs/ts/latest/quickstart.html
-[ng]: http://angular.io
+[contributing]: https://github.com/angular/angular/blob/master/CONTRIBUTING.md
+[quickstart]: https://angular.io/guide/quickstart
+[changelog]: https://github.com/angular/angular/blob/master/CHANGELOG.md
+[ng]: https://angular.io

WORKSPACE

@@ -1,62 +1,28 @@
 workspace(name = "angular")
 
+#
+# Download Bazel toolchain dependencies as needed by build actions
+#
+
 http_archive(
     name = "build_bazel_rules_nodejs",
-    url = "https://github.com/bazelbuild/rules_nodejs/archive/1931156c232a08356dfda02e9c8b0275c2e63c00.zip",
-    strip_prefix = "rules_nodejs-1931156c232a08356dfda02e9c8b0275c2e63c00",
-    sha256 = "9cfe33276a6ac0076ee9ee159c4a2576f9851c0f437435b5ac19b2e592493078",
+    url = "https://github.com/bazelbuild/rules_nodejs/archive/0.9.1.zip",
+    strip_prefix = "rules_nodejs-0.9.1",
+    sha256 = "6139762b62b37c1fd171d7f22aa39566cb7dc2916f0f801d505a9aaf118c117f",
 )
 
-load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
-
-check_bazel_version("0.11.1")
-node_repositories(package_json = ["//:package.json"])
-
-yarn_install(
-    name = "ts-api-guardian_runtime_deps",
-    package_json = "//tools/ts-api-guardian:package.json",
-    yarn_lock = "//tools/ts-api-guardian:yarn.lock",
-)
-
-yarn_install(
-    name = "http-server_runtime_deps",
-    package_json = "//tools/http-server:package.json",
-    yarn_lock = "//tools/http-server:yarn.lock",
+http_archive(
+    name = "io_bazel_rules_webtesting",
+    url = "https://github.com/bazelbuild/rules_webtesting/archive/v0.2.0.zip",
+    strip_prefix = "rules_webtesting-0.2.0",
+    sha256 = "cecc12f07e95740750a40d38e8b14b76fefa1551bef9332cb432d564d693723c",
 )
 
 http_archive(
     name = "build_bazel_rules_typescript",
-    url = "https://github.com/bazelbuild/rules_typescript/archive/0.12.1.zip",
-    strip_prefix = "rules_typescript-0.12.1",
-    sha256 = "24e2c36f60508c6d270ae4265b89b381e3f66d550e70c367ed3755ad8d7ce3b0",
-)
-
-load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
-
-ts_setup_workspace()
-
-local_repository(
-    name = "rxjs",
-    path = "node_modules/rxjs/src",
-)
-
-# Point to the integration test workspace just so that Bazel doesn't descend into it
-# when expanding the //... pattern
-local_repository(
-    name = "bazel_integration_test",
-    path = "integration/bazel",
-)
-
-# This commit matches the version of buildifier in angular/ngcontainer
-# If you change this, also check if it matches the version in the angular/ngcontainer
-# version in /.circleci/config.yml
-BAZEL_BUILDTOOLS_VERSION = "70bc7843bb9950fece2bc014ed16de03419e36e2"
-
-http_archive(
-    name = "com_github_bazelbuild_buildtools",
-    url = "https://github.com/bazelbuild/buildtools/archive/%s.zip" % BAZEL_BUILDTOOLS_VERSION,
-    strip_prefix = "buildtools-%s" % BAZEL_BUILDTOOLS_VERSION,
-    sha256 = "367c23a5fe7fc2a7cb57863d3718b4149f0e57426c48c8ad54c45348a0b53cc1",
+    url = "https://github.com/bazelbuild/rules_typescript/archive/0.15.0.zip",
+    strip_prefix = "rules_typescript-0.15.0",
+    sha256 = "1aa75917330b820cb239b3c10a936a10f0a46fe215063d4492dd76dc6e1616f4",
 )
 
 http_archive(
@@ -65,18 +31,24 @@ http_archive(
     sha256 = "feba3278c13cde8d67e341a837f69a029f698d7a27ddbb2a202be7a10b22142a",
 )
 
-load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
+# This commit matches the version of buildifier in angular/ngcontainer
+# If you change this, also check if it matches the version in the angular/ngcontainer
+# version in /.circleci/config.yml
+BAZEL_BUILDTOOLS_VERSION = "fd9878fd5de921e0bbab3dcdcb932c2627812ee1"
 
-go_rules_dependencies()
-
-go_register_toolchains()
+http_archive(
+    name = "com_github_bazelbuild_buildtools",
+    url = "https://github.com/bazelbuild/buildtools/archive/%s.zip" % BAZEL_BUILDTOOLS_VERSION,
+    strip_prefix = "buildtools-%s" % BAZEL_BUILDTOOLS_VERSION,
+    sha256 = "27bb461ade23fd44ba98723ad98f84ee9c83cd3540b773b186a1bc5037f3d862",
+)
 
 # Fetching the Bazel source code allows us to compile the Skylark linter
 http_archive(
     name = "io_bazel",
-    url = "https://github.com/bazelbuild/bazel/archive/5a35e72f9e97c06540c479f8c31512fb4656202f.zip",
-    strip_prefix = "bazel-5a35e72f9e97c06540c479f8c31512fb4656202f",
-    sha256 = "ed33a52874c14e3b487fb50f390c541fab9c81a33d986d38fb01766a66dbcd21",
+    url = "https://github.com/bazelbuild/bazel/archive/968f87900dce45a7af749a965b72dbac51b176b3.zip",
+    strip_prefix = "bazel-968f87900dce45a7af749a965b72dbac51b176b3",
+    sha256 = "e373d2ae24955c1254c495c9c421c009d88966565c35e4e8444c082cb1f0f48f",
 )
 
 # We have a source dependency on the Devkit repository, because it's built with
@@ -94,7 +66,67 @@ http_archive(
 
 http_archive(
     name = "org_brotli",
-    url = "https://github.com/google/brotli/archive/c6333e1e79fb62ea088443f192293f964409b04e.zip",
-    strip_prefix = "brotli-c6333e1e79fb62ea088443f192293f964409b04e",
-    sha256 = "3f781988dee7dd3bcce2bf238294663cfaaf3b6433505bdb762e24d0a284d1dc",
+    url = "https://github.com/google/brotli/archive/f9b8c02673c576a3e807edbf3a9328e9e7af6d7c.zip",
+    strip_prefix = "brotli-f9b8c02673c576a3e807edbf3a9328e9e7af6d7c",
+    sha256 = "8a517806d2b7c8505ba5c53934e7d7c70d341b68ffd268e9044d35b564a48828",
+)
+
+#
+# Load and install our dependencies downloaded above.
+#
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
+
+check_bazel_version("0.13.0")
+node_repositories(package_json = ["//:package.json"])
+
+load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
+
+go_rules_dependencies()
+go_register_toolchains()
+
+load("@io_bazel_rules_webtesting//web:repositories.bzl", "browser_repositories", "web_test_repositories")
+
+web_test_repositories()
+browser_repositories(
+    chromium = True,
+    firefox = True,
+)
+
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
+
+ts_setup_workspace()
+
+#
+# Point Bazel to WORKSPACEs that live in subdirectories
+#
+
+local_repository(
+    name = "rxjs",
+    path = "node_modules/rxjs/src",
+)
+
+# Point to the integration test workspace just so that Bazel doesn't descend into it
+# when expanding the //... pattern
+local_repository(
+    name = "bazel_integration_test",
+    path = "integration/bazel",
+)
+
+#
+# Ask Bazel to manage these toolchain dependencies for us.
+# Bazel will run `yarn install` when one of these toolchains is requested during
+# a build.
+#
+
+yarn_install(
+    name = "ts-api-guardian_runtime_deps",
+    package_json = "//tools/ts-api-guardian:package.json",
+    yarn_lock = "//tools/ts-api-guardian:yarn.lock",
+)
+
+yarn_install(
+    name = "http-server_runtime_deps",
+    package_json = "//tools/http-server:package.json",
+    yarn_lock = "//tools/http-server:yarn.lock",
 )

aio/aio-builds-setup/scripts/update-preview-server.sh

@@ -3,7 +3,7 @@
 set -eux -o pipefail
 exec 3>&1
 
-echo "\n\n[`date`] - Updating the preview server..."
+echo -e "\n\n[`date`] - Updating the preview server..."
 
 # Input
 readonly HOST_REPO_DIR=$1

aio/angular.json

@@ -8,6 +8,7 @@
   "projects": {
     "site": {
       "root": "",
+      "sourceRoot": "src",
       "projectType": "application",
       "architect": {
         "build": {
@@ -29,36 +30,12 @@
             "vendorChunk": false,
             "polyfills": "src/polyfills.ts",
             "assets": [
-              {
-                "glob": "**/*",
-                "input": "src/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "src/generated",
-                "output": "/generated"
-              },
-              {
-                "glob": "app/search/search-worker.js",
-                "input": "src",
-                "output": "/"
-              },
-              {
-                "glob": "favicon.ico",
-                "input": "src",
-                "output": "/"
-              },
-              {
-                "glob": "pwa-manifest.json",
-                "input": "src",
-                "output": "/"
-              },
-              {
-                "glob": "google385281288605d160.html",
-                "input": "src",
-                "output": "/"
-              },
+              "src/assets",
+              "src/generated",
+              "src/app/search/search-worker.js",
+              "src/favicon.ico",
+              "src/pwa-manifest.json",
+              "src/google385281288605d160.html",
               {
                 "glob": "custom-elements.min.js",
                 "input": "node_modules/@webcomponents/custom-elements",
@@ -71,9 +48,7 @@
               }
             ],
             "styles": [
-              {
-                "input": "src/styles.scss"
-              }
+              "src/styles.scss"
             ],
             "scripts": []
           },
@@ -142,41 +117,15 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              {
-                "input": "src/styles.scss"
-              }
+              "src/styles.scss"
             ],
             "assets": [
-              {
-                "glob": "**/*",
-                "input": "src/assets",
-                "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "src/generated",
-                "output": "/generated"
-              },
-              {
-                "glob": "app/search/search-worker.js",
-                "input": "src",
-                "output": "/"
-              },
-              {
-                "glob": "favicon.ico",
-                "input": "src",
-                "output": "/"
-              },
-              {
-                "glob": "pwa-manifest.json",
-                "input": "src",
-                "output": "/"
-              },
-              {
-                "glob": "google385281288605d160.html",
-                "input": "src",
-                "output": "/"
-              },
+              "src/assets",
+              "src/generated",
+              "src/app/search/search-worker.js",
+              "src/favicon.ico",
+              "src/pwa-manifest.json",
+              "src/google385281288605d160.html",
               {
                 "glob": "custom-elements.min.js",
                 "input": "node_modules/@webcomponents/custom-elements",

aio/content/examples/cli-quickstart/README.md

@@ -1,27 +0,0 @@
-# MasterProject
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.0.
-
-## Development server
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

aio/content/examples/cli-quickstart/zipper.json

@@ -3,7 +3,7 @@
     "!**/*.d.ts",
     "!**/*.js",
     "!**/*.[0-9].*",
-    ".angular-cli.json",
+    "angular.json",
     "protractor.conf.js"
   ]
 }

aio/content/examples/component-interaction/src/app/voter.component.ts

@@ -5,18 +5,18 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   selector: 'app-voter',
   template: `
     <h4>{{name}}</h4>
-    <button (click)="vote(true)"  [disabled]="voted">Agree</button>
-    <button (click)="vote(false)" [disabled]="voted">Disagree</button>
+    <button (click)="vote(true)"  [disabled]="didVote">Agree</button>
+    <button (click)="vote(false)" [disabled]="didVote">Disagree</button>
   `
 })
 export class VoterComponent {
   @Input()  name: string;
-  @Output() onVoted = new EventEmitter<boolean>();
-  voted = false;
+  @Output() voted = new EventEmitter<boolean>();
+  didVote = false;
 
   vote(agreed: boolean) {
-    this.onVoted.emit(agreed);
-    this.voted = true;
+    this.voted.emit(agreed);
+    this.didVote = true;
   }
 }
 // #enddocregion

aio/content/examples/component-interaction/src/app/votetaker.component.ts

@@ -8,7 +8,7 @@ import { Component }      from '@angular/core';
     <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
     <app-voter *ngFor="let voter of voters"
       [name]="voter"
-      (onVoted)="onVoted($event)">
+      (voted)="onVoted($event)">
     </app-voter>
   `
 })

aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts

@@ -5,7 +5,7 @@ import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } fr
 // #docregion custom-validator
 /** A hero's name can't match the given regular expression */
 export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
-  return (control: AbstractControl): {[key: string]: any} => {
+  return (control: AbstractControl): {[key: string]: any} | null => {
     const forbidden = nameRe.test(control.value);
     return forbidden ? {'forbiddenName': {value: control.value}} : null;
   };
@@ -22,7 +22,7 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
 export class ForbiddenValidatorDirective implements Validator {
   @Input('appForbiddenName') forbiddenName: string;
 
-  validate(control: AbstractControl): {[key: string]: any} {
+  validate(control: AbstractControl): {[key: string]: any} | null {
     return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
                               : null;
   }

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

@@ -38,8 +38,6 @@ export class MyCounterComponent implements OnChanges {
   }
 }
 
-/***************************************/
-
 @Component({
   selector: 'counter-parent',
   template: `

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

@@ -72,8 +72,6 @@ export class DoCheckComponent implements DoCheck {
   }
 }
 
-/***************************************/
-
 @Component({
   selector: 'do-check-parent',
   templateUrl: './do-check-parent.component.html',

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

@@ -46,8 +46,6 @@ export class OnChangesComponent implements OnChanges {
   reset() { this.changeLog = []; }
 }
 
-/***************************************/
-
 @Component({
   selector: 'on-changes-parent',
   templateUrl: './on-changes-parent.component.html',

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

@@ -2,7 +2,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular//common/http';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import {

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

@@ -7,12 +7,9 @@
     "resources": {
       "files": [
         "/favicon.ico",
-        "/index.html"
-      ],
-      "versionedFiles": [
-        "/*.bundle.css",
-        "/*.bundle.js",
-        "/*.chunk.js"
+        "/index.html",
+        "/*.css",
+        "/*.js"
       ]
     }
   }, {
@@ -25,4 +22,4 @@
       ]
     }
   }]
-}
+}

aio/content/examples/testing/src/tests.sb.ts

@@ -1,26 +1,26 @@
 // Import spec files individually for Stackblitz
-import 'app/about/about.component.spec.ts';
-import 'app/app-initial.component.spec.ts';
-import 'app/app.component.router.spec.ts';
-import 'app/app.component.spec.ts';
-import 'app/banner/banner-initial.component.spec.ts';
-import 'app/banner/banner.component.spec.ts';
-import 'app/banner/banner.component.detect-changes.spec.ts';
-import 'app/banner/banner-external.component.spec.ts';
-import 'app/dashboard/dashboard-hero.component.spec.ts';
-import 'app/dashboard/dashboard.component.no-testbed.spec.ts';
-import 'app/dashboard/dashboard.component.spec.ts';
-import 'app/demo/async-helper.spec.ts';
-import 'app/demo/demo.spec.ts';
-import 'app/demo/demo.testbed.spec.ts';
-import 'app/hero/hero-detail.component.no-testbed.spec.ts';
-import 'app/hero/hero-detail.component.spec.ts';
-import 'app/hero/hero-list.component.spec.ts';
-import 'app/model/hero.service.spec.ts';
-import 'app/model/http-hero.service.spec.ts';
-import 'app/model/testing/http-client.spec.ts';
-import 'app/shared/highlight.directive.spec.ts';
-import 'app/shared/title-case.pipe.spec.ts';
-import 'app/twain/twain.component.spec.ts';
-import 'app/twain/twain.component.marbles.spec.ts';
-import 'app/welcome/welcome.component.spec.ts';
+import './app/about/about.component.spec.ts';
+import './app/app-initial.component.spec.ts';
+import './app/app.component.router.spec.ts';
+import './app/app.component.spec.ts';
+import './app/banner/banner-initial.component.spec.ts';
+import './app/banner/banner.component.spec.ts';
+import './app/banner/banner.component.detect-changes.spec.ts';
+import './app/banner/banner-external.component.spec.ts';
+import './app/dashboard/dashboard-hero.component.spec.ts';
+import './app/dashboard/dashboard.component.no-testbed.spec.ts';
+import './app/dashboard/dashboard.component.spec.ts';
+import './app/demo/async-helper.spec.ts';
+import './app/demo/demo.spec.ts';
+import './app/demo/demo.testbed.spec.ts';
+import './app/hero/hero-detail.component.no-testbed.spec.ts';
+import './app/hero/hero-detail.component.spec.ts';
+import './app/hero/hero-list.component.spec.ts';
+import './app/model/hero.service.spec.ts';
+import './app/model/http-hero.service.spec.ts';
+import './app/model/testing/http-client.spec.ts';
+import './app/shared/highlight.directive.spec.ts';
+import './app/shared/title-case.pipe.spec.ts';
+import './app/twain/twain.component.spec.ts';
+import './app/twain/twain.component.marbles.spec.ts';
+import './app/welcome/welcome.component.spec.ts';

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

@@ -84,7 +84,7 @@ export class HeroService {
       // if not search term, return empty hero array.
       return of([]);
     }
-    return this.http.get<Hero[]>(`api/heroes/?name=${term}`).pipe(
+    return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
       tap(_ => this.log(`found heroes matching "${term}"`)),
       catchError(this.handleError<Hero[]>('searchHeroes', []))
     );

aio/content/examples/universal/server.ts

@@ -17,7 +17,7 @@ const PORT = process.env.PORT || 4000;
 const DIST_FOLDER = join(process.cwd(), 'dist');
 
 // * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
 
 // Express Engine
 import { ngExpressEngine } from '@nguniversal/express-engine';
@@ -51,7 +51,7 @@ app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
 // #docregion navigation-request
 // All regular routes use the Universal engine
 app.get('*', (req, res) => {
-  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
+  res.render('index', { req });
 });
 // #enddocregion navigation-request
 

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

@@ -64,7 +64,7 @@ export class HeroService {
       // if not search term, return empty hero array.
       return of([]);
     }
-    return this.http.get<Hero[]>(`api/heroes/?name=${term}`).pipe(
+    return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
       tap(_ => this.log(`found heroes matching "${term}"`)),
       catchError(this.handleError<Hero[]>('searchHeroes', []))
     );

aio/content/examples/universal/webpack.server.config.js

@@ -5,8 +5,9 @@ module.exports = {
   entry: { server: './server.ts' },
   resolve: { extensions: ['.js', '.ts'] },
   target: 'node',
+  mode: 'none',
   // this makes sure we include node_modules and other 3rd party libraries
-  externals: [/(node_modules|main\..*\.js)/],
+  externals: [/node_modules/],
   output: {
     path: path.join(__dirname, 'dist'),
     filename: '[name].js'

aio/content/guide/ajs-quick-reference.md

@@ -1,4 +1,4 @@
-# AngularJS to Angular Quick Reference
+# AngularJS to Angular Concepts: Quick Reference
 
 
 {@a top}
@@ -1256,7 +1256,7 @@ also encapsulate a style sheet within a specific component.
       ### Styles configuration
       <code-example hideCopy path="ajs-quick-reference/.angular-cli.1.json" region="styles" linenums="false"></code-example>
 
-      With the Angular CLI, you can configure your global styles in the `.angular-cli.json` file.
+      With the Angular CLI, you can configure your global styles in the `angular.json` file.
       You can rename the extension to `.scss` to use sass.
 
       ### StyleUrls

aio/content/guide/bootstrapping.md

@@ -177,4 +177,4 @@ root module's `bootstrap` array.
 ## More about Angular Modules
 
 For more on NgModules you're likely to see frequently in apps,
-see [Frequently Used Modules](#).
+see [Frequently Used Modules](guide/frequent-ngmodules).

aio/content/guide/component-styles.md

@@ -236,7 +236,7 @@ In this case, the URL is relative to the CSS file into which you're importing.
 
 ### External and global style files
 
-When building with the CLI, you must configure the `.angular-cli.json` to include _all external assets_, including external style files.
+When building with the CLI, you must configure the `angular.json` to include _all external assets_, including external style files.
 
 Register **global** style files in the `styles` section which, by default, is pre-configured with the global `styles.css` file.
 

aio/content/guide/dependency-injection.md

@@ -32,7 +32,7 @@ from the [The Tour of Heroes](tutorial/).
 </code-tabs>
 
 The `HeroesComponent` is the top-level heroes component.
-It's only purpose is to display the `HeroListComponent`
+Its only purpose is to display the `HeroListComponent`
 which displays a list of hero names.
 
 This version of the `HeroListComponent` gets its `heroes` from the `HEROES` array, an in-memory collection
@@ -440,6 +440,12 @@ The service can be instantiated by configuring a factory function as shown below
 
 <code-example path="dependency-injection/src/app/tree-shaking/service.0.ts"  title="src/app/tree-shaking/service.0.ts" linenums="false"> </code-example>
 
+<div class="l-sub-section">
+
+To override tree-shakable providers, register the provider using the `providers: []` array syntax of any Angular decorator that supports it.
+
+</div>
+
 {@a injector-config} 
 {@a bootstrap}
 

aio/content/guide/deployment.md

@@ -218,7 +218,7 @@ It serves build artifacts from memory instead for a faster development experienc
 <div class="l-sub-section">
 
 The output folder is  `dist/` by default.
-To output to a different folder, change the `outDir` in `.angular-cli.json`.
+To output to a different folder, change the `outputPath` in `angular.json`.
 
 </div>
 

aio/content/guide/elements.md

@@ -1,12 +1,23 @@
 # Angular Elements Overview
 
+_Angular elements_ are Angular components packaged as _custom elements_, a web standard for defining new HTML elements in a framework-agnostic way.
+
 [Custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) are a Web Platform feature currently supported by Chrome, Opera, and Safari, and available in other browsers through polyfills (see [Browser Support](#browser-support)).
 A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. 
 The browser maintains a `CustomElementRegistry` of defined custom elements (also called Web Components), which maps an instantiable JavaScript class to an HTML tag.
 
 The `@angular/elements` package exports a `createCustomElement()` API that provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API. 
 
-Transforming a component to a custom element makes all of the required Angular infrastructure available to the browser. Creating a custom element is simple and straightforward, and automatically connects your component-defined view with change detection and data binding, mapping Angular functionality to the corresponding native HTML equivalents. 
+Transforming a component to a custom element makes all of the required Angular infrastructure available to the browser. 
+Creating a custom element is simple and straightforward, and automatically connects your component-defined view with change detection and data binding, mapping Angular functionality to the corresponding native HTML equivalents. 
+
+<div class="l-sub-section">
+
+    We are working on custom elements that can be used by web apps built on other frameworks. 
+    A minimal, self-contained version of the Angular framework will be injected as a service to support the component's change-detection and data-binding functionality. 
+    For more about the direction of development, check out this [video presentation](https://www.youtube.com/watch?v=Z1gLFPLVJjY&t=4s).
+
+</div>
 
 ## Using custom elements
 
@@ -39,14 +50,6 @@ When your custom element is placed on a page, the browser creates an instance of
 
 <hr class="clear">
 
-<div class="l-sub-section">
-
-    We are working on custom elements that can be used by web apps built on other frameworks. 
-    A minimal, self-contained version of the Angular framework will be injected as a service to support the component's change-detection and data-binding functionality. 
-    For more about the direction of development, check out this [video presentation](https://www.youtube.com/watch?v=vHI5C-9vH-E).
-
-</div>
-
 ## Transforming components to custom elements
 
 Angular provides the `createCustomElement()` function for converting an Angular component, 

aio/content/guide/frequent-ngmodules.md

@@ -44,25 +44,25 @@ of some of the things they contain:
  <tr>
    <td><code>FormsModule</code></td>
    <td><code>@angular/forms</code></td>
-   <td>When you build template driven forms (includes <code>NgModel</code>)</td>
+   <td>When you want to build template driven forms (includes <code>NgModel</code>)</td>
  </tr>
 
  <tr>
    <td><code>ReactiveFormsModule</code></td>
    <td><code>@angular/forms</code></td>
-   <td>When building reactive forms</td>
+   <td>When you want to build reactive forms</td>
  </tr>
 
  <tr>
    <td><code>RouterModule</code></td>
    <td><code>@angular/router</code></td>
-   <td>For Routing and when you want to use <code>RouterLink</code>,<code>.forRoot()</code>, and <code>.forChild()</code></td>
+   <td>When you want to use <code>RouterLink</code>, <code>.forRoot()</code>, and <code>.forChild()</code></td>
  </tr>
 
  <tr>
    <td><code>HttpClientModule</code></td>
    <td><code>@angular/common/http</code></td>
-   <td>When you to talk to a server</td>
+   <td>When you want to talk to a server</td>
  </tr>
 
 </table>

aio/content/guide/glossary.md

@@ -28,6 +28,11 @@ By compiling your application using the `ngc` command-line tool, you can bootstr
 
 Compare [just-in-time (JIT) compilation](guide/glossary#jit).
 
+## Angular element
+
+An Angular [component](guide/glossary#component) that has been packaged as a [custom element](guide/glossary#custom-element). 
+
+Learn more in the [_Angular Elements_](guide/elements) guide.
 
 ## Annotation
 
@@ -434,7 +439,7 @@ Observables can deliver single or multiple values of any type to subscribers, ei
 
 Angular uses a third-party library called [Reactive Extensions (RxJS)](http://reactivex.io/rxjs/). 
 
-To learn more, see the [Observables](guide/glossary#observable) guide.
+To learn more, see the [Observables](guide/observables) guide.
 
 
 {@a observer}

aio/content/guide/http.md

@@ -450,7 +450,7 @@ Here is a `searchHeroes` method that queries for heroes whose names contain the
 
 If there is a search term, the code constructs an options object with an HTML URL-encoded search parameter. If the term were "foo", the GET request URL would be `api/heroes/?name=foo`.
 
-The `HttpParms` are immutable so you'll have to use the `set()` method to update the options.
+The `HttpParams` are immutable so you'll have to use the `set()` method to update the options.
 
 ### Debouncing requests
 
@@ -1034,7 +1034,7 @@ Call `request.flush()` with an error message, as seen in the following example.
 
 <code-example 
   path="http/src/testing/http-client.spec.ts"
-  region="404" 
+  region="network-error"
   linenums="false">
 </code-example>
 
@@ -1044,4 +1044,4 @@ Alternatively, you can call `request.error()` with an `ErrorEvent`.
   path="http/src/testing/http-client.spec.ts"
   region="network-error"
   linenums="false">
-</code-example>
+</code-example>

aio/content/guide/i18n.md

@@ -42,11 +42,10 @@ locale id to find the correct corresponding locale data.
 
 By default, Angular uses the locale `en-US`, which is English as spoken in the United States of America.
 
-To set your app's locale to another value, use the CLI parameter `--locale` with the value
-of the locale id that you want to use:
+To set your app's locale to another value, use the CLI parameter `--configuration` with the value of the locale id that you want to use:
 
 <code-example language="sh" class="code-shell">
-  ng serve --aot --locale fr
+  ng serve --configuration=fr
 </code-example>
 
 If you use JIT, you also need to define the `LOCALE_ID` provider in your main module:
@@ -86,7 +85,7 @@ and `PercentPipe` use locale data to format data based on the `LOCALE_ID`.
 
 By default, Angular only contains locale data for `en-US`. If you set the value of
 `LOCALE_ID` to another locale, you must import locale data for that new locale.
-The CLI imports the locale data for you when you use the parameter `--locale` with `ng serve` and
+The CLI imports the locale data for you when you use the parameter `--configuration` with `ng serve` and
 `ng build`.
 
 If you want to import locale data for other languages, you can do it manually:
@@ -424,9 +423,9 @@ You can specify the translation format explicitly with the `--i18nFormat` flag a
 these example commands:
 
 <code-example language="sh" class="code-shell">
-ng xi18n  --i18nFormat=xlf
-ng xi18n  --i18nFormat=xlf2
-ng xi18n  --i18nFormat=xmb
+ng xi18n  --i18n-format=xlf
+ng xi18n  --i18n-format=xlf2
+ng xi18n  --i18n-format=xmb
 </code-example>
 
 The sample in this guide uses the default XLIFF 1.2 format.
@@ -442,11 +441,11 @@ The sample in this guide uses the default XLIFF 1.2 format.
 ### Other options
 
 You can specify the output path used by the CLI to extract your translation source file with
-the parameter `--outputPath`:
+the parameter `--output-path`:
 
 <code-example language="sh" class="code-shell">
 
-  ng xi18n --outputPath src/locale
+  ng xi18n --output-path locale
 
 </code-example>
 
@@ -455,15 +454,15 @@ the parameter `--outFile`:
 
 <code-example language="sh" class="code-shell">
 
-  ng xi18n --outFile source.xlf
+  ng xi18n --out-file source.xlf
 
 </code-example>
 
-You can specify the base locale of your app with the parameter `--locale`:
+You can specify the base locale of your app with the parameter `--i18n-locale`:
 
 <code-example language="sh" class="code-shell">
 
-  ng xi18n --locale fr
+  ng xi18n --i18n-locale fr
 
 </code-example>
 
@@ -663,7 +662,7 @@ format that Angular understands, such as `.xtb`.
 How you provide this information depends upon whether you compile with
 the JIT compiler or the AOT compiler.
 
-  * With [AOT](guide/i18n#merge-aot), you pass the information as a CLI parameter.
+  * With [AOT](guide/i18n#merge-aot), you pass the information as a configuration
   * With [JIT](guide/i18n#merge-jit), you provide the information at bootstrap time.
 
 
@@ -677,18 +676,70 @@ When you internationalize with the AOT compiler, you must pre-build a separate a
 package for each language and serve the appropriate package based on either server-side language
 detection or url parameters.
 
-You also need to instruct the AOT compiler to use your translation file. To do so, you use three
-options with the `ng serve` or `ng build` commands:
+You also need to instruct the AOT compiler to use your translation configuration. To do so, you configure the translation with three options in your `angular.json` file.
 
-* `--i18nFile`: the path to the translation file.
-* `--i18nFormat`: the format of the translation file.
-* `--locale`: the locale id.
+* `i18nFile`: the path to the translation file.
+* `i18nFormat`: the format of the translation file.
+* `i18nLocale`: the locale id.
 
-The example below shows how to serve the French language file created in previous sections of this
-guide:
+```
+"configurations": {
+  ...
+  "fr": {
+    "aot": true,
+    "outputPath": "dist/my-project-fr/",
+    "i18nFile": "src/locale/messages.fr.xlf",
+    "i18nFormat": "xlf",
+    "i18nLocale": "fr",
+    ...
+  }
+}
+```
+
+You then pass the configuration with the `ng serve` or `ng build` commands. 
+The example below shows how to serve the French language file created in previous 
+sections of this guide:
 
 <code-example language="sh" class="code-shell">
-  ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr
+  ng serve --configuration=fr
+</code-example>
+
+For production builds, you define a separate `production-fr` build configuration in 
+your `angular.json`.
+
+```
+"configurations": {
+  ...
+  "production-fr": {
+    "fileReplacements": [
+      {
+        "replace": "src/environments/environment.ts",
+        "with": "src/environments/environment.prod.ts"
+      }
+    ],
+    "optimization": true,
+    "outputHashing": "all",
+    "sourceMap": false,
+    "extractCss": true,
+    "namedChunks": false,
+    "aot": true,
+    "extractLicenses": true,
+    "vendorChunk": false,
+    "buildOptimizer": true,
+    "outputPath": "dist/my-project-fr/",
+    "i18nFile": "src/locale/messages.fr.xlf",
+    "i18nFormat": "xlf",
+    "i18nLocale": "fr",
+    "i18nMissingTranslation": "error"
+  },
+  ...
+}
+```
+
+The same configuration options can also be provided through the CLI with your existing `production` configuration.
+
+<code-example language="sh" class="code-shell">
+  ng build --prod --i18n-file src/locale/messages.fr.xlf --i18n-format xlf --i18n-locale fr
 </code-example>
 
 {@a merge-jit}
@@ -731,12 +782,17 @@ compilation, the app will fail to load.
 * Warning (default): show a 'Missing translation' warning in the console or shell.
 * Ignore: do nothing.
 
-If you use the AOT compiler, specify the warning level by using the CLI parameter
-`--missingTranslation`. The example below shows how to set the warning level to error:
+You specify the warning level in the `configurations` section your Angular CLI build configuration. The example below shows how to set the warning level to error:
 
-<code-example language="sh" class="code-shell">
-  ng serve --aot --missingTranslation=error
-</code-example>
+```
+"configurations": {
+  ...
+  "fr": {
+    ...
+    "i18nMissingTranslation": "error"
+  }
+}
+```
 
 If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding
 the 'MissingTranslationStrategy' property. The example below shows how to set the warning level to

aio/content/guide/language-service.md

@@ -1,33 +1,33 @@
 # 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 
+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, 
+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 
+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. 
+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">
@@ -35,8 +35,8 @@ In this example, Angular doesn't know what `orders` is or where it comes from.
 
 ## Navigation
 
-Navigation allows you to hover to 
-see where a component, directive, module, etc. is from and then 
+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>
@@ -46,53 +46,52 @@ click and press F12 to go directly to its definition.
 
 ## 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). 
+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: 
+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 Angular.ng-template
 ```
 
-Then click the install button to install the Angular Language Service. 
+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 
+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 
+Here's the dev dependency
 you need to have in `package.json`:
 
 ```json
-
 devDependencies {
-	"@angular/language-service": "^4.0.0"
+  "@angular/language-service": "^6.0.0"
 }
 ```
 
-Then in the terminal window at the root of your project, 
-install the `devDependencies` with `npm` or `yarn`: 
+Then in the terminal window at the root of your project,
+install the `devDependencies` with `npm` or `yarn`:
 
 ```sh
-npm install 
+npm install
 ```
-*OR* 
+*OR*
 
 ```sh
 yarn
 ```
 
-*OR* 
+*OR*
 
 ```sh
 yarn install
@@ -101,7 +100,7 @@ yarn install
 
 ### Sublime Text
 
-In [Sublime Text](https://www.sublimetext.com/), you first need an extension to allow Typescript. 
+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
@@ -113,7 +112,7 @@ Then install the Angular Language Service in the same location:
 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. 
+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:
 
@@ -124,13 +123,13 @@ Next, in your user preferences (`Cmd+,` or `Ctrl+,`), add:
 
 ## Installing in your project
 
-You can also install Angular Language Service in your project with the 
+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 
+Additionally, add the following to the `"compilerOptions"` section of
 your project's `tsconfig.json`.
 
 ```json
@@ -138,25 +137,25 @@ your project's `tsconfig.json`.
       {"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) 
+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 
+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 
+For more in-depth information, see the
 [Angular Language Service API](https://github.com/angular/angular/blob/master/packages/language-service/src/types.ts)
 
 
@@ -170,7 +169,7 @@ For more in-depth information, see the
 
 ## More on Information
 
-For more information, see [Chuck Jazdzewski's presentation](https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s) on the Angular Language 
+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/lifecycle-hooks.md

@@ -561,7 +561,7 @@ the `AfterContentComponent`'s parent. Here's the parent's template:
 
 <code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="parent-template" title="AfterContentParentComponent (template excerpt)" linenums="false"></code-example>
 
-Notice that the `<my-child>` tag is tucked between the `<after-content>` tags.
+Notice that the `<app-child>` tag is tucked between the `<after-content>` tags.
 Never put content between a component's element tags *unless you intend to project that content
 into the component*.
 
@@ -571,7 +571,7 @@ Now look at the component's template:
 
 The `<ng-content>` tag is a *placeholder* for the external content.
 It tells Angular where to insert that content.
-In this case, the projected content is the `<my-child>` from the parent.
+In this case, the projected content is the `<app-child>` from the parent.
 
 <figure>
   <img src='generated/images/guide/lifecycle-hooks/projected-child-view.png' alt="Projected Content">

aio/content/guide/reactive-forms.md

@@ -1068,7 +1068,7 @@ Replace the address `FormGroup` definition with a `secretLairs`  `FormArray` def
 
 </code-example>
 
-In `hero-detail.component.html` change `formArrayName="address"` to `formArrayName="secretLairs"`.
+In `hero-detail.component.html` change `formGroupName="address"` to `formArrayName="secretLairs"`.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.html" region="form-array-name" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 

aio/content/guide/releases.md

@@ -0,0 +1,168 @@
+# Angular versioning and releases
+
+We recognize that you need stability from the Angular framework. Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Angular to thrive.
+
+We also share with you the desire for Angular to keep evolving. We strive to ensure that the foundation on top of which you are building is continuously improving and enabling you to stay up-to-date with the rest of the web ecosystem and your user needs.
+
+This document contains the practices that we follow to provide you with a leading-edge app development platform, balanced with stability. We strive to ensure that future changes are always introduced in a predictable way. We want everyone who depends on Angular to know when and how new features are added, and to be well-prepared when obsolete ones are removed.
+
+See [Updating your projects](guide/updating "Updating your projects") for information about how to update your apps and libraries to the latest version of Angular.
+
+<div class="l-sub-section">
+
+The practices described in this document apply to Angular 2.0 and later. If you are currently using AngularJS, see [Upgrading from AngularJS](guide/upgrade "Upgrading from Angular JS"). _AngularJS_ is the name for all v1.x versions of Angular.
+
+</div>
+
+
+{@a angular-versioning}
+## Angular versioning
+
+Angular version numbers indicate the level of changes that are introduced by the release. This use of [semantic versioning](https://semver.org/ "Semantic Versioning Specification") helps you understand the potential impact of updating to a new version. 
+
+Angular version numbers have three parts: `major.minor.patch`. For example, version 5.2.9 indicates major version 5, minor version 2, and patch version 9. 
+
+The version number is incremented based on the level of change included in the release. 
+
+* Major releases contain significant new features, some but minimal developer assistance is expected during the update. When updating to a new major release, you may need to run update scripts, refactor code, run additional tests, and learn new APIs. 
+
+* Minor releases contain new smaller features. Minor releases are fully backward-compatible; no developer assistance is expected during update, but you can optionally modify your apps and libraries to begin using new APIs, features, and capabilities that were added in the release. We update peer dependencies in minor versions by expanding the supported versions, but we do not require projects to update these dependencies. 
+
+* Patch releases are low risk, bug fix releases. No developer assistance is expected during update.
+
+If you are updating within the same major version, then you can skip any intermediate versions and update directly to the targeted version. For example, if you want to update from 5.0.0 to 5.2.9, then you can update directly; you do not need to update from 5.0.0 to 5.1.0 before updating to 5.2.9. 
+
+If you are updating from one major version to another, then we recommend that you don't skip major versions. Follow the instructions to incrementally update to the next major version, testing and validating at each step. For example, if you want to update from version 4.x.x to version 6.x.x, we recommend that you update to the latest 5.x.x release first. After successfully updating to 5.x.x, you can then update to 6.x.x. 
+
+Pre-release previews&mdash;such as Beta and Release Candidate versions&mdash;are indicated by appending a dash and a beta or rc identifier, such as version 5.2.9-rc.3.
+
+{@a frequency}
+## Release frequency
+
+We work toward a regular schedule of releases, so that you can plan and coordinate your updates with the continuing evolution of Angular.
+
+In general, you can expect the following release cycle:
+
+* A major release every 6 months
+
+* 1-3 minor releases for each major release
+
+* A patch release almost every week
+
+We bake quality into our releases&mdash;and let you preview what's coming next&mdash;by providing Beta releases and release candidates (RCs) for each major and minor release.
+
+This cadence of releases gives you access to new beta features as soon as they are ready, while maintaining the stability and reliability of the platform for production users.
+
+
+{@a schedule}
+## Release schedule
+
+<div class="l-sub-section">
+
+Disclaimer: The dates are offered as general guidance and may be adjusted by us when necessary to ensure delivery of a high-quality platform. 
+
+</div>
+
+The following table contains our current target release dates for the next two major versions of Angular: 
+
+ Date                   | Stable Release | Compatibility
+ ---------------------- | -------------- | ----------------
+ September/October 2018 | 7.0.0          | ^6.0.0
+ March/April 2019       | 8.0.0          | ^7.0.0
+
+ Compatiblity note: The primary goal of the backwards compatibility promise is to ensure that changes in the core framework and tooling don't break the existing ecosystem of components and applications and don't put undue upgrade/migration burden on Angular application and component authors.
+
+
+{@a lts}
+{@a support}
+## Support policy
+
+All of our major releases are supported for 18 months. 
+
+* 6 months of active support, during which regularly-scheduled updates and patches are released, as described above in [Release frequency](#frequency "Release frequency").
+
+* 12 months of long-term support (LTS). During the LTS period, only critical fixes and security patches will be released.
+
+The following table provides the support status and key dates for Angular version 4.0.0 and higher. 
+
+<style>
+
+    td, th {vertical-align: top}
+
+</style>
+
+<table>
+
+    <tr>
+        <th>Version</th>
+        <th>Status</th>
+        <th>Release Date</th>
+        <th>LTS Start Date</th>
+        <th>LTS End Date</th>
+    </tr>
+
+    <tr>
+        <td>^4.0.0</td>
+        <td>LTS</td>
+        <td>March 23, 2017</td>
+        <td>September 23, 2017</td>
+        <td>September 23, 2018</td>
+    </tr>
+
+    <tr>
+        <td>^5.0.0</td>
+        <td>LTS</td>
+        <td>November 1, 2017</td>
+        <td>May 1, 2018</td>
+        <td>May 1, 2019</td>
+    </tr>
+
+    <tr>
+        <td>^6.0.0</td>
+        <td>Active</td>
+        <td>May 3, 2018</td>
+        <td>November 3, 2018</td>
+        <td>November 3, 2019</td>
+    </tr>
+
+</table>
+
+
+
+{@a deprecation}
+## Deprecation practices
+
+Sometimes &quot;breaking changes&quot;, such as the removal of support for select APIs and features, are necessary to innovate and stay current with new best practices, changing dependencies, or changes in the (web) platform itself. 
+
+To make these transitions as easy as possible, we make two commitments to you:
+
+* We work hard to minimize the number of breaking changes and to provide migration tools when possible. 
+
+* We follow the deprecation policy described here, so you have time to update your apps to the latest APIs and best practices.
+
+To help ensure that you have sufficient time and a clear path to update, this is our deprecation policy:
+
+* We announce deprecated features in the [change log](https://github.com/angular/angular/blob/master/CHANGELOG.md "Angular change log").
+
+* When we announce a deprecation, we also announce a recommended update path.
+
+* We support existing use of a stable API during the deprecation period, so  your code will keep working during that period. 
+
+* We support each deprecated API for at least two subsequent major releases, which means at least 12 months after deprecation.
+
+* We only make peer dependency updates that require changes to your apps in a major release. In minor releases, we update peer dependencies by expanding the supported versions, but we do not require projects to update these dependencies until a future major version. 
+
+
+{@a public-api}
+## Public API surface
+
+Angular is a collection of many packages, sub-projects, and tools. To prevent accidental use of private APIs&mdash;and so that you can clearly understand what is covered by the practices described here&mdash;we document what is and is not considered our public API surface. For details, see [Supported Public API Surface of Angular](https://github.com/angular/angular/blob/master/docs/PUBLIC_API.md "Supported Public API Surface of Angular").
+
+Any changes to the public API surface will be done using the versioning, support, and depreciation policies describe above.
+
+{@a labs}
+## Angular Labs
+
+Angular Labs is an initiative to cultivate new features and iterate on them quickly. Angular Labs provides a safe place for exploration and experimentation by the Angular team.
+
+Angular Labs projects are not ready for production use, and no commitment is made to bring them to production. The policies and practices that are described in this document do not apply to Angular Labs projects.

aio/content/guide/router.md

@@ -3656,7 +3656,7 @@ Lazy loading has multiple benefits.
 * You can speed up load time for users that only visit certain areas of the application.
 * You can continue expanding lazy loaded feature areas without increasing the size of the initial load bundle.
 
-You're already made part way there.
+You're already part of the way there.
 By organizing the application into modules—`AppModule`,
 `HeroesModule`, `AdminModule` and `CrisisCenterModule`—you
 have natural candidates for lazy loading.

aio/content/guide/service-worker-config.md

@@ -70,6 +70,7 @@ interface AssetGroup {
   updateMode?: 'prefetch' | 'lazy';
   resources: {
     files?: string[];
+    /** @deprecated As of v6 `versionedFiles` and `files` options have the same behavior. Use `files` instead. */
     versionedFiles?: string[];
     urls?: string[];
   };
@@ -102,7 +103,7 @@ This section describes the resources to cache, broken up into three groups.
 
 * `files` lists patterns that match files in the distribution directory. These can be single files or glob-like patterns that match a number of files.
 
-* `versionedFiles` is like `files` but should be used for build artifacts that already include a hash in the filename, which is used for cache busting. The Angular service worker can optimize some aspects of its operation if it can assume file contents are immutable.
+* `versionedFiles` has been deprecated. As of v6 `versionedFiles` and `files` options have the same behavior. Use `files` instead.
 
 * `urls` includes both URLs and URL patterns that will be matched at runtime. These resources are not fetched directly and do not have content hashes, but they will be cached according to their HTTP headers. This is most useful for CDNs such as the Google Fonts service.<br>
   _(Negative glob patterns are not supported.)_

aio/content/guide/service-worker-getting-started.md

@@ -23,10 +23,14 @@ ng add  @angular/pwa --project *project-name*
 
 The above command completes the following actions:
 
-1. Adds the `@angular/service-worker` package. 
+1. Adds the `@angular/service-worker` package to your project. 
 2. Enables service worker build support in the CLI.
 3. Imports and registers the service worker in the app module.
-4. Creates the service worker configuration file called `ngsw-config.json` which specifies the caching behaviors and other settings. 
+4. Updates the `index.html` file:
+    * Includes a link to add the `manifest.json` file.
+    * Adds meta tags for `theme-color`.
+5. Installs icon files to support the installed Progressive Web App (PWA).
+6. Creates the service worker configuration file called [`ngsw-config.json`](/guide/service-worker-config), which specifies the caching behaviors and other settings. 
 
 
  Now, build the project: 

aio/content/guide/testing-observables.md

@@ -1,3 +0,0 @@
-# Testing
-
-TBD. Original content [here](https://docs.google.com/document/d/1gGP5sqWNCHAWWV_GLdZQ1XyMO4K-CHksUxux0BFtVxk/edit#heading=h.ohqykkhzdhb2).

aio/content/guide/testing.md

@@ -57,11 +57,11 @@ The tests run again, the browser refreshes, and the new test results appear.
 
 The CLI takes care of Jasmine and karma configuration for you.
 
-You can fine-tune many options by editing the `karma.conf.js` file in the project root folder and
-the `test.ts` file in the `src/` folder.
+You can fine-tune many options by editing the `karma.conf.js` and
+the `test.ts` files in the `src/` folder.
 
 The `karma.conf.js` file is a partial karma configuration file.
-The CLI constructs the full runtime configuration in memory,based on application structure specified in the `.angular-cli.json` file, supplemented by `karma.conf.js`.
+The CLI constructs the full runtime configuration in memory,based on application structure specified in the `angular.json` file, supplemented by `karma.conf.js`.
 
 Search the web for more details about Jasmine and karma configuration.
 
@@ -204,8 +204,7 @@ The test consumes that spy in the same way it did earlier.
 Most test suites in this guide call `beforeEach()` to set the preconditions for each `it()` test
 and rely on the `TestBed` to create classes and inject services.
 
-There's another school of testing that never calls `beforeEach()` and
-and prefers to create classes explicitly rather than use the `TestBed`.
+There's another school of testing that never calls `beforeEach()` and prefers to create classes explicitly rather than use the `TestBed`.
 
 Here's how you might rewrite one of the `MasterService` tests in that style.
 
@@ -347,7 +346,7 @@ It appears within the template of a parent component,
 which binds a _hero_ to the `@Input` property and
 listens for an event raised through the _selected_ `@Output` property.
 
-You can test that the class code works without creating the the `DashboardHeroComponent`
+You can test that the class code works without creating the `DashboardHeroComponent`
 or its parent component.
 
 <code-example 
@@ -2367,9 +2366,9 @@ The [override metadata object](#metadata-override-object) is a generic defined a
 
 <code-example format="." language="javascript">
   type MetadataOverride<T> = {
-    add?: T;
-    remove?: T;
-    set?: T;
+    add?: Partial<T>;
+    remove?: Partial<T>;
+    set?: Partial<T>;
   };
 </code-example>
 
@@ -2725,9 +2724,9 @@ appropriate to the method, that is, the parameter of an `@NgModule`,
 
 <code-example format="." language="javascript">
   type MetadataOverride<T> = {
-    add?: T;
-    remove?: T;
-    set?: T;
+    add?: Partial<T>;
+    remove?: Partial<T>;
+    set?: Partial<T>;
   };
 </code-example>
 
@@ -3379,11 +3378,11 @@ next to their corresponding helper files.
 {@a q-e2e}
 #### Why not rely on E2E tests of DOM integration?
 
-The component DOM tests describe in this guide often require extensive setup and 
-advanced techniques where as the [class-only test](#component-class-testing)
-were comparatively simple.
+The component DOM tests described in this guide often require extensive setup and 
+advanced techniques whereas the [unit tests](#component-class-testing)
+are comparatively simple.
 
-Why not defer DOM integration tests to end-to-end (E2E) testing?
+#### Why not defer DOM integration tests to end-to-end (E2E) testing?
 
 E2E tests are great for high-level validation of the entire system.
 But they can't give you the comprehensive test coverage that you'd expect from unit tests.
@@ -3400,4 +3399,4 @@ accidental corruption of remote resources.
 It can even be hard to navigate to the component you want to test.
 
 Because of these many obstacles, you should test DOM interaction
-with unit testing techniques as much as possible.
+with unit testing techniques as much as possible.

aio/content/guide/universal.md

@@ -180,7 +180,7 @@ npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-lo
 
 {@a transition}
 
-### Modify the client app
+## Modify the client app
 
 A Universal app can act as a dynamic, content-rich "splash screen" that engages the user.
 It gives the appearance of a near-instant application.
@@ -190,7 +190,9 @@ Once loaded, Angular transitions from the static server-rendered page to the dyn
 
 You must make a few changes to your application code to support both server-side rendering and the transition to the client app.
 
-#### The root `AppModule`
+{@a root-app-module}
+
+### The root `AppModule`
 
 Open file `src/app/app.module.ts` and find the `BrowserModule` import in the `NgModule` metadata.
 Replace that import with this one:
@@ -206,9 +208,29 @@ You can get runtime information about the current platform and the `appId` by in
 <code-example path="universal/src/app/app.module.ts" region="platform-detection" title="src/app/app.module.ts (platform detection)">
 </code-example>
 
+{@a cli-output}
+
+### Build Destination
+
+A Universal app is distributed in two parts: the server-side code that serves up the initial application, and the client-side code that's loaded in dynamically. 
+
+The Angular CLI outputs the client-side code in the `dist` directory by default, so you modify the `outputPath` for the __build__ target in the `angular.json` to keep the client-side build outputs separate from the server-side code. The client-side build output will be served by the Express server.
+
+```
+...
+"build": {
+  "builder": "@angular-devkit/build-angular:browser",
+  "options": {
+    "outputPath": "dist/browser",
+    ...
+  } 
+}
+...
+```
+
 {@a http-urls}
 
-#### Absolute HTTP URLs
+### Absolute HTTP URLs
 
 The tutorial's `HeroService` and `HeroSearchService` delegate to the Angular `HttpClient` module to fetch application data.
 These services send requests to _relative_ URLs such as `api/heroes`.
@@ -262,6 +284,19 @@ The `ModuleMapLoaderModule` is a server-side module that allows lazy-loading of
 
 This is also the place to register providers that are specific to running your app under Universal.
 
+{@a app-server-entry-point}
+
+### App server entry point
+
+The `Angular CLI` uses the `AppServerModule` to build the server-side bundle. 
+
+Create a `main.server.ts` file in the `src/` directory that exports the `AppServerModule`:
+
+<code-example path="universal/src/main.server.ts" title="src/main.server.ts">
+</code-example>
+
+The `main.server.ts` will be referenced later to add a `server` target to the `Angular CLI` configuration.
+
 {@a web-server}
 
 ### Universal web server
@@ -421,6 +456,8 @@ This config extends from the root's `tsconfig.json` file. Certain settings are n
 * The `angularCompilerOptions` section guides the AOT compiler:
   * `entryModule` - the root module of the server application, expressed as `path/to/file#ClassName`.
 
+{@a universal-webpack-configuration}
+
 ### Universal Webpack configuration
 
 Universal applications doesn't need any extra Webpack configuration, the CLI takes care of that for you,
@@ -433,22 +470,47 @@ Create a `webpack.server.config.js` file in the project root directory with the
 
 **Webpack configuration** is a rich topic beyond the scope of this guide.
 
+{@a universal-cli-configuration}
+
+### Angular CLI configuration
+
+The CLI provides builders for different types of __targets__. Commonly known targets such as `build` and `serve` already exist in the `angular.json` configuration. To target a server-side build, add a `server` target to the `architect` configuration object.
+
+* The `outputPath` tells where the resulting build will be created.
+* The `main` provides the main entry point to the previously created `main.server.ts`
+* The `tsConfig` uses the `tsconfig.server.json` as configuration for the TypeScript and AOT compilation.
+
+```
+"architect": {
+  ...
+  "server": {
+    "builder": "@angular-devkit/build-angular:server",
+    "options": {
+      "outputPath": "dist/server",
+      "main": "src/main.server.ts",
+      "tsConfig": "src/tsconfig.server.json"
+    }
+  }
+  ...
+}
+```
+
 ## Build and run with universal
 
-Now that you've created the TypeScript and Webpack config files, you can build and run the Universal application.
+Now that you've created the TypeScript and Webpack config files and configured the Angular CLI, you can build and run the Universal application.
 
 First add the _build_ and _serve_ commands to the `scripts` section of the `package.json`:
 
-<code-example format="." language="ts">
+```
 "scripts": {
     ...
-    "build:universal": "npm run build:client-and-server-bundles && npm run webpack:server",
-    "serve:universal": "node dist/server.js",
-    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
+    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
+    "serve:ssr": "node dist/server",
+    "build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
     "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
     ...
 }
-</code-example>
+```
 
 {@a build}
 
@@ -457,7 +519,7 @@ First add the _build_ and _serve_ commands to the `scripts` section of the `pack
 From the command prompt, type
 
 <code-example format="." language="bash">
-npm run build:universal
+npm run build:ssr
 </code-example>
 
 The Angular CLI compiles and bundles the universal app into two different folders, `browser` and `server`.
@@ -469,7 +531,7 @@ Webpack transpiles the `server.ts` file into Javascript.
 After building the application, start the server.
 
 <code-example format="." language="bash">
-npm run serve:universal
+npm run serve:ssr
 </code-example>
 
 The console window should say

aio/content/guide/updating.md

@@ -0,0 +1,69 @@
+# Updating your Angular projects
+
+Just like Web and the entire web ecosystem, Angular is continuously improving. Angular balances continuous improvement with a strong focus on stability and making updates easy. Keeping your Angular app up-to-date enables you to take advantage of leading-edge new features, as well as optimizations and bug fixes. 
+
+This document contains information and resources to help you keep your Angular apps and libraries up-to-date. 
+
+For information about our versioning policy and practices—including 
+support and deprecation practices, as well as the release schedule—see [Angular versioning and releases](guide/releases "Angular versioning and releases"). 
+
+
+<div class="l-sub-section">
+
+If you are currently using AngularJS, see [Upgrading from AngularJS](guide/upgrade "Upgrading from Angular JS"). _AngularJS_ is the name for all v1.x versions of Angular.
+
+</div>
+
+
+{@a announce}
+## Getting notified of new releases
+
+To be notified when new releases are available, follow [@angular](https://twitter.com/angular "@angular on Twitter") on Twitter or subscribe to the [Angular blog](https://blog.angular.io "Angular blog"). 
+
+{@a learn}
+## Learning about new features
+
+What's new? What's changed? We share the most important things you need to know on the Angular blog in [release announcements]( https://blog.angular.io/tagged/release%20notes "Angular blog - release announcements"). 
+
+To review a complete list of changes, organized by version, see the [Angular change log](https://github.com/angular/angular/blob/master/CHANGELOG.md "Angular change log").
+
+
+{@a checking-version-app}
+## Checking your version of Angular
+
+To check your app's version of Angular: From within your project directory, use the `ng version` command. 
+ 
+
+{@a checking-version-angular}
+## Finding the current version of Angular
+
+The most recent stable released version of Angular appears in the [Angular documentation](https://angular.io/docs "Angular documentation") at the bottom of the left side navigation. For example, `stable (v5.2.9)`.
+
+You can also find the most current version of Angular by using the [CLI command `ng update`](https://github.com/angular/angular-cli/wiki/update "Angular CLI update documentation"). By default, `ng update` (without additional arguments) lists the updates that are available to you.  
+
+
+{@a updating}
+## Updating your environment and apps
+
+To make updating easy, we provide complete instructions in the interactive [Angular Update Guide](https://update.angular.io/ "Angular Update Guide").
+
+The Angular Update Guide provides customized update instructions, based on the current and target versions that you specify. It includes basic and advanced update paths, to match the complexity of your applications. It also includes troubleshooting information and any recommended manual changes to help you get the most out of the new release. 
+
+For simple updates, the [CLI command `ng update`](https://github.com/angular/angular-cli/wiki/update "Angular CLI update documentation") is all you need. Without additional arguments, `ng update` lists the updates that are available to you and provides recommended steps to update your application to the most current version. 
+
+{@a resources}
+## Resource summary
+
+* Release announcements: [Angular blog - release announcements](https://blog.angular.io/tagged/release%20notes "Angular blog announcements about recent releases")
+
+* Release announcements (older): [Angular blog - announcements about releases prior to August 2017](https://blog.angularjs.org/search?q=available&by-date=true "Angular blog announcements about releases prior to August 2017")
+
+* Release details: [Angular change log](https://github.com/angular/angular/blob/master/CHANGELOG.md "Angular change log")
+
+* Update instructions: [Angular Update Guide](https://update.angular.io/ "Angular Update Guide")
+
+* Update command reference: [Angular CLI update documentation](https://github.com/angular/angular-cli/wiki/update "Angular CLI update documentation")
+
+* Versioning, release, support, and deprecation practices: [Angular versioning and releases](guide/releases "Angular versioning and releases")
+
+* Release schedule: [Angular versioning and releases](guide/releases#schedule "Angular versioning and releases")

aio/content/guide/upgrade.md

@@ -1,4 +1,4 @@
-# Upgrading from AngularJS
+# Upgrading from AngularJS to Angular
 
 _Angular_ is the name for the Angular of today and tomorrow.
 _AngularJS_ is the name for all v1.x versions of Angular.

aio/content/marketing/contributors.json

@@ -591,5 +591,59 @@
     "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"
+  },
+
+  "achautard": {
+    "name": "Alain Chautard",
+    "picture": "alainchautard.png",
+    "twitter": "AlainChautard",
+    "website": "http://www.angulartraining.com",
+    "bio": "Alain Chautard is a Google Developer Expert in Web Technologies / Angular. He started working with Angular JS in 2011. Since then he has worked with all Angular versions on a daily basis, both as a developer and as a technical trainer. He is the organizer of the Sacramento Angular Meetup group, co-organizer of the Google Developer Group chapter in Sacramento, California, and published author of the Packt video course 'Getting Started with Angular'",
+    "group": "GDE"
+  },
+
+  "coryrylan": {
+    "name": "Cory Rylan",
+    "picture": "cory-rylan.jpg",
+    "twitter": "coryrylan",
+    "website": "https://coryrylan.com",
+    "bio": "Cory is a full time front end web developer. He works full time building responsive web applications and progressive web apps. When not building web apps he is busy teaching Angular and other web technologies in workshops and conferences. He loves the web and is optimistic of the places it can take us.",
+    "group": "GDE"
+  },
+
+  "mhartington": {
+    "name": "Mike Hartington",
+    "picture": "mhartington.png",
+    "twitter": "mhartington",
+    "website": "https://mhartington.io",
+    "bio": "Mike is a Developer Advocate for the Ionic Framework and a GDE in Angular. He spends most of his time making fast PWAs and exploring emerging web standards. When not behind a keyboard, you'll probably find him with a guitar and beer.",
+    "group": "GDE"
+  },
+
+  "juristr": {
+    "name": "Juri Strumpflohner",
+    "picture": "juristr.jpg",
+    "twitter": "juristr",
+    "website": "https://juristr.com",
+    "bio": "Juri is a software engineer and freelance trainer and consultant currently mostly focusing on the frontend side using JavaScript, TypeScript and Angular. He has a passion for teaching and sharing his knowledge and experiences with others. This mostly happens by writing tech articles for his personal blog, by creating video courses for Egghead.io, during on-site workshops at companies or by speaking at conferences. In his free time he enjoys practicing Yoseikan Budo, a martial art where he currently owns the 3rd DAN black belt.",
+    "group": "GDE"
+  },
+
+  "mashhoodr": {
+    "name": "Mashhood Rastgar",
+    "picture": "mashhood.jpg",
+    "twitter": "mashhoodr",
+    "website": "http://imars.info/",
+    "bio": "Mashhood is the principal technical consultant at Recurship and a Google Developer Expert. He  works with different startups in US and EU to helps them crawl through the technical maze and quickly build amazing products focused around the problems they are trying to solve. He specializes in using the latest web technologies available to execute the best possible solutions.",
+    "group": "GDE"
+  },
+
+  "kimmaida": {
+    "name": "Kim Maida",
+    "picture": "kimmaida.jpg",
+    "twitter": "KimMaida",
+    "website": "https://kmaida.io/",
+    "bio": "Kim is an an Angular consultant, developer, speaker, writer, and Google Developer Expert. She is passionate about learning from and sharing knowledge with other developers through blogging, speaking, workshops, and open source.",
+    "group": "GDE"
   }
 }

aio/content/marketing/events.html

@@ -55,6 +55,12 @@
       <td>Tokyo, Japan</td>
       <td>Jun 16, 2018</td>
     </tr>
+    <!-- Angular Conf Australia-->
+    <tr>
+      <th><a href="https://www.angularconf.com.au/" title="Angular Conf Australia">Angular Conf Australia</a></th>
+      <td>Melbourne, Australia</td>
+      <td>Jun 22, 2018</td>
+    </tr>
     <!-- AngularConnect-->
     <tr>
       <th><a href="http://angularconnect.com" title="AngularConnect">AngularConnect</a></th>

aio/content/marketing/presskit.html

@@ -78,6 +78,440 @@
     </div>
   </div>
 
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div>
+        <h2>BRAND ICONS</h2>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/animations.png" alt="Animations Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">ANIMATIONS</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Animations Icon (png) - <a href="assets/images/logos/concept-icons/animations.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Animations Icon (svg) - <a href="assets/images/logos/concept-icons/animations.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/augury.png" alt="Augury Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">AUGURY</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Augury Icon (png) - <a href="assets/images/logos/concept-icons/augury.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Augury Icon (svg) - <a href="assets/images/logos/concept-icons/augury.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/cdk.png" alt="CDK Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">COMPONENT DEV KIT (CDK)</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>CDK Icon (png) - <a href="assets/images/logos/concept-icons/cdk.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>CDK Icon (svg) - <a href="assets/images/logos/concept-icons/cdk.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/cli.png" alt="CLI Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">CLI</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>CLI Icon (png) - <a href="assets/images/logos/concept-icons/cli.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>CLI Icon (svg) - <a href="assets/images/logos/concept-icons/cli.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/compiler.png" alt="Compiler Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">COMPILER</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Compiler Icon (png) - <a href="assets/images/logos/concept-icons/compiler.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Compiler Icon (svg) - <a href="assets/images/logos/concept-icons/compiler.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/components.png" alt="Components Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">WEB COMPONENTS</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Web Components Icon (png) - <a href="assets/images/logos/concept-icons/components.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Web Components Icon (svg) - <a href="assets/images/logos/concept-icons/components.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/forms.png" alt="Forms Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">FORMS</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Forms Icon (png) - <a href="assets/images/logos/concept-icons/forms.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Forms Icon (svg) - <a href="assets/images/logos/concept-icons/forms.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/http.png" alt="HTTP Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">HTTP</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>HTTP Icon (png) - <a href="assets/images/logos/concept-icons/http.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>HTTP Icon (svg) - <a href="assets/images/logos/concept-icons/http.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/i18n.png" alt="i18n Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">i18n</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>HTTP Icon (png) - <a href="assets/images/logos/concept-icons/i18n.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>HTTP Icon (svg) - <a href="assets/images/logos/concept-icons/i18n.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/karma.png" alt="Karma Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">KARMA</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Karma Icon (png) - <a href="assets/images/logos/concept-icons/karma.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Karma Icon (svg) - <a href="assets/images/logos/concept-icons/karma.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/labs.png" alt="Labs Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">LABS</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Labs Icon (png) - <a href="assets/images/logos/concept-icons/labs.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Labs Icon (svg) - <a href="assets/images/logos/concept-icons/labs.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/language-services.png" alt="Language Services Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">LANGUAGE SERVICES</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Language Services Icon (png) - <a href="assets/images/logos/concept-icons/language-services.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Language Services Icon (svg) - <a href="assets/images/logos/concept-icons/language-services.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/material.png" alt="Material Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">MATERIAL</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Material Icon (png) - <a href="assets/images/logos/concept-icons/material.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Material Icon (svg) - <a href="assets/images/logos/concept-icons/material.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/protractor.png" alt="Protractor Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">PROTRACTOR</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Protractor Icon (png) - <a href="assets/images/logos/concept-icons/protractor.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Protractor Icon (svg) - <a href="assets/images/logos/concept-icons/protractor.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/pwa.png" alt="PWA Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">PWA</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>PWA Icon (png) - <a href="assets/images/logos/concept-icons/pwa.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>PWA Icon (svg) - <a href="assets/images/logos/concept-icons/pwa.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/router.png" alt="Router Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">ROUTER</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Router Icon (png) - <a href="assets/images/logos/concept-icons/router.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Router Icon (svg) - <a href="assets/images/logos/concept-icons/router.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/universal.png" alt="Universal Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">UNIVERSAL</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Universal Icon (png) - <a href="assets/images/logos/concept-icons/universal.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Universal Icon (svg) - <a href="assets/images/logos/concept-icons/universal.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div>
+        <h2>CONCEPT & FEATURE ICONS</h2>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/dependency-injection.png" alt="Dependency Injection Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">DEPENDENCY INJECTION</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Dependency Injection Icon (png) - <a href="assets/images/logos/concept-icons/dependency-injection.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Dependency Injection Icon (svg) - <a href="assets/images/logos/concept-icons/dependency-injection.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/lazy-loading.png" alt="Lazy Loading Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">LAZY LOADING</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Lazy Loading Icon (png) - <a href="assets/images/logos/concept-icons/lazy-loading.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Lazy Loading Icon (svg) - <a href="assets/images/logos/concept-icons/lazy-loading.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/libraries.png" alt="Libraries Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">LIBRARIES</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Libraries Icon (png) - <a href="assets/images/logos/concept-icons/libraries.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Libraries Icon (svg) - <a href="assets/images/logos/concept-icons/libraries.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/performance.png" alt="Performance Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">PERFORMANCE</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Performance Icon (png) - <a href="assets/images/logos/concept-icons/performance.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Performance Icon (svg) - <a href="assets/images/logos/concept-icons/performance.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="presskit-row">
+    <div class="presskit-inner">
+      <div class="presskit-image-container">
+        <img src="assets/images/logos/concept-icons/templates.png" alt="Templates Icon">
+      </div>
+      <div>
+        <h3 class="l-space-left-3">TEMPLATES</h3>
+        <ul class="l-space-left-3">
+          <li>
+            <span>Templates Icon (png) - <a href="assets/images/logos/concept-icons/templates.png" download>Download</a></span>
+          </li>
+          <li>
+            <span>Templates Icon (svg) - <a href="assets/images/logos/concept-icons/templates.svg" download>Download</a></span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
   <div class="presskit-row">
     <div class="presskit-inner">
       <div>

aio/content/marketing/resources.json

@@ -160,7 +160,7 @@
             "desc": "Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js",
             "logo": "",
             "rev": true,
-            "title": "Webstorm",
+            "title": "WebStorm",
             "url": "https://www.jetbrains.com/webstorm/"
           },
           "ab3": {
@@ -345,6 +345,19 @@
             "title": "Angular Material",
             "url": "https://github.com/angular/material2"
           },
+          "mcc": {
+            "desc": "Material components made by the community",
+            "logo": "",
+            "rev": true,
+            "title": "Material Community Components",
+            "url": "https://github.com/tiaguinho/material-community-components"
+          },
+          "ngzorro": {
+            "desc": "A set of enterprise-class UI components based on Ant Design and Angular",
+            "rev": true,
+            "title": "Ant Design of Angular (ng-zorro-antd)",
+            "url": "https://ng.ant.design/docs/introduce/en"
+          },
           "aggrid": {
             "desc": "A datagrid for Angular with enterprise style features such as sorting, filtering, custom rendering, editing, grouping, aggregation and pivoting.",
             "rev": true,
@@ -364,6 +377,13 @@
             "url": "http://www.amexio.tech/",
             "logo": "http://www.amexio.org/amexio-logo.png"
           },
+          "bm": {
+            "desc": "A lightweight Material Design library for Angular, based upon Google's Material Components for the Web",
+            "logo": "https://blox.src.zone/assets/bloxmaterial.03ecfe4fa0147a781487749dc1cc4580.svg",
+            "rev": true,
+            "title": "Blox Material",
+            "url": "https://github.com/src-zone/material"
+          },
           "essentialjs2": {
             "desc": "Essential JS 2 for Angular is a collection modern TypeScript based true Angular Components. It has support for Ahead Of Time (AOT) compilation and Tree-Shaking. All the components are developed from the ground up to be lightweight, responsive, modular and touch friendly.",
             "rev": true,
@@ -522,13 +542,6 @@
             "title": "Pluralsight",
             "url": "https://www.pluralsight.com/search?q=angular+2&categories=all"
           },
-          "ab": {
-            "desc": "Take this introduction to Angular course, to learn the fundamentals in just two days, free of charge.",
-            "logo": "",
-            "rev": true,
-            "title": "Rangle.io",
-            "url": "https://rangle.io/services/javascript-training/training-angular1-angular2-with-ngupgrade/"
-          },
           "ab3": {
             "desc": "Angular courses hosted by  Udemy",
             "logo": "",
@@ -541,7 +554,7 @@
             "logo": "",
             "rev": true,
             "title": "Egghead.io",
-            "url": "https://egghead.io/technologies/angular2"
+            "url": "https://egghead.io/browse/frameworks/angular"
           },
           "ab5": {
             "desc": "Build Web Apps with Angular - recorded video content",
@@ -597,12 +610,6 @@
       "Workshops & Onsite Training": {
         "order": 2,
         "resources": {
-          "-KLIBo3ANF3-1B9wxsoB": {
-            "desc": "Angular Classes from Intertech in Minnesota",
-            "rev": true,
-            "title": "Intertech",
-            "url": "http://www.intertech.com/Training/Web-Dev/AngularJS/AngularJS/Angular-2-Training"
-          },
           "-KLIBoFWStce29UCwkvY": {
             "desc": "Private Angular Training and Mentoring",
             "rev": true,

aio/content/navigation.json

@@ -495,17 +495,34 @@
         },
 
         {
-          "title": "Upgrading",
+          "title": "Keeping Up-to-Date",
+          "tooltip": "Angular release practices, planning for updates, and update resources.",
+          "children": [
+            {
+              "url": "guide/updating",
+              "title": "Updating Your Projects",
+              "tooltip": "Information about updating Angular applications and libraries to the latest version."
+            },
+            {
+              "url": "guide/releases",
+              "title": "Angular Releases",
+              "tooltip": "Angular versioning, release, support, and deprecation policies and practices."
+            }
+          ]
+        },
+
+        {
+          "title": "Upgrading from AngularJS",
           "tooltip": "Incrementally upgrade an AngularJS application to Angular.",
           "children": [
             {
               "url": "guide/upgrade",
-              "title": "Upgrading from AngularJS",
+              "title": "Upgrading Instructions",
               "tooltip": "Incrementally upgrade an AngularJS application to Angular."
             },
             {
               "url": "guide/ajs-quick-reference",
-              "title": "Upgrade Cheatsheet",
+              "title": "AngularJS-Angular Concepts",
               "tooltip": "Learn how AngularJS concepts and techniques map to Angular."
             }
           ]
@@ -643,9 +660,9 @@
   ],
 
   "docVersions": [
-    { "title": "v4 (LTS)", "url": "https://v4.angular.io" },
+    { "title": "v5", "url": "https://v5.angular.io" },
+    { "title": "v4", "url": "https://v4.angular.io" },
     { "title": "v2", "url": "https://v2.angular.io" },
     { "title": "AngularDart", "url": "https://webdev.dartlang.org/angular" }
-
   ]
 }

aio/content/tutorial/toh-pt1.md

@@ -175,7 +175,7 @@ This information is called _metadata_
 Some of the metadata is in the `@Component` decorators that you added to your component classes.
 Other critical metadata is in [`@NgModule`](guide/ngmodules) decorators.
 
-The most important `@NgModule`decorator annotates the top-level **AppModule** class.
+The most important `@NgModule` decorator annotates the top-level **AppModule** class.
 
 The Angular CLI generated an `AppModule` class in `src/app/app.module.ts` when it created the project.
 This is where you _opt-in_ to the `FormsModule`.

aio/ngsw-manifest.json

@@ -18,7 +18,7 @@
   "routing": {
     "index": "/index.html",
     "routes": {
-      "^(?!/styleguide|/docs/.|(?:/guide/(?:cli-quickstart|metadata|ngmodule|service-worker-(?:getstart|comm|configref)|learning-angular)|/news)(?:\\.html|/)?$|/testing|/api/(?:.+/[^/]+-|platform-browser/AnimationDriver|testing/|api/|animate/|(?:common/(?:NgModel|Control|MaxLengthValidator))|(?:[^/]+/)?(?:NgFor(?:$|-)|AnimationStateDeclarationMetadata|CORE_DIRECTIVES|PLATFORM_PIPES|DirectiveMetadata|HTTP_PROVIDERS))|.*/stackblitz(?:\\.html)?$|.*\\.[^\/.]+$)": {
+      "^(?!/styleguide|/docs/.|(?:/guide/(?:cli-quickstart|metadata|ngmodule|service-worker-(?:getstart|comm|configref)|learning-angular)|/news)(?:\\.html|/)?$|/testing|/api/(?:.+/[^/]+-|platform-browser/AnimationDriver|testing/|api/|animate/|(?:common/(?:NgModel|Control|MaxLengthValidator))|(?:[^/]+/)?(?:NgFor(?:$|-)|AnimationStateDeclarationMetadata|CORE_DIRECTIVES|PLATFORM_PIPES|DirectiveMetadata|HTTP_PROVIDERS))|.*/stackblitz(?:\\.html)?(?:\\?.*)?$|.*\\.[^\/.]+$)": {
         "match": "regex"
       }
     }

aio/package.json

@@ -70,18 +70,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "6.0.0-rc.5",
-    "@angular/cdk": "6.0.0-rc.11",
-    "@angular/common": "6.0.0-rc.5",
-    "@angular/core": "6.0.0-rc.5",
-    "@angular/elements": "6.0.0-rc.5",
-    "@angular/forms": "6.0.0-rc.5",
-    "@angular/http": "6.0.0-rc.5",
-    "@angular/material": "6.0.0-rc.11",
-    "@angular/platform-browser": "6.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "6.0.0-rc.5",
-    "@angular/platform-server": "6.0.0-rc.5",
-    "@angular/router": "6.0.0-rc.5",
+    "@angular/animations": "6.0.0",
+    "@angular/cdk": "6.0.0",
+    "@angular/common": "6.0.0",
+    "@angular/core": "6.0.0",
+    "@angular/elements": "6.0.0",
+    "@angular/forms": "6.0.0",
+    "@angular/http": "6.0.0",
+    "@angular/material": "6.0.0",
+    "@angular/platform-browser": "6.0.0",
+    "@angular/platform-browser-dynamic": "6.0.0",
+    "@angular/platform-server": "6.0.0",
+    "@angular/router": "6.0.0",
     "@angular/service-worker": "^1.0.0-beta.16",
     "@webcomponents/custom-elements": "^1.0.8",
     "classlist.js": "^1.1.20150312",
@@ -95,11 +95,11 @@
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.5.6",
-    "@angular/cli": "^6.0.0-rc.4",
-    "@angular/compiler": "6.0.0-rc.5",
-    "@angular/compiler-cli": "6.0.0-rc.5",
-    "@angular/language-service": "6.0.0-rc.5",
+    "@angular-devkit/build-angular": "^0.6.0",
+    "@angular/cli": "^6.0.0",
+    "@angular/compiler": "6.0.0",
+    "@angular/compiler-cli": "6.0.0",
+    "@angular/language-service": "6.0.0",
     "@types/jasmine": "^2.5.52",
     "@types/jasminewd2": "^2.0.3",
     "@types/node": "~6.0.60",
@@ -112,7 +112,7 @@
     "cross-spawn": "^5.1.0",
     "css-selector-parser": "^1.3.0",
     "dgeni": "^0.4.7",
-    "dgeni-packages": "^0.26.0",
+    "dgeni-packages": "^0.26.1",
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",
@@ -126,6 +126,7 @@
     "ignore": "^3.3.3",
     "image-size": "^0.5.1",
     "jasmine-core": "^2.8.0",
+    "jasmine-marbles": "^0.3.1",
     "jasmine-spec-reporter": "^4.1.0",
     "jasmine-ts": "^0.2.1",
     "jsdom": "^9.12.0",

aio/scripts/_payload-limits.json

@@ -2,11 +2,11 @@
   "aio": {
     "master": {
       "uncompressed": {
-        "runtime": 2689,
-        "main": 478529,
+        "runtime": 2768,
+        "main": 475855,
         "polyfills": 38453,
         "prettify": 14913
       }
     }
   }
-}
+}

aio/scripts/deploy-to-firebase.sh

@@ -67,7 +67,7 @@ case $deployEnv in
     readonly firebaseToken=$FIREBASE_TOKEN
     ;;
   archive)
-    readonly projectId=angular-io-${majorVersion}
+    readonly projectId=v${majorVersion}-angular-io
     readonly deployedUrl=https://v${majorVersion}.angular.io/
     readonly firebaseToken=$FIREBASE_TOKEN
     ;;

aio/scripts/deploy-to-firebase.test.sh

@@ -94,7 +94,7 @@ Deployment URL    : https://angular.io/"
   )
   expected="Git branch        : 2.4.x
 Build/deploy mode : archive
-Firebase project  : angular-io-2
+Firebase project  : v2-angular-io
 Deployment URL    : https://v2.angular.io/"
   check "$actual" "$expected"
 )

aio/src/app/app.component.html

@@ -8,13 +8,13 @@
   <mat-toolbar-row class="notification-container">
     <aio-notification
       icon="insert_comment"
-      iconLabel="Survey"
-      buttonText="Go to survey"
-      actionUrl="https://bit.ly/angular-survey-2018"
-      notificationId="survey-january-2018"
-      expirationDate="2018-01-19"
+      iconLabel="Announcement"
+      buttonText="Learn More"
+      actionUrl="https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4"
+      notificationId="angular-v6-announcement"
+      expirationDate="2018-07-01"
       (dismissed)="notificationDismissed()">
-      Help Angular by taking a <b>1 minute survey</b>!
+      Version 6 of Angular Now Available!
     </aio-notification>
   </mat-toolbar-row>
   <mat-toolbar-row>
@@ -58,7 +58,7 @@
 </mat-sidenav-container>
 
 <div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (mousewheel)="restrainScrolling($event)">
-  <aio-toc></aio-toc>
+  <aio-lazy-ce selector="aio-toc"></aio-lazy-ce>
 </div>
 
 <footer class="no-print">

aio/src/app/app.component.spec.ts

@@ -6,7 +6,7 @@ import { HttpClient } from '@angular/common/http';
 import { MatProgressBar, MatSidenav } from '@angular/material';
 import { By } from '@angular/platform-browser';
 
-import { timer } from 'rxjs';
+import { of, timer } from 'rxjs';
 import { first, mapTo } from 'rxjs/operators';
 
 import { AppComponent } from './app.component';
@@ -14,6 +14,7 @@ import { AppModule } from './app.module';
 import { DocumentService } from 'app/documents/document.service';
 import { DocViewerComponent } from 'app/layout/doc-viewer/doc-viewer.component';
 import { Deployment } from 'app/shared/deployment.service';
+import { ElementsLoader } from 'app/custom-elements/elements-loader';
 import { GaService } from 'app/shared/ga.service';
 import { LocationService } from 'app/shared/location.service';
 import { Logger } from 'app/shared/logger.service';
@@ -26,7 +27,6 @@ import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
 import { SearchResultsComponent } from 'app/shared/search-results/search-results.component';
 import { SearchService } from 'app/search/search.service';
 import { SelectComponent } from 'app/shared/select/select.component';
-import { TocComponent } from 'app/layout/toc/toc.component';
 import { TocItem, TocService } from 'app/shared/toc.service';
 
 const sideBySideBreakPoint = 992;
@@ -92,11 +92,11 @@ describe('AppComponent', () => {
     });
 
     describe('hasFloatingToc', () => {
-      it('should initially be true', () => {
+      it('should initially be false', () => {
         const fixture2 = TestBed.createComponent(AppComponent);
         const component2 = fixture2.componentInstance;
 
-        expect(component2.hasFloatingToc).toBe(true);
+        expect(component2.hasFloatingToc).toBe(false);
       });
 
       it('should be false on narrow screens', () => {
@@ -621,55 +621,65 @@ describe('AppComponent', () => {
     });
 
     describe('aio-toc', () => {
-      let tocDebugElement: DebugElement;
-      let tocContainer: DebugElement|null;
+      let tocContainer: HTMLElement|null;
+      let toc: HTMLElement|null;
 
       const setHasFloatingToc = (hasFloatingToc: boolean) => {
         component.hasFloatingToc = hasFloatingToc;
         fixture.detectChanges();
 
-        tocDebugElement = fixture.debugElement.query(By.directive(TocComponent));
-        tocContainer = tocDebugElement && tocDebugElement.parent;
+        tocContainer = fixture.debugElement.nativeElement.querySelector('.toc-container');
+        toc = tocContainer && tocContainer.querySelector('aio-toc');
       };
 
-      beforeEach(() => setHasFloatingToc(true));
-
 
       it('should show/hide `<aio-toc>` based on `hasFloatingToc`', () => {
-        expect(tocDebugElement).toBeTruthy();
-        expect(tocContainer).toBeTruthy();
-
-        setHasFloatingToc(false);
-        expect(tocDebugElement).toBeFalsy();
         expect(tocContainer).toBeFalsy();
+        expect(toc).toBeFalsy();
 
         setHasFloatingToc(true);
-        expect(tocDebugElement).toBeTruthy();
         expect(tocContainer).toBeTruthy();
+        expect(toc).toBeTruthy();
+
+        setHasFloatingToc(false);
+        expect(tocContainer).toBeFalsy();
+        expect(toc).toBeFalsy();
       });
 
       it('should have a non-embedded `<aio-toc>` element', () => {
-        expect(tocDebugElement.classes['embedded']).toBeFalsy();
+        setHasFloatingToc(true);
+        expect(toc!.classList.contains('embedded')).toBe(false);
       });
 
       it('should update the TOC container\'s `maxHeight` based on `tocMaxHeight`', () => {
-        expect(tocContainer!.styles['max-height']).toBeNull();
+        setHasFloatingToc(true);
+
+        expect(tocContainer!.style['max-height']).toBe('');
 
         component.tocMaxHeight = '100';
         fixture.detectChanges();
 
-        expect(tocContainer!.styles['max-height']).toBe('100px');
+        expect(tocContainer!.style['max-height']).toBe('100px');
       });
 
       it('should restrain scrolling inside the ToC container', () => {
         const restrainScrolling = spyOn(component, 'restrainScrolling');
-        const evt = {};
+        const evt = new MouseEvent('mousewheel');
 
+        setHasFloatingToc(true);
         expect(restrainScrolling).not.toHaveBeenCalled();
 
-        tocContainer!.triggerEventHandler('mousewheel', evt);
+        tocContainer!.dispatchEvent(evt);
         expect(restrainScrolling).toHaveBeenCalledWith(evt);
       });
+
+      it('should not be loaded/registered until necessary', () => {
+        const loader: TestElementsLoader = fixture.debugElement.injector.get(ElementsLoader);
+        expect(loader.loadCustomElement).not.toHaveBeenCalled();
+
+        setHasFloatingToc(true);
+        expect(loader.loadCustomElement).toHaveBeenCalledWith('aio-toc');
+      });
     });
 
     describe('footer', () => {
@@ -1280,6 +1290,7 @@ function createTestingModule(initialUrl: string, mode: string = 'stable') {
     imports: [ AppModule ],
     providers: [
       { provide: APP_BASE_HREF, useValue: '/' },
+      { provide: ElementsLoader, useClass: TestElementsLoader },
       { provide: GaService, useClass: TestGaService },
       { provide: HttpClient, useClass: TestHttpClient },
       { provide: LocationService, useFactory: () => mockLocationService },
@@ -1294,6 +1305,14 @@ function createTestingModule(initialUrl: string, mode: string = 'stable') {
   });
 }
 
+class TestElementsLoader {
+  loadContainedCustomElements = jasmine.createSpy('loadContainedCustomElements')
+      .and.returnValue(of(undefined));
+
+  loadCustomElement = jasmine.createSpy('loadCustomElement')
+      .and.returnValue(Promise.resolve());
+}
+
 class TestGaService {
   locationChanged = jasmine.createSpy('locationChanged');
 }
@@ -1368,7 +1387,7 @@ class TestHttpClient {
       const id = match[1]!;
       // Make up a title for test purposes
       const title = id.split('/').pop()!.replace(/^([a-z])/, (_, letter) => letter.toUpperCase());
-      const h1 = (id === 'no-title') ? '' : `<h1>${title}</h1>`;
+      const h1 = (id === 'no-title') ? '' : `<h1 class="no-toc">${title}</h1>`;
       const contents = `${h1}<h2 id="#somewhere">Some heading</h2>`;
       data = { id, contents };
     }

aio/src/app/app.component.ts

@@ -69,7 +69,7 @@ export class AppComponent implements OnInit {
   topMenuNodes: NavigationNode[];
   topMenuNarrowNodes: NavigationNode[];
 
-  hasFloatingToc = true;
+  hasFloatingToc = false;
   private showFloatingToc = new BehaviorSubject(false);
   private showFloatingTocWidth = 800;
   tocMaxHeight: string;

aio/src/app/app.module.ts

@@ -32,7 +32,6 @@ import { ScrollService } from 'app/shared/scroll.service';
 import { ScrollSpyService } from 'app/shared/scroll-spy.service';
 import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
 import { NotificationComponent } from 'app/layout/notification/notification.component';
-import { TocComponent } from 'app/layout/toc/toc.component';
 import { TocService } from 'app/shared/toc.service';
 import { CurrentDateToken, currentDateProvider } from 'app/shared/current-date';
 import { WindowToken, windowProvider } from 'app/shared/window';
@@ -111,7 +110,6 @@ export const svgIconProviders = [
     NavItemComponent,
     SearchBoxComponent,
     NotificationComponent,
-    TocComponent,
     TopMenuComponent,
   ],
   providers: [
@@ -133,7 +131,6 @@ export const svgIconProviders = [
     { provide: CurrentDateToken, useFactory: currentDateProvider },
     { provide: WindowToken, useFactory: windowProvider },
   ],
-  entryComponents: [ TocComponent ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }

aio/src/app/custom-elements/code/code-tabs.component.ts

@@ -25,20 +25,22 @@ export interface TabInfo {
     <!-- Use content projection so that the provided HTML's code-panes can be split into tabs -->
     <div #content style="display: none"><ng-content></ng-content></div>
 
-    <mat-tab-group class="code-tab-group" disableRipple>
-      <mat-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
-        <ng-template mat-tab-label>
-          <span class="{{ tab.class }}">{{ tab.title }}</span>
-        </ng-template>
-        <aio-code class="{{ tab.class }}"
-                  [language]="tab.language"
-                  [linenums]="tab.linenums"
-                  [path]="tab.path"
-                  [region]="tab.region"
-                  [title]="tab.title">
-        </aio-code>
-      </mat-tab>
-    </mat-tab-group>
+    <mat-card>
+      <mat-tab-group class="code-tab-group" disableRipple>
+        <mat-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
+          <ng-template mat-tab-label>
+            <span class="{{ tab.class }}">{{ tab.title }}</span>
+          </ng-template>
+          <aio-code class="{{ tab.class }}"
+                    [language]="tab.language"
+                    [linenums]="tab.linenums"
+                    [path]="tab.path"
+                    [region]="tab.region"
+                    [title]="tab.title">
+          </aio-code>
+        </mat-tab>
+      </mat-tab-group>
+    </mat-card>
   `,
 })
 export class CodeTabsComponent implements OnInit, AfterViewInit {

aio/src/app/custom-elements/code/code-tabs.module.ts

@@ -1,12 +1,12 @@
 import { NgModule, Type } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CodeTabsComponent } from './code-tabs.component';
-import { MatTabsModule } from '@angular/material';
+import { MatCardModule, MatTabsModule } from '@angular/material';
 import { CodeModule } from './code.module';
 import { WithCustomElementComponent } from '../element-registry';
 
 @NgModule({
-  imports: [ CommonModule, MatTabsModule, CodeModule ],
+  imports: [ CommonModule, MatCardModule, MatTabsModule, CodeModule ],
   declarations: [ CodeTabsComponent ],
   exports: [ CodeTabsComponent ],
   entryComponents: [ CodeTabsComponent ]

aio/src/app/custom-elements/custom-elements.module.ts

@@ -6,8 +6,11 @@ import {
   ELEMENT_MODULE_PATHS_AS_ROUTES,
   ELEMENT_MODULE_PATHS_TOKEN
 } from './element-registry';
+import { LazyCustomElementComponent } from './lazy-custom-element.component';
 
 @NgModule({
+  declarations: [ LazyCustomElementComponent ],
+  exports: [ LazyCustomElementComponent ],
   providers: [
     ElementsLoader,
     { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader },

aio/src/app/custom-elements/element-registry.ts

@@ -13,8 +13,8 @@ export const ELEMENT_MODULE_PATHS_AS_ROUTES = [
     loadChildren: './api/api-list.module#ApiListModule'
   },
   {
-    selector: 'live-example',
-    loadChildren: './live-example/live-example.module#LiveExampleModule'
+    selector: 'aio-contributor-list',
+    loadChildren: './contributor/contributor-list.module#ContributorListModule'
   },
   {
     selector: 'aio-file-not-found-search',
@@ -25,25 +25,29 @@ export const ELEMENT_MODULE_PATHS_AS_ROUTES = [
     loadChildren: './resource/resource-list.module#ResourceListModule'
   },
   {
-    selector: 'current-location',
-    loadChildren: './current-location/current-location.module#CurrentLocationModule'
-  },
-  {
-    selector: 'aio-contributor-list',
-    loadChildren: './contributor/contributor-list.module#ContributorListModule'
-  },
-  {
-    selector: 'code-tabs',
-    loadChildren: './code/code-tabs.module#CodeTabsModule'
+    selector: 'aio-toc',
+    loadChildren: './toc/toc.module#TocModule'
   },
   {
     selector: 'code-example',
     loadChildren: './code/code-example.module#CodeExampleModule'
   },
+  {
+    selector: 'code-tabs',
+    loadChildren: './code/code-tabs.module#CodeTabsModule'
+  },
+  {
+    selector: 'current-location',
+    loadChildren: './current-location/current-location.module#CurrentLocationModule'
+  },
   {
     selector: 'expandable-section',
     loadChildren: './expandable-section/expandable-section.module#ExpandableSectionModule'
-  }
+  },
+  {
+    selector: 'live-example',
+    loadChildren: './live-example/live-example.module#LiveExampleModule'
+  },
 ];
 
 /**

aio/src/app/custom-elements/elements-loader.spec.ts

@@ -4,49 +4,19 @@ import {
   NgModuleRef,
   Type
 } from '@angular/core';
-import {TestBed, fakeAsync, tick} from '@angular/core/testing';
+import { TestBed, fakeAsync, flushMicrotasks } from '@angular/core/testing';
 
 import { ElementsLoader } from './elements-loader';
 import { ELEMENT_MODULE_PATHS_TOKEN, WithCustomElementComponent } from './element-registry';
 
-class FakeComponentFactory extends ComponentFactory<any> {
-  selector: string;
-  componentType: Type<any>;
-  ngContentSelectors: string[];
-  inputs = [{propName: this.identifyingInput, templateName: this.identifyingInput}];
-  outputs = [];
 
-  constructor(private identifyingInput: string) { super(); }
-
-  create(injector: Injector,
-         projectableNodes?: any[][],
-         rootSelectorOrNode?: string | any,
-         ngModule?: NgModuleRef<any>): ComponentRef<any> {
-    return (jasmine.createSpy('ComponentRef') as any) as ComponentRef<any>;
-  };
+interface Deferred {
+  resolve(): void;
+  reject(err: any): void;
 }
 
-const FAKE_COMPONENT_FACTORIES = new Map([
-  ['element-a-module-path', new FakeComponentFactory('element-a-input')],
-  ['element-b-module-path', new FakeComponentFactory('element-b-input')],
-]);
-
 describe('ElementsLoader', () => {
   let elementsLoader: ElementsLoader;
-  let actualCustomElementsDefine;
-  let fakeCustomElementsDefine;
-
-  // ElementsLoader uses the window's customElements API. Provide a fake for this test.
-  beforeEach(() => {
-    actualCustomElementsDefine = window.customElements.define;
-
-    fakeCustomElementsDefine = jasmine.createSpy('define');
-
-    window.customElements.define = fakeCustomElementsDefine;
-  });
-  afterEach(() => {
-    window.customElements.define = actualCustomElementsDefine;
-  });
 
   beforeEach(() => {
     const injector = TestBed.configureTestingModule({
@@ -63,63 +33,196 @@ describe('ElementsLoader', () => {
     elementsLoader = injector.get(ElementsLoader);
   });
 
-  it('should be able to register an element', fakeAsync(() => {
-    // Verify that the elements loader considered `element-a-selector` to be unregistered.
-    expect(elementsLoader.elementsToLoad.has('element-a-selector')).toBeTruthy();
+  describe('loadContainedCustomElements()', () => {
+    let loadCustomElementSpy: jasmine.Spy;
 
-    const hostEl = document.createElement('div');
-    hostEl.innerHTML = `<element-a-selector></element-a-selector>`;
+    beforeEach(() => loadCustomElementSpy = spyOn(elementsLoader, 'loadCustomElement'));
 
-    elementsLoader.loadContainingCustomElements(hostEl);
-    tick();
+    it('should attempt to load and register all contained elements', fakeAsync(() => {
+      expect(loadCustomElementSpy).not.toHaveBeenCalled();
 
-    const defineArgs = fakeCustomElementsDefine.calls.argsFor(0);
-    expect(defineArgs[0]).toBe('element-a-selector');
+      const hostEl = document.createElement('div');
+      hostEl.innerHTML = `
+        <element-a-selector></element-a-selector>
+        <element-b-selector></element-b-selector>
+      `;
 
-    // Verify the right component was loaded/created
-    expect(defineArgs[1].observedAttributes[0]).toBe('element-a-input');
+      elementsLoader.loadContainedCustomElements(hostEl);
+      flushMicrotasks();
 
-    expect(elementsLoader.elementsToLoad.has('element-a-selector')).toBeFalsy();
-  }));
+      expect(loadCustomElementSpy).toHaveBeenCalledTimes(2);
+      expect(loadCustomElementSpy).toHaveBeenCalledWith('element-a-selector');
+      expect(loadCustomElementSpy).toHaveBeenCalledWith('element-b-selector');
+    }));
 
-  it('should be able to register multiple elements', fakeAsync(() => {
-    // Verify that the elements loader considered `element-a-selector` to be unregistered.
-    expect(elementsLoader.elementsToLoad.has('element-a-selector')).toBeTruthy();
+    it('should attempt to load and register only contained elements', fakeAsync(() => {
+      expect(loadCustomElementSpy).not.toHaveBeenCalled();
 
-    const hostEl = document.createElement('div');
-    hostEl.innerHTML = `
-      <element-a-selector></element-a-selector>
-      <element-b-selector></element-b-selector>
-    `;
+      const hostEl = document.createElement('div');
+      hostEl.innerHTML = `
+        <element-b-selector></element-b-selector>
+      `;
 
-    elementsLoader.loadContainingCustomElements(hostEl);
-    tick();
+      elementsLoader.loadContainedCustomElements(hostEl);
+      flushMicrotasks();
 
-    const defineElementA = fakeCustomElementsDefine.calls.argsFor(0);
-    expect(defineElementA[0]).toBe('element-a-selector');
-    expect(defineElementA[1].observedAttributes[0]).toBe('element-a-input');
-    expect(elementsLoader.elementsToLoad.has('element-a-selector')).toBeFalsy();
+      expect(loadCustomElementSpy).toHaveBeenCalledTimes(1);
+      expect(loadCustomElementSpy).toHaveBeenCalledWith('element-b-selector');
+    }));
 
-    const defineElementB = fakeCustomElementsDefine.calls.argsFor(1);
-    expect(defineElementB[0]).toBe('element-b-selector');
-    expect(defineElementB[1].observedAttributes[0]).toBe('element-b-input');
-    expect(elementsLoader.elementsToLoad.has('element-b-selector')).toBeFalsy();
-  }));
+    it('should wait for all contained elements to load and register', fakeAsync(() => {
+      const deferreds = returnPromisesFromSpy(loadCustomElementSpy);
 
-  it('should only register an element one time', fakeAsync(() => {
-    const hostEl = document.createElement('div');
-    hostEl.innerHTML = `<element-a-selector></element-a-selector>`;
+      const hostEl = document.createElement('div');
+      hostEl.innerHTML = `
+        <element-a-selector></element-a-selector>
+        <element-b-selector></element-b-selector>
+      `;
 
-    elementsLoader.loadContainingCustomElements(hostEl);
-    tick(); // Tick for the module factory loader's async `load` function
+      const log: any[] = [];
+      elementsLoader.loadContainedCustomElements(hostEl).subscribe(
+        v => log.push(`emitted: ${v}`),
+        e => log.push(`errored: ${e}`),
+        () => log.push('completed'),
+      );
 
-    // Call again to to check how many times customElements.define was called.
-    elementsLoader.loadContainingCustomElements(hostEl);
-    tick(); // Tick for the module factory loader's async `load` function
+      flushMicrotasks();
+      expect(log).toEqual([]);
 
-    // Should have only been called once, since the second load would not query for element-a
-    expect(window.customElements.define).toHaveBeenCalledTimes(1);
-  }));
+      deferreds[0].resolve();
+      flushMicrotasks();
+      expect(log).toEqual([]);
+
+      deferreds[1].resolve();
+      flushMicrotasks();
+      expect(log).toEqual(['emitted: undefined', 'completed']);
+    }));
+
+    it('should fail if any of the contained elements fails to load and register', fakeAsync(() => {
+      const deferreds = returnPromisesFromSpy(loadCustomElementSpy);
+
+      const hostEl = document.createElement('div');
+      hostEl.innerHTML = `
+        <element-a-selector></element-a-selector>
+        <element-b-selector></element-b-selector>
+      `;
+
+      const log: any[] = [];
+      elementsLoader.loadContainedCustomElements(hostEl).subscribe(
+        v => log.push(`emitted: ${v}`),
+        e => log.push(`errored: ${e}`),
+        () => log.push('completed'),
+      );
+
+      flushMicrotasks();
+      expect(log).toEqual([]);
+
+      deferreds[0].resolve();
+      flushMicrotasks();
+      expect(log).toEqual([]);
+
+      deferreds[1].reject('foo');
+      flushMicrotasks();
+      expect(log).toEqual(['errored: foo']);
+    }));
+  });
+
+  describe('loadCustomElement()', () => {
+    let definedSpy: jasmine.Spy;
+    let whenDefinedSpy: jasmine.Spy;
+    let whenDefinedDeferreds: Deferred[];
+
+    beforeEach(() => {
+      // `loadCustomElement()` uses the `window.customElements` API. Provide mocks for these tests.
+      definedSpy = spyOn(window.customElements, 'define');
+      whenDefinedSpy = spyOn(window.customElements, 'whenDefined');
+      whenDefinedDeferreds = returnPromisesFromSpy(whenDefinedSpy);
+    });
+
+    it('should be able to load and register an element', fakeAsync(() => {
+      elementsLoader.loadCustomElement('element-a-selector');
+      flushMicrotasks();
+
+      expect(definedSpy).toHaveBeenCalledTimes(1);
+      expect(definedSpy).toHaveBeenCalledWith('element-a-selector', jasmine.any(Function));
+
+      // Verify the right component was loaded/registered.
+      const Ctor = definedSpy.calls.argsFor(0)[1];
+      expect(Ctor.observedAttributes).toEqual(['element-a-module-path']);
+    }));
+
+    it('should wait until the element is defined', fakeAsync(() => {
+      let state = 'pending';
+      elementsLoader.loadCustomElement('element-b-selector').then(() => state = 'resolved');
+      flushMicrotasks();
+
+      expect(state).toBe('pending');
+      expect(whenDefinedSpy).toHaveBeenCalledTimes(1);
+      expect(whenDefinedSpy).toHaveBeenCalledWith('element-b-selector');
+
+      whenDefinedDeferreds[0].resolve();
+      flushMicrotasks();
+      expect(state).toBe('resolved');
+    }));
+
+    it('should not load and register the same element more than once', fakeAsync(() => {
+      elementsLoader.loadCustomElement('element-a-selector');
+      flushMicrotasks();
+      expect(definedSpy).toHaveBeenCalledTimes(1);
+
+      definedSpy.calls.reset();
+
+      // While loading/registering is still in progress:
+      elementsLoader.loadCustomElement('element-a-selector');
+      flushMicrotasks();
+      expect(definedSpy).not.toHaveBeenCalled();
+
+      definedSpy.calls.reset();
+      whenDefinedDeferreds[0].resolve();
+
+      // Once loading/registering is already completed:
+      let state = 'pending';
+      elementsLoader.loadCustomElement('element-a-selector').then(() => state = 'resolved');
+      flushMicrotasks();
+      expect(state).toBe('resolved');
+      expect(definedSpy).not.toHaveBeenCalled();
+    }));
+
+    it('should fail if defining the the custom element fails', fakeAsync(() => {
+      let state = 'pending';
+      elementsLoader.loadCustomElement('element-b-selector').catch(e => state = `rejected: ${e}`);
+      flushMicrotasks();
+      expect(state).toBe('pending');
+
+      whenDefinedDeferreds[0].reject('foo');
+      flushMicrotasks();
+      expect(state).toBe('rejected: foo');
+    }));
+
+    it('should be able to load and register an element again if previous attempt failed',
+      fakeAsync(() => {
+        elementsLoader.loadCustomElement('element-a-selector');
+        flushMicrotasks();
+        expect(definedSpy).toHaveBeenCalledTimes(1);
+
+        definedSpy.calls.reset();
+
+        // While loading/registering is still in progress:
+        elementsLoader.loadCustomElement('element-a-selector').catch(() => undefined);
+        flushMicrotasks();
+        expect(definedSpy).not.toHaveBeenCalled();
+
+        whenDefinedDeferreds[0].reject('foo');
+        flushMicrotasks();
+        expect(definedSpy).not.toHaveBeenCalled();
+
+        // Once loading/registering has already failed:
+        elementsLoader.loadCustomElement('element-a-selector');
+        flushMicrotasks();
+        expect(definedSpy).toHaveBeenCalledTimes(1);
+      })
+    );
+  });
 });
 
 // TEST CLASSES/HELPERS
@@ -128,11 +231,28 @@ class FakeCustomElementModule implements WithCustomElementComponent {
   customElementComponent: Type<any>;
 }
 
+class FakeComponentFactory extends ComponentFactory<any> {
+  selector: string;
+  componentType: Type<any>;
+  ngContentSelectors: string[];
+  inputs = [{propName: this.identifyingInput, templateName: this.identifyingInput}];
+  outputs = [];
+
+  constructor(private identifyingInput: string) { super(); }
+
+  create(injector: Injector,
+         projectableNodes?: any[][],
+         rootSelectorOrNode?: string | any,
+         ngModule?: NgModuleRef<any>): ComponentRef<any> {
+    return jasmine.createSpy('ComponentRef') as any;
+  };
+}
+
 class FakeComponentFactoryResolver extends ComponentFactoryResolver {
   constructor(private modulePath) { super(); }
 
   resolveComponentFactory(component: Type<any>): ComponentFactory<any> {
-    return FAKE_COMPONENT_FACTORIES.get(this.modulePath)!;
+    return new FakeComponentFactory(this.modulePath);
   }
 }
 
@@ -168,3 +288,9 @@ class FakeModuleFactoryLoader extends NgModuleFactoryLoader {
     return Promise.resolve(fakeModuleFactory);
   }
 }
+
+function returnPromisesFromSpy(spy: jasmine.Spy): Deferred[] {
+  const deferreds: Deferred[] = [];
+  spy.and.callFake(() => new Promise((resolve, reject) => deferreds.push({resolve, reject})));
+  return deferreds;
+}

aio/src/app/custom-elements/elements-loader.ts

@@ -11,11 +11,13 @@ import { createCustomElement } from '@angular/elements';
 @Injectable()
 export class ElementsLoader {
   /** Map of unregistered custom elements and their respective module paths to load. */
-  elementsToLoad: Map<string, string>;
+  private elementsToLoad: Map<string, string>;
+  /** Map of custom elements that are in the process of being loaded and registered. */
+  private elementsLoading = new Map<string, Promise<void>>();
 
   constructor(private moduleFactoryLoader: NgModuleFactoryLoader,
               private moduleRef: NgModuleRef<any>,
-              @Inject(ELEMENT_MODULE_PATHS_TOKEN) elementModulePaths) {
+              @Inject(ELEMENT_MODULE_PATHS_TOKEN) elementModulePaths: Map<string, string>) {
     this.elementsToLoad = new Map(elementModulePaths);
   }
 
@@ -24,31 +26,57 @@ export class ElementsLoader {
    * the browser. Custom elements that are registered will be removed from the list of unregistered
    * elements so that they will not be queried in subsequent calls.
    */
-  loadContainingCustomElements(element: HTMLElement): Observable<void> {
-    const selectors: any[] = Array.from(this.elementsToLoad.keys())
+  loadContainedCustomElements(element: HTMLElement): Observable<void> {
+    const unregisteredSelectors = Array.from(this.elementsToLoad.keys())
         .filter(s => element.querySelector(s));
 
-    if (!selectors.length) { return of(undefined); }
+    if (!unregisteredSelectors.length) { return of(undefined); }
 
     // Returns observable that completes when all discovered elements have been registered.
-    return fromPromise(Promise.all(selectors.map(s => this.register(s))).then(result => undefined));
+    const allRegistered = Promise.all(unregisteredSelectors.map(s => this.loadCustomElement(s)));
+    return fromPromise(allRegistered.then(() => undefined));
   }
 
-  /** Registers the custom element defined on the WithCustomElement module factory. */
-  private register(selector: string) {
-    const modulePath = this.elementsToLoad.get(selector)!;
-    return this.moduleFactoryLoader.load(modulePath).then(elementModuleFactory => {
-      if (!this.elementsToLoad.has(selector)) { return; }
+  /** Loads and registers the custom element defined on the `WithCustomElement` module factory. */
+  loadCustomElement(selector: string): Promise<void> {
+    if (this.elementsLoading.has(selector)) {
+      // The custom element is in the process of being loaded and registered.
+      return this.elementsLoading.get(selector)!;
+    }
 
-      const elementModuleRef = elementModuleFactory.create(this.moduleRef.injector);
-      const CustomElementComponent = elementModuleRef.instance.customElementComponent;
-      const CustomElement =
-          createCustomElement(CustomElementComponent, {injector: elementModuleRef.injector});
+    if (this.elementsToLoad.has(selector)) {
+      // Load and register the custom element (for the first time).
+      const modulePath = this.elementsToLoad.get(selector)!;
+      const loadedAndRegistered = this.moduleFactoryLoader
+          .load(modulePath)
+          .then(elementModuleFactory => {
+            const elementModuleRef = elementModuleFactory.create(this.moduleRef.injector);
+            const injector = elementModuleRef.injector;
+            const CustomElementComponent = elementModuleRef.instance.customElementComponent;
+            const CustomElement = createCustomElement(CustomElementComponent, {injector});
 
-      customElements!.define(selector, CustomElement);
-      this.elementsToLoad.delete(selector);
+            customElements!.define(selector, CustomElement);
+            return customElements.whenDefined(selector);
+          })
+          .then(() => {
+            // The custom element has been successfully loaded and registered.
+            // Remove from `elementsLoading` and `elementsToLoad`.
+            this.elementsLoading.delete(selector);
+            this.elementsToLoad.delete(selector);
+          })
+          .catch(err => {
+            // The custom element has failed to load and register.
+            // Remove from `elementsLoading`.
+            // (Do not remove from `elementsToLoad` in case it was a temporary error.)
+            this.elementsLoading.delete(selector);
+            return Promise.reject(err);
+          });
 
-      return customElements.whenDefined(selector);
-    });
+      this.elementsLoading.set(selector, loadedAndRegistered);
+      return loadedAndRegistered;
+    }
+
+    // The custom element has already been loaded and registered.
+    return Promise.resolve();
   }
 }

aio/src/app/custom-elements/lazy-custom-element.component.spec.ts

@@ -0,0 +1,67 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Logger } from 'app/shared/logger.service';
+import { MockLogger } from 'testing/logger.service';
+import { LazyCustomElementComponent } from './lazy-custom-element.component';
+import { ElementsLoader } from './elements-loader';
+
+describe('LazyCustomElementComponent', () => {
+  let mockElementsLoader: jasmine.SpyObj<ElementsLoader>;
+  let mockLogger: MockLogger;
+  let fixture: ComponentFixture<LazyCustomElementComponent>;
+
+  beforeEach(() => {
+    mockElementsLoader = jasmine.createSpyObj<ElementsLoader>('ElementsLoader', [
+      'loadContainedCustomElements',
+      'loadCustomElement',
+    ]);
+
+    const injector = TestBed.configureTestingModule({
+      declarations: [ LazyCustomElementComponent ],
+      providers: [
+        { provide: ElementsLoader, useValue: mockElementsLoader },
+        { provide: Logger, useClass: MockLogger },
+      ],
+    });
+
+    mockLogger = injector.get(Logger);
+    fixture = TestBed.createComponent(LazyCustomElementComponent);
+  });
+
+  it('should set the HTML content based on the selector', () => {
+    const elem = fixture.nativeElement;
+
+    expect(elem.innerHTML).toBe('');
+
+    fixture.componentInstance.selector = 'foo-bar';
+    fixture.detectChanges();
+
+    expect(elem.innerHTML).toBe('<foo-bar></foo-bar>');
+  });
+
+  it('should load the specified custom element', () => {
+    expect(mockElementsLoader.loadCustomElement).not.toHaveBeenCalled();
+
+    fixture.componentInstance.selector = 'foo-bar';
+    fixture.detectChanges();
+
+    expect(mockElementsLoader.loadCustomElement).toHaveBeenCalledWith('foo-bar');
+  });
+
+  it('should log an error (and abort) if the selector is empty', () => {
+    fixture.detectChanges();
+
+    expect(mockElementsLoader.loadCustomElement).not.toHaveBeenCalled();
+    expect(mockLogger.output.error).toEqual([[jasmine.any(Error)]]);
+    expect(mockLogger.output.error[0][0].message).toBe('Invalid selector for \'aio-lazy-ce\': ');
+  });
+
+  it('should log an error (and abort) if the selector is invalid', () => {
+    fixture.componentInstance.selector = 'foo-bar><script></script><foo-bar';
+    fixture.detectChanges();
+
+    expect(mockElementsLoader.loadCustomElement).not.toHaveBeenCalled();
+    expect(mockLogger.output.error).toEqual([[jasmine.any(Error)]]);
+    expect(mockLogger.output.error[0][0].message).toBe(
+        'Invalid selector for \'aio-lazy-ce\': foo-bar><script></script><foo-bar');
+  });
+});

aio/src/app/custom-elements/lazy-custom-element.component.ts

@@ -0,0 +1,27 @@
+import { Component, ElementRef, Input, OnInit } from '@angular/core';
+import { Logger } from 'app/shared/logger.service';
+import { ElementsLoader } from './elements-loader';
+
+@Component({
+  selector: 'aio-lazy-ce',
+  template: '',
+})
+export class LazyCustomElementComponent implements OnInit {
+  @Input() selector = '';
+
+  constructor(
+    private elementRef: ElementRef,
+    private elementsLoader: ElementsLoader,
+    private logger: Logger,
+  ) {}
+
+  ngOnInit() {
+    if (!this.selector || /[^\w-]/.test(this.selector)) {
+      this.logger.error(new Error(`Invalid selector for 'aio-lazy-ce': ${this.selector}`));
+      return;
+    }
+
+    this.elementRef.nativeElement.innerHTML = `<${this.selector}></${this.selector}>`;
+    this.elementsLoader.loadCustomElement(this.selector);
+  }
+}

aio/src/app/custom-elements/live-example/live-example.component.html

@@ -1,5 +1,7 @@
+<!-- Content projection is used to get the content HTML provided to the component. -->
+<span #content style="display: none"><ng-content></ng-content></span>
+
 <span [ngSwitch]="mode">
-  <span *ngSwitchCase="'disabled'">{{title}} <em>(not available on this device)</em></span>
   <span *ngSwitchCase="'embedded'">
     <div title="{{title}}">
       <aio-embedded-stackblitz [src]="stackblitz"></aio-embedded-stackblitz>
@@ -14,7 +16,7 @@
   <span *ngSwitchDefault>
     <a [href]="stackblitz" target="_blank" title="{{title}}">{{title}}</a>
     <span *ngIf="enableDownload">
-      /  <a [href]="zip" download title="Download example">download example</a>
+      / <a [href]="zip" download title="Download example">download example</a>
     </span>
   </span>
 </span>

aio/src/app/custom-elements/live-example/live-example.component.spec.ts

@@ -12,7 +12,6 @@ describe('LiveExampleComponent', () => {
   let liveExampleComponent: LiveExampleComponent;
   let fixture: ComponentFixture<HostComponent>;
   let testPath: string;
-  let liveExampleContent: string|null;
 
   //////// test helpers ////////
 
@@ -41,12 +40,7 @@ describe('LiveExampleComponent', () => {
     liveExampleDe = fixture.debugElement.children[0];
     liveExampleComponent = liveExampleDe.componentInstance;
 
-    // Copy the LiveExample's innerHTML (content)
-    // into the `liveExampleContent` property as the DocViewer does
-    liveExampleDe.nativeElement.liveExampleContent = liveExampleContent;
-
-    fixture.detectChanges();
-    liveExampleComponent.onResize(1033); // wide by default
+    // Trigger `ngAfterContentInit()`.
     fixture.detectChanges();
 
     testFn();
@@ -64,7 +58,6 @@ describe('LiveExampleComponent', () => {
     .overrideComponent(EmbeddedStackblitzComponent, {set: {template: 'NO IFRAME'}});
 
     testPath = defaultTestPath;
-    liveExampleContent = null;
   });
 
   describe('when not embedded', () => {
@@ -103,15 +96,6 @@ describe('LiveExampleComponent', () => {
       });
     });
 
-    it('should have expected flat-style stackblitz when has `flat-style`', () => {
-      testPath = '/tutorial/toh-pt1';
-      setHostTemplate('<live-example flat-style></live-example>');
-      testComponent(() => {
-        // The file should be "stackblitz.html", not "stackblitz.html"
-        expect(getLiveExampleAnchor().href).toContain('/stackblitz.html');
-      });
-    });
-
     it('should have expected stackblitz & download hrefs when has example directory (name)', () => {
       testPath = '/guide/somewhere';
       setHostTemplate('<live-example name="toh-pt1"></live-example>');
@@ -150,15 +134,7 @@ describe('LiveExampleComponent', () => {
       });
     });
 
-    it('should be flat style when flat-style requested', () => {
-      setHostTemplate('<live-example flat-style></live-example>');
-      testComponent(() => {
-        const hrefs = getHrefs();
-        expect(hrefs[0]).toContain(defaultTestPath + '/stackblitz.html');
-      });
-    });
-
-    it('should not have a download link when `noDownload` atty present', () => {
+    it('should not have a download link when `noDownload` attr present', () => {
       setHostTemplate('<live-example noDownload></live-example>');
       testComponent(() => {
         const hrefs = getHrefs();
@@ -167,7 +143,7 @@ describe('LiveExampleComponent', () => {
       });
     });
 
-    it('should only have a download link when `downloadOnly` atty present', () => {
+    it('should only have a download link when `downloadOnly` attr present', () => {
       setHostTemplate('<live-example downloadOnly>download this</live-example>');
       testComponent(() => {
         const hrefs = getHrefs();
@@ -196,12 +172,12 @@ describe('LiveExampleComponent', () => {
     });
 
     it('should add title from <live-example> body', () => {
-      liveExampleContent = 'The Greatest Example';
-      setHostTemplate('<live-example title="ignore this title"></live-example>');
+      const expectedTitle = 'The Greatest Example';
+      setHostTemplate(`<live-example title="ignore this title">${expectedTitle}</live-example>`);
       testComponent(() => {
         const anchor = getLiveExampleAnchor();
-        expect(anchor.textContent).toBe(liveExampleContent, 'anchor content');
-        expect(anchor.getAttribute('title')).toBe(liveExampleContent, 'title');
+        expect(anchor.textContent).toBe(expectedTitle, 'anchor content');
+        expect(anchor.getAttribute('title')).toBe(expectedTitle, 'title');
       });
     });
 
@@ -251,27 +227,4 @@ describe('LiveExampleComponent', () => {
       });
     });
   });
-
-  describe('when narrow display (mobile)', () => {
-
-    it('should be embedded style when no style defined', () => {
-      setHostTemplate('<live-example></live-example>');
-      testComponent(() => {
-        liveExampleComponent.onResize(600); // narrow
-        fixture.detectChanges();
-        const hrefs = getHrefs();
-        expect(hrefs[0]).toContain(defaultTestPath + '/stackblitz.html');
-      });
-    });
-
-    it('should be embedded style even when flat-style requested', () => {
-      setHostTemplate('<live-example flat-style></live-example>');
-      testComponent(() => {
-        liveExampleComponent.onResize(600); // narrow
-        fixture.detectChanges();
-        const hrefs = getHrefs();
-        expect(hrefs[0]).toContain(defaultTestPath + '/stackblitz.html');
-      });
-    });
-  });
 });

aio/src/app/custom-elements/live-example/live-example.component.ts

@@ -1,130 +1,131 @@
 /* tslint:disable component-selector */
-import { Component, ElementRef, HostListener, Input, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { AfterContentInit, AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { Location } from '@angular/common';
 import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
+import { AttrMap, boolFromValue, getAttrs, getAttrValue } from 'app/shared/attribute-utils';
 
-import { boolFromValue, getAttrs, getAttrValue } from 'app/shared/attribute-utils';
 
-const liveExampleBase = CONTENT_URL_PREFIX + 'live-examples/';
-const zipBase = CONTENT_URL_PREFIX + 'zips/';
+const LIVE_EXAMPLE_BASE = CONTENT_URL_PREFIX + 'live-examples/';
+const ZIP_BASE = CONTENT_URL_PREFIX + 'zips/';
 
 /**
-* Angular.io Live Example Embedded Component
-*
-* Renders a link to a live/host example of the doc page.
-*
-* All attributes and the text content are optional
-*
-* Usage:
-*   <live-example
-*      [name="..."]        // name of the example directory
-*      [stackblitz="...""] // name of the stackblitz file (becomes part of zip file name as well)
-*      [embedded]          // embed the stackblitz in the doc page, else display in new browser tab (default)
-*      [noDownload]        // no downloadable zip option
-*      [downloadOnly]      // just the zip
-*      [title="..."]>      // text for live example link and tooltip
-*        text              // higher precedence way to specify text for live example link and tooltip
-*  </live-example>
-* Example:
-*   <p>Run <live-example>Try the live example</live-example></p>.
-*   // ~/resources/live-examples/{page}/stackblitz.json
-*
-*   <p>Run <live-example name="toh-pt1">this example</live-example></p>.
-*   // ~/resources/live-examples/toh-pt1/stackblitz.json
-*
-*   // Link to the default stackblitz in the toh-pt1 sample
-*   // The title overrides default ("live example") with "Tour of Heroes - Part 1"
-*   <p>Run <live-example name="toh-pt1" title="Tour of Heroes - Part 1"></live-example></p>.
-*   // ~/resources/live-examples/toh-pt1/stackblitz.json
-*
-*   <p>Run <live-example stackblitz="minimal"></live-example></p>.
-*   // ~/resources/live-examples/{page}/minimal.stackblitz.json
-*
-*   // Embed the current page's default stackblitz
-*   // Text within tag is "live example"
-*   // No title (no tooltip)
-*   <live-example embedded title=""></live-example>
-*   // ~/resources/live-examples/{page}/stackblitz.json
-*
-*   // Displays within the document page as an embedded style stackblitz editor
-*   <live-example name="toh-pt1" embedded stackblitz="minimal">Tour of Heroes - Part 1</live-example>
-*   // ~/resources/live-examples/toh-pt1/minimal.stackblitz.json
-*/
+ * Angular.io Live Example Embedded Component
+ *
+ * Renders a link to a live/host example of the doc page.
+ *
+ * All attributes and the text content are optional
+ *
+ * Usage:
+ *   <live-example
+ *      [name="..."]        // name of the example directory
+ *      [stackblitz="...""] // name of the stackblitz file (becomes part of zip file name as well)
+ *      [embedded]          // embed the stackblitz in the doc page, else display in new browser tab (default)
+ *      [noDownload]        // no downloadable zip option
+ *      [downloadOnly]      // just the zip
+ *      [title="..."]>      // text for live example link and tooltip
+ *        text              // higher precedence way to specify text for live example link and tooltip
+ *  </live-example>
+ * Example:
+ *   <p>Run <live-example>Try the live example</live-example></p>.
+ *   // ~/resources/live-examples/{page}/stackblitz.json
+ *
+ *   <p>Run <live-example name="toh-pt1">this example</live-example></p>.
+ *   // ~/resources/live-examples/toh-pt1/stackblitz.json
+ *
+ *   // Link to the default stackblitz in the toh-pt1 sample
+ *   // The title overrides default ("live example") with "Tour of Heroes - Part 1"
+ *   <p>Run <live-example name="toh-pt1" title="Tour of Heroes - Part 1"></live-example></p>.
+ *   // ~/resources/live-examples/toh-pt1/stackblitz.json
+ *
+ *   <p>Run <live-example stackblitz="minimal"></live-example></p>.
+ *   // ~/resources/live-examples/{page}/minimal.stackblitz.json
+ *
+ *   // Embed the current page's default stackblitz
+ *   // Text within tag is "live example"
+ *   // No title (no tooltip)
+ *   <live-example embedded title=""></live-example>
+ *   // ~/resources/live-examples/{page}/stackblitz.json
+ *
+ *   // Displays within the document page as an embedded style stackblitz editor
+ *   <live-example name="toh-pt1" embedded stackblitz="minimal">Tour of Heroes - Part 1</live-example>
+ *   // ~/resources/live-examples/toh-pt1/minimal.stackblitz.json
+ */
 @Component({
   selector: 'live-example',
   templateUrl: 'live-example.component.html'
 })
-export class LiveExampleComponent implements OnInit {
+export class LiveExampleComponent implements AfterContentInit {
 
-  // Will force to embedded-style when viewport width is narrow
-  // "narrow" value was picked based on phone dimensions from http://screensiz.es/phone
-  readonly narrowWidth = 1000;
-
-  attrs: any;
-  enableDownload = true;
-  exampleDir: string;
-  isEmbedded = false;
-  mode = 'disabled';
-  stackblitz: string;
-  stackblitzName: string;
+  readonly mode: 'default' | 'embedded' | 'downloadOnly';
+  readonly enableDownload: boolean;
+  readonly stackblitz: string;
+  readonly zip: string;
   title: string;
-  zip: string;
-  zipName: string;
 
-  constructor(
-    private elementRef: ElementRef,
-    location: Location ) {
+  @ViewChild('content')
+  private content: ElementRef;
 
-    const attrs = this.attrs = getAttrs(this.elementRef);
-    let exampleDir = attrs.name;
+  constructor(elementRef: ElementRef, location: Location) {
+    const attrs = getAttrs(elementRef);
+    const exampleDir = this.getExampleDir(attrs, location.path(false));
+    const stackblitzName = this.getStackblitzName(attrs);
+
+    this.mode = this.getMode(attrs);
+    this.enableDownload = this.getEnableDownload(attrs);
+    this.stackblitz = this.getStackblitz(exampleDir, stackblitzName, this.mode === 'embedded');
+    this.zip = this.getZip(exampleDir, stackblitzName);
+    this.title = this.getTitle(attrs);
+  }
+
+  ngAfterContentInit() {
+    // Angular will sanitize this title when displayed, so it should be plain text.
+    const textContent = this.content.nativeElement.textContent.trim();
+    if (textContent) {
+      this.title = textContent;
+    }
+  }
+
+  private getEnableDownload(attrs: AttrMap) {
+    const downloadDisabled = boolFromValue(getAttrValue(attrs, 'noDownload'));
+    return !downloadDisabled;
+  }
+
+  private getExampleDir(attrs: AttrMap, path: string) {
+    let exampleDir = getAttrValue(attrs, 'name');
     if (!exampleDir) {
-      // take last segment, excluding hash fragment and query params
-      exampleDir = (location.path(false).match(/[^\/?\#]+(?=\/?(?:$|\#|\?))/) || [])[0];
-    }
-    this.exampleDir = exampleDir.trim();
-    this.zipName = exampleDir.indexOf('/') === -1 ? this.exampleDir : exampleDir.split('/')[0];
-    this.stackblitzName = attrs.stackblitz ? attrs.stackblitz.trim() + '.' : '';
-    this.zip = `${zipBase}${exampleDir}/${this.stackblitzName}${this.zipName}.zip`;
-
-    this.enableDownload = !boolFromValue(getAttrValue(attrs, 'nodownload'));
-
-    if (boolFromValue(getAttrValue(attrs, 'downloadonly'))) {
-      this.mode = 'downloadOnly';
+      // Take the last path segment, excluding query params and hash fragment.
+      const match = path.match(/[^/?#]+(?=\/?(?:\?|#|$))/);
+      exampleDir = match ? match[0] : 'index';
     }
+    return exampleDir.trim();
   }
 
-  calcStackblitzLink(width: number) {
+  private getMode(this: LiveExampleComponent, attrs: AttrMap): typeof this.mode {
+    const downloadOnly = boolFromValue(getAttrValue(attrs, 'downloadOnly'));
+    const isEmbedded = boolFromValue(getAttrValue(attrs, 'embedded'));
 
-    const attrs = this.attrs;
-    const exampleDir = this.exampleDir;
-    let urlQuery = '';
-
-    this.mode = 'default';     // display in another browser tab by default
-
-    this.isEmbedded = boolFromValue(attrs.embedded);
-
-    if (this.isEmbedded) {
-      this.mode = 'embedded'; // display embedded in the doc
-      urlQuery = '?ctl=1';
-    }
-
-    this.stackblitz = `${liveExampleBase}${exampleDir}/${this.stackblitzName}stackblitz.html${urlQuery}`;
+    return downloadOnly ? 'downloadOnly'
+           : isEmbedded ? 'embedded' :
+                          'default';
   }
 
-  ngOnInit() {
-    // The `liveExampleContent` property is set by the DocViewer when it builds this component.
-    // It is the original innerHTML of the host element.
-    // Angular will sanitize this title when displayed so should be plain text.
-    const title = this.elementRef.nativeElement.liveExampleContent;
-    this.title = (title || this.attrs.title || 'live example').trim();
-    this.onResize(window.innerWidth);
+  private getStackblitz(exampleDir: string, stackblitzName: string, isEmbedded: boolean) {
+    const urlQuery = isEmbedded ? '?ctl=1' : '';
+    return `${LIVE_EXAMPLE_BASE}${exampleDir}/${stackblitzName}stackblitz.html${urlQuery}`;
   }
 
-  @HostListener('window:resize', ['$event.target.innerWidth'])
-  onResize(width: number) {
-    if (this.mode !== 'downloadOnly') {
-      this.calcStackblitzLink(width);
-    }
+  private getStackblitzName(attrs: AttrMap) {
+    const attrValue = (getAttrValue(attrs, 'stackblitz') || '').trim();
+    return attrValue && `${attrValue}.`;
+  }
+
+  private getTitle(attrs: AttrMap) {
+    return (getAttrValue(attrs, 'title') || 'live example').trim();
+  }
+
+  private getZip(exampleDir: string, stackblitzName: string) {
+    const zipName = exampleDir.split('/')[0];
+    return `${ZIP_BASE}${exampleDir}/${stackblitzName}${zipName}.zip`;
   }
 }
 
@@ -136,7 +137,7 @@ export class LiveExampleComponent implements OnInit {
 @Component({
   selector: 'aio-embedded-stackblitz',
   template: `<iframe #iframe frameborder="0" width="100%" height="100%"></iframe>`,
-  styles: [ 'iframe { min-height: 400px; }']
+  styles: [ 'iframe { min-height: 400px; }' ]
 })
 export class EmbeddedStackblitzComponent implements AfterViewInit {
   @Input() src: string;

aio/src/app/custom-elements/toc/toc.component.spec.ts

@@ -4,8 +4,8 @@ import { By } from '@angular/platform-browser';
 import { asapScheduler as asap, BehaviorSubject } from 'rxjs';
 
 import { ScrollService } from 'app/shared/scroll.service';
-import { TocComponent } from './toc.component';
 import { TocItem, TocService } from 'app/shared/toc.service';
+import { TocComponent } from './toc.component';
 
 describe('TocComponent', () => {
   let tocComponentDe: DebugElement;

aio/src/app/custom-elements/toc/toc.module.ts

@@ -0,0 +1,14 @@
+import { NgModule, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { WithCustomElementComponent } from '../element-registry';
+import { TocComponent } from './toc.component';
+
+@NgModule({
+  imports: [ CommonModule, MatIconModule ],
+  declarations: [ TocComponent ],
+  entryComponents: [ TocComponent ],
+})
+export class TocModule implements WithCustomElementComponent {
+  customElementComponent: Type<any> = TocComponent;
+}

aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts

@@ -300,7 +300,7 @@ describe('DocViewerComponent', () => {
 
     beforeEach(() => {
       const elementsLoader = TestBed.get(ElementsLoader) as MockElementsLoader;
-      loadElementsSpy = elementsLoader.loadContainingCustomElements.and.returnValue(of(undefined));
+      loadElementsSpy = elementsLoader.loadContainedCustomElements.and.returnValue(of(undefined));
       prepareTitleAndTocSpy = spyOn(docViewer, 'prepareTitleAndToc');
       swapViewsSpy = spyOn(docViewer, 'swapViews').and.returnValue(of(undefined));
     });

aio/src/app/layout/doc-viewer/doc-viewer.component.ts

@@ -136,7 +136,7 @@ export class DocViewerComponent implements OnDestroy {
         //           and is considered to be safe.
         tap(() => this.nextViewContainer.innerHTML = doc.contents || ''),
         tap(() => addTitleAndToc = this.prepareTitleAndToc(this.nextViewContainer, doc.id)),
-        switchMap(() => this.elementsLoader.loadContainingCustomElements(this.nextViewContainer)),
+        switchMap(() => this.elementsLoader.loadContainedCustomElements(this.nextViewContainer)),
         tap(() => this.docReady.emit()),
         switchMap(() => this.swapViews(addTitleAndToc)),
         tap(() => this.docRendered.emit()),

aio/src/app/shared/attribute-utils.spec.ts

@@ -1,6 +1,6 @@
 import { ElementRef } from '@angular/core';
 
-import { getAttrs, getAttrValue, getBoolFromAttribute, boolFromValue } from './attribute-utils';
+import { AttrMap, getAttrs, getAttrValue, getBoolFromAttribute, boolFromValue } from './attribute-utils';
 
 describe('Attribute Utilities', () => {
   let testEl: HTMLElement;
@@ -32,17 +32,17 @@ describe('Attribute Utilities', () => {
   });
 
   describe('getAttrValue', () => {
-    let attrMap: { [index: string]: string };
+    let attrMap: AttrMap;
 
     beforeEach(() => {
       attrMap = getAttrs(testEl);
     });
 
-    it('should return empty string value for attribute "a"', () => {
+    it('should return empty string for attribute "a"', () => {
       expect(getAttrValue(attrMap, 'a')).toBe('');
     });
 
-    it('should return empty string value for attribute "A"', () => {
+    it('should return empty string for attribute "A"', () => {
       expect(getAttrValue(attrMap, 'A')).toBe('');
     });
 
@@ -50,7 +50,7 @@ describe('Attribute Utilities', () => {
       expect(getAttrValue(attrMap, 'b')).toBe('true');
     });
 
-    it('should return empty string value for attribute "d-E"', () => {
+    it('should return empty string for attribute "d-E"', () => {
       expect(getAttrValue(attrMap, 'd-E')).toBe('');
     });
 
@@ -68,12 +68,10 @@ describe('Attribute Utilities', () => {
       expect(getAttrValue(attrMap, ['d-e', 'd'])).toBe('');
     });
 
-    it('should return undefined value for non-existent attribute "x"', () => {
+    it('should return undefined for non-existent attributes', () => {
       expect(getAttrValue(attrMap, 'x')).toBeUndefined();
-    });
-
-    it('should return undefined if no argument', () => {
-      expect(getAttrValue(attrMap)).toBeUndefined();
+      expect(getAttrValue(attrMap, '')).toBeUndefined();
+      expect(getAttrValue(attrMap, ['', 'x'])).toBeUndefined();
     });
 
   });

aio/src/app/shared/attribute-utils.ts

@@ -1,17 +1,19 @@
 // Utilities for processing HTML element attributes
 import { ElementRef } from '@angular/core';
 
-interface StringMap { [index: string]: string; }
+export interface AttrMap {
+  [key: string]: string;
+}
 
 /**
  * Get attribute map from element or ElementRef `attributes`.
  * Attribute map keys are forced lowercase for case-insensitive lookup.
- * @param el The source of the attributes
+ * @param el The source of the attributes.
  */
-export function getAttrs(el:  HTMLElement | ElementRef): StringMap {
+export function getAttrs(el:  HTMLElement | ElementRef): AttrMap {
   const attrs: NamedNodeMap = el instanceof ElementRef ? el.nativeElement.attributes : el.attributes;
-  const attrMap: StringMap = {};
-  for (const attr of attrs as any /* cast due to https://github.com/Microsoft/TypeScript/issues/2695 */) {
+  const attrMap: AttrMap = {};
+  for (const attr of attrs as any as Attr[] /* cast due to https://github.com/Microsoft/TypeScript/issues/2695 */) {
     attrMap[attr.name.toLowerCase()] = attr.value;
   }
   return attrMap;
@@ -19,29 +21,29 @@ export function getAttrs(el:  HTMLElement | ElementRef): StringMap {
 
 /**
  * Return the attribute that matches `attr`.
- * @param attr Name of the attribute or a string of candidate attribute names
+ * @param attr Name of the attribute or a string of candidate attribute names.
  */
-export function getAttrValue(attrs: StringMap, attr: string | string[] = ''): string {
-  return attrs[typeof attr === 'string' ?
-    attr.toLowerCase() :
-    attr.find(a => attrs[a.toLowerCase()] !== undefined) || ''
-  ];
+export function getAttrValue(attrs: AttrMap, attr: string | string[]): string | undefined {
+  const key = (typeof attr === 'string')
+      ? attr
+      : attr.find(a => attrs.hasOwnProperty(a.toLowerCase()));
+
+  return (key === undefined) ? undefined : attrs[key.toLowerCase()];
 }
 
 /**
  * Return the boolean state of an attribute value (if supplied)
- * @param attrValue The string value of some attribute (or undefined if attribute not present)
+ * @param attrValue The string value of some attribute (or undefined if attribute not present).
  * @param def Default boolean value when attribute is undefined.
  */
-export function boolFromValue(attrValue: string|undefined, def: boolean = false) {
-  // tslint:disable-next-line:triple-equals
-  return attrValue == undefined ? def :  attrValue.trim() !== 'false';
+export function boolFromValue(attrValue: string | undefined, def: boolean = false) {
+  return attrValue === undefined ? def : attrValue.trim() !== 'false';
 }
 
 /**
  * Return the boolean state of attribute from an element
- * @param el The source of the attributes
- * @param atty Name of the attribute or a string of candidate attribute names
+ * @param el The source of the attributes.
+ * @param atty Name of the attribute or a string of candidate attribute names.
  * @param def Default boolean value when attribute is undefined.
  */
 export function getBoolFromAttribute(

aio/src/assets/images/logos/concept-icons/animations.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 200"><defs><style>.cls-1{fill:#ff7043;}.cls-2{fill:#f4511e;}.cls-3{fill:#ffb8a1;}.cls-4{fill:#ffc6b4;}.cls-5{fill:#ffe2d9;}.cls-6{fill:#fff;}</style></defs><title>animations</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.8 0 92.8 0 92.8 0 0 33.3 14 156.1 92.8 200 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><polygon class="cls-2" points="92.8 0 92.8 22.2 92.8 22.2 92.8 123.2 92.8 123.2 92.8 200 92.8 200 171.7 156.1 186 33.3 92.8 0"/><rect class="cls-3" x="43" y="71.2" width="68.4" height="68.84" rx="4" ry="4"/><rect class="cls-4" x="57.4" y="62.3" width="68.8" height="68.84" rx="4" ry="4" transform="translate(38.6 -25.6) rotate(20)"/><rect class="cls-5" x="71.3" y="59.2" width="68.8" height="68.84" rx="4" ry="4" transform="translate(66.9 -42.1) rotate(32.5)"/><rect class="cls-6" x="81.6" y="58.3" width="68.8" height="68.84" rx="4" ry="4" transform="translate(99.6 -54.9) rotate(45)"/></g></g></svg>

aio/src/assets/images/logos/concept-icons/augury.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.6 200"><defs><style>.cls-1{fill:#4a3493;}.cls-2{fill:#311b92;}.cls-3{opacity:0.5;}.cls-4{fill:#fff;}</style></defs><title>augury</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.4 0 92.4 0 92.4 0 0 33.3 14 156.1 92.4 200 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-2" points="92.4 0 92.4 22.2 92.4 22.2 92.4 123.2 92.4 123.2 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><g id="Group-2"><g id="Group-2-2" class="cls-3"><path id="Combined-Shape" class="cls-4" d="M142.4,90.2A44.1,44.1,0,1,1,92.7,52.8a40.3,40.3,0,0,1,6-.4,44.8,44.8,0,0,1,15.9,2.9,25.8,25.8,0,1,0,27.8,34.9Z"/></g><path id="Combined-Shape-2" class="cls-4" d="M140.6,87.8A44.1,44.1,0,1,1,90.9,50.4a40.3,40.3,0,0,1,6-.4,45.6,45.6,0,0,1,15.9,2.9,25.8,25.8,0,1,0,27.8,34.9Z"/></g></g></g></svg>

aio/src/assets/images/logos/concept-icons/cdk.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.6 200"><defs><style>.cls-1{fill:#03a9f4;}.cls-2{fill:#039be5;}.cls-3{fill:#fff;}</style></defs><title>cdk</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.4 0 92.4 0 92.4 0 0 33.3 14 156.1 92.4 200 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-2" points="92.4 0 92.4 22.2 92.4 22.2 92.4 123.2 92.4 123.2 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><rect class="cls-3" x="117.8" y="45" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="117.8" y="85" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="117.8" y="125" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="77.8" y="125" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="37.8" y="125" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="37.8" y="85" width="30" height="30" rx="1" ry="1"/><rect class="cls-3" x="77.8" y="85" width="30" height="30" rx="1" ry="1"/></g></g></svg>

aio/src/assets/images/logos/concept-icons/cli.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.6 200"><defs><style>.cls-1{fill:#37474f;}.cls-2{fill:#263238;}.cls-3{fill:#fff;}</style></defs><title>cli</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="92.4 0 92.4 0 92.4 0 0 33.3 14 156.1 92.4 200 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><polygon class="cls-2" points="92.4 0 92.4 22.2 92.4 22.2 92.4 123.2 92.4 123.2 92.4 200 92.4 200 171.3 156.1 185.6 33.3 92.4 0"/><path class="cls-3" d="M42.8,55v90h100V55ZM138,139.9H47.5V60.1h90.6v79.8Z"/><polygon class="cls-3" points="60.1 111.4 63.5 114.9 82.8 95.5 63.2 75.9 59.8 79.3 76 95.5 60.1 111.4"/><rect class="cls-3" x="82.8" y="117.2" width="30" height="4"/></g></g></svg>