release: cut the v6.0.0-rc.6 release

This reverts commit ac2b530f4b.

The change is breaking targets in g3 see cl/194336387.

.circleci/README.md

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

.circleci/config.yml

@@ -12,8 +12,8 @@
 ## IMPORTANT
 # If you change the `docker_image` version, also change the `cache_key` suffix and the version of
 # `com_github_bazelbuild_buildtools` in the `/WORKSPACE` file.
-var_1: &docker_image angular/ngcontainer:0.3.3
-var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.3.3
+var_1: &docker_image angular/ngcontainer:0.2.0
+var_2: &cache_key v2-angular-{{ .Branch }}-{{ checksum "yarn.lock" }}-0.2.0
 
 # Define common ENV vars
 var_3: &define_env_vars
@@ -63,7 +63,7 @@ jobs:
       - run: yarn install --frozen-lockfile --non-interactive
       - run: ./node_modules/.bin/gulp lint
 
-  test:
+  build:
     <<: *job_defaults
     resource_class: xlarge
     steps:
@@ -80,152 +80,37 @@ 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 --build_tag_filters=-ivy-only --test_tag_filters=-manual,-ivy-only
+      - run: bazel query --output=label //... | xargs bazel test
+
+      # We run the integration tests outside of Bazel for now.
+      # See comments inside this script.
+      - run: xvfb-run --auto-servernum ./integration/run_tests.sh
 
       # CircleCI will allow us to go back and view/download these artifacts from past builds.
       # Also we can use a service like https://buildsize.org/ to automatically track binary size of these artifacts.
-      # The destination keys need be format {projectName}/{context}/{fileName} so that the github-robot can process them for size calculations
-      # projectName should remain consistant to group files
-      # context and fileName can be almost anything (within usual URI rules)
-      # There should only be exactly 2 forward slashes in the path
-      # This is so they're backwards compatiable with the existing data we have on bundle sizes
       - store_artifacts:
           path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js
-          destination: core/hello_world/bundle
+          destination: packages/core/test/bundling/hello_world/bundle.min.js
       - store_artifacts:
           path: dist/bin/packages/core/test/bundling/todo/bundle.min.js
-          destination: core/todo/bundle
+          destination: packages/core/test/bundling/todo/bundle.min.js
       - store_artifacts:
-          path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js.br
-          destination: core/hello_world/bundle.br
+          path: dist/bin/packages/core/test/bundling/hello_world/bundle.min.js.brotli
+          destination: packages/core/test/bundling/hello_world/bundle.min.js.brotli
       - store_artifacts:
-          path: dist/bin/packages/core/test/bundling/todo/bundle.min.js.br
-          destination: core/todo/bundle.br
+          path: dist/bin/packages/core/test/bundling/todo/bundle.min.js.brotli
+          destination: packages/core/test/bundling/todo/bundle.min.js.brotli
+
       - save_cache:
           key: *cache_key
           paths:
             - "node_modules"
             - "~/bazel_repository_cache"
-  # Temporary job to test what will happen when we flip the Ivy flag to true
-  test_ivy_jit:
-    <<: *job_defaults
-    resource_class: xlarge
-    steps:
-      - *define_env_vars
-      - checkout:
-          <<: *post_checkout
-      # See remote cache documentation in /docs/BAZEL.md
-      - run: .circleci/setup_cache.sh
-      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
-      - *setup-bazel-remote-cache
-
-      - restore_cache:
-          key: *cache_key
-
-      - run: bazel run @yarn//:yarn
-      - run: bazel query --output=label //... | xargs bazel test --define=compile=jit --build_tag_filters=ivy-jit --test_tag_filters=-manual,ivy-jit
-
-  test_ivy_aot:
-    <<: *job_defaults
-    resource_class: xlarge
-    steps:
-      - *define_env_vars
-      - checkout:
-          <<: *post_checkout
-      # See remote cache documentation in /docs/BAZEL.md
-      - run: .circleci/setup_cache.sh
-      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
-      - *setup-bazel-remote-cache
-
-      - restore_cache:
-          key: *cache_key
-
-      - run: bazel run @yarn//:yarn
-      - run: bazel query --output=label //... | xargs bazel test --define=compile=local --build_tag_filters=ivy-local --test_tag_filters=-manual,ivy-local
-
-  # This job exists only for backwards-compatibility with old scripts and tests
-  # that rely on the pre-Bazel dist/packages-dist layout.
-  # It duplicates some work with the job above: we build the bazel packages
-  # twice. Even though we have a remote cache, these jobs will typically run in
-  # parallel so up-to-date outputs will not be available at the time the build
-  # starts.
-  # No new jobs should depend on this one.
-  build-packages-dist:
-    <<: *job_defaults
-    resource_class: xlarge
-    steps:
-      - *define_env_vars
-      - checkout:
-          <<: *post_checkout
-      # See remote cache documentation in /docs/BAZEL.md
-      - run: .circleci/setup_cache.sh
-      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
-      - *setup-bazel-remote-cache
-
-      - run: bazel run @nodejs//:yarn
-      - run: scripts/build-packages-dist.sh
-
-      # Save the npm packages from //packages/... for other workflow jobs to read
-      # https://circleci.com/docs/2.0/workflows/#using-workspaces-to-share-data-among-jobs
-      - persist_to_workspace:
-          root: dist
-          paths:
-            - packages-dist
-            - packages-dist-ivy-jit
-            - packages-dist-ivy-local
-
-  # We run the integration tests outside of Bazel for now.
-  # They are a separate workflow job so that they can be easily re-run.
-  # When the tests are ported to bazel test targets, they should move to the "test"
-  # job above, as part of the bazel test command. That has flaky_test_attempts so the
-  # need to re-run manually should be alleviated.
-  # 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:
-          <<: *post_checkout
-      - attach_workspace:
-          at: dist
-      - run: xvfb-run --auto-servernum ./integration/run_tests.sh
-
-  # This job updates the content of repos like github.com/angular/core-builds
-  # for every green build on angular/angular.
-  publish_snapshot:
-    <<: *job_defaults
-    steps:
-      # See below - ideally this job should not trigger for non-upstream builds.
-      # But since it does, we have to check this condition.
-      - run:
-          name: Skip this job for Pull Requests and Fork builds
-          # Note, `|| true` on the end makes this step always exit 0
-          command: '[[
-              -v CIRCLE_PR_NUMBER
-              || "$CIRCLE_PROJECT_USERNAME" != "angular"
-              || "$CIRCLE_PROJECT_REPONAME" != "angular"
-          ]] && circleci step halt || true'
-      - checkout:
-          <<: *post_checkout
-      - attach_workspace:
-          at: dist
-      # CircleCI has a config setting to force SSH for all github connections
-      # This is not compatible with our mechanism of using a Personal Access Token
-      # Clear the global setting
-      - run: git config --global --unset "url.ssh://git@github.com.insteadof"
-      - run:
-          name: Decrypt github credentials
-          command: 'openssl aes-256-cbc -d -in .circleci/github_token -k "${KEY}" -out ~/.git_credentials'
-      - run: ./scripts/ci/publish-build-artifacts.sh
 
   aio_monitoring:
     <<: *job_defaults
@@ -241,28 +126,7 @@ workflows:
   default_workflow:
     jobs:
       - lint
-      - test
-      - test_ivy_jit
-      - test_ivy_aot
-      - build-packages-dist
-      - integration_test:
-          requires:
-            - build-packages-dist
-      - publish_snapshot:
-          # Note: no filters on this job because we want it to run for all upstream branches
-          # We'd really like to filter out pull requests here, but not yet available:
-          # https://discuss.circleci.com/t/workflows-pull-request-filter/14396/4
-          # Instead, the job just exits immediately at the first step.
-          requires:
-            # Only publish if tests and integration tests pass
-            - test
-            - test_ivy_jit
-            - test_ivy_aot
-            - integration_test
-            # Get the artifacts to publish from the build-packages-dist job
-            # since the publishing script expects the legacy outputs layout.
-            - build-packages-dist
-
+      - build
   aio_monitoring:
     jobs:
       - aio_monitoring

.github/angular-robot.yml

@@ -1,14 +1,5 @@
 # Configuration for angular-robot
 
-#options for the size plugin
-size:
-  disabled: false
-  maxSizeIncrease: 1000
-  circleCiStatusName: "ci/circleci: build-packages-dist"
-  status:
-    disabled: false
-    context: "ci/angular: size"
-
 # options for the merge plugin
 merge:
   # the status will be added to your pull requests
@@ -45,12 +36,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

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

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(
@@ -22,7 +22,6 @@ node_modules_filegroup(
         "jasmine",
         "minimist",
         "protobufjs",
-        "protractor",
         "reflect-metadata",
         "source-map-support",
         "tsickle",
@@ -35,9 +34,6 @@ node_modules_filegroup(
         "@types",
         "@webcomponents/custom-elements",
     ],
-    patterns = [
-        "node_modules/protractor/**",
-    ],
 )
 
 filegroup(
@@ -48,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",
     ],
 )

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:

README.md

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

WORKSPACE

@@ -1,106 +1,34 @@
 workspace(name = "angular")
 
-#
-# Download Bazel toolchain dependencies as needed by build actions
-#
-
 http_archive(
     name = "build_bazel_rules_nodejs",
-    url = "https://github.com/bazelbuild/rules_nodejs/archive/0.10.1.zip",
-    strip_prefix = "rules_nodejs-0.10.1",
-    sha256 = "634206524d90dc03c52392fa3f19a16637d2bcf154910436fe1d669a0d9d7b9c",
+    url = "https://github.com/bazelbuild/rules_nodejs/archive/1931156c232a08356dfda02e9c8b0275c2e63c00.zip",
+    strip_prefix = "rules_nodejs-1931156c232a08356dfda02e9c8b0275c2e63c00",
+    sha256 = "9cfe33276a6ac0076ee9ee159c4a2576f9851c0f437435b5ac19b2e592493078",
 )
 
-http_archive(
-    name = "io_bazel_rules_webtesting",
-    url = "https://github.com/bazelbuild/rules_webtesting/archive/7ffe970bbf380891754487f66c3d680c087d67f2.zip",
-    strip_prefix = "rules_webtesting-7ffe970bbf380891754487f66c3d680c087d67f2",
-    sha256 = "4fb0dca8c9a90547891b7ef486592775a523330fc4555c88cd8f09270055c2ce",
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
+
+check_bazel_version("0.11.1")
+node_repositories(package_json = ["//:package.json"])
+
+yarn_install(
+    name = "ts-api-guardian_runtime_deps",
+    package_json = "//tools/ts-api-guardian:package.json",
+    yarn_lock = "//tools/ts-api-guardian:yarn.lock",
 )
 
 http_archive(
     name = "build_bazel_rules_typescript",
-    url = "https://github.com/bazelbuild/rules_typescript/archive/0.15.1.zip",
-    strip_prefix = "rules_typescript-0.15.1",
-    sha256 = "3792cc20ef13bb1d1d8b1760894c3320f02a87843e3a04fed7e8e454a75328b6",
-)
-
-http_archive(
-    name = "io_bazel_rules_go",
-    url = "https://github.com/bazelbuild/rules_go/releases/download/0.10.3/rules_go-0.10.3.tar.gz",
-    sha256 = "feba3278c13cde8d67e341a837f69a029f698d7a27ddbb2a202be7a10b22142a",
-)
-
-# 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"
-
-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",
-)
-
-# Fetching the Bazel source code allows us to compile the Skylark linter
-http_archive(
-    name = "io_bazel",
-    url = "https://github.com/bazelbuild/bazel/archive/968f87900dce45a7af749a965b72dbac51b176b3.zip",
-    strip_prefix = "bazel-968f87900dce45a7af749a965b72dbac51b176b3",
-    sha256 = "e373d2ae24955c1254c495c9c421c009d88966565c35e4e8444c082cb1f0f48f",
-)
-
-# We have a source dependency on the Devkit repository, because it's built with
-# Bazel.
-# This allows us to edit sources and have the effect appear immediately without
-# re-packaging or "npm link"ing.
-# Even better, things like aspects will visit the entire graph including
-# ts_library rules in the devkit repository.
-http_archive(
-    name = "angular_cli",
-    url = "https://github.com/angular/angular-cli/archive/v6.1.0-rc.0.zip",
-    strip_prefix = "angular-cli-6.1.0-rc.0",
-    sha256 = "8cf320ea58c321e103f39087376feea502f20eaf79c61a4fdb05c7286c8684fd",
-)
-
-http_archive(
-    name = "org_brotli",
-    url = "https://github.com/google/brotli/archive/f9b8c02673c576a3e807edbf3a9328e9e7af6d7c.zip",
-    strip_prefix = "brotli-f9b8c02673c576a3e807edbf3a9328e9e7af6d7c",
-    sha256 = "8a517806d2b7c8505ba5c53934e7d7c70d341b68ffd268e9044d35b564a48828",
-)
-
-#
-# Load and install our dependencies downloaded above.
-#
-
-load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
-
-check_bazel_version("0.15.0")
-node_repositories(package_json = ["//:package.json"])
-
-load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
-
-go_rules_dependencies()
-go_register_toolchains()
-
-load("@io_bazel_rules_webtesting//web:repositories.bzl", "browser_repositories", "web_test_repositories")
-
-web_test_repositories()
-browser_repositories(
-    chromium = True,
-    firefox = True,
+    url = "https://github.com/bazelbuild/rules_typescript/archive/0.12.1.zip",
+    strip_prefix = "rules_typescript-0.12.1",
+    sha256 = "24e2c36f60508c6d270ae4265b89b381e3f66d550e70c367ed3755ad8d7ce3b0",
 )
 
 load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
 
 ts_setup_workspace()
 
-#
-# Point Bazel to WORKSPACEs that live in subdirectories
-#
-
 local_repository(
     name = "rxjs",
     path = "node_modules/rxjs/src",
@@ -113,20 +41,54 @@ local_repository(
     path = "integration/bazel",
 )
 
-#
-# Ask Bazel to manage these toolchain dependencies for us.
-# Bazel will run `yarn install` when one of these toolchains is requested during
-# a build.
-#
+# This commit matches the version of buildifier in angular/ngcontainer
+# If you change this, also check if it matches the version in the angular/ngcontainer
+# version in /.circleci/config.yml
+BAZEL_BUILDTOOLS_VERSION = "70bc7843bb9950fece2bc014ed16de03419e36e2"
 
-yarn_install(
-    name = "ts-api-guardian_runtime_deps",
-    package_json = "//tools/ts-api-guardian:package.json",
-    yarn_lock = "//tools/ts-api-guardian:yarn.lock",
+http_archive(
+    name = "com_github_bazelbuild_buildtools",
+    url = "https://github.com/bazelbuild/buildtools/archive/%s.zip" % BAZEL_BUILDTOOLS_VERSION,
+    strip_prefix = "buildtools-%s" % BAZEL_BUILDTOOLS_VERSION,
+    sha256 = "367c23a5fe7fc2a7cb57863d3718b4149f0e57426c48c8ad54c45348a0b53cc1",
 )
 
-yarn_install(
-    name = "http-server_runtime_deps",
-    package_json = "//tools/http-server:package.json",
-    yarn_lock = "//tools/http-server:yarn.lock",
+http_archive(
+    name = "io_bazel_rules_go",
+    url = "https://github.com/bazelbuild/rules_go/releases/download/0.10.3/rules_go-0.10.3.tar.gz",
+    sha256 = "feba3278c13cde8d67e341a837f69a029f698d7a27ddbb2a202be7a10b22142a",
+)
+
+load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
+
+go_rules_dependencies()
+
+go_register_toolchains()
+
+# Fetching the Bazel source code allows us to compile the Skylark linter
+http_archive(
+    name = "io_bazel",
+    url = "https://github.com/bazelbuild/bazel/archive/5a35e72f9e97c06540c479f8c31512fb4656202f.zip",
+    strip_prefix = "bazel-5a35e72f9e97c06540c479f8c31512fb4656202f",
+    sha256 = "ed33a52874c14e3b487fb50f390c541fab9c81a33d986d38fb01766a66dbcd21",
+)
+
+# We have a source dependency on the Devkit repository, because it's built with
+# Bazel.
+# This allows us to edit sources and have the effect appear immediately without
+# re-packaging or "npm link"ing.
+# Even better, things like aspects will visit the entire graph including
+# ts_library rules in the devkit repository.
+http_archive(
+    name = "angular_devkit",
+    url = "https://github.com/angular/devkit/archive/v0.3.1.zip",
+    strip_prefix = "devkit-0.3.1",
+    sha256 = "31d4b597fe9336650acf13df053c1c84dcbe9c29c6a833bcac3819cd3fd8cad3",
+)
+
+http_archive(
+    name = "org_brotli",
+    url = "https://github.com/google/brotli/archive/c6333e1e79fb62ea088443f192293f964409b04e.zip",
+    strip_prefix = "brotli-c6333e1e79fb62ea088443f192293f964409b04e",
+    sha256 = "3f781988dee7dd3bcce2bf238294663cfaaf3b6433505bdb762e24d0a284d1dc",
 )

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/aio-builds-setup/scripts/update-preview-server.sh

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

aio/angular.json

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

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/cli-quickstart/README.md

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

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

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

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

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

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

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

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,41 +7,33 @@
 
     <div [hidden]="formDir.submitted">
 
-      <div class="cross-validation" [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
-        <div class="form-group">
+      <div class="form-group">
 
-          <label for="name">Name</label>
-          <!-- #docregion name-with-error-msg -->
-          <input id="name" class="form-control"
-                formControlName="name" required >
+        <label for="name">Name</label>
+        <!-- #docregion name-with-error-msg -->
+        <input id="name" class="form-control"
+               formControlName="name" required >
 
-          <div *ngIf="name.invalid && (name.dirty || name.touched)"
-              class="alert alert-danger">
+        <div *ngIf="name.invalid && (name.dirty || name.touched)"
+             class="alert alert-danger">
 
-            <div *ngIf="name.errors.required">
-              Name is required.
-            </div>
-            <div *ngIf="name.errors.minlength">
-              Name must be at least 4 characters long.
-            </div>
-            <div *ngIf="name.errors.forbiddenName">
-              Name cannot be Bob.
-            </div>
+          <div *ngIf="name.errors.required">
+            Name is required.
+          </div>
+          <div *ngIf="name.errors.minlength">
+            Name must be at least 4 characters long.
+          </div>
+          <div *ngIf="name.errors.forbiddenName">
+            Name cannot be Bob.
           </div>
-          <!-- #enddocregion name-with-error-msg -->
         </div>
+        <!-- #enddocregion name-with-error-msg -->
+      </div>
 
-        <div class="form-group">
-          <label for="alterEgo">Alter Ego</label>
-          <input id="alterEgo" class="form-control"
-              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 class="form-group">
+        <label for="alterEgo">Alter Ego</label>
+        <input id="alterEgo" class="form-control"
+            formControlName="alterEgo"  >
       </div>
 
       <div class="form-group">

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

@@ -1,36 +1,40 @@
 /* tslint:disable: member-ordering forin */
+// #docplaster
 // #docregion
-import { Component, OnInit } from '@angular/core';
+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 {
 
   powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
 
-  hero = { name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0] };
+  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)
+        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,48 +2,41 @@
 <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 -->
-          <!-- #docregion name-input -->
-          <input id="name" name="name" class="form-control" 
-                required minlength="4" appForbiddenName="bob"
-                [(ngModel)]="hero.name" #name="ngModel" >
-          <!-- #enddocregion name-input -->
 
-          <div *ngIf="name.invalid && (name.dirty || name.touched)"
-              class="alert alert-danger">
+      <div class="form-group">
+        <label for="name">Name</label>
+        <!-- #docregion name-with-error-msg -->
+        <!-- #docregion name-input -->
+        <input id="name" name="name" class="form-control"
+               required minlength="4" appForbiddenName="bob"
+               [(ngModel)]="hero.name" #name="ngModel" >
+        <!-- #enddocregion name-input -->
 
-            <div *ngIf="name.errors.required">
-              Name is required.
-            </div>
-            <div *ngIf="name.errors.minlength">
-              Name must be at least 4 characters long.
-            </div>
-            <div *ngIf="name.errors.forbiddenName">
-              Name cannot be Bob.
-            </div>
+        <div *ngIf="name.invalid && (name.dirty || name.touched)"
+             class="alert alert-danger">
 
+          <div *ngIf="name.errors.required">
+            Name is required.
+          </div>
+          <div *ngIf="name.errors.minlength">
+            Name must be at least 4 characters long.
+          </div>
+          <div *ngIf="name.errors.forbiddenName">
+            Name cannot be Bob.
           </div>
-          <!-- #enddocregion name-with-error-msg -->
-        </div>
 
-        <div class="form-group">
-          <label for="alterEgo">Alter Ego</label>
-          <input id="alterEgo" class="form-control"
-                name="alterEgo" [(ngModel)]="hero.alterEgo" >
         </div>
+        <!-- #enddocregion name-with-error-msg -->
+      </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 class="form-group">
+        <label for="alterEgo">Alter Ego</label>
+        <input id="alterEgo" class="form-control"
+               name="alterEgo" [(ngModel)]="hero.alterEgo" >
       </div>
 
       <div class="form-group">
@@ -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/http/src/testing/http-client.spec.ts

@@ -150,7 +150,7 @@ describe('HttpClient testing', () => {
 
     // Create mock ErrorEvent, raised when something goes wrong at the network level.
     // Connection timeout, DNS error, offline, etc
-    const mockError = new ErrorEvent('Network error', {
+    const errorEvent = new ErrorEvent('so sad', {
       message: emsg,
       // #enddocregion network-error
       // The rest of this is optional and not used.
@@ -162,7 +162,7 @@ describe('HttpClient testing', () => {
     });
 
     // Respond with mock error
-    req.error(mockError);
+    req.error(errorEvent);
   });
   // #enddocregion network-error
 

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

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

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

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

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

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

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

@@ -6,15 +6,14 @@ import { heroes } from './hero';
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: [ './app.component.css' ]
 })
 export class AppComponent {
   heroes = heroes;
   hero = this.heroes[0];
-  heroTraits = ['honest', 'brave', 'considerate'];
+  heroTraits = [ 'honest', 'brave', 'considerate' ];
 
   // flags for the table
-
   attrDirs = true;
   strucDirs = true;
   divNgIf = false;

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

@@ -1,9 +1,9 @@
 // #docregion
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { NgModule }      from '@angular/core';
+import { FormsModule }   from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppComponent } from './app.component';
+import { AppComponent }     from './app.component';
 import { ContentComponent } from './content.component';
 import { heroComponents } from './hero.components';
 

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/ngcontainer/src/app/hero.ts

@@ -6,8 +6,8 @@ export class Hero {
 }
 
 export const heroes: Hero[] = [
-  { id: 1, name: 'Mr. Nice', emotion: 'happy' },
-  { id: 2, name: 'Narco', emotion: 'sad' },
+  { id: 1, name: 'Mr. Nice',  emotion: 'happy'},
+  { id: 2, name: 'Narco',     emotion: 'sad' },
   { id: 3, name: 'Windstorm', emotion: 'confused' },
-  { id: 4, name: 'Magneta' }
+  { id: 4, name: 'Magneta'}
 ];

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

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

aio/content/examples/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/service-worker-getting-started/src/ngsw-config.json

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

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

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

aio/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html

@@ -3,15 +3,15 @@
 <!-- #enddocregion show-hero-1 -->
 
 <!-- #docregion show-hero-2 -->
-<h2>{{hero.name}} Details</h2>
+<h2>{{ hero.name }} Details</h2>
 <div><span>id: </span>{{hero.id}}</div>
 <div><span>name: </span>{{hero.name}}</div>
 <!-- #enddocregion show-hero-2 -->
 
 <!-- #docregion name-input -->
 <div>
-  <label>name:
-    <input [(ngModel)]="hero.name" placeholder="name">
-  </label>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name">
+    </label>
 </div>
 <!-- #enddocregion name-input -->

aio/content/examples/toh-pt1/src/app/heroes/heroes.component.html

@@ -1,10 +1,10 @@
 <!-- #docregion -->
 <!-- #docregion pipe -->
-<h2>{{hero.name | uppercase}} Details</h2>
+<h2>{{ hero.name | uppercase }} Details</h2>
 <!-- #enddocregion pipe -->
 <div><span>id: </span>{{hero.id}}</div>
 <div>
-  <label>name:
-    <input [(ngModel)]="hero.name" placeholder="name">
-  </label>
+    <label>name:
+      <input [(ngModel)]="hero.name" placeholder="name">
+    </label>
 </div>

aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html

@@ -14,7 +14,7 @@
 <div *ngIf="selectedHero">
 
   <!-- #docregion selectedHero-details -->
-  <h2>{{selectedHero.name | uppercase}} Details</h2>
+  <h2>{{ selectedHero.name | uppercase }} Details</h2>
   <div><span>id: </span>{{selectedHero.id}}</div>
   <div>
     <label>name:

aio/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="hero">
 
-  <h2>{{hero.name | uppercase}} Details</h2>
+  <h2>{{ hero.name | uppercase }} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
     <label>name:

aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="hero">
-  <h2>{{hero.name | uppercase}} Details</h2>
+  <h2>{{ hero.name | uppercase }} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
     <label>name:

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-pt5/src/app/hero-detail/hero-detail.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="hero">
-  <h2>{{hero.name | uppercase}} Details</h2>
+  <h2>{{ hero.name | uppercase }} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
     <label>name:

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-detail/hero-detail.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="hero">
-  <h2>{{hero.name | uppercase}} Details</h2>
+  <h2>{{ hero.name | uppercase }} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>
     <label>name:

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

@@ -20,7 +20,7 @@
     </a>
     <!-- #docregion delete -->
     <button class="delete" title="delete hero"
-      (click)="delete(hero)">x</button>
+    (click)="delete(hero)">x</button>
     <!-- #enddocregion delete -->
   </li>
 </ul>

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/server.ts

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

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

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

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": {
-    "skipMetadataEmit" : true
+   "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