release: cut the v6.0.6 release

PR Close #23300

.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.3.0
-var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.3.0
+var_1: &docker_image angular/ngcontainer:0.3.2
+var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.3.2
 
 # Define common ENV vars
 var_3: &define_env_vars
@@ -80,7 +80,7 @@ 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
@@ -131,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
@@ -149,6 +149,10 @@ jobs:
   # See comments inside the integration/run_tests.sh script.
   integration_test:
     <<: *job_defaults
+    # Note: we run Bazel in one of the integration tests, and it can consume >2G
+    # of memory. Together with the system under test, this can exhaust the RAM
+    # on a 4G worker so we use a larger machine here too.
+    resource_class: xlarge
     steps:
       - *define_env_vars
       - checkout:

.github/angular-robot.yml

@@ -4,6 +4,7 @@
 size:
   disabled: false
   maxSizeIncrease: 1000
+  circleCiStatusName: "ci/circleci: build-packages-dist"
   status:
     disabled: false
     context: "ci/angular: size"
@@ -44,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

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,64 @@
+<a name="6.0.6"></a>
+## [6.0.6](https://github.com/angular/angular/compare/6.0.5...6.0.6) (2018-06-20)
+
+
+### Bug Fixes
+
+* **compiler:** support `.` in import statements. ([#20634](https://github.com/angular/angular/issues/20634)) ([e543c73](https://github.com/angular/angular/commit/e543c73)), closes [#20363](https://github.com/angular/angular/issues/20363)
+* **core:** Injector correctly honors the @Self flag ([#24520](https://github.com/angular/angular/issues/24520)) ([f5b3661](https://github.com/angular/angular/commit/f5b3661))
+
+
+
+<a name="6.0.5"></a>
+## [6.0.5](https://github.com/angular/angular/compare/6.0.4...6.0.5) (2018-06-13)
+
+
+### Bug Fixes
+
+* **animations:** always render end-state styles for orphaned DOM nodes ([#24236](https://github.com/angular/angular/issues/24236)) ([0139173](https://github.com/angular/angular/commit/0139173))
+* **bazel:** Allow ng_module to depend on targets w no deps ([#24446](https://github.com/angular/angular/issues/24446)) ([ea3669e](https://github.com/angular/angular/commit/ea3669e))
+* **docs-infra:** use script nomodule to load IE polyfills, skip other polyfills ([#24317](https://github.com/angular/angular/issues/24317)) ([e876535](https://github.com/angular/angular/commit/e876535)), closes [#23647](https://github.com/angular/angular/issues/23647)
+* **router:** fix lazy loading of aux routes ([#23459](https://github.com/angular/angular/issues/23459)) ([d20877b](https://github.com/angular/angular/commit/d20877b)), closes [#10981](https://github.com/angular/angular/issues/10981)
+* **service-worker:** fix `SwPush.unsubscribe()` ([#24162](https://github.com/angular/angular/issues/24162)) ([ea2987c](https://github.com/angular/angular/commit/ea2987c)), closes [#24095](https://github.com/angular/angular/issues/24095)
+
+
+
+<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)
 
@@ -21,7 +82,7 @@
 
 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). 
+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).
 
 
 
@@ -172,10 +233,10 @@ To learn about the release highlights and our new CLI-powered update workflow fo
   This change removes support for `<template>`. `<ng-template>` should be used instead.
 
   BEFORE:
-  
+
       <!-- html template -->
       <template>some template content</template>
-  
+
       # tsconfig.json
       {
         # ...
@@ -185,12 +246,12 @@ To learn about the release highlights and our new CLI-powered update workflow fo
           "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.
 
 
@@ -203,35 +264,35 @@ To learn about the release highlights and our new CLI-powered update workflow fo
 
   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.

CONTRIBUTING.md

@@ -227,10 +227,15 @@ The following is the list of supported scopes:
 
 There are currently a few exceptions to the "use package name" rule:
 
-* **packaging**: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc.
+* **packaging**: used for changes that change the npm package layout in all of our packages, e.g.
+  public path changes, package.json changes done to all packages, d.ts file/format changes, changes
+  to bundles, etc.
 * **changelog**: used for updating the release notes in CHANGELOG.md
-* **aio**: used for docs-app (angular.io) related changes within the /aio directory of the repo
-* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all packages (e.g. `style: add missing semicolons`)
+* **docs-infra**: used for docs-app (angular.io) related changes within the /aio directory of the
+  repo
+* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all
+  packages (e.g. `style: add missing semicolons`) and for docs changes that are not related to a
+  specific package (e.g. `docs: fix typo in tutorial`).
 
 ### Subject
 The subject contains a succinct description of the change:
@@ -269,7 +274,7 @@ changes to be accepted, the CLA must be signed. It's a quick process, we promise
   * https://help.github.com/articles/about-commit-email-addresses/
   * https://help.github.com/articles/blocking-command-line-pushes-that-expose-your-personal-email-address/
 
-  Note that if you have more than one Git identity, it is important to verify that you are logged in with the same ID with which you signed the CLA, before you commit changes. If not, your PR will fail the CLA check.  
+  Note that if you have more than one Git identity, it is important to verify that you are logged in with the same ID with which you signed the CLA, before you commit changes. If not, your PR will fail the CLA check.
 
 <hr>
 

WORKSPACE

@@ -6,23 +6,23 @@ workspace(name = "angular")
 
 http_archive(
     name = "build_bazel_rules_nodejs",
-    url = "https://github.com/bazelbuild/rules_nodejs/archive/0.8.0.zip",
-    strip_prefix = "rules_nodejs-0.8.0",
-    sha256 = "4e40dd49ae7668d245c3107645f2a138660fcfd975b9310b91eda13f0c973953",
+    url = "https://github.com/bazelbuild/rules_nodejs/archive/0.9.1.zip",
+    strip_prefix = "rules_nodejs-0.9.1",
+    sha256 = "6139762b62b37c1fd171d7f22aa39566cb7dc2916f0f801d505a9aaf118c117f",
 )
 
 http_archive(
     name = "io_bazel_rules_webtesting",
-    url = "https://github.com/bazelbuild/rules_webtesting/archive/ca7b8062d9cf4ef2fde9193c7d37a0764c4262d7.zip",
-    strip_prefix = "rules_webtesting-ca7b8062d9cf4ef2fde9193c7d37a0764c4262d7",
-    sha256 = "28c73cf9d310fa6dba30e66bdb98071341c99c3feb8662f2d3883a632de97d72",
+    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/v0.13.0.zip",
-    strip_prefix = "rules_typescript-0.13.0",
-    sha256 = "8f2767ff56ad68c80c62e9a1cdc2ba2c2ba0b19d350f713365e5333045df02e3",
+    url = "https://github.com/bazelbuild/rules_typescript/archive/0.15.0.zip",
+    strip_prefix = "rules_typescript-0.15.0",
+    sha256 = "1aa75917330b820cb239b3c10a936a10f0a46fe215063d4492dd76dc6e1616f4",
 )
 
 http_archive(
@@ -34,13 +34,13 @@ http_archive(
 # 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"
+BAZEL_BUILDTOOLS_VERSION = "82b21607e00913b16fe1c51bec80232d9d6de31c"
 
 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",
+    sha256 = "edb24c2f9c55b10a820ec74db0564415c0cf553fa55e9fc709a6332fb6685eff",
 )
 
 # Fetching the Bazel source code allows us to compile the Skylark linter
@@ -66,9 +66,9 @@ 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",
 )
 
 #
@@ -77,7 +77,7 @@ http_archive(
 
 load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
 
-check_bazel_version("0.13.0")
+check_bazel_version("0.14.0")
 node_repositories(package_json = ["//:package.json"])
 
 load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")

aio/aio-builds-setup/dockerbuild/scripts-js/lib/clean-up/build-cleaner.ts

@@ -52,8 +52,7 @@ export class BuildCleaner {
   protected removeDir(dir: string) {
     try {
       if (shell.test('-d', dir)) {
-        // Undocumented signature (see https://github.com/shelljs/shelljs/pull/663).
-        (shell as any).chmod('-R', 'a+w', dir);
+        shell.chmod('-R', 'a+w', dir);
         shell.rm('-rf', dir);
       }
     } catch (err) {

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

@@ -106,8 +106,7 @@ export class BuildCreator extends EventEmitter {
         }
 
         try {
-          // Undocumented signature (see https://github.com/shelljs/shelljs/pull/663).
-          (shell as any).chmod('-R', 'a-w', outputDir);
+          shell.chmod('-R', 'a-w', outputDir);
           shell.rm('-f', inputFile);
           resolve();
         } catch (err) {

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/helper.ts

@@ -98,8 +98,7 @@ class Helper {
     const prDir = this.getPrDir(pr, isPublic);
 
     if (fs.existsSync(prDir)) {
-      // Undocumented signature (see https://github.com/shelljs/shelljs/pull/663).
-      (shell as any).chmod('-R', 'a+w', prDir);
+      shell.chmod('-R', 'a+w', prDir);
       shell.rm('-rf', prDir);
     }
   }

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

@@ -8,7 +8,7 @@
   "scripts": {
     "prebuild": "yarn clean-dist",
     "build": "tsc",
-    "build-watch": "yarn tsc --watch",
+    "build-watch": "yarn build --watch",
     "clean-dist": "node --eval \"require('shelljs').rm('-rf', 'dist')\"",
     "dev": "concurrently --kill-others --raw --success first \"yarn build-watch\" \"yarn test-watch\"",
     "lint": "tslint --project tsconfig.json",
@@ -33,7 +33,7 @@
     "@types/jasmine": "^2.6.0",
     "@types/jsonwebtoken": "^7.2.3",
     "@types/node": "^8.0.30",
-    "@types/shelljs": "^0.7.4",
+    "@types/shelljs": "^0.8.0",
     "@types/supertest": "^2.0.3",
     "concurrently": "^3.5.0",
     "nodemon": "^1.12.1",

aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock

@@ -69,9 +69,9 @@
     "@types/express-serve-static-core" "*"
     "@types/mime" "*"
 
-"@types/shelljs@^0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.7.4.tgz#137b5f31306eaff4de120ffe5b9d74b297809cfc"
+"@types/shelljs@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.8.0.tgz#0caa56b68baae4f68f44e0dd666ab30b098e3632"
   dependencies:
     "@types/glob" "*"
     "@types/node" "*"

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/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/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/router/src/app/compose-message.component.ts

@@ -15,6 +15,7 @@ export class ComposeMessageComponent {
   @HostBinding('style.position')  position = 'absolute';
 
   details: string;
+  message: string;
   sending = false;
 
   constructor(private router: Router) {}

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-pt5/src/app/app.component.css

@@ -18,11 +18,11 @@ nav a {
   border-radius: 4px;
 }
 nav a:visited, a:link {
-  color: #607D8B;
+  color: #607d8b;
 }
 nav a:hover {
   color: #039be5;
-  background-color: #CFD8DC;
+  background-color: #cfd8dc;
 }
 nav a.active {
   color: #039be5;

aio/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css

@@ -33,11 +33,11 @@ h4 {
   color: #eee;
   max-height: 120px;
   min-width: 120px;
-  background-color: #607D8B;
+  background-color: #607d8b;
   border-radius: 2px;
 }
 .module:hover {
-  background-color: #EEE;
+  background-color: #eee;
   cursor: pointer;
   color: #607d8b;
 }

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/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/webpack/config/helpers.js

@@ -1,12 +0,0 @@
-// #docregion
-var path = require('path');
-
-var _root = path.resolve(__dirname, '..');
-
-function root(args) {
-  args = Array.prototype.slice.call(arguments, 0);
-  return path.join.apply(path, [_root].concat(args));
-}
-
-exports.root = root;
-// #enddocregion

aio/content/examples/webpack/config/karma-test-shim.js

@@ -1,17 +0,0 @@
-// #docregion
-Error.stackTraceLimit = Infinity;
-
-require('core-js/es6');
-require('core-js/es7/reflect');
-
-require('zone.js/dist/zone');
-require('zone.js/dist/zone-testing');
-
-var appContext = require.context('../src', true, /\.spec\.ts/);
-
-appContext.keys().forEach(appContext);
-
-var testing = require('@angular/core/testing');
-var browser = require('@angular/platform-browser-dynamic/testing');
-
-testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

aio/content/examples/webpack/config/karma.conf.js

@@ -1,39 +0,0 @@
-// #docregion
-var webpackConfig = require('./webpack.test');
-
-module.exports = function (config) {
-  var _config = {
-    basePath: '',
-
-    frameworks: ['jasmine'],
-
-    files: [
-      {pattern: './config/karma-test-shim.js', watched: false}
-    ],
-
-    preprocessors: {
-      './config/karma-test-shim.js': ['webpack', 'sourcemap']
-    },
-
-    webpack: webpackConfig,
-
-    webpackMiddleware: {
-      stats: 'errors-only'
-    },
-
-    webpackServer: {
-      noInfo: true
-    },
-
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: false,
-    browsers: ['Chrome'],
-    singleRun: true
-  };
-
-  config.set(_config);
-};
-// #enddocregion

aio/content/examples/webpack/config/webpack.common.js

@@ -1,81 +0,0 @@
-// #docplaster
-// #docregion
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var helpers = require('./helpers');
-
-module.exports = {
-  // #docregion entries, one-entry, two-entries
-  entry: {
-    // #enddocregion one-entry, two-entries
-    'polyfills': './src/polyfills.ts',
-    // #docregion two-entries
-    'vendor': './src/vendor.ts',
-    // #docregion one-entry
-    'app': './src/main.ts'
-  },
-  // #enddocregion entries, one-entry, two-entries
-
-  // #docregion resolve
-  resolve: {
-    extensions: ['.ts', '.js']
-  },
-  // #enddocregion resolve
-
-  // #docregion loaders
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        loaders: [
-          {
-            loader: 'awesome-typescript-loader',
-            options: { configFileName: helpers.root('src', 'tsconfig.json') }
-          } , 'angular2-template-loader'
-        ]
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader'
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-        loader: 'file-loader?name=assets/[name].[hash].[ext]'
-      },
-      {
-        test: /\.css$/,
-        exclude: helpers.root('src', 'app'),
-        loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
-      },
-      {
-        test: /\.css$/,
-        include: helpers.root('src', 'app'),
-        loader: 'raw-loader'
-      }
-    ]
-  },
-  // #enddocregion loaders
-
-  // #docregion plugins
-  plugins: [
-    // Workaround for angular/angular#11580
-    new webpack.ContextReplacementPlugin(
-      // The (\\|\/) piece accounts for path separators in *nix and Windows
-      /angular(\\|\/)core(\\|\/)@angular/,
-      helpers.root('./src'), // location of your src
-      {} // a map of your routes
-    ),
-
-    new webpack.optimize.CommonsChunkPlugin({
-      name: ['app', 'vendor', 'polyfills']
-    }),
-
-    new HtmlWebpackPlugin({
-      template: 'src/index.html'
-    })
-  ]
-  // #enddocregion plugins
-};
-// #enddocregion
-

aio/content/examples/webpack/config/webpack.dev.js

@@ -1,26 +0,0 @@
-// #docregion
-var webpackMerge = require('webpack-merge');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var commonConfig = require('./webpack.common.js');
-var helpers = require('./helpers');
-
-module.exports = webpackMerge(commonConfig, {
-  devtool: 'cheap-module-eval-source-map',
-
-  output: {
-    path: helpers.root('dist'),
-    publicPath: '/',
-    filename: '[name].js',
-    chunkFilename: '[id].chunk.js'
-  },
-
-  plugins: [
-    new ExtractTextPlugin('[name].css')
-  ],
-
-  devServer: {
-    historyApiFallback: true,
-    stats: 'minimal'
-  }
-});
-// #enddocregion

aio/content/examples/webpack/config/webpack.prod.js

@@ -1,41 +0,0 @@
-// #docregion
-var webpack = require('webpack');
-var webpackMerge = require('webpack-merge');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var commonConfig = require('./webpack.common.js');
-var helpers = require('./helpers');
-
-const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
-
-module.exports = webpackMerge(commonConfig, {
-  devtool: 'source-map',
-
-  output: {
-    path: helpers.root('dist'),
-    publicPath: '/',
-    filename: '[name].[hash].js',
-    chunkFilename: '[id].[hash].chunk.js'
-  },
-
-  plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
-      mangle: {
-        keep_fnames: true
-      }
-    }),
-    new ExtractTextPlugin('[name].[hash].css'),
-    new webpack.DefinePlugin({
-      'process.env': {
-        'ENV': JSON.stringify(ENV)
-      }
-    }),
-    new webpack.LoaderOptionsPlugin({
-      htmlLoader: {
-        minimize: false // workaround for ng2
-      }
-    })
-  ]
-});
-
-// #enddocregion

aio/content/examples/webpack/config/webpack.test.js

@@ -1,55 +0,0 @@
-// #docregion
-var webpack = require('webpack');
-var helpers = require('./helpers');
-
-module.exports = {
-  devtool: 'inline-source-map',
-
-  resolve: {
-    extensions: ['.ts', '.js']
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        loaders: [
-          {
-            loader: 'awesome-typescript-loader',
-            options: { configFileName: helpers.root('src', 'tsconfig.json') }
-          } , 'angular2-template-loader'
-        ]
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader'
-
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-        loader: 'null-loader'
-      },
-      {
-        test: /\.css$/,
-        exclude: helpers.root('src', 'app'),
-        loader: 'null-loader'
-      },
-      {
-        test: /\.css$/,
-        include: helpers.root('src', 'app'),
-        loader: 'raw-loader'
-      }
-    ]
-  },
-
-  plugins: [
-    new webpack.ContextReplacementPlugin(
-      // The (\\|\/) piece accounts for path separators in *nix and Windows
-      /angular(\\|\/)core(\\|\/)@angular/,
-      helpers.root('./src'), // location of your src
-      {} // a map of your routes
-    )
-  ]
-}
-
-// #enddocregion

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

@@ -1,21 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('QuickStart E2E Tests', function () {
-
-  let expectedMsg = 'Hello from Angular App with Webpack';
-
-  beforeEach(function () {
-    browser.get('');
-  });
-
-  it(`should display: ${expectedMsg}`, function () {
-    expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
-  });
-
-  it('should display an image', function () {
-    expect(element(by.css('img')).isPresent()).toBe(true);
-  });
-
-});

aio/content/examples/webpack/example-config.json

@@ -1,5 +0,0 @@
-{
-  "build": "build:webpack",
-  "run": "serve:cli",
-  "projectType": "systemjs"
-}

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

@@ -1,2 +0,0 @@
-// #docregion
-module.exports = require('./config/karma.conf.js');

aio/content/examples/webpack/package.webpack.json

@@ -1,49 +0,0 @@
-{
-  "name": "angular2-webpack",
-  "version": "1.0.0",
-  "description": "A webpack starter for Angular",
-  "scripts": {
-    "start": "webpack-dev-server --inline --progress --port 8080",
-    "test": "karma start",
-    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@angular/common": "~4.2.0",
-    "@angular/compiler": "~4.2.0",
-    "@angular/core": "~4.2.0",
-    "@angular/forms": "~4.2.0",
-    "@angular/http": "~4.2.0",
-    "@angular/platform-browser": "~4.2.0",
-    "@angular/platform-browser-dynamic": "~4.2.0",
-    "@angular/router": "~4.2.0",
-    "core-js": "^2.4.1",
-    "rxjs": "5.0.1",
-    "zone.js": "^0.8.4"
-  },
-  "devDependencies": {
-    "@types/node": "^6.0.45",
-    "@types/jasmine": "2.5.36",
-    "angular2-template-loader": "^0.6.0",
-    "awesome-typescript-loader": "^3.0.4",
-    "css-loader": "^0.26.1",
-    "extract-text-webpack-plugin": "2.0.0-beta.5",
-    "file-loader": "^0.9.0",
-    "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.16.1",
-    "jasmine-core": "^2.4.1",
-    "karma": "^1.2.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-jasmine": "^1.0.2",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.1",
-    "null-loader": "^0.1.1",
-    "raw-loader": "^0.5.1",
-    "rimraf": "^2.5.2",
-    "style-loader": "^0.13.1",
-    "typescript": "~2.3.1",
-    "webpack": "2.2.1",
-    "webpack-dev-server": "2.4.1",
-    "webpack-merge": "^3.0.0"
-  }
-}

aio/content/examples/webpack/src/app/app.component.css

@@ -1,9 +0,0 @@
-/* #docregion */
-main {
-  padding: 1em;
-  font-family: Arial, Helvetica, sans-serif;
-  text-align: center;
-  margin-top: 50px;
-  display: block;
-}
-/* #enddocregion */

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

@@ -1,7 +0,0 @@
-<!-- #docregion -->
-<main>
-  <h1>Hello from Angular App with Webpack</h1>
-
-  <img src="../assets/images/angular.png">
-</main>
-<!-- #enddocregion -->

aio/content/examples/webpack/src/app/app.component.spec.ts

@@ -1,16 +0,0 @@
-// #docregion
-import { TestBed } from '@angular/core/testing';
-
-import { AppComponent } from './app.component';
-
-describe('App', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({ declarations: [AppComponent]});
-  });
-
-  it ('should work', () => {
-    let fixture = TestBed.createComponent(AppComponent);
-    expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
-  });
-});
-// #enddocregion

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

@@ -1,16 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion component
-import { Component } from '@angular/core';
-
-// #enddocregion component
-import '../assets/css/styles.css';
-
-// #docregion component
-@Component({
-  selector: 'my-app',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent { }
-// #enddocregion

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

@@ -1,16 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  imports: [
-    BrowserModule
-  ],
-  declarations: [
-    AppComponent
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }

aio/content/examples/webpack/src/assets/css/styles.css

@@ -1,6 +0,0 @@
-/* #docregion */
-body {
-    background: #0147A7;
-    color: #fff;
-}
-/* #enddocregion */

aio/content/examples/webpack/src/index.html

@@ -1,14 +0,0 @@
-<!-- #docregion -->
-<!DOCTYPE html>
-<html>
-  <head>
-    <base href="/">
-    <title>Angular With Webpack</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-</html>
-<!-- #enddocregion -->

aio/content/examples/webpack/src/main.ts

@@ -1,14 +0,0 @@
-// #docregion
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { enableProdMode } from '@angular/core';
-
-import { AppModule } from './app/app.module';
-
-// #docregion enable-prod
-if (process.env.ENV === 'production') {
-  enableProdMode();
-}
-// #enddocregion enable-prod
-
-platformBrowserDynamic().bootstrapModule(AppModule);
-// #enddocregion

aio/content/examples/webpack/src/polyfills.ts

@@ -1,12 +0,0 @@
-// #docregion
-import 'core-js/es6';
-import 'core-js/es7/reflect';
-require('zone.js/dist/zone');
-
-if (process.env.ENV === 'production') {
-  // Production
-} else {
-  // Development and test
-  Error['stackTraceLimit'] = Infinity;
-  require('zone.js/dist/long-stack-trace-zone');
-}

aio/content/examples/webpack/src/tsconfig.1.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es2015", "dom"],
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true
-  }
-}

aio/content/examples/webpack/src/vendor.ts

@@ -1,18 +0,0 @@
-// TODO(i): this no longer works. we need to review this example and if absolutely necessary rewrite it to use the
-// rxjs-compat package
-
-// #docregion
-// Angular
-import '@angular/platform-browser';
-import '@angular/platform-browser-dynamic';
-import '@angular/core';
-import '@angular/common';
-import '@angular/http';
-import '@angular/router';
-
-// RxJS
-import 'rxjs';
-
-// Other vendors for example jQuery, Lodash or Bootstrap
-// You can import js, ts, css, sass, ...
-// #enddocregion

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

@@ -1,3 +0,0 @@
-// #docregion
-module.exports = require('./config/webpack.dev.js');
-// #enddocregion

aio/content/examples/webpack/zipper.json

@@ -1,12 +0,0 @@
-{
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js",
-    "!**/*.[0-9].*",
-    "config/**/*",
-    "webpack.config.js",
-    "karma.webpack.conf.js"
-  ],
-  "removeSystemJsConfig": true,
-  "type": "webpack"
-}

aio/content/guide/api-page-class.md

@@ -1,175 +0,0 @@
-<div class="breadcrumb">
-    <a href="#">API<a> / <a href="#">@core<a>
-</div>
-<header class="api-header">
-    <h1><label class="api-status-label experimental">experimental</label><label class="api-type-label class">class</label>Class Name</h1>
-</header>
-<div class="page-actions">
-    <a href="#"><label class="raised page-label"><i class="material-icons">mode_edit</i>suggest edits</label></a>
-    <a href="#"><label class="raised page-label"><i class="material-icons">code</i>view source</label></a>
-</div>
-<p>Class description goes here. This is a short and to the point one or two sentence description that easily introduces the reader to the class.</p>
-<div class="api-body">
-    <section>
-        <h2>Overview</h2>
-        <code-example language="ts" hidecopy="true" ng-version="5.2.0"><aio-code class="simple-code" ng-reflect-ng-class="[object Object]" ng-reflect-code="
-    class <a href=&quot;api/core/Compi" ng-reflect-hide-copy="true" ng-reflect-language="ts" ng-reflect-linenums="" ng-reflect-path="" ng-reflect-region="" ng-reflect-title=""><pre class="prettyprint lang-ts">
-        <code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><a href="api/core/Compiler" class="code-anchor"><span class="typ">Compiler</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#compileModuleSync"><span class="pln">compileModuleSync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">NgModuleFactory</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;</span></a><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#compileModuleAsync"><span class="pln">compileModuleAsync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">&lt;</span><span class="typ">NgModuleFactory</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;&gt;</span></a><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#compileModuleAndAllComponentsSync"><span class="pln">compileModuleAndAllComponentsSync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">ModuleWithComponentFactories</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;</span></a><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#compileModuleAndAllComponentsAsync"><span class="pln">compileModuleAndAllComponentsAsync</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;(</span><span class="pln">moduleType</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;):</span><span class="pln"> </span><span class="typ">Promise</span><span class="pun">&lt;</span><span class="typ">ModuleWithComponentFactories</span><span class="pun">&lt;</span><span class="pln">T</span><span class="pun">&gt;&gt;</span></a><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#clearCache"><span class="pln">clearCache</span><span class="pun">():</span><span class="pln"> </span><span class="kwd">void</span></a><span class="pln">
-    </span><a class="code-anchor" href="api/core/Compiler#clearCacheFor"><span class="pln">clearCacheFor</span><span class="pun">(</span><span class="pln">type</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Type</span><span class="pun">&lt;</span><span class="pln">any</span><span class="pun">&gt;)</span></a><span class="pln">
-    </span><span class="pun">}</span></code>
-        </pre></aio-code></code-example>
-    </section>
-    <section>
-        <h2>Description</h2>
-        <p>The longer class description goes here which can include multiple paragraphs.</p>
-        </p>Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.</p>
-        <h3>Subclasses</h3>
-        <ul>
-            <li><a href="#">Subclass1</a></li>
-            <li><a href="#">Subclass2</a></li>
-            <li><a href="#">Subclass3</a></li>
-        </ul>
-        <h3>See Also</h3>
-        <ul>
-            <li><a href="#">Link1</a></li>
-            <li><a href="#">Link2</a></li>
-        </ul>
-    </section>
-    <section>
-        <h2>Constructor</h2>
-        <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
-        <aio-code class="simple-code"><pre class="prettyprint lang-">   
-        <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
-        </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
-    </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
-        </pre></aio-code></code-example>
-    </section>
-    <section>
-        <h2>Properties</h2>
-        <table class="is-full-width list-table">
-        <thead>
-        <tr>
-        <th>Property</th>
-        <th>Type</th>
-        <th>Description</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-        <td>
-            <code><strong>Property1</strong></code>
-        </td>
-        <td><label class="property-type-label type">Type</label></td>
-        <td>Description goes here</td>
-        </tr>
-        <tr>
-        <td>
-            <code><strong>Property2</strong></code>
-        </td>
-        <td>Type</td>
-        <td>Description goes here</td>
-        </tr>
-        <tr>
-        <td>
-            <code><strong>Property3</strong></code>
-        </td>
-        <td>Type</td>
-        <td>Description goes here</td>
-        </tr>
-        </tbody>
-    </table>
-    </section>
-    <section class="api-method">
-        <h2>Methods</h2>
-        <table class="is-full-width item-table">
-        <thead>
-        <tr>
-        <th>Method1Name( )</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-        <td>
-            <p>Description goes here</p>
-            <br>
-            <p>Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.</p>
-        </td>
-        </tr>
-        </tbody>
-    </table>
-    <table class="is-full-width api-method item-table">
-        <thead>
-        <tr>
-        <th>Method2Name( )</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-        <td>
-            <p>Description goes here</p>
-            <hr>
-            <h5>Declaration</h5>
-            <code-example language="ts" hidecopy="true" ng-version="5.2.0">
-                <aio-code class="simple-code"><pre class="prettyprint lang-ts">
-                    <code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><a href="api/animations/AnimationBuilder" class="code-anchor"><span class="typ">AnimationBuilder</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><a class="code-anchor" href="api/animations/AnimationBuilder#build"><span class="pln">build</span><span class="pun">(</span><span class="pln">animation</span><span class="pun">:</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pun">[]):</span><span class="pln"> </span><span class="typ">AnimationFactory</span></a><span class="pln"></span><span class="pun">}</span></code></pre>
-                </aio-code>
-            </code-example>
-            <h6>Parameters</h6>
-            <h6>Returns</h6>
-            <p>Returns information and results goes here.</p>
-            <h6>Errors</h6>
-            <p>Error information goes here</p>
-            <hr>
-            <p>Further details provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.</p><hr>
-            <h6>Overloads</h6>
-                <table class="is-full-width">
-                <tbody>
-                <tr>
-                <td>
-                    <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
-        <aio-code class="simple-code"><pre class="prettyprint lang-">   
-        <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
-        </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
-    </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
-        </pre></aio-code></code-example>
-                </td>
-                <td>Description goes here</td>
-                </tr>
-                <tr>
-                <td>
-                    <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
-        <aio-code class="simple-code"><pre class="prettyprint lang-">   
-        <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
-        </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
-    </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
-        </pre></aio-code></code-example>
-                </td>
-                <td>Description goes here</td>
-                </tr>
-                </tbody>
-            </table>
-            <hr>
-            <h5>Example: Descriptive Title of Method Example</h5>
-            <p>Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.</p>
-        </td>
-        </tr>
-        </tbody>
-    </table>
-    </section>
-    <section>
-        <h2>Example: Descriptive Title of Combined Example Goes Here</h2>
-        <p>Intro description text about what the example is and how it can be used.</p>
-            <code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
-        <aio-code class="simple-code"><pre class="prettyprint lang-">   
-        <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
-        </span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
-    </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
-        </pre></aio-code></code-example>
-        <p>Further explanation provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.</p>
-    </section>
-</div>

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

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

@@ -439,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/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/releases.md

@@ -74,22 +74,58 @@ The following table contains our current target release dates for the next two m
 
 
 {@a lts}
-## Long-term support
+{@a support}
+## Support policy
 
-All of our releases are supported actively for about 6 months (until the next major release), and then they are supported through long-term support (LTS) for another 12 months.
+All of our major releases are supported for 18 months. 
 
-During the LTS period, only critical fixes and security patches will be merged and released.
+* 6 months of active support, during which regularly-scheduled updates and patches are released, as described above in [Release frequency](#frequency "Release frequency").
 
-The LTS state of one major version starts on the day of the next major release. LTS status ends approximately one year later, when we release another major version. 
+* 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>
 
- Version     | LTS Start Date | LTS End Date
- ----------- | -------------- | ------------
- ^4.0.0      | October 2017   | October 2018
- ^5.0.0      | April 2018     | April 2019
- ^6.0.0      | October 2018   | October 2019
+    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>
 
 
 
@@ -106,7 +142,7 @@ To make these transitions as easy as possible, we make two commitments to you:
 
 To help ensure that you have sufficient time and a clear path to update, this is our deprecation policy:
 
-* When announce deprecated features in the [change log](https://github.com/angular/angular/blob/master/CHANGELOG.md "Angular change log").
+* 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.
 
@@ -127,8 +163,6 @@ Any changes to the public API surface will be done using the versioning, support
 {@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 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 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. 
-
-Angular Labs projects typically are in separate branches in the Angular repo, clearly separated from the main Angular codebase. 
+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/styleguide.md

@@ -933,29 +933,18 @@ As always, strive for consistency.
 
 <a href="#toc">Back to top</a>
 
-{@a 02-06}
+{@a 05-02}
 
-### Directive selectors
+### Component selectors
 
-#### Style 02-06
+#### Style 05-02
 
 
 <div class="s-rule do">
 
 
 
-**Do** Use lower camel case for naming the selectors of directives.
-
-
-</div>
-
-
-
-<div class="s-why">
-
-
-
-**Why?** Keeps the names of the properties defined in the directives that are bound to the view consistent with the attribute names.
+**Do** use _dashed-case_ or _kebab-case_ for naming the element selectors of components.
 
 
 </div>
@@ -966,16 +955,40 @@ As always, strive for consistency.
 
 
 
-**Why?** The Angular HTML parser is case sensitive and recognizes lower camel case.
+**Why?** Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
 
 
 </div>
 
+
+
+<code-example path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
+
+</code-example>
+
+
+
+
+
+<code-tabs>
+
+  <code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
+
+  </code-pane>
+
+  <code-pane title="app/app.component.html" path="styleguide/src/05-02/app/app.component.html">
+
+  </code-pane>
+
+</code-tabs>
+
+
+
 <a href="#toc">Back to top</a>
 
 {@a 02-07}
 
-### Custom prefix for components
+### Component custom prefix
 
 #### Style 02-07
 
@@ -1078,11 +1091,51 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
 
 
 
+<a href="#toc">Back to top</a>
 
+{@a 02-06}
+
+### Directive selectors
+
+#### Style 02-06
+
+
+<div class="s-rule do">
+
+
+
+**Do** Use lower camel case for naming the selectors of directives.
+
+
+</div>
+
+
+
+<div class="s-why">
+
+
+
+**Why?** Keeps the names of the properties defined in the directives that are bound to the view consistent with the attribute names.
+
+
+</div>
+
+
+
+<div class="s-why-last">
+
+
+
+**Why?** The Angular HTML parser is case sensitive and recognizes lower camel case.
+
+
+</div>
+
+<a href="#toc">Back to top</a>
 
 {@a 02-08}
 
-### Custom prefix for directives
+### Directive custom prefix
 
 #### Style 02-08
 
@@ -3056,9 +3109,9 @@ module are referenced across the entire application.
 
 
 
-**Avoid** providing services in shared modules. Services are usually
+**Consider** _not_ providing services in shared modules. Services are usually
 singletons that are provided once for the entire application or
-in a particular feature module.
+in a particular feature module. There are exceptions, however. For example, in the sample code that follows, notice that the `SharedModule` provides `FilterTextService`. This is acceptable here because the service is stateless;that is, the consumers of the service aren't impacted by new instances.
 
 
 </div>
@@ -3710,59 +3763,6 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
 
 ## Components
 
-{@a 05-02}
-
-### Component selector names
-
-#### Style 05-02
-
-
-<div class="s-rule do">
-
-
-
-**Do** use _dashed-case_ or _kebab-case_ for naming the element selectors of components.
-
-
-</div>
-
-
-
-<div class="s-why-last">
-
-
-
-**Why?** Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
-
-
-</div>
-
-
-
-<code-example path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts" region="example" title="app/heroes/shared/hero-button/hero-button.component.ts">
-
-</code-example>
-
-
-
-
-
-<code-tabs>
-
-  <code-pane title="app/heroes/shared/hero-button/hero-button.component.ts" path="styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts" region="example">
-
-  </code-pane>
-
-  <code-pane title="app/app.component.html" path="styleguide/src/05-02/app/app.component.html">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-<a href="#toc">Back to top</a>
-
 {@a 05-03}
 
 ### Components as elements

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

@@ -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 
@@ -399,7 +398,7 @@ But a component is more than just its class.
 A component interacts with the DOM and with other components.
 The _class-only_ tests can tell you about class behavior.
 They cannot tell you if the component is going to render properly,
-respond to user input and gestures, or integrate with its parent and and child components.
+respond to user input and gestures, or integrate with its parent and child components.
 
 None of the _class-only_ tests above can answer key questions about how the
 components actually behave on screen.
@@ -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/typescript-configuration.md

@@ -132,7 +132,7 @@ QuickStart identifies two *typings*, or `d.ts`, files:
 * [jasmine](http://jasmine.github.io/) typings for the Jasmine test framework.
 
 * [node](https://www.npmjs.com/package/@types/node) for code that references objects in the *Node.js®* environment;
-you can view an example in the [webpack](guide/webpack) page.
+
 
 QuickStart doesn't require these typings but many of the samples do.
 

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,13 +470,38 @@ 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:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
@@ -448,7 +510,7 @@ First add the _build_ and _serve_ commands to the `scripts` section of the `pack
     "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
     ...
 }
-</code-example>
+```
 
 {@a build}
 

aio/content/guide/webpack.md

@@ -1,801 +0,0 @@
-# Webpack: An Introduction
-
-<style>
-  h4 {font-size: 17px !important; text-transform: none !important;}
-  .syntax { font-family: Consolas, 'Lucida Sans', Courier, sans-serif; color: black; font-size: 85%; }
-
-</style>
-
-
-
-[**Webpack**](https://webpack.github.io/) is a popular module bundler,
-a tool for bundling application source code in convenient _chunks_
-and for loading that code from a server into a browser.
-
-It's an excellent alternative to the *SystemJS* approach used elsewhere in the documentation.
-This guide offers a taste of Webpack and explains how to use it with Angular applications.
-
-
-{@a top}
-
-<!--
-
-
-# Contents
-
-* [What is Webpack?](guide/webpack#what-is-webpack)
-
-  * [Entries and outputs](guide/webpack#entries-outputs)
-  * [Multiple bundles](guide/webpack#multiple-bundles)
-  * [Loaders](guide/webpack#loaders)
-  * [Plugins](guide/webpack#plugins)
-
-* [Configuring Webpack](guide/webpack#configure-webpack)
-
-  * [Polyfills](guide/webpack#polyfills)
-  * [Common configuration](guide/webpack#common-configuration)
-  * [Inside `webpack.common.js`](guide/webpack#inside-webpack-commonjs)
-
-    * [entry](guide/webpack#common-entries)
-    * [resolve extension-less imports](guide/webpack#common-resolves)
-    * [`module.rules`](guide/webpack#common-rules)
-    * [Plugins](guide/webpack#plugins)
-    * [`CommonsChunkPlugin`](guide/webpack#commons-chunk-plugin)
-    * [`HtmlWebpackPlugin`](guide/webpack#html-webpack-plugin)
-
-  * [Environment specific configuration](guide/webpack#environment-configuration)
-  * [Development configuration](guide/webpack#development-configuration)
-  * [Production configuration](guide/webpack#production-configuration)
-  * [Test configuration](guide/webpack#test-configuration)
-
-* [Trying it out](guide/webpack#try)
-* [Highlights](guide/webpack#highlights)
-* [Conclusion](guide/webpack#conclusion)
-
--->
-
-You can also <a href="generated/zips/webpack/webpack.zip" target="_blank">download the final result.</a>
-
-{@a what-is-webpack}
-
-## What is Webpack?
-
-Webpack is a powerful module bundler.
-A _bundle_ is a JavaScript file that incorporates _assets_ that *belong* together and
-should be served to the client in a response to a single file request.
-A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.
-
-Webpack roams over your application source code,
-looking for `import` statements, building a dependency graph, and emitting one or more _bundles_.
-With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.
-
-You determine what Webpack does and how it does it with a JavaScript configuration file, `webpack.config.js`.
-
-
-{@a entries-outputs}
-
-
-
-### Entries and outputs
-
-You supply Webpack with one or more *entry* files and let it find and incorporate the dependencies that radiate from those entries.
-The one entry point file in this example is the application's root file, `src/main.ts`:
-
-
-<code-example path="webpack/config/webpack.common.js" region="one-entry" title="webpack.config.js (single entry)" linenums="false">
-
-</code-example>
-
-
-
-Webpack inspects that file and traverses its `import` dependencies recursively.
-
-
-<code-example path="webpack/src/app/app.component.ts" region="component" title="src/main.ts" linenums="false">
-
-</code-example>
-
-
-
-It sees that you're importing `@angular/core` so it adds that to its dependency list for potential inclusion in the bundle.
-It opens the `@angular/core` file and follows _its_ network of `import` statements until it has built the complete dependency graph from `main.ts` down.
-
-Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration:
-
-<code-example name="webpack.config.js (single output)" language="javascript">
-  output: {
-    filename: 'app.js'
-  }
-
-</code-example>
-
-This `app.js` output bundle is a single JavaScript file that contains the application source and its dependencies.
-You'll load it later with a `<script>` tag in the `index.html`.
-
-
-{@a multiple-bundles}
-
-
-#### Multiple bundles
-You probably don't want one giant bundle of everything.
-It's preferable to separate the volatile application app code from comparatively stable vendor code modules.
-
-Change the configuration so that it has two entry points, `main.ts` and `vendor.ts`:
-
-
-<code-example language="javascript">
-  entry: {
-    app: 'src/app.ts',
-    vendor: 'src/vendor.ts'
-  },
-
-  output: {
-    filename: '[name].js'
-  }
-
-</code-example>
-
-
-Webpack constructs two separate dependency graphs
-and emits *two* bundle files, one called `app.js` containing only the application code and
-another called `vendor.js` with all the vendor dependencies.
-
-
-<div class="l-sub-section">
-
-
-
-The `[name]` in the output name is a *placeholder* that a Webpack plugin replaces with the entry names,
-`app` and `vendor`. Plugins are [covered later](guide/webpack#commons-chunk-plugin) in the guide.
-
-
-</div>
-
-
-
-To tell Webpack what belongs in the vendor bundle,
-add a `vendor.ts` file that only imports the application's third-party modules:
-
-<code-example path="webpack/src/vendor.ts" title="src/vendor.ts" linenums="false">
-
-</code-example>
-
-
-
-{@a loaders}
-
-
-
-### Loaders
-
-Webpack can bundle any kind of file: JavaScript, TypeScript, CSS, SASS, LESS, images, HTML, fonts, whatever.
-Webpack _itself_ only understands JavaScript files.
-Teach it to transform non-JavaScript file into their JavaScript equivalents with *loaders*.
-Configure loaders for TypeScript and CSS as follows.
-
-
-<code-example language="javascript">
-  rules: [
-    {
-      test: /\.ts$/,
-      loader: 'awesome-typescript-loader'
-    },
-    {
-      test: /\.css$/,
-      loaders: 'style-loader!css-loader'
-    }
-  ]
-
-</code-example>
-
-
-
-When Webpack encounters `import` statements like the following,
-it applies the `test` RegEx patterns.
-
-
-<code-example language="typescript">
-  import { AppComponent } from './app.component.ts';
-
-  import 'uiframework/dist/uiframework.css';
-
-</code-example>
-
-
-
-When a pattern matches the filename, Webpack processes the file with the associated loader.
-
-The first `import` file matches the `.ts` pattern so Webpack processes it with the `awesome-typescript-loader`.
-The imported file doesn't match the second pattern so its loader is ignored.
-
-The second `import` matches the second `.css` pattern for which you have *two* loaders chained by the (!) character.
-Webpack applies chained loaders *right to left*. So it applies
-the `css` loader first to flatten CSS `@import` and `url(...)` statements.
-Then it applies the `style` loader to append the css inside `<style>` elements on the page.
-
-
-{@a plugins}
-
-
-
-### Plugins
-
-Webpack has a build pipeline with well-defined phases.
-Tap into that pipeline with plugins such as the `uglify` minification plugin:
-
-<code-example language="javascript">
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin()
-  ]
-
-</code-example>
-
-
-
-{@a configure-webpack}
-
-
-
-## Configuring Webpack
-
-After that brief orientation, you are ready to build your own Webpack configuration for Angular apps.
-
-Begin by setting up the development environment.
-
-Create a new project folder.
-
-<code-example language="sh" class="code-shell">
-  mkdir angular-webpack
-  cd    angular-webpack
-
-</code-example>
-
-
-
-Add these files:
-
-
-<code-tabs>
-
-  <code-pane title="package.json" path="webpack/package.webpack.json">
-
-  </code-pane>
-
-  <code-pane title="src/tsconfig.json" path="webpack/src/tsconfig.1.json">
-
-  </code-pane>
-
-  <code-pane title="webpack.config.js" path="webpack/webpack.config.js">
-
-  </code-pane>
-
-  <code-pane title="karma.conf.js" path="webpack/karma.webpack.conf.js">
-
-  </code-pane>
-
-  <code-pane title="config/helpers.js" path="webpack/config/helpers.js">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-<div class="l-sub-section">
-
-
-
-Many of these files should be familiar from other Angular documentation guides,
-especially the [Typescript configuration](guide/typescript-configuration) and
-[npm packages](guide/npm-packages) guides.
-
-Webpack, the plugins, and the loaders are also installed as packages.
-They are listed in the updated `packages.json`.
-
-
-</div>
-
-
-
-Open a terminal window and install the npm packages.
-
-<code-example language="sh" class="code-shell">
-  npm install
-
-</code-example>
-
-
-
-{@a polyfills}
-
-
-
-### Polyfills
-
-You'll need polyfills to run an Angular application in most browsers as explained
-in the [Browser Support](guide/browser-support) guide.
-
-Polyfills should be bundled separately from the application and vendor bundles.
-Add a `polyfills.ts` like this one to the `src/` folder.
-
-
-<code-example path="webpack/src/polyfills.ts" title="src/polyfills.ts" linenums="false">
-
-</code-example>
-
-
-
-<div class="callout is-critical">
-
-
-
-<header>
-  Loading polyfills
-</header>
-
-
-
-Load `zone.js` early within `polyfills.ts`, immediately after the other ES6 and metadata shims.
-
-
-</div>
-
-
-
-Because this bundle file will load first, `polyfills.ts` is also a good place to configure the browser environment
-for production or development.
-
-
-{@a common-configuration}
-
-
-
-### Common configuration
-
-Developers typically have separate configurations for development, production, and test environments.
-All three have a lot of configuration in common.
-
-Gather the common configuration in a file called `webpack.common.js`.
-
-
-<code-example path="webpack/config/webpack.common.js" title="config/webpack.common.js" linenums="false">
-
-</code-example>
-
-
-
-{@a inside-webpack-commonjs}
-
-
-### Inside _webpack.common.js_
-Webpack is a NodeJS-based tool that reads configuration from a JavaScript commonjs module file.
-
-The configuration imports dependencies with `require` statements
-and exports several objects as properties of a `module.exports` object.
-
-* [`entry`](guide/webpack#common-entries)&mdash;the entry-point files that define the bundles.
-* [`resolve`](guide/webpack#common-resolves)&mdash;how to resolve file names when they lack extensions.
-* [`module.rules`](guide/webpack#common-rules)&mdash; `module` is an object with `rules` for deciding how files are loaded.
-* [`plugins`](guide/webpack#common-plugins)&mdash;creates instances of the plugins.
-
-
-{@a common-entries}
-
-
-#### _entry_
-
-The first export is the `entry` object:
-
-
-<code-example path="webpack/config/webpack.common.js" region="entries" title="config/webpack.common.js" linenums="false">
-
-</code-example>
-
-
-
-This `entry` object defines the three bundles:
-
-* `polyfills`&mdash;the polyfills needed to run Angular applications in most modern browsers.
-* `vendor`&mdash;the third-party dependencies such as Angular, lodash, and bootstrap.css.
-* `app`&mdash;the application code.
-
-
-{@a common-resolves}
-
-
-#### _resolve_ extension-less imports
-
-The app will `import` dozens if not hundreds of JavaScript and TypeScript files.
-You could write `import` statements with explicit extensions like this example:
-
-<code-example language="typescript">
-  import { AppComponent } from './app.component.ts';
-
-</code-example>
-
-
-But most `import` statements don't mention the extension at all.
-Tell Webpack to resolve extension-less file requests by looking for matching files with
-`.ts` extension or `.js` extension (for regular JavaScript files and pre-compiled TypeScript files).
-
-
-<code-example path="webpack/config/webpack.common.js" region="resolve" title="config/webpack.common.js" linenums="false">
-
-</code-example>
-
-
-
-<div class="l-sub-section">
-
-
-
-If Webpack should resolve extension-less files for styles and HTML,
-add `.css` and `.html` to the list.
-
-
-</div>
-
-
-
-{@a common-rules}
-
-
-
-
-#### _module.rules_
-Rules tell Webpack which loaders to use for each file, or module:
-
-
-<code-example path="webpack/config/webpack.common.js" region="loaders" title="config/webpack.common.js" linenums="false">
-
-</code-example>
-
-
-
-* `awesome-typescript-loader`&mdash;a loader to transpile the Typescript code to ES5, guided by the `tsconfig.json` file.
-* `angular2-template-loader`&mdash;loads angular components' template and styles.
-* `html-loader`&mdash;for component templates.
-* images/fonts&mdash;Images and fonts are bundled as well.
-* CSS&mdash;the first pattern matches application-wide styles; the second handles
-component-scoped styles (the ones specified in a component's `styleUrls` metadata property).
-
-<div class="l-sub-section">
-
-
-
-The first pattern is for the application-wide styles. It excludes `.css` files within the `src/app` directory
-where the component-scoped styles sit. The `ExtractTextPlugin` (described below) applies the `style` and `css`
-loaders to these files.
-
-The second pattern filters for component-scoped styles and loads them as strings via the `raw-loader`,
-which is what Angular expects to do with styles specified in a `styleUrls` metadata property.
-
-
-</div>
-
-
-
-<div class="l-sub-section">
-
-
-
-Multiple loaders can be chained using the array notation.
-
-
-</div>
-
-
-
-{@a common-plugins}
-
-
-
-
-#### _plugins_
-Finally, create instances of three plugins:
-
-
-<code-example path="webpack/config/webpack.common.js" region="plugins" title="config/webpack.common.js" linenums="false">
-
-</code-example>
-
-
-
-{@a commons-chunk-plugin}
-
-
-#### *CommonsChunkPlugin*
-
-The `app.js` bundle should contain only application code. All vendor code belongs in the `vendor.js` bundle.
-
-Of course the application code imports vendor code.
-On its own, Webpack is not smart enough to keep the vendor code out of the `app.js` bundle.
-The `CommonsChunkPlugin` does that job.
-
-<div class="l-sub-section">
-
-
-
-The `CommonsChunkPlugin` identifies the hierarchy among three _chunks_: `app` -> `vendor` -> `polyfills`.
-Where Webpack finds that `app` has shared dependencies with `vendor`, it removes them from `app`.
-It would remove `polyfills` from `vendor` if they shared dependencies, which they don't.
-
-
-</div>
-
-
-
-{@a html-webpack-plugin}
-
-
-#### _HtmlWebpackPlugin_
-
-Webpack generates a number of js and CSS files.
-You _could_ insert them into the `index.html` _manually_. That would be tedious and error-prone.
-Webpack can inject those scripts and links for you with the `HtmlWebpackPlugin`.
-
-
-{@a environment-configuration}
-
-
-
-### Environment-specific configuration
-
-The `webpack.common.js` configuration file does most of the heavy lifting.
-Create separate, environment-specific configuration files that build on `webpack.common`
-by merging into it the peculiarities particular to the target environments.
-
-These files tend to be short and simple.
-
-
-{@a development-configuration}
-
-
-
-### Development configuration
-
-Here is the `webpack.dev.js` development configuration file.
-
-
-<code-example path="webpack/config/webpack.dev.js" title="config/webpack.dev.js" linenums="false">
-
-</code-example>
-
-
-
-The development build relies on the Webpack development server, configured near the bottom of the file.
-
-Although you tell Webpack to put output bundles in the `dist` folder,
-the dev server keeps all bundles in memory; it doesn't write them to disk.
-You won't find any files in the `dist` folder, at least not any generated from *this development build*.
-
-
-The `HtmlWebpackPlugin`, added in `webpack.common.js`, uses the `publicPath` and the `filename` settings to generate
-appropriate `<script>` and `<link>` tags into the `index.html`.
-
-The CSS styles are buried inside the Javascript bundles by default. The `ExtractTextPlugin` extracts them into
-external `.css` files that the `HtmlWebpackPlugin` inscribes as `<link>` tags into the `index.html`.
-
-Refer to the [Webpack documentation](https://webpack.github.io/docs/) for details on these and
-other configuration options in this file.
-
-Grab the app code at the end of this guide and try:
-
-
-<code-example language="sh" class="code-shell">
-  npm start
-
-</code-example>
-
-
-
-{@a production-configuration}
-
-
-
-### Production configuration
-
-Configuration of a *production* build resembles *development* configuration with a few key changes.
-
-
-<code-example path="webpack/config/webpack.prod.js" title="config/webpack.prod.js" linenums="false">
-
-</code-example>
-
-
-
-You'll deploy the application and its dependencies to a real production server.
-You won't deploy the artifacts needed only in development.
-
-Put the production output bundle files in the `dist` folder.
-
-Webpack generates file names with cache-busting hash.
-Thanks to the `HtmlWebpackPlugin`, you don't have to update the `index.html` file when the hash changes.
-
-There are additional plugins:
-
-* *`NoEmitOnErrorsPlugin`&mdash;stops the build if there is an error.
-* *`UglifyJsPlugin`&mdash;minifies the bundles.
-* *`ExtractTextPlugin`&mdash;extracts embedded css as external files, adding cache-busting hash to the filename.
-* *`DefinePlugin`&mdash;use to define environment variables that you can reference within the application.
-* *`LoaderOptionsPlugins`&mdash;to override options of certain loaders.
-
-Thanks to the `DefinePlugin` and the `ENV` variable defined at top, you can enable Angular production mode like this:
-
-
-<code-example path="webpack/src/main.ts" region="enable-prod" title="src/main.ts" linenums="false">
-
-</code-example>
-
-
-
-Grab the app code at the end of this guide and try:
-
-
-<code-example language="sh" class="code-shell">
-  npm run build
-
-</code-example>
-
-
-
-{@a test-configuration}
-
-
-
-### Test configuration
-
-You don't need much configuration to run unit tests.
-You don't need the loaders and plugins that you declared for your development and production builds.
-You probably don't need to load and process the application-wide styles files for unit tests and doing so would slow you down;
-you'll use the `null` loader for those CSS files.
-
-You could merge the test configuration into the `webpack.common` configuration and override the parts you don't want or need.
-But it might be simpler to start over with a completely fresh configuration.
-
-
-<code-example path="webpack/config/webpack.test.js" title="config/webpack.test.js" linenums="false">
-
-</code-example>
-
-
-
-Reconfigure [Karma](https://karma-runner.github.io/1.0/index.html) to use Webpack to run the tests:
-
-
-<code-example path="webpack/config/karma.conf.js" title="config/karma.conf.js" linenums="false">
-
-</code-example>
-
-
-
-You don't precompile the TypeScript; Webpack transpiles the Typescript files on the fly, in memory, and feeds the emitted JS directly to Karma.
-There are no temporary files on disk.
-
-The `karma-test-shim` tells Karma what files to pre-load and
-primes the Angular test framework with test versions of the providers that every app expects to be pre-loaded.
-
-
-<code-example path="webpack/config/karma-test-shim.js" title="config/karma-test-shim.js" linenums="false">
-
-</code-example>
-
-
-
-Notice that you do _not_ load the application code explicitly.
-You tell Webpack to find and load the test files (the files ending in `.spec.ts`).
-Each spec file imports all&mdash;and only&mdash;the application source code that it tests.
-Webpack loads just _those_ specific application files and ignores the other files that you aren't testing.
-
-
-Grab the app code at the end of this guide and try:
-
-
-<code-example language="sh" class="code-shell">
-  npm test
-
-</code-example>
-
-{@a try}
-
-## Trying it out
-
-Here is the source code for a small application that bundles with the
-Webpack techniques covered in this guide.
-
-
-<code-tabs>
-
-  <code-pane title="src/index.html" path="webpack/src/index.html">
-
-  </code-pane>
-
-  <code-pane title="src/main.ts" path="webpack/src/main.ts">
-
-  </code-pane>
-
-  <code-pane title="src/assets/css/styles.css" path="webpack/src/assets/css/styles.css">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-<code-tabs>
-
-  <code-pane title="src/app/app.component.ts" path="webpack/src/app/app.component.ts">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.component.html" path="webpack/src/app/app.component.html">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.component.css" path="webpack/src/app/app.component.css">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.component.spec.ts" path="webpack/src/app/app.component.spec.ts">
-
-  </code-pane>
-
-  <code-pane title="src/app/app.module.ts" path="webpack/src/app/app.module.ts">
-
-  </code-pane>
-
-</code-tabs>
-
-
-
-The <code>app.component.html</code> displays this downloadable Angular logo
-<a href="assets/images/logos/angular/angular.png">
-<img src="assets/images/logos/angular/angular.png" height="40px" title="download Angular logo"></a>.
-Create a folder called `images` under the project's `assets` folder, then right-click (Cmd+click on Mac)
-on the image and download it to that folder.
-
-
-{@a bundle-ts}
-
-
-Here again are the TypeScript entry-point files that define the `polyfills` and `vendor` bundles.
-
-<code-tabs>
-
-  <code-pane title="src/polyfills.ts" path="webpack/src/polyfills.ts">
-
-  </code-pane>
-
-  <code-pane title="src/vendor.ts" path="webpack/src/vendor.ts">
-
-  </code-pane>
-
-</code-tabs>
-
-{@a highlights}
-
-<h3 class="no-toc">Highlights</h3>
-
-* There are no `<script>` or `<link>` tags in the `index.html`.
-The `HtmlWebpackPlugin` inserts them dynamically at runtime.
-
-* The `AppComponent` in `app.component.ts` imports the application-wide css with a simple `import` statement.
-
-* The `AppComponent` itself has its own html template and css file. WebPack loads them with calls to `require()`.
-Webpack stashes those component-scoped files in the `app.js` bundle too.
-You don't see those calls in the source code;
-they're added behind the scenes by the `angular2-template-loader` plug-in.
-
-* The `vendor.ts` consists of vendor dependency `import` statements that drive the `vendor.js` bundle.
-The application imports these modules too; they'd be duplicated in the `app.js` bundle
-if the `CommonsChunkPlugin` hadn't detected the overlap and removed them from `app.js`.
-{@a conclusion}
-
-## Conclusion
-
-You've learned just enough Webpack to configurate development, test and production builds
-for a small Angular application.
-
-_You could always do more_. Search the web for expert advice and expand your Webpack knowledge.
-
-[Back to top](guide/webpack#top)

aio/content/marketing/announcements.json

@@ -12,5 +12,19 @@
     "message": "Watch ng-conf live stream <br/>Apr 18th-20th, 2018",
     "imageUrl": "generated/images/marketing/home/ng-conf.png",
     "linkUrl": "https://www.ng-conf.org/livestream/"
+  },
+  {
+    "startDate": "2018-06-01",
+    "endDate": "2018-08-15",
+    "message": "Join us for Angular Mix<br/>October 10th-12th, 2018",
+    "imageUrl": "generated/images/marketing/home/angular-mix.png",
+    "linkUrl": "https://angularmix.com/"
+  },
+  {
+    "startDate": "2018-08-15",
+    "endDate": "2018-11-06",
+    "message": "Join us for Angular Connect<br/>November 6th-7th, 2018",
+    "imageUrl": "generated/images/marketing/home/angular-connect.png",
+    "linkUrl": "https://angularconnect.com/"
   }
 ]

aio/content/marketing/contributors.json

@@ -592,7 +592,7 @@
     "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",
@@ -600,5 +600,50 @@
     "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": {
@@ -175,7 +175,13 @@
             "rev": true,
             "title": "Angular IDE by Webclipse",
             "url": "https://www.genuitec.com/products/angular-ide"
-          }
+          },
+          "amexio-canvas": {
+             "desc": "Amexio Canvas is Drag and Drop Environment to create Fully Responsive Web and Smart Device HTML5/Angular Apps. Code will be auto generated and hot deployed by the Canvas for live testing. Out of the box 50+ Material Design Theme support. Commit your code to GitHub public or private repository.",
+            "rev": true,
+            "title": "Amexio Canvas Web Based Drag and Drop IDE by MetaMagic",
+            "url": "https://amexio.tech/"
+          }	
         }
       },
       "Tooling": {
@@ -345,6 +351,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 +383,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 +548,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": "",
@@ -597,12 +616,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

@@ -61,12 +61,6 @@
       "hidden": true
     },
 
-    {
-      "url": "guide/webpack",
-      "title": "Webpack: An Introduction",
-      "hidden": true
-    },
-
     {
       "url": "guide/quickstart",
       "title": "Getting Started",

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/package.json

@@ -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.2",
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.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/src/app/app.component.html

@@ -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(