feat(ivy): add element instruction

Adds a simplified element instruction that can be used if an element
has no children.

.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.2
-var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.3.2
+var_1: &docker_image angular/ngcontainer:0.3.0
+var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.3.0
 
 # Define common ENV vars
 var_3: &define_env_vars
@@ -80,12 +80,12 @@ jobs:
 
       - run: ls /home/circleci/bazel_repository_cache || true
       - run: bazel info release
-      - run: bazel run @nodejs//:yarn
+      - run: bazel run @yarn//:yarn
       # Use bazel query so that we explicitly ask for all buildable targets to be built as well
       # This avoids waiting for the slowest build target to finish before running the first test
       # See https://github.com/bazelbuild/bazel/issues/4257
       # NOTE: Angular developers should typically just bazel build //packages/... or bazel test //packages/...
-      - run: bazel query --output=label //... | xargs bazel test
+      - run: bazel query --output=label //... | xargs bazel test --build_tag_filters=-ivy-only --test_tag_filters=-manual,-ivy-only
 
       # CircleCI will allow us to go back and view/download these artifacts from past builds.
       # Also we can use a service like https://buildsize.org/ to automatically track binary size of these artifacts.
@@ -131,7 +131,7 @@ jobs:
       - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
       - *setup-bazel-remote-cache
 
-      - run: bazel run @nodejs//:yarn
+      - run: bazel run @yarn//:yarn
       - run: scripts/build-packages-dist.sh
 
       # Save the npm packages from //packages/... for other workflow jobs to read
@@ -149,10 +149,6 @@ 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

@@ -45,12 +45,10 @@ merge:
       - "packages/language-service/**"
       - "**/.gitignore"
       - "**/.gitkeep"
-      - "**/package.json"
       - "**/tsconfig-build.json"
       - "**/tsconfig.json"
       - "**/rollup.config.js"
       - "**/BUILD.bazel"
-      - "packages/**/integrationtest/**"
       - "packages/**/test/**"
 
   # comment that will be added to a PR when there is a conflict, leave empty or set to false to disable

.pullapprove.yml

@@ -163,7 +163,7 @@ groups:
       files:
         - "packages/compiler/*"
     users:
-      - chuckjaz #primary
+      - alxhub #primary
       - vicb
       - mhevery
       - IgorMinar #fallback

BUILD.bazel

@@ -11,7 +11,7 @@ exports_files([
 # This ensures that package.json in subdirectories get installed as well.
 alias(
     name = "install",
-    actual = "@nodejs//:yarn",
+    actual = "@yarn//:yarn",
 )
 
 node_modules_filegroup(
@@ -44,16 +44,14 @@ 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_scripts",
+    name = "angularjs",
+    # do not sort
     srcs = [
-        "//: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",
+        "//:node_modules/angular-mocks/angular-mocks.js",
     ],
 )

CHANGELOG.md

@@ -1,75 +1,3 @@
-<a name="6.0.8"></a>
-## [6.0.8](https://github.com/angular/angular/compare/6.0.7...6.0.8) (2018-07-11)
-
-
-### Bug Fixes
-
-* **common:** do not round factional seconds ([#24831](https://github.com/angular/angular/issues/24831)) ([0746485](https://github.com/angular/angular/commit/0746485)), closes [#24384](https://github.com/angular/angular/issues/24384)
-* **common:** properly update collection reference in NgForOf ([#24684](https://github.com/angular/angular/issues/24684)) ([9a98de9](https://github.com/angular/angular/commit/9a98de9)), closes [#24155](https://github.com/angular/angular/issues/24155)
-* **common:** use correct currency format for locale de-AT ([#24658](https://github.com/angular/angular/issues/24658)) ([a92f111](https://github.com/angular/angular/commit/a92f111)), closes [#24609](https://github.com/angular/angular/issues/24609)
-* **compiler-cli:** Use typescript to resolve modules for metadata ([#22856](https://github.com/angular/angular/issues/22856)) ([7717ff1](https://github.com/angular/angular/commit/7717ff1))
-* **core:** use addCustomEqualityTester instead of overriding toEqual ([#22983](https://github.com/angular/angular/issues/22983)) ([b8975a9](https://github.com/angular/angular/commit/b8975a9)), closes [#22939](https://github.com/angular/angular/issues/22939)
-* **language-service:** do not overwrite native `Reflect` ([#24299](https://github.com/angular/angular/issues/24299)) ([de1c44f](https://github.com/angular/angular/commit/de1c44f)), closes [#21420](https://github.com/angular/angular/issues/21420)
-* **router:** add ability to recover from malformed url ([#23283](https://github.com/angular/angular/issues/23283)) ([2d4f4b5](https://github.com/angular/angular/commit/2d4f4b5)), closes [#21468](https://github.com/angular/angular/issues/21468)
-* **service-worker:** avoid network requests when looking up hashed resources in cache ([#24127](https://github.com/angular/angular/issues/24127)) ([183b079](https://github.com/angular/angular/commit/183b079))
-
-
-### Features
-
-* **core:** add support for ShadowDOM v1 ([#24718](https://github.com/angular/angular/issues/24718)) ([6c55a13](https://github.com/angular/angular/commit/6c55a13))
-
-
-
-<a name="6.0.7"></a>
-## [6.0.7](https://github.com/angular/angular/compare/6.0.6...6.0.7) (2018-06-27)
-
-
-### Bug Fixes
-
-* **animations:** set animations styles properly on platform-server ([#24624](https://github.com/angular/angular/issues/24624)) ([0b356d4](https://github.com/angular/angular/commit/0b356d4))
-* **common:** use correct ICU plural for locale mk ([#24659](https://github.com/angular/angular/issues/24659)) ([64a8584](https://github.com/angular/angular/commit/64a8584))
-
-
-<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)
 

CONTRIBUTING.md

@@ -227,15 +227,10 @@ 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
-* **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`).
+* **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`)
 
 ### Subject
 The subject contains a succinct description of the change:

WORKSPACE

@@ -6,9 +6,9 @@ workspace(name = "angular")
 
 http_archive(
     name = "build_bazel_rules_nodejs",
-    url = "https://github.com/bazelbuild/rules_nodejs/archive/0.10.1.zip",
-    strip_prefix = "rules_nodejs-0.10.1",
-    sha256 = "634206524d90dc03c52392fa3f19a16637d2bcf154910436fe1d669a0d9d7b9c",
+    url = "https://github.com/bazelbuild/rules_nodejs/archive/0.8.0.zip",
+    strip_prefix = "rules_nodejs-0.8.0",
+    sha256 = "4e40dd49ae7668d245c3107645f2a138660fcfd975b9310b91eda13f0c973953",
 )
 
 http_archive(
@@ -20,9 +20,9 @@ http_archive(
 
 http_archive(
     name = "build_bazel_rules_typescript",
-    url = "https://github.com/bazelbuild/rules_typescript/archive/0.15.0.zip",
-    strip_prefix = "rules_typescript-0.15.0",
-    sha256 = "1aa75917330b820cb239b3c10a936a10f0a46fe215063d4492dd76dc6e1616f4",
+    url = "https://github.com/bazelbuild/rules_typescript/archive/3b86d6d46269fb52d4c6f1416868869e847feac2.zip",
+    strip_prefix = "rules_typescript-3b86d6d46269fb52d4c6f1416868869e847feac2",
+    sha256 = "f67e5fbe4a2b34b3ead9fe56f22b713540c23b501bd24d661d3fb047071dc2c1",
 )
 
 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 = "82b21607e00913b16fe1c51bec80232d9d6de31c"
+BAZEL_BUILDTOOLS_VERSION = "fd9878fd5de921e0bbab3dcdcb932c2627812ee1"
 
 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 = "edb24c2f9c55b10a820ec74db0564415c0cf553fa55e9fc709a6332fb6685eff",
+    sha256 = "27bb461ade23fd44ba98723ad98f84ee9c83cd3540b773b186a1bc5037f3d862",
 )
 
 # Fetching the Bazel source code allows us to compile the Skylark linter
@@ -77,7 +77,7 @@ http_archive(
 
 load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
 
-check_bazel_version("0.14.0")
+check_bazel_version("0.13.0")
 node_repositories(package_json = ["//:package.json"])
 
 load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")

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

@@ -52,7 +52,8 @@ export class BuildCleaner {
   protected removeDir(dir: string) {
     try {
       if (shell.test('-d', dir)) {
-        shell.chmod('-R', 'a+w', dir);
+        // Undocumented signature (see https://github.com/shelljs/shelljs/pull/663).
+        (shell as any).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,7 +106,8 @@ export class BuildCreator extends EventEmitter {
         }
 
         try {
-          shell.chmod('-R', 'a-w', outputDir);
+          // Undocumented signature (see https://github.com/shelljs/shelljs/pull/663).
+          (shell as any).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,7 +98,8 @@ class Helper {
     const prDir = this.getPrDir(pr, isPublic);
 
     if (fs.existsSync(prDir)) {
-      shell.chmod('-R', 'a+w', prDir);
+      // Undocumented signature (see https://github.com/shelljs/shelljs/pull/663).
+      (shell as any).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 build --watch",
+    "build-watch": "yarn tsc --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.8.0",
+    "@types/shelljs": "^0.7.4",
     "@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.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.8.0.tgz#0caa56b68baae4f68f44e0dd666ab30b098e3632"
+"@types/shelljs@^0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@types/shelljs/-/shelljs-0.7.4.tgz#137b5f31306eaff4de120ffe5b9d74b297809cfc"
   dependencies:
     "@types/glob" "*"
     "@types/node" "*"

aio/content/examples/.gitignore

@@ -60,8 +60,6 @@ dist/
 !rollup-config.js
 aot-compiler/**/*.d.ts
 aot-compiler/**/*.factory.d.ts
-upgrade-phonecat-2-hybrid/aot/**/*
-!upgrade-phonecat-2-hybrid/aot/index.html
 
 # i18n
 !i18n/src/systemjs-text-plugin.js

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

@@ -40,7 +40,5 @@ export class HighlightDirective {
   // #docregion color-2
   @Input() appHighlight: string;
   // #enddocregion color-2
-
-// #docregion
 }
-// #enddocregion
+

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

@@ -5,7 +5,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 // #docregion directive-import
@@ -24,7 +24,7 @@ import { ItemDirective } from './item.directive';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,7 +1,7 @@
 // #docregion
 import { BrowserModule }                from '@angular/platform-browser';
 import { FormsModule }                  from '@angular/forms';
-import { HttpModule }                   from '@angular/http';
+import { HttpClientModule }             from '@angular/common/http';
 
 // import { AppRoutingModule }             from './app-routing.module';
 import { LocationStrategy,
@@ -54,7 +54,7 @@ const c_components = [
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     InMemoryWebApiModule.forRoot(HeroData)
     // AppRoutingModule TODO: add routes
   ],

aio/content/examples/feature-modules/src/app/app.module.ts

@@ -3,7 +3,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 // import the feature module here so you can add it to the imports array below
@@ -17,7 +17,7 @@ import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     CustomerDashboardModule // add the feature module here
   ],
   providers: [],

aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts

@@ -16,7 +16,6 @@ describe('Form Validation Tests', function () {
 
     tests('Template-Driven Form');
     bobTests();
-    crossValidationTests();
   });
 
   describe('Reactive form', () => {
@@ -26,7 +25,6 @@ describe('Form Validation Tests', function () {
 
     tests('Reactive Form');
     bobTests();
-    crossValidationTests();
   });
 });
 
@@ -44,8 +42,7 @@ let page: {
   powerOption: ElementFinder,
   errorMessages: ElementArrayFinder,
   heroFormButtons: ElementArrayFinder,
-  heroSubmitted: ElementFinder,
-  crossValidationErrorMessage: ElementFinder,
+  heroSubmitted: ElementFinder
 };
 
 function getPage(sectionTag: string) {
@@ -62,8 +59,7 @@ function getPage(sectionTag: string) {
     powerOption: section.element(by.css('#power option')),
     errorMessages: section.all(by.css('div.alert')),
     heroFormButtons: buttons,
-    heroSubmitted: section.element(by.css('.submitted-message')),
-    crossValidationErrorMessage: section.element(by.css('.cross-validation-error-message')),
+    heroSubmitted: section.element(by.css('.submitted-message'))
   };
 }
 
@@ -176,29 +172,3 @@ function bobTests() {
     expectFormIsValid();
   });
 }
-
-function crossValidationTests() {
-  const emsg = 'Name cannot match alter ego.';
-
-  it(`should produce "${emsg}" error after setting name and alter ego to the same value`, function () {
-    page.nameInput.clear();
-    page.nameInput.sendKeys('Batman');
-
-    page.alterEgoInput.clear();
-    page.alterEgoInput.sendKeys('Batman');
-
-    expectFormIsInvalid();
-    expect(page.crossValidationErrorMessage.getText()).toBe(emsg);
-  });
-
-  it('should be ok again with different values', function () {
-    page.nameInput.clear();
-    page.nameInput.sendKeys('Batman');
-
-    page.alterEgoInput.clear();
-    page.alterEgoInput.sendKeys('Superman');
-
-    expectFormIsValid();
-    expect(page.crossValidationErrorMessage.isPresent()).toBe(false);
-  });
-}

aio/content/examples/form-validation/src/app/app.module.ts

@@ -7,7 +7,7 @@ import { AppComponent }           from './app.component';
 import { HeroFormTemplateComponent } from './template/hero-form-template.component';
 import { HeroFormReactiveComponent } from './reactive/hero-form-reactive.component';
 import { ForbiddenValidatorDirective } from './shared/forbidden-name.directive';
-import { IdentityRevealedValidatorDirective } from './shared/identity-revealed.directive';
+
 
 @NgModule({
   imports: [
@@ -19,8 +19,7 @@ import { IdentityRevealedValidatorDirective } from './shared/identity-revealed.d
     AppComponent,
     HeroFormTemplateComponent,
     HeroFormReactiveComponent,
-    ForbiddenValidatorDirective,
-    IdentityRevealedValidatorDirective
+    ForbiddenValidatorDirective
   ],
   bootstrap:    [ AppComponent ]
 })

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.1.ts

@@ -1,42 +0,0 @@
-/* tslint:disable: member-ordering forin */
-// #docplaster
-// #docregion
-import { Component, OnInit }                  from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
-
-@Component({
-  selector: 'app-hero-form-reactive',
-  templateUrl: './hero-form-reactive.component.html',
-  styleUrls: ['./hero-form-reactive.component.css'],
-})
-export class HeroFormReactiveComponent implements OnInit {
-
-  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
-
-  hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
-
-  heroForm: FormGroup;
-
-  // #docregion form-group
-  ngOnInit(): void {
-    // #docregion custom-validator
-    this.heroForm = new FormGroup({
-      'name': new FormControl(this.hero.name, [
-        Validators.required,
-        Validators.minLength(4),
-        forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
-      ]),
-      'alterEgo': new FormControl(this.hero.alterEgo),
-      'power': new FormControl(this.hero.power, Validators.required)
-    });
-    // #enddocregion custom-validator
-
-  }
-
-  get name() { return this.heroForm.get('name'); }
-
-  get power() { return this.heroForm.get('power'); }
-  // #enddocregion form-group
-}
-// #enddocregion

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.css

@@ -1,5 +0,0 @@
-/* #docregion cross-validation-error-css */
-.cross-validation-error input {
-  border-left: 5px solid red;
-}
-/* #enddocregion cross-validation-error-css */

aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html

@@ -7,7 +7,6 @@
 
     <div [hidden]="formDir.submitted">
 
-      <div class="cross-validation" [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
       <div class="form-group">
 
         <label for="name">Name</label>
@@ -37,13 +36,6 @@
             formControlName="alterEgo"  >
       </div>
 
-        <!-- #docregion cross-validation-error-message -->
-        <div *ngIf="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
-            Name cannot match alter ego.
-        </div>
-        <!-- #enddocregion cross-validation-error-message -->
-      </div>
-
       <div class="form-group">
         <label for="power">Hero Power</label>
         <select id="power" class="form-control"

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

@@ -1,14 +1,13 @@
 /* tslint:disable: member-ordering forin */
+// #docplaster
 // #docregion
 import { Component, OnInit }                  from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
-import { identityRevealedValidator } from '../shared/identity-revealed.directive';
 
 @Component({
   selector: 'app-hero-form-reactive',
-  templateUrl: './hero-form-reactive.component.html',
-  styleUrls: ['./hero-form-reactive.component.css'],
+  templateUrl: './hero-form-reactive.component.html'
 })
 export class HeroFormReactiveComponent implements OnInit {
 
@@ -18,19 +17,24 @@ export class HeroFormReactiveComponent implements OnInit {
 
   heroForm: FormGroup;
 
+  // #docregion form-group
   ngOnInit(): void {
+    // #docregion custom-validator
     this.heroForm = new FormGroup({
       'name': new FormControl(this.hero.name, [
         Validators.required,
         Validators.minLength(4),
-        forbiddenNameValidator(/bob/i)
+        forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
       ]),
       'alterEgo': new FormControl(this.hero.alterEgo),
       'power': new FormControl(this.hero.power, Validators.required)
-    },  { validators: identityRevealedValidator }); // <-- add custom validator at the FormGroup level
+    });
+    // #enddocregion custom-validator
   }
 
   get name() { return this.heroForm.get('name'); }
 
   get power() { return this.heroForm.get('power'); }
+  // #enddocregion form-group
 }
+// #enddocregion

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} | null => {
+  return (control: AbstractControl): {[key: string]: any} => {
     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} | null {
+  validate(control: AbstractControl): {[key: string]: any} {
     return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
                               : null;
   }

aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts

@@ -1,25 +0,0 @@
-// #docregion
-import { Directive } from '@angular/core';
-import { AbstractControl, FormGroup, NG_VALIDATORS, ValidationErrors, Validator, ValidatorFn } from '@angular/forms';
-
-// #docregion cross-validation-validator
-/** A hero's name can't match the hero's alter ego */
-export const identityRevealedValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
-  const name = control.get('name');
-  const alterEgo = control.get('alterEgo');
-
-  return name && alterEgo && name.value === alterEgo.value ? { 'identityRevealed': true } : null;
-};
-// #enddocregion cross-validation-validator
-
-// #docregion cross-validation-directive
-@Directive({
-  selector: '[appIdentityRevealed]',
-  providers: [{ provide: NG_VALIDATORS, useExisting: IdentityRevealedValidatorDirective, multi: true }]
-})
-export class IdentityRevealedValidatorDirective implements Validator {
-  validate(control: AbstractControl): ValidationErrors {
-    return identityRevealedValidator(control)
-  }
-}
-// #enddocregion cross-validation-directive

aio/content/examples/form-validation/src/app/template/hero-form-template.component.css

@@ -1,4 +0,0 @@
-/* #docregion */
-.cross-validation-error input {
-  border-left: 5px solid red;
-}

aio/content/examples/form-validation/src/app/template/hero-form-template.component.html

@@ -2,11 +2,11 @@
 <div class="container">
 
   <h1>Template-Driven Form</h1>
-  <!-- #docregion cross-validation-register-validator -->
-  <form #heroForm="ngForm" appIdentityRevealed>
-  <!-- #enddocregion cross-validation-register-validator -->
+  <!-- #docregion form-tag-->
+  <form #heroForm="ngForm">
+  <!-- #enddocregion form-tag-->
     <div [hidden]="heroForm.submitted">
-      <div class="cross-validation" [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
+
       <div class="form-group">
         <label for="name">Name</label>
         <!-- #docregion name-with-error-msg -->
@@ -39,13 +39,6 @@
                name="alterEgo" [(ngModel)]="hero.alterEgo" >
       </div>
 
-        <!-- #docregion cross-validation-error-message -->
-        <div *ngIf="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
-            Name cannot match alter ego.
-        </div>
-        <!-- #enddocregion cross-validation-error-message -->
-      </div>
-
       <div class="form-group">
         <label for="power">Hero Power</label>
         <select id="power" name="power" class="form-control"
@@ -69,4 +62,5 @@
       <button (click)="heroForm.resetForm({})">Add new hero</button>
     </div>
   </form>
+
 </div>

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

@@ -3,11 +3,9 @@
 // #docregion
 import { Component } from '@angular/core';
 
-// #docregion component
 @Component({
   selector: 'app-hero-form-template',
-  templateUrl: './hero-form-template.component.html',
-  styleUrls: ['./hero-form-template.component.css'],
+  templateUrl: './hero-form-template.component.html'
 })
 export class HeroFormTemplateComponent {
 
@@ -16,4 +14,3 @@ export class HeroFormTemplateComponent {
   hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
 
 }
-// #enddocregion

aio/content/examples/form-validation/stackblitz.json

@@ -2,7 +2,6 @@
   "description": "Validation",
   "files":[
     "!**/*.d.ts",
-    "!**/*.js",
-    "!**/*.[1].*"
+    "!**/*.js"
   ]
 }

aio/content/examples/lazy-loading-ngmodules/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
@@ -13,7 +13,7 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     AppRoutingModule
   ],
   providers: [],

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

@@ -4,8 +4,7 @@ button {
   font-size: 100%;
 }
 
-code,
-.code {
+code, .code {
   background-color: #eee;
   color: black;
   font-family: Courier, sans-serif;
@@ -22,18 +21,14 @@ div.code {
 }
 
 hr {
-  margin: 40px 0;
+  margin: 40px 0
 }
 
-td,
-th {
+td, th {
   text-align: left;
   vertical-align: top;
 }
 
 /* #docregion p-span */
-p span {
-  color: red;
-  font-size: 70%;
-}
+p span { color: red; font-size: 70%; }
 /* #enddocregion p-span */

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

@@ -132,7 +132,7 @@
 <!-- #docregion select-span -->
 <select [(ngModel)]="hero">
   <span *ngFor="let h of heroes">
-    <span *ngIf="showSad || h?.emotion !== 'sad'">
+    <span *ngIf="showSad || h?.emotion != 'sad'">
       <option [ngValue]="h">{{h.name}} ({{h?.emotion}})</option>
     </span>
   </span>
@@ -147,7 +147,7 @@
 <!-- #docregion select-ngcontainer -->
 <select [(ngModel)]="hero">
   <ng-container *ngFor="let h of heroes">
-    <ng-container *ngIf="showSad || h?.emotion !== 'sad'">
+    <ng-container *ngIf="showSad || h?.emotion != 'sad'">
       <option [ngValue]="h">{{h.name}} ({{h?.emotion}})</option>
     </ng-container>
   </ng-container>

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

@@ -14,7 +14,6 @@ export class AppComponent {
   heroTraits = [ 'honest', 'brave', 'considerate' ];
 
   // flags for the table
-
   attrDirs = true;
   strucDirs = true;
   divNgIf = false;

aio/content/examples/ngcontainer/src/app/hero.components.ts

@@ -1,6 +1,5 @@
 // #docregion
 import { Component, Input } from '@angular/core';
-
 import { Hero } from './hero';
 
 @Component({
@@ -34,15 +33,11 @@ export class ConfusedHeroComponent {
 export class UnknownHeroComponent {
   @Input() hero: Hero;
   get message() {
-    return this.hero && this.hero.name
-      ? `${this.hero.name} is strange and mysterious.`
-      : 'Are you feeling indecisive?';
+    return this.hero && this.hero.name ?
+      `${this.hero.name} is strange and mysterious.` :
+      'Are you feeling indecisive?';
   }
 }
 
-export const heroComponents = [
-  HappyHeroComponent,
-  SadHeroComponent,
-  ConfusedHeroComponent,
-  UnknownHeroComponent
-];
+export const heroComponents =
+  [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];

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

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

aio/content/examples/router/src/app/compose-message.component.ts

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

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

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { HttpModule }           from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 
 import { RouterModule } from '@angular/router';
@@ -44,7 +44,7 @@ import * as s0901 from '../09-01/app/app.module';
 @NgModule({
   imports: [
     BrowserModule,
-    HttpModule,
+    HttpClientModule,
     InMemoryWebApiModule.forRoot(HeroData),
 
     s0101.AppModule,

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/dashboard/dashboard.component.spec.ts

@@ -1,36 +1,16 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DashboardComponent } from './dashboard.component';
-import { HeroSearchComponent } from '../hero-search/hero-search.component';
-
-import { RouterTestingModule } from '@angular/router/testing';
-import { of } from 'rxjs';
-import { HEROES } from '../mock-heroes';
-import { HeroService } from '../hero.service';
 
 describe('DashboardComponent', () => {
   let component: DashboardComponent;
   let fixture: ComponentFixture<DashboardComponent>;
-  let heroService;
-  let getHeroesSpy;
 
   beforeEach(async(() => {
-    heroService = jasmine.createSpyObj('HeroService', ['getHeroes']);
-    getHeroesSpy = heroService.getHeroes.and.returnValue( of(HEROES) );
     TestBed.configureTestingModule({
-      declarations: [
-        DashboardComponent,
-        HeroSearchComponent
-      ],
-      imports: [
-        RouterTestingModule.withRoutes([])
-      ],
-      providers: [
-        { provide: HeroService, useValue: heroService }
-      ]
+      declarations: [ DashboardComponent ]
     })
     .compileComponents();
-
   }));
 
   beforeEach(() => {
@@ -42,17 +22,4 @@ describe('DashboardComponent', () => {
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should display "Top Heroes" as headline', () => {
-    expect(fixture.nativeElement.querySelector('h3').textContent).toEqual('Top Heroes');
-  });
-
-  it('should call heroService', async(() => {
-    expect(getHeroesSpy.calls.any()).toBe(true);
-    }));
-
-  it('should display 4 links', async(() => {
-    expect(fixture.nativeElement.querySelectorAll('a').length).toEqual(4);
-  }));
-
 });

aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.spec.ts

@@ -1,18 +1,14 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 import { HeroSearchComponent } from './hero-search.component';
 
-
 describe('HeroSearchComponent', () => {
   let component: HeroSearchComponent;
   let fixture: ComponentFixture<HeroSearchComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeroSearchComponent ],
-      imports: [RouterTestingModule.withRoutes([]), HttpClientTestingModule]
+      declarations: [ HeroSearchComponent ]
     })
     .compileComponents();
   }));

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

@@ -40,7 +40,7 @@ export class HeroService {
   // #enddocregion getHeroes-1
       .pipe(
         // #enddocregion getHeroes-2
-        tap(heroes => this.log('fetched heroes')),
+        tap(heroes => this.log(`fetched heroes`)),
         // #docregion getHeroes-2
         catchError(this.handleError('getHeroes', []))
       );
@@ -151,7 +151,7 @@ export class HeroService {
   // #docregion log
   /** Log a HeroService message with the MessageService */
   private log(message: string) {
-    this.messageService.add(`HeroService: ${message}`);
+    this.messageService.add('HeroService: ' + message);
   }
   // #enddocregion log
 }

aio/content/examples/toh-pt6/src/app/heroes/heroes.component.spec.ts

@@ -1,7 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+
 import { HeroesComponent } from './heroes.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('HeroesComponent', () => {
   let component: HeroesComponent;
@@ -9,8 +8,7 @@ describe('HeroesComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeroesComponent ],
-      imports: [RouterTestingModule.withRoutes([]), HttpClientTestingModule],
+      declarations: [ HeroesComponent ]
     })
     .compileComponents();
   }));

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

@@ -30,7 +30,7 @@ export class HeroService {
   getHeroes (): Observable<Hero[]> {
     return this.http.get<Hero[]>(this.heroesUrl)
       .pipe(
-        tap(heroes => this.log('fetched heroes')),
+        tap(heroes => this.log(`fetched heroes`)),
         catchError(this.handleError('getHeroes', []))
       );
   }
@@ -123,6 +123,6 @@ export class HeroService {
 
   /** Log a HeroService message with the MessageService */
   private log(message: string) {
-    this.messageService.add(`HeroService: ${message}`);
+    this.messageService.add('HeroService: ' + message);
   }
 }

aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.ajs.json

@@ -8,7 +8,6 @@
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": false,
-    "skipLibCheck": true,
     "suppressImplicitAnyIndexErrors": true
   }
 }

aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.json

@@ -8,8 +8,10 @@
     "experimentalDecorators": true,
     "lib": [ "es2015", "dom" ],
     "noImplicitAny": true,
-    "skipLibCheck": true,
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "./node_modules/@types/"
+    ]
   },
   "compileOnSave": true,
   "exclude": [

aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { platformBrowser } from '@angular/platform-browser';
 
-import { AppModuleNgFactory } from './app.module.ngfactory';
+import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
 
 platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts

@@ -3,7 +3,7 @@
 import { ActivatedRoute } from '@angular/router';
 
 // #enddocregion activatedroute
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 
 import { async, TestBed } from '@angular/core/testing';
 
@@ -21,7 +21,7 @@ function xyzPhoneData(): PhoneData {
 
 class MockPhone {
   get(id: string): Observable<PhoneData> {
-    return of(xyzPhoneData());
+    return Observable.of(xyzPhoneData());
   }
 }
 

aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SpyLocation } from '@angular/common/testing';
 
@@ -15,7 +15,7 @@ class ActivatedRouteMock {
 
 class MockPhone {
   query(): Observable<PhoneData[]> {
-    return of([
+    return Observable.of([
       {name: 'Nexus S', snippet: '', images: []},
       {name: 'Motorola DROID', snippet: '', images: []}
     ]);

aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json

@@ -9,8 +9,10 @@
     "lib": ["es2015", "dom"],
     "removeComments": false,
     "noImplicitAny": true,
-    "skipLibCheck": true,
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "./node_modules/@types/"
+    ]
   },
 
   "files": [
@@ -19,6 +21,7 @@
   ],
 
   "angularCompilerOptions": {
+   "genDir": "aot",
    "skipMetadataEmit" : true
  }
 }

aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig.json

@@ -8,8 +8,10 @@
     "experimentalDecorators": true,
     "lib": [ "es2015", "dom" ],
     "noImplicitAny": true,
-    "skipLibCheck": true,
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "./node_modules/@types/"
+    ]
   },
   "compileOnSave": true,
   "exclude": [

aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts

@@ -3,7 +3,7 @@
 import { ActivatedRoute } from '@angular/router';
 
 // #enddocregion activatedroute
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 
 import { async, TestBed } from '@angular/core/testing';
 
@@ -21,7 +21,7 @@ function xyzPhoneData(): PhoneData {
 
 class MockPhone {
   get(id: string): Observable<PhoneData> {
-    return of(xyzPhoneData());
+    return Observable.of(xyzPhoneData());
   }
 }
 

aio/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts

@@ -2,7 +2,7 @@
 // #docregion routestuff
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SpyLocation } from '@angular/common/testing';
 
@@ -17,7 +17,7 @@ class ActivatedRouteMock {
 
 class MockPhone {
   query(): Observable<PhoneData[]> {
-    return of([
+    return Observable.of([
       {name: 'Nexus S', snippet: '', images: []},
       {name: 'Motorola DROID', snippet: '', images: []}
     ]);

aio/content/examples/upgrade-phonecat-3-final/tsconfig.json

@@ -8,8 +8,10 @@
     "experimentalDecorators": true,
     "lib": [ "es2015", "dom" ],
     "noImplicitAny": true,
-    "skipLibCheck": true,
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "./node_modules/@types/"
+    ]
   },
   "compileOnSave": true,
   "exclude": [

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

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

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

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

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

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

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

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

@@ -0,0 +1,21 @@
+'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

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

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

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

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

@@ -0,0 +1,49 @@
+{
+  "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

@@ -0,0 +1,9 @@
+/* #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

@@ -0,0 +1,7 @@
+<!-- #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

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

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

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

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

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

@@ -0,0 +1,14 @@
+<!-- #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

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

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

@@ -0,0 +1,13 @@
+{
+  "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

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

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

aio/content/examples/webpack/zipper.json

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

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

@@ -895,7 +895,7 @@ For more information on pipes, see [Pipes](guide/pipes).
       ### lowercase
 
       <code-example hideCopy>
-        &lt;td>{{movie.title | lowercase}}&lt;/td>
+        &lt;div>{{movie.title | lowercase}}&lt;/div>
       </code-example>
 
 

aio/content/guide/aot-compiler.md

@@ -97,9 +97,6 @@ You can control your app compilation by providing template compiler options in t
   }
 }
 ```
-### *enableResourceInlining*
-This options tell the compiler to replace the `templateUrl` and `styleUrls` property in all `@Component` decorators with inlined contents in `template` and `styles` properties.
-When enabled, the `.js` output of ngc will have no lazy-loaded `templateUrl` or `styleUrls`.
 
 ### *skipMetadataEmit*
 

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

@@ -0,0 +1,175 @@
+<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/architecture-components.md

@@ -8,10 +8,9 @@ A _component_ controls a patch of screen called a *view*. For example, individua
 * The list of heroes.
 * The hero editor.
 
-You define a component's application logic—what it does to support the view—inside a class.
-The class interacts with the view through an API of properties and methods.
+You define a component's application logic—what it does to support the view—inside a class. The class interacts with the view through an API of properties and methods.
 
-For example, the `HeroListComponent` has a `heroes` property that holds an array of heroes. It also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list. The component acquires the heroes from a service, which is a TypeScript [parameter property[(http://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties) on the constructor. The service is provided to the component through the dependency injection system.
+For example, the `HeroListComponent` has a `heroes` property that returns an array of heroes that it acquires from a service. `HeroListComponent` also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list.
 
 <code-example path="architecture/src/app/hero-list.component.ts" linenums="false" title="src/app/hero-list.component.ts (class)" region="class"></code-example>
 
@@ -40,7 +39,8 @@ Angular inserts an instance of the `HeroListComponent` view between those tags.
 
 * `templateUrl`: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the `template` property. This template defines the component's _host view_.
 
-* `providers`: An array of **dependency injection providers** for services that the component requires. In the example, this tells Angular how provide the `HeroService` instance that the component's constructor uses to get the list of heroes to display.  
+* `providers`: An array of **dependency injection providers** for services that the component requires. In the example, this tells Angular that the component's constructor requires a `HeroService` instance
+in order to get the list of heroes to display.
 
 <hr/>
 

aio/content/guide/architecture-modules.md

@@ -88,8 +88,7 @@ For example, import Angular's `Component` decorator from the `@angular/core` lib
 
 <code-example path="architecture/src/app/app.component.ts" region="import" linenums="false"></code-example>
 
-You also import NgModules from Angular _libraries_ using JavaScript import statements. 
-For example, the following code imports the `BrowserModule` NgModule from the `platform-browser` library:
+You also import NgModules from Angular _libraries_ using JavaScript import statements:
 
 <code-example path="architecture/src/app/mini-app.ts" region="import-browser-module" linenums="false"></code-example>
 

aio/content/guide/architecture-services.md

@@ -60,29 +60,11 @@ The process of `HeroService` injection looks something like this:
 
 ### Providing services
 
-You must register at least one *provider* of any service you are going to use. A service can register providers itself, making it available everywhere, or you can register providers with specific modules or components. You register providers in the metadata of the service (in the `@Injectable` decorator), or in the `@NgModule` or `@Component` metadata 
+You must register at least one *provider* of any service you are going to use. You can register providers in modules or in components.
 
-* By default, the Angular CLI command `ng generate service` registers a provider with the root injector for your service by including provider metadata in the `@Injectable` decorator. The tutorial uses this method to register the provider of  HeroService class definition:
+* When you add providers to the [root module](guide/architecture-modules), the same instance of a service is available to all components in your app.
 
-``` 
-@Injectable({
-  providedIn: 'root',
-})
-``` 
-
- When you provide the service at the root level, Angular creates a single, shared instance of HeroService and injects into any class that asks for it. Registering the provider in the `@Injectable` metadata also allows Angular to optimize an app by removing the service if it turns out not to be used after all. 
-
-* When you register a provider with a [specific NgModule](guide/architecture-modules), the same instance of a service is available to all components in that NgModule. To register at this level, use the `providers` property of the `@NgModule` decorator:
-
-``` 
-@NgModule({
-  providers: [
-   BackendService,
-   Logger
- ],
- ...
-})
-``` 
+<code-example path="architecture/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (module providers)" region="providers"></code-example>
 
 * When you register a provider at the component level, you get a new instance of the
 service with each new instance of that component. At the component level, register a service provider in the `providers` property of the `@Component` metadata:

aio/content/guide/bootstrapping.md

@@ -18,8 +18,7 @@ If you use the CLI to generate an app, the default `AppModule` is as follows:
 /* JavaScript imports */
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+
 
 import { AppComponent } from './app.component';
 
@@ -29,9 +28,7 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule,
-    FormsModule,
-    HttpModule
+    BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
@@ -137,8 +134,8 @@ It tells Angular about other NgModules that this particular module needs to func
 
 This list of modules are those that export components, directives, or pipes
 that the component templates in this module reference. In this case, the component is
-`AppComponent`, which references components, directives, or pipes in `BrowserModule`,
-`FormsModule`, or  `HttpModule`.
+`AppComponent`, which references components, directives, or pipes in `BrowserModule`.
+Other common components in the examples are `FormsModule` and `HttpClientModule`.
 A component template can reference another component, directive,
 or pipe when the referenced class is declared in this module or
 the class was imported from another module.

aio/content/guide/component-styles.md

@@ -164,7 +164,7 @@ They are _not inherited_ by any components nested within the template nor by any
 
 </div>
 
-The CLI defines an empty `styles` array when you create the component with the `--inline-style` flag.
+The CLI defines an empty `styles` array when you create the component with the `--inline-styles` flag.
 
 <code-example language="sh" class="code-shell">
 ng generate component hero-app --inline-style
@@ -189,7 +189,7 @@ They are _not inherited_ by any components nested within the template nor by any
 
 <div class="l-sub-section">
 
-  You can specify more than one styles file or even a combination of `styles` and `styleUrls`.
+  You can specify more than one styles file or even a combination of `style` and `styleUrls`.
 
 </div>
 
@@ -280,14 +280,12 @@ To control how this encapsulation happens on a *per
 component* basis, you can set the *view encapsulation mode* in the component metadata.
 Choose from the following modes:
 
-* `ShadowDom` view encapsulation uses the browser's native shadow DOM implementation (see
+* `Native` view encapsulation uses the browser's native shadow DOM implementation (see
   [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
   on the [MDN](https://developer.mozilla.org) site)
   to attach a shadow DOM to the component's host element, and then puts the component
   view inside that shadow DOM. The component's styles are included within the shadow DOM.
 
-* `Native` view encapsulation uses a now deprecated version of the browser's native shadow DOM implementation - [learn about the changes](https://hayato.io/2016/shadowdomv1/).
-
 * `Emulated` view encapsulation (the default) emulates the behavior of shadow DOM by preprocessing
   (and renaming) the CSS code to effectively scope the CSS to the component's view.
   For details, see [Appendix 1](guide/component-styles#inspect-generated-css).
@@ -302,8 +300,8 @@ To set the components encapsulation mode, use the `encapsulation` property in th
 <code-example path="component-styles/src/app/quest-summary.component.ts" region="encapsulation.native" title="src/app/quest-summary.component.ts" linenums="false">
 </code-example>
 
-`ShadowDom` view encapsulation only works on browsers that have native support
-for shadow DOM (see [Shadow DOM v1](https://caniuse.com/#feat=shadowdomv1) on the
+`Native` view encapsulation only works on browsers that have native support
+for shadow DOM (see [Shadow DOM v0](http://caniuse.com/#feat=shadowdom) on the
 [Can I use](http://caniuse.com) site). The support is still limited,
 which is why `Emulated` view encapsulation is the default mode and recommended
 in most cases.

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.
-Its only purpose is to display the `HeroListComponent`
+It's 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/deployment.md

@@ -152,7 +152,7 @@ Install `source-map-explorer`:
 Build your app for production _including the source maps_
 
 <code-example language="none" class="code-shell">
-  ng build --prod --source-map
+  ng build --prod --sourcemaps
 </code-example>
 
 List the generated bundles in the `dist/` folder.

aio/content/guide/docs-style-guide.md

@@ -31,8 +31,6 @@ Here are a few essential commands for guide page authors.
 
 1.  http://localhost:4200/  —  browse to the app running locally.
 
-You can combine `yarn docs-watch` and `yarn start` into one command with `yarn serve-and-sync`.
-
 ## Guide pages
 
  All but a few guide pages are [markdown](https://daringfireball.net/projects/markdown/syntax "markdown") files with an `.md` extension.

aio/content/guide/entry-components.md

@@ -36,7 +36,7 @@ The following is an example of specifying a bootstrapped component,
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     AppRoutingModule
   ],
   providers: [],

aio/content/guide/form-validation.md

@@ -92,7 +92,7 @@ built-in validators—this time, in function form. See below:
 
 {@a reactive-component-class}
 
-<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.1.ts" region="form-group" title="reactive/hero-form-reactive.component.ts (validator functions)" linenums="false">
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="form-group" title="reactive/hero-form-reactive.component.ts (validator functions)" linenums="false">
 </code-example>
 
 Note that:
@@ -148,7 +148,7 @@ at which point the form uses the last value emitted for validation.
 In reactive forms, custom validators are fairly simple to add. All you have to do is pass the function directly 
 to the `FormControl`.
 
-<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.1.ts" region="custom-validator" title="reactive/hero-form-reactive.component.ts (validator functions)" linenums="false">
+<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.ts" region="custom-validator" title="reactive/hero-form-reactive.component.ts (validator functions)" linenums="false">
 </code-example>
 
 ### Adding to template-driven forms
@@ -208,80 +208,5 @@ set the color of each form control's border.
 
 </code-example>
 
-## Cross field validation 
-This section shows how to perform cross field validation. It assumes some basic knowledge of creating custom validators.
-
-<div class="l-sub-section">
-
-If you haven't created custom validators before, start by reviewing the [custom validators section](guide/form-validation#custom-validators).
-
-</div>
-
-In the following section, we will make sure that our heroes do not reveal their true identities by filling out the Hero Form. We will do that by validating that the hero names and alter egos do not match. 
-
-### Adding to reactive forms
-
-The form has the following structure:
-
-```javascript
-const heroForm = new FormGroup({
-  'name': new FormControl(),
-  'alterEgo': new FormControl(),
-  'power': new FormControl()
-});
-```
-
-Notice that the name and alterEgo are sibling controls. To evaluate both controls in a single custom validator, we should perform the validation in a common ancestor control: the `FormGroup`. That way, we can query the `FormGroup` for the child controls which will allow us to compare their values.
-
-To add a validator to the `FormGroup`, pass the new validator in as the second argument on creation.
-
-```javascript
-const heroForm = new FormGroup({
-  'name': new FormControl(),
-  'alterEgo': new FormControl(),
-  'power': new FormControl()
-}, { validators: identityRevealedValidator });
-```
-
-The validator code is as follows:
-
-<code-example path="form-validation/src/app/shared/identity-revealed.directive.ts" region="cross-validation-validator" title="shared/identity-revealed.directive.ts" linenums="false">
-</code-example>
-
-The identity validator implements the `ValidatorFn` interface. It takes an Angular control object as an argument and returns either null if the form is valid, or `ValidationErrors` otherwise.
-
-First we retrieve the child controls by calling the `FormGroup`'s [get](api/forms/AbstractControl#get) method. Then we simply compare the values of the `name` and `alterEgo` controls. 
-
-If the values do not match, the hero's identity remains secret, and we can safely return null. Otherwise, the hero's identity is revealed and we must mark the form as invalid by returning an error object.
-
-Next, to provide better user experience, we show an appropriate error message when the form is invalid.
-<code-example path="form-validation/src/app/reactive/hero-form-reactive.component.html" region="cross-validation-error-message" title="reactive/hero-form-template.component.html" linenums="false">
-</code-example>
-
-Note that we check if:
-- the `FormGroup` has the cross validation error returned by the `identityRevealed` validator, 
-- the user is yet to [interact](guide/form-validation#why-check-dirty-and-touched) with the form.
-
-### Adding to template driven forms
-First we must create a directive that will wrap the validator function. We provide it as the validator using the `NG_VALIDATORS` token. If you are not sure why, or you do not fully understand the syntax, revisit the previous [section](guide/form-validation#adding-to-template-driven-forms).
-
-<code-example path="form-validation/src/app/shared/identity-revealed.directive.ts" region="cross-validation-directive" title="shared/identity-revealed.directive.ts" linenums="false">
-</code-example>
-
-Next, we have to add the directive to the html template. Since the validator must be registered at the highest level in the form, we put the directive on the `form` tag.
-<code-example path="form-validation/src/app/template/hero-form-template.component.html" region="cross-validation-register-validator" title="template/hero-form-template.component.html" linenums="false">
-</code-example>
-
-To provide better user experience, we show an appropriate error message when the form is invalid.
-<code-example path="form-validation/src/app/template/hero-form-template.component.html" region="cross-validation-error-message" title="template/hero-form-template.component.html" linenums="false">
-</code-example>
-
-Note that we check if:
-- the form has the cross validation error returned by the `identityRevealed` validator, 
-- the user is yet to [interact](guide/form-validation#why-check-dirty-and-touched) with the form.
-
-This completes the cross validation example. We managed to:
-- validate the form based on the values of two sibling controls, 
-- show a descriptive error message after the user interacted with the form and the validation failed.
 
 **You can run the <live-example></live-example> to see the complete reactive and template-driven example code.**

aio/content/guide/forms.md

@@ -152,8 +152,7 @@ nothing to distinguish it from any component you've written before.
 Understanding this component requires only the Angular concepts covered in previous pages.
 
 * The code imports the Angular core library and the `Hero` model you just created.
-* The `@Component` selector value of "app-hero-form" means you can drop this form in a parent
-template with a `<app-hero-form>` tag.
+* The `@Component` selector value of "hero-form" means you can drop this form in a parent template with a `<hero-form>` tag.
 * The `templateUrl` property points to a separate file for the template HTML.
 * You defined dummy data for `model` and `powers`, as befits a demo.
 

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 want to build template driven forms (includes <code>NgModel</code>)</td>
+   <td>When you build template driven forms (includes <code>NgModel</code>)</td>
  </tr>
 
  <tr>
    <td><code>ReactiveFormsModule</code></td>
    <td><code>@angular/forms</code></td>
-   <td>When you want to build reactive forms</td>
+   <td>When building reactive forms</td>
  </tr>
 
  <tr>
    <td><code>RouterModule</code></td>
    <td><code>@angular/router</code></td>
-   <td>When you want to use <code>RouterLink</code>, <code>.forRoot()</code>, and <code>.forChild()</code></td>
+   <td>For Routing and 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 want to talk to a server</td>
+   <td>When you to talk to a server</td>
  </tr>
 
 </table>

aio/content/guide/glossary.md

@@ -114,23 +114,19 @@ The following class types can be declared:
 
 A [decorator](guide/glossary#decorator) statement immediately before a field in a class definition that declares the type of that field. Some examples are `@Input` and `@Output`. 
 
-{@a cli}
-
 ## CLI
 
-The [Angular CLI](https://cli.angular.io/) is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a [workspace](guide/glossary#workspace) or [project](guide/glossary#project), and to run [schematics](guide/glossary#schematic) that add and modify code for initial generic versions of various elements. The tool supports all stages of the development cycle, including building, testing, bundling, and deployment.
+The [Angular CLI](https://cli.angular.io/) is a command-line tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
 
-* To begin using the CLI for a new project, see [Getting Started](guide/quickstart) guide.
-* To learn more about the full capabilities of the CLI, see the [Angular CLI documentation].(https://github.com/angular/angular-cli/wiki).
+Learn more in the [Getting Started](guide/quickstart) guide. 
 
 {@a component}
 
 ## Component
 
-A class with the `@Component` [decorator](guide/glossary#decorator) that associates it with a companion [template](guide/glossary#template). Together, the component and template define a [view](guide/glossary#view).
+A class with the `@Component` [decorator](guide/glossary#decorator) that associates it with a companion [template](guide/glossary#template). 
 
-A component is a special type of [directive](guide/glossary#directive).
-The `@Component` decorator extends the `@Directive` decorator with template-oriented features. 
+A component is a special type of [directive](guide/glossary#directive) that represents a [view](guide/glossary#view).The `@Component` decorator extends the `@Directive` decorator with template-oriented features. 
 
 An Angular component class is responsible for exposing data and handling most of the view's display and user-interaction logic through [data binding](guide/glossary#data-binding).
 
@@ -212,8 +208,7 @@ See [Class decorator](guide/glossary#class-decorator), [Class field decorator](g
 
 A design pattern and mechanism for creating and delivering parts of an application (dependencies) to other parts of an application that require them.
 
-In Angular, dependencies are typically services, but can also be values, such as strings or functions.
-An [injector](guide/glossary#injector) for an app (created automatically during bootstrap) instantiates dependencies when needed, using a configured [provider](guide/glossary#provider) of the service or value.
+In Angular, dependencies are typically services, but can also be values, such as strings or functions. An [injector](guide/glossary#injector) for an app (created automatically during bootstrap) creates dependencies when needed, using a registered [provider](guide/glossary#provider) of the service or value. Different providers can provide different implementations of the same service. 
 
 Learn more in the [Dependency Injection](guide/dependency-injection) guide.
 
@@ -285,7 +280,7 @@ Compare [Custom element](guide/glossary#custom-element).
 
 ## Entry point
 
-A JavaScript symbol that makes parts of an npm package available for import by other code. 
+A JavaScript ID that makes parts of an NPM package available for import by other code. 
 The Angular [scoped packages](guide/glossary#scoped-package) each have an entry point named `index`.
 
 Within Angular, use [NgModules](guide/glossary#ngmodule) to achieve the same result.
@@ -315,17 +310,7 @@ Both a [service](guide/glossary#service) and a [component](guide/glossary#compon
 
 An object in the Angular [dependency-injection system](guide/glossary#dependency-injection)
 that can find a named dependency in its cache or create a dependency
-using a configured [provider](guide/glossary#provider). 
-Injectors are created for NgModules automatically as part of the bootstrap process
-and are inherited through the component hierarchy.
-
-* An injector provides a singleton instance of a dependency, and can inject this same instance in multiple components.
-
-* A hierarchy of injectors at the NgModule and component level can provide different instances of a dependency to their own components and child components.
-
-* You can configure injectors with different providers that can provide different implementations of the same dependency.
-
-Learn more about the injector hierarchy in the [Dependency Injection guide](guide/hierarchical-dependency-injection).
+with a registered [provider](guide/glossary#provider). Injectors are created for NgModules automatically as part of the bootstrap process, and inherited through the component hierarchy.
 
 
 ## Input
@@ -388,17 +373,6 @@ Lazy loading speeds up application load time by splitting the application into m
 For example, dependencies can be lazy-loaded as needed&emdash;as opposed to "eager-loaded" modules that are required by the root module, and are thus loaded on launch. 
 Similarly, the [router](guide/glossary#router) can load child views only when the parent view is activated, and you can build custom elements that can be loaded into an Angular app when needed.
 
-{@a library}
-
-## Library
-
-In Angular, a [project](guide/glossary#project) that provides functionality that can be included in other Angular apps. A library is not a complete Angular app, and it cannot run independently. 
-
-* Library developers can use the [CLI](guide/glossary#cli) to `generate` scaffolding for a new library in an existing [workspace](guide/glossary#workspace), and can publish a library as an `npm` package. 
-
-* App developers can use the [CLI](guide/glossary#cli) to `add` a published library for use with an app in the same [workspace](guide/glossary#workspace). 
-
-
 ## Lifecycle hook
 
 An interface that allows you to tap into the lifecycle of [directives](guide/glossary#directive) and [components](guide/glossary#component) as they are created, updated, and destroyed.
@@ -428,7 +402,7 @@ In general, a module collects a block of code dedicated to a single purpose. Ang
 
 In JavaScript (ECMAScript), each file is a module and all objects defined in the file belong to that module. Objects can exported, making them public, and public objects can be imported for use by other modules.
 
-Angular ships as a collection of JavaScript modules, or libraries. Each Angular library name begins with the `@angular` prefix. Install them with the npm package manager and import parts of them with JavaScript `import` declarations.
+Angular ships as a collection of JavaScript modules, or libraries. Each Angular library name begins with the `@angular` prefix. Install them with the NPM package manager and import parts of them with JavaScript `import` declarations.
 
 Compare the Angular [NgModule](guide/glossary#ngmodule).
 
@@ -496,13 +470,8 @@ To learn more, see the [pipes](guide/pipes) page.
 
 ## Polyfill
 
-An [npm package](guide/npm-packages) that plugs gaps in a browser's JavaScript implementation. See the [Browser Support](guide/browser-support) guide for polyfills that support particular functionality for particular platforms. 
+An [NPM package](guide/npm-packages) that plugs gaps in a browser's JavaScript implementation. See the [Browser Support](guide/browser-support) guide for polyfills that support particular functionality for particular platforms. 
 
-{@a project}
-
-## Project
-
-In Angular, a folder within a [workspace](guide/glossary#workspace) that contains an Angular app or [library](guide/glossary#library). A workspace can contain multiple projects. All apps in a workspace can use libraries in the same workspace.
 
 ## Provider
 
@@ -562,24 +531,9 @@ For more information, see the [Routing & Navigation](guide/router) page.
 
 {@a S}
 
-{@a schematic}
-
-## Schematic
-
-A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code. 
-
-The Angular [CLI](guide/glossary#cli) uses schematics to generate and modify [Angular projects](guide/glossary#project) and parts of projects.
-
-* Angular provides a set of schematics for use with the CLI. 
-For details, see [Angular CLI documentation].(https://github.com/angular/angular-cli/wiki).
-
-* Library developers can create schematics that enable the CLI to generate their published libraries.
-For more information, see https://www.npmjs.com/package/@angular-devkit/schematics. 
-
-
 ## Scoped package
 
-A way to group related npm packages. 
+A way to group related NPM packages. 
 NgModules are delivered within *scoped packages* whose names begin with the Angular *scope name* `@angular`. For example, `@angular/core`, `@angular/common`, `@angular/http`, and `@angular/router`.
 
 Import a scoped package in the same way that you import a normal package. 
@@ -723,12 +677,6 @@ The view hierarchy does not imply a component hierarchy. Views that are embedded
 
 See [Custom element](guide/glossary#custom-element)
 
-{@a workspace}
-
-## Workspace
-
-In Angular, a folder that contains [projects](guide/glossary#project) (that is, apps and libraries).
-The [CLI](guide/glossary#cli) `new` command creates a workspace to contain projects. Commands such as `add` and `generate`, that create or operate on apps and libraries, must be executed from within a workspace folder. 
 
 {@a X}
 

aio/content/guide/http.md

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

aio/content/guide/ngmodule-faq.md

@@ -219,7 +219,7 @@ configure services in root and feature modules respectively.
 
 Angular doesn't recognize these names but Angular developers do.
 Follow this convention when you write similar modules with configurable service providers.
-
+<!--KW--I don't understand how Angular doesn't understand these methods...-->
 
 <hr/>
 
@@ -233,8 +233,9 @@ When you import an NgModule,
 Angular adds the module's service providers (the contents of its `providers` list)
 to the application root injector.
 
-This makes the provider visible to every class in the application that knows the provider's lookup token, or name.
+This makes the provider visible to every class in the application that knows the provider's lookup token, or knows its name.
 
+This is by design.
 Extensibility through NgModule imports is a primary goal of the NgModule system.
 Merging NgModule providers into the application injector
 makes it easy for a module library to enrich the entire application with new services.
@@ -246,8 +247,6 @@ If the `HeroModule` provides the `HeroService` and the root `AppModule` imports
 any class that knows the `HeroService` _type_ can inject that service,
 not just the classes declared in the `HeroModule`.
 
-To limit access to a service, consider lazy loading the NgModule that provides that service. See [How do I restrict service scope to a module?](guide/ngmodule-faq#service-scope) for more information.
-
 <hr/>
 
 {@a q-lazy-loaded-module-provider-visibility}
@@ -289,7 +288,6 @@ The `AppModule` always wins.
 
 <hr/>
 
-{@a service-scope}
 
 ## How do I restrict service scope to a module?
 
@@ -337,8 +335,6 @@ You can embed the child components in the top component's template.
 Alternatively, make the top component a routing host by giving it a `<router-outlet>`.
 Define child routes and let the router load module components into that outlet.
 
-Though you can limit access to a service by providing it in a lazy loaded module or providing it in a component, providing services in a component can lead to multiple instances of those services. Thus, the lazy loading is preferable.
-
 <hr/>
 
 {@a q-root-component-or-module}

aio/content/guide/pipes.md

@@ -3,7 +3,7 @@
 Every application starts out with what seems like a simple task: get data, transform them, and show them to users.
 Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket.
 
-Once data arrives, you could push their raw `toString` values directly to the view,
+Once data arrive, you could push their raw `toString` values directly to the view,
 but that rarely makes for a good user experience.
 For example, in most use cases, users prefer to see a date in a simple format like
 <samp>April 15, 1988</samp> rather than the raw string format

aio/content/guide/releases.md

@@ -142,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:
 
-* We announce deprecated features in the [change log](https://github.com/angular/angular/blob/master/CHANGELOG.md "Angular change log").
+* When 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.
 

aio/content/guide/styleguide.md

@@ -933,18 +933,29 @@ As always, strive for consistency.
 
 <a href="#toc">Back to top</a>
 
-{@a 05-02}
+{@a 02-06}
 
-### Component selectors
+### Directive selectors
 
-#### Style 05-02
+#### Style 02-06
 
 
 <div class="s-rule do">
 
 
 
-**Do** use _dashed-case_ or _kebab-case_ for naming the element selectors of components.
+**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>
@@ -955,40 +966,16 @@ As always, strive for consistency.
 
 
 
-**Why?** Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
+**Why?** The Angular HTML parser is case sensitive and recognizes lower camel case.
 
 
 </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}
 
-### Component custom prefix
+### Custom prefix for components
 
 #### Style 02-07
 
@@ -1091,51 +1078,11 @@ 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}
 
-### Directive custom prefix
+### Custom prefix for directives
 
 #### Style 02-08
 
@@ -3109,9 +3056,9 @@ module are referenced across the entire application.
 
 
 
-**Consider** _not_ providing services in shared modules. Services are usually
+**Avoid** providing services in shared modules. Services are usually
 singletons that are provided once for the entire application or
-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.
+in a particular feature module.
 
 
 </div>
@@ -3763,6 +3710,59 @@ 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