release: cut the v9.0.7 release

This commit updates Ivy compatibility guide with additional note on extra text interpolations and HTML tags in translations.

PR Close #36029

.circleci/config.yml

@@ -29,7 +29,7 @@ var_4_win: &cache_key_win_fallback v5-angular-win-node-12-
 
 # Cache key for the `components-repo-unit-tests` job. **Note** when updating the SHA in the
 # cache keys also update the SHA for the "COMPONENTS_REPO_COMMIT" environment variable.
-var_5: &components_repo_unit_tests_cache_key v5-angular-components-2ec7254f88c4865e0de251f74c27e64c9d00d40a
+var_5: &components_repo_unit_tests_cache_key v5-angular-components-598db096e668aa7e9debd56eedfd127b7a55e371
 var_6: &components_repo_unit_tests_cache_key_fallback v5-angular-components-
 
 # Workspace initially persisted by the `setup` job, and then enhanced by `build-npm-packages` and
@@ -275,6 +275,7 @@ jobs:
               (echo -e "\n.bzl files have lint errors. Please run ''yarn bazel:lint-fix''"; exit 1)'
 
       - run: yarn lint
+      - run: yarn ts-circular-deps:check
       - run: node tools/pullapprove/verify.js
 
   test:
@@ -346,7 +347,7 @@ jobs:
           # See /tools/saucelabs/README.md for more info
           command: |
             yarn bazel run //tools/saucelabs:sauce_service_setup
-            TESTS=$(./node_modules/.bin/bazel query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "ivy-only", ...) except attr("tags", "fixme-saucelabs-ve", ...)')
+            TESTS=$(./node_modules/.bin/bazelisk query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "ivy-only", ...) except attr("tags", "fixme-saucelabs-ve", ...)')
             yarn bazel test --config=saucelabs ${TESTS}
             yarn bazel run //tools/saucelabs:sauce_service_stop
           no_output_timeout: 40m
@@ -370,7 +371,7 @@ jobs:
           # See /tools/saucelabs/README.md for more info
           command: |
             yarn bazel run //tools/saucelabs:sauce_service_setup
-            TESTS=$(./node_modules/.bin/bazel query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "no-ivy-aot", ...) except attr("tags", "fixme-saucelabs-ivy", ...)')
+            TESTS=$(./node_modules/.bin/bazelisk query --output label '(kind(karma_web_test, ...) intersect attr("tags", "saucelabs", ...)) except attr("tags", "no-ivy-aot", ...) except attr("tags", "fixme-saucelabs-ivy", ...)')
             yarn bazel test --config=saucelabs --config=ivy ${TESTS}
             yarn bazel run //tools/saucelabs:sauce_service_stop
           no_output_timeout: 40m
@@ -462,15 +463,6 @@ jobs:
       - install_chrome_libs
         # Install aio
       - run: yarn --cwd aio install --frozen-lockfile --non-interactive
-      - when:
-          condition: << parameters.ivy >>
-          steps:
-              # Rename the Ivy packages dist folder to "dist/packages-dist" as the AIO
-              # package installer picks up the locally built packages from that location.
-              # *Note*: We could also adjust the packages installer, but given we won't have
-              # two different folders of Angular distributions in the future, we should keep
-              # the packages installer unchanged.
-            - run: mv dist/packages-dist-ivy-aot dist/packages-dist
         # Run examples tests. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
         # Since the parallelism is set to "5", there will be five parallel CircleCI containers.
         # with either "0", "1", etc as node index. This can be passed to the "--shard" argument.
@@ -552,22 +544,7 @@ jobs:
           root: *workspace_location
           paths:
             - ng/dist/packages-dist-ivy-aot
-
-  # We run a subset of the integration tests outside of Bazel that track
-  # payload size.
-  # See comments inside the integration/run_tests.sh script.
-  # TODO(gregmagolan): move payload size tracking to Bazel and remove this job.
-  integration_test:
-    executor: default-executor
-    parallelism: 3
-    steps:
-      - custom_attach_workspace
-      - init_environment
-      - install_chrome_libs
-      - install_java
-      # Runs the integration tests in parallel across multiple CircleCI container instances. The
-      # amount of container nodes for this job is controlled by the "parallelism" option.
-      - run: ./integration/run_tests.sh ${CIRCLE_NODE_INDEX} ${CIRCLE_NODE_TOTAL}
+            - ng/dist/zone.js-dist-ivy-aot
 
   # This job creates compressed tarballs (`.tgz` files) for all Angular packages and stores them as
   # build artifacts. This makes it easy to try out changes from a PR build for testing purposes.
@@ -842,7 +819,7 @@ workflows:
           name: test_docs_examples_ivy
           ivy: true
           requires:
-            - build-ivy-npm-packages
+            - build-npm-packages
       - aio_preview:
           # Only run on PR builds. (There can be no previews for non-PR builds.)
           <<: *only_on_pull_requests
@@ -851,9 +828,6 @@ workflows:
       - test_aio_preview:
           requires:
             - aio_preview
-      - integration_test:
-          requires:
-            - build-npm-packages
       - publish_packages_as_artifacts:
           requires:
             - build-npm-packages
@@ -866,7 +840,6 @@ workflows:
             # Only publish if tests and integration tests pass
             - test
             - test_ivy_aot
-            - integration_test
             # Only publish if `aio`/`docs` tests using the locally built Angular packages pass
             - test_aio_local
             - test_aio_local_viewengine

.circleci/env.sh

@@ -68,7 +68,7 @@ setPublicVar COMPONENTS_REPO_TMP_DIR "/tmp/angular-components-repo"
 setPublicVar COMPONENTS_REPO_URL "https://github.com/angular/components.git"
 setPublicVar COMPONENTS_REPO_BRANCH "master"
 # **NOTE**: When updating the commit SHA, also update the cache key in the CircleCI `config.yml`.
-setPublicVar COMPONENTS_REPO_COMMIT "2ec7254f88c4865e0de251f74c27e64c9d00d40a"
+setPublicVar COMPONENTS_REPO_COMMIT "598db096e668aa7e9debd56eedfd127b7a55e371"
 
 
 ####################################################################################################
@@ -82,6 +82,22 @@ openssl aes-256-cbc -d -in "${projectDir}/.circleci/gcp_token" \
 ####################################################################################################
 cp "${projectDir}/.circleci/bazel.linux.rc" "$HOME/.bazelrc";
 
+####################################################################################################
+# Create shell script in /tmp for Bazel actions to access CI envs without
+# busting the cache. Used by payload-size.sh script in integration tests.
+####################################################################################################
+readonly bazelVarEnv="/tmp/bazel-ci-env.sh"
+echo "# Setup by /.circle/env.sh" > $bazelVarEnv
+echo "export PROJECT_ROOT=\"${PROJECT_ROOT}\";" >> $bazelVarEnv
+echo "export CI_BRANCH=\"${CI_BRANCH}\";" >> $bazelVarEnv
+echo "export CI_BUILD_URL=\"${CI_BUILD_URL}\";" >> $bazelVarEnv
+echo "export CI_COMMIT=\"${CI_COMMIT}\";" >> $bazelVarEnv
+echo "export CI_COMMIT_RANGE=\"${CI_COMMIT_RANGE}\";" >> $bazelVarEnv
+echo "export CI_PULL_REQUEST=\"${CI_PULL_REQUEST}\";" >> $bazelVarEnv
+echo "export CI_REPO_NAME=\"${CI_REPO_NAME}\";" >> $bazelVarEnv
+echo "export CI_REPO_OWNER=\"${CI_REPO_OWNER}\";" >> $bazelVarEnv
+echo "export CI_SECRET_PAYLOAD_FIREBASE_TOKEN=\"${CI_SECRET_PAYLOAD_FIREBASE_TOKEN}\";" >> $bazelVarEnv
+
 ####################################################################################################
 ####################################################################################################
 ##                  Source `$BASH_ENV` to make the variables available immediately.               ##

.github/workflows/lock-closed.yml

@@ -7,6 +7,7 @@ on:
 
 jobs:
   lock_closed:
+    if: github.repository == 'angular/angular'
     runs-on: ubuntu-latest
     steps:
       - uses: angular/dev-infra/github-actions/lock-closed@66462f6

.pullapprove.yml

@@ -258,7 +258,6 @@ groups:
           'aio/content/examples/ngmodules/**',
           'aio/content/guide/ngmodule-api.md',
           'aio/content/guide/ngmodule-faq.md',
-          'aio/content/examples/ngmodule-faq/**',
           'aio/content/guide/ngmodule-vs-jsmodule.md',
           'aio/content/guide/module-types.md',
           'aio/content/guide/template-syntax.md',
@@ -546,7 +545,6 @@ groups:
     conditions:
       - >
         contains_any_globs(files, [
-          'modules/benchmarks_external/**',
           'modules/benchmarks/**'
           ])
     reviewers:
@@ -902,8 +900,7 @@ groups:
           'aio/content/guide/docs-style-guide.md',
           'aio/content/examples/docs-style-guide/**',
           'aio/content/images/guide/docs-style-guide/**',
-          'aio/content/guide/visual-studio-2015.md',
-          'aio/content/examples/visual-studio-2015/**'
+          'aio/content/guide/visual-studio-2015.md'
           ])
     reviewers:
       users:
@@ -928,6 +925,7 @@ groups:
           '.github/**',
           '.vscode/**',
           '.yarn/**',
+          'dev-infra/**',
           'docs/BAZEL.md',
           'docs/CARETAKER.md',
           'docs/COMMITTER.md',
@@ -939,6 +937,7 @@ groups:
           'docs/SAVED_REPLIES.md',
           'docs/TOOLS.md',
           'docs/TRIAGE_AND_LABELS.md',
+          'goldens/*',
           'modules/e2e_util/e2e_util.ts',
           'modules/e2e_util/perf_util.ts',
           'modules/*',
@@ -952,13 +951,12 @@ groups:
           'tools/browsers/**',
           'tools/build/**',
           'tools/circular_dependency_test/**',
+          'tools/contributing-stats/**',
           'tools/gulp-tasks/**',
           'tools/ng_rollup_bundle/**',
           'tools/ngcontainer/**',
           'tools/npm/**',
           'tools/npm_integration_test/**',
-          'tools/public_api_guard/BUILD.bazel',
-          'tools/public_api_guard/public_api_guard.bzl',
           'tools/pullapprove/**',
           'tools/rxjs/**',
           'tools/saucelabs/**',
@@ -993,7 +991,7 @@ groups:
     conditions:
       - >
         contains_any_globs(files, [
-          'tools/public_api_guard/**',
+          'goldens/public-api/**',
           'docs/NAMING.md',
           'aio/content/guide/glossary.md',
           'aio/content/guide/styleguide.md',
@@ -1025,6 +1023,24 @@ groups:
         - ~framework-global-approvers
 
 
+  # ================================================
+  #  Circular dependencies
+  # ================================================
+  circular-dependencies:
+    conditions:
+      - >
+        contains_any_globs(files, [
+          'goldens/packages-circular-deps.json'
+        ])
+    reviewers:
+      users:
+        - IgorMinar
+        - josephperrott
+        - kara
+      teams:
+        - ~framework-global-approvers
+
+
 ####################################################################################
 #  Special Cases
 ####################################################################################

BUILD.bazel

@@ -5,6 +5,10 @@ exports_files([
     "protractor-perf.conf.js",
     "karma-js.conf.js",
     "browser-providers.conf.js",
+    "scripts/ci/track-payload-size.sh",
+    "scripts/ci/payload-size.sh",
+    "scripts/ci/payload-size.js",
+    "package.json",
 ])
 
 alias(

CHANGELOG.md

@@ -1,3 +1,56 @@
+<a name="9.0.7"></a>
+## [9.0.7](https://github.com/angular/angular/compare/9.0.6...9.0.7) (2020-03-18)
+
+
+### Bug Fixes
+
+* **compiler:** do not recurse to find static symbols of same module ([#35262](https://github.com/angular/angular/issues/35262)) ([a52b568](https://github.com/angular/angular/commit/a52b568))
+* **compiler:** support directive inputs with interpolations on `<ng-template>`s ([#35984](https://github.com/angular/angular/issues/35984)) ([a6bf31b](https://github.com/angular/angular/commit/a6bf31b)), closes [#35752](https://github.com/angular/angular/issues/35752)
+* **core:** don't re-invoke pure pipes that throw and arguments are the same ([#35827](https://github.com/angular/angular/issues/35827)) ([3fa632b](https://github.com/angular/angular/commit/3fa632b))
+* **core:** verify parsed ICU expression at runtime before executing it ([#35923](https://github.com/angular/angular/issues/35923)) ([9cd115d](https://github.com/angular/angular/commit/9cd115d)), closes [#35689](https://github.com/angular/angular/issues/35689)
+* **language-service:** infer $implicit value for ngIf template contexts ([#35941](https://github.com/angular/angular/issues/35941)) ([f5e4410](https://github.com/angular/angular/commit/f5e4410))
+* **ngcc:** a new LockFile implementation that uses a child-process ([#35934](https://github.com/angular/angular/issues/35934)) ([743ce7b](https://github.com/angular/angular/commit/743ce7b)), closes [#35761](https://github.com/angular/angular/issues/35761)
+* **ngcc:** consistently delegate to TypeScript host for typing files ([#36089](https://github.com/angular/angular/issues/36089)) ([76d7188](https://github.com/angular/angular/commit/76d7188)), closes [#35078](https://github.com/angular/angular/issues/35078)
+* **ngcc:** handle multiple original sources when flattening source-maps ([#36027](https://github.com/angular/angular/issues/36027)) ([e6167cf](https://github.com/angular/angular/commit/e6167cf))
+
+
+### Performance Improvements
+
+* **ngcc:** link segment markers for faster traversal ([#36027](https://github.com/angular/angular/issues/36027)) ([a0fa63b](https://github.com/angular/angular/commit/a0fa63b))
+* **ngcc:** store the position of SegmentMarkers to avoid unnecessary computation ([#36027](https://github.com/angular/angular/issues/36027)) ([4ce9098](https://github.com/angular/angular/commit/4ce9098))
+* **ngcc:** use binary search when flattening mappings ([#36027](https://github.com/angular/angular/issues/36027)) ([8768fc4](https://github.com/angular/angular/commit/8768fc4))
+* **ngcc:** use line start positions for computing offsets in source-map flattening ([#36027](https://github.com/angular/angular/issues/36027)) ([daa2a08](https://github.com/angular/angular/commit/daa2a08))
+
+
+
+<a name="9.0.6"></a>
+## [9.0.6](https://github.com/angular/angular/compare/9.0.5...9.0.6) (2020-03-10)
+
+
+### Bug Fixes
+
+* **bazel:** do not use manifest paths for generated imports within compilation unit ([#35841](https://github.com/angular/angular/issues/35841)) ([5ea9a61](https://github.com/angular/angular/commit/5ea9a61))
+* **compiler:** process `imports` first and `declarations` second while calculating scopes ([#35850](https://github.com/angular/angular/issues/35850)) ([6f2fd6e](https://github.com/angular/angular/commit/6f2fd6e)), closes [#35502](https://github.com/angular/angular/issues/35502)
+* **core:** add `noSideEffects()` to `make*Decorator()` functions ([#35769](https://github.com/angular/angular/issues/35769)) ([#35846](https://github.com/angular/angular/issues/35846)) ([4fe3f37](https://github.com/angular/angular/commit/4fe3f37))
+* **core:** add `noSideEffects()` to `ɵɵdefineComponent()` ([#35769](https://github.com/angular/angular/issues/35769)) ([#35846](https://github.com/angular/angular/issues/35846)) ([68ca32f](https://github.com/angular/angular/commit/68ca32f))
+* **core:** remove side effects from `ɵɵgetInheritedFactory()` ([#35769](https://github.com/angular/angular/issues/35769)) ([#35846](https://github.com/angular/angular/issues/35846)) ([000c834](https://github.com/angular/angular/commit/000c834))
+* **core:** remove side effects from `ɵɵNgOnChangesFeature()` ([#35769](https://github.com/angular/angular/issues/35769)) ([#35846](https://github.com/angular/angular/issues/35846)) ([d24ce21](https://github.com/angular/angular/commit/d24ce21))
+* **core:** undecorated-classes-with-di migration should handle libraries generated with CLI versions past v6.2.0 ([#35824](https://github.com/angular/angular/issues/35824)) ([eaf5b58](https://github.com/angular/angular/commit/eaf5b58)), closes [#34985](https://github.com/angular/angular/issues/34985)
+* **language-service:** resolve the variable from the template context first ([#35982](https://github.com/angular/angular/issues/35982)) ([f882ff0](https://github.com/angular/angular/commit/f882ff0))
+* **localize:** improve matching and parsing of XLIFF 1.2 translation files ([#35793](https://github.com/angular/angular/issues/35793)) ([677d666](https://github.com/angular/angular/commit/677d666))
+* **localize:** improve matching and parsing of XLIFF 2.0 translation files ([#35793](https://github.com/angular/angular/issues/35793)) ([689964b](https://github.com/angular/angular/commit/689964b))
+* **localize:** improve matching and parsing of XTB translation files ([#35793](https://github.com/angular/angular/issues/35793)) ([9f68ff9](https://github.com/angular/angular/commit/9f68ff9))
+* **localize:** merge translation from all  XLIFF `<file>` elements ([#35936](https://github.com/angular/angular/issues/35936)) ([83d7819](https://github.com/angular/angular/commit/83d7819)), closes [#35839](https://github.com/angular/angular/issues/35839)
+* **platform-browser:** add missing peerDependency on `[@angular](https://github.com/angular)/animations` ([#35949](https://github.com/angular/angular/issues/35949)) ([db9704a](https://github.com/angular/angular/commit/db9704a)), closes [#35888](https://github.com/angular/angular/issues/35888)
+* **router:** state data missing in routerLink ([#33203](https://github.com/angular/angular/issues/33203)) ([773d7b8](https://github.com/angular/angular/commit/773d7b8))
+
+
+### Performance Improvements
+
+* **ngcc:** reduce directory traversing ([#35756](https://github.com/angular/angular/issues/35756)) ([2eaf420](https://github.com/angular/angular/commit/2eaf420)), closes [#35717](https://github.com/angular/angular/issues/35717)
+
+
+
 <a name="9.0.5"></a>
 ## [9.0.5](https://github.com/angular/angular/compare/9.0.4...9.0.5) (2020-03-04)
 

CONTRIBUTING.md

@@ -206,6 +206,8 @@ The scope should be the name of the npm package affected (as perceived by the pe
 The following is the list of supported scopes:
 
 * **animations**
+* **bazel**
+* **benchpress**
 * **common**
 * **compiler**
 * **compiler-cli**
@@ -214,6 +216,7 @@ The following is the list of supported scopes:
 * **forms**
 * **http**
 * **language-service**
+* **localize**
 * **platform-browser**
 * **platform-browser-dynamic**
 * **platform-server**
@@ -232,6 +235,7 @@ There are currently a few exceptions to the "use package name" rule:
 * **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
+* **dev-infra**: used for dev-infra related changes within the directories /scripts, /tools and /dev-infra
 * **ngcc**: used for changes to the [Angular Compatibility Compiler](./packages/compiler-cli/ngcc/README.md)
 * **ve**: used for changes specific to ViewEngine (legacy compiler/renderer).
 * none/empty string: useful for `style`, `test` and `refactor` changes that are done across all

README.md

@@ -1,5 +1,4 @@
 [![CircleCI](https://circleci.com/gh/angular/angular/tree/master.svg?style=shield)](https://circleci.com/gh/angular/workflows/angular/tree/master)
-[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06)](https://www.browserstack.com/automate/public-build/LzF3RzBVVGt6VWE2S0hHaC9uYllOZz09LS1BVjNTclBKV0x4eVRlcjA4QVY1M0N3PT0=--eb4ce8c8dc2c1c5b2b5352d473ee12a73ac20e06)
 [![Join the chat at https://gitter.im/angular/angular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular/angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://www.npmjs.com/@angular/core)
 
@@ -21,7 +20,6 @@ Angular is a development platform for building mobile and desktop web applicatio
 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/start
 [changelog]: https://github.com/angular/angular/blob/master/CHANGELOG.md

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

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Accessibility Example</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/attribute-binding/src/app/app.component.spec.ts

@@ -10,15 +10,15 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

aio/content/examples/attribute-binding/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>AttributeBinding</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/binding-syntax/src/app/app.component.spec.ts

@@ -10,15 +10,15 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

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

@@ -13,17 +13,17 @@ describe('AppComponent', () => {
 
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
 
   it(`should have as title 'app works!'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app works!');
   }));
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

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

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>NgmoduleDemo</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/built-in-directives/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>BuiltInDirectives</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/built-in-template-functions/src/app/app.component.spec.ts

@@ -10,7 +10,7 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
 });

aio/content/examples/built-in-template-functions/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Built-in Template Functions Example</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/dependency-injection/src/app/providers.component.ts

@@ -158,11 +158,11 @@ export class Provider6bComponent {
 
 // #docregion silent-logger
 // An object in the shape of the logger service
-export function SilentLoggerFn() {}
+function silentLoggerFn() {}
 
-const silentLogger = {
+export const SilentLogger = {
   logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'],
-  log: SilentLoggerFn
+  log: silentLoggerFn
 };
 // #enddocregion silent-logger
 
@@ -171,7 +171,7 @@ const silentLogger = {
   template: template,
   providers:
     // #docregion providers-7
-    [{ provide: Logger, useValue: silentLogger }]
+    [{ provide: Logger, useValue: SilentLogger }]
     // #enddocregion providers-7
 })
 export class Provider7Component {

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

@@ -0,0 +1,3 @@
+{
+  "projectType": "elements"
+}

aio/content/examples/elements/src/app/popup.component.ts

@@ -39,7 +39,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
   `]
 })
 export class PopupComponent {
-  private state: 'opened' | 'closed' = 'closed';
+  state: 'opened' | 'closed' = 'closed';
 
   @Input()
   set message(message: string) {

aio/content/examples/event-binding/src/app/app.component.spec.ts

@@ -10,12 +10,12 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
   it(`should have as title 'Featured product:'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('Featured product:');
   }));
   it('should render title in a p tag', async(() => {

aio/content/examples/event-binding/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>EventBinding</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/feature-modules/example-config.json

@@ -1,4 +0,0 @@
-{
-  "build": "build:cli",
-  "run": "serve:cli"
-}

aio/content/examples/feature-modules/src/app/app.component.spec.ts

@@ -13,17 +13,17 @@ describe('AppComponent', () => {
 
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
 
   it(`should have as title 'app works!'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app works!');
   }));
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

aio/content/examples/feature-modules/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Feature Modules</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/forms-overview/src/app/app.component.spec.ts

@@ -16,12 +16,12 @@ describe('AppComponent', () => {
 
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
 
     expect(app).toBeTruthy();
   }));
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
 

aio/content/examples/forms-overview/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Forms Overview</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/getting-started-v0/src/app/top-bar/top-bar.component.html

@@ -2,4 +2,4 @@
   <h1>My Store</h1>
 </a>
 
-<a [routerLink]="['/cart']" class="button fancy-button"><i class="material-icons">shopping_cart</i>Checkout</a>
+<a class="button fancy-button"><i class="material-icons">shopping_cart</i>Checkout</a>

aio/content/examples/getting-started/src/app/top-bar/top-bar.component.html

@@ -2,6 +2,8 @@
   <h1>My Store</h1>
 </a>
 
-<a [routerLink]="['/cart']" class="button fancy-button">
+<!-- #docregion cart-route -->
+<a routerLink="/cart" class="button fancy-button">
   <i class="material-icons">shopping_cart</i>Checkout
 </a>
+<!-- #enddocregion cart-route -->

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

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>HttpClient Demo</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/inputs-outputs/src/app/app.component.spec.ts

@@ -10,15 +10,15 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

aio/content/examples/inputs-outputs/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Inputs and Outputs</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

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

@@ -10,7 +10,7 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
 });

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

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Interpolation</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/lazy-loading-ngmodules/example-config.json

@@ -1,4 +0,0 @@
-{
-  "build": "build:cli",
-  "run": "serve:cli"
-}

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

@@ -17,17 +17,17 @@ describe('AppComponent', () => {
 
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
 
   it(`should have as title 'customer-app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('customer-app');
   }));
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

aio/content/examples/lazy-loading-ngmodules/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Lazy loading feature modules</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/ngmodule-faq/src/app/app.module.3.ts

@@ -1,41 +0,0 @@
-// #docplaster
-// #docregion
-/* Angular Imports */
-import { NgModule }           from '@angular/core';
-import { BrowserModule }      from '@angular/platform-browser';
-
-/* App Imports */
-// #enddocregion
-import { AppComponent }       from './app.component.3';
-/*
-// #docregion
-import { AppComponent }       from './app.component';
-// #enddocregion
-*/
-// #docregion
-import { HighlightDirective } from './highlight.directive.1';
-import { TitleComponent }     from './title.component.1';
-import { UserService }        from './user.service';
-
-/* Routing Module */
-// #enddocregion
-import { AppRoutingModule }   from './app-routing.module.3';
-/*
-// #docregion
-import { AppRoutingModule }   from './app-routing.module';
-// #enddocregion
-*/
-// #docregion
-
-@NgModule({
-// #docregion imports
-  imports:      [
-    BrowserModule,
-    AppRoutingModule
-  ],
-// #enddocregion imports
-  providers:    [ UserService ],
-  declarations: [ AppComponent, HighlightDirective, TitleComponent ],
-  bootstrap:    [ AppComponent ]
-})
-export class AppModule { }

aio/content/examples/ngmodule-faq/src/app/highlight.directive.1.ts

@@ -1,15 +0,0 @@
-// #docplaster
-// #docregion
-import { Directive, ElementRef } from '@angular/core';
-
-// Highlight the host element in gold
-@Directive({ selector: '[highlight]' })
-export class HighlightDirective {
-  constructor(el: ElementRef) {
-    el.nativeElement.style.backgroundColor = 'gold';
-    // #enddocregion
-    console.log(`* AppRoot highlight called for ${el.nativeElement.tagName}`);
-    // #docregion
-  }
-}
-// #enddocregion

aio/content/examples/ngmodule-faq/src/app/title.component.1.html

@@ -1,10 +0,0 @@
-<!-- #docregion -->
-<!-- #docregion v1 -->
-<h1 highlight>{{title}}</h1>
-<!-- #enddocregion v1 -->
-<!-- #docregion ngIf -->
-<p *ngIf="user">
-  <i>Welcome, {{user}}</i>
-<p>
-<!-- #enddocregion ngIf -->
-

aio/content/examples/ngmodule-faq/src/app/title.component.1.ts

@@ -1,23 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion v1
-import { Component } from '@angular/core';
-// #enddocregion v1
-import { UserService } from './user.service';
-// #docregion v1
-
-@Component({
-  selector: 'app-title',
-  templateUrl: './title.component.1.html'
-})
-export class TitleComponent {
-  title = 'Angular Modules';
-// #enddocregion v1
-  user = '';
-
-  constructor(userService: UserService) {
-    this.user = userService.userName;
-  }
-// #docregion v1
-}
-// #enddocregion v1

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

@@ -1,4 +0,0 @@
-{
-  "build": "build:cli",
-  "run": "serve:cli"
-}

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

@@ -13,17 +13,17 @@ describe('AppComponent', () => {
 
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
 
   it(`should have as title 'app works!'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app works!');
   }));
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

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

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>NgmodulesExample</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/property-binding/src/app/app.component.spec.ts

@@ -10,15 +10,15 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

aio/content/examples/property-binding/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>PropertyBinding</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/providers-viewproviders/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>providers vs. viewProviders</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

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

@@ -1,4 +0,0 @@
-{
-  "build": "build:cli",
-  "run": "serve:cli"
-}

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

@@ -13,17 +13,17 @@ describe('AppComponent', () => {
 
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
 
   it(`should have as title 'app works!'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app works!');
   }));
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

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

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Providers</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/reactive-forms/src/app/app.component.spec.ts

@@ -10,15 +10,15 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

aio/content/examples/resolution-modifiers/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>DI Resolution Modifiers Example</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/schematics-for-libraries/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>SchematicsForLibraries</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/service-worker-getting-started/src/app/app.component.spec.ts

@@ -10,15 +10,15 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('Service Workers');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

aio/content/examples/set-document-title/src/index.html

@@ -1,14 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <base href="/">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
 
   <title>
     Setting The Document Title Using The Title Service
   </title>
-  </head>
+</head>
 <body>
 
   <h1>

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

@@ -1,3 +0,0 @@
-{
-  "unittesting": true
-}

aio/content/examples/template-expression-operators/src/app/app.component.html

@@ -72,8 +72,8 @@
 <h2>Non-null assertion operator (<code>!</code>)</h2>
 <div>
   <!-- #docregion non-null -->
-  <!--No color, no error -->
-  <p *ngIf="item">The item's color is: {{item!.color}}</p>
+  <!-- Assert color is defined, even if according to the `Item` type it could be undefined. -->
+  <p>The item's color is: {{item.color!.toUpperCase()}}</p>
   <!-- #enddocregion non-null -->
 
 

aio/content/examples/template-expression-operators/src/app/app.component.spec.ts

@@ -10,15 +10,15 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

aio/content/examples/template-expression-operators/src/app/app.component.ts

@@ -1,6 +1,13 @@
 import { Component } from '@angular/core';
 
 
+interface Item {
+  name: string;
+  manufactureDate: Date;
+  color?: string | null;
+  price: number;
+}
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -9,10 +16,11 @@ import { Component } from '@angular/core';
 export class AppComponent {
   title = 'Template Expression Operators';
 
-  item = {
+  item: Item = {
     name : 'Telephone',
     manufactureDate : new Date(1980, 1, 25),
-    price: 98
+    color: 'orange',
+    price: 98,
   };
 
   nullItem = null;

aio/content/examples/template-expression-operators/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Template Expression Operators Example</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/template-reference-variables/src/app/app.component.spec.ts

@@ -10,15 +10,15 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

aio/content/examples/template-reference-variables/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Template Reference Variables Example</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/testing/src/app/app-initial.component.spec.ts

@@ -21,15 +21,15 @@ describe('AppComponent (initial CLI version)', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement;

aio/content/examples/testing/src/app/shared/canvas.component.spec.ts

@@ -26,7 +26,7 @@ describe('CanvasComponent', () => {
 
   it('should be able to generate blob data from canvas', fakeAsync(() => {
     const fixture = TestBed.createComponent(CanvasComponent);
-    const canvasComp = fixture.debugElement.componentInstance;
+    const canvasComp = fixture.componentInstance;
 
     fixture.detectChanges();
     expect(canvasComp.blobSize).toBe(0);

aio/content/examples/testing/src/tests.html

@@ -1,58 +0,0 @@
-<!-- Run application specs in a browser -->
-<!-- #docregion -->
-<!DOCTYPE html>
-<html>
-<head>
-  <base href="/">
-  <title>Sample App Specs</title>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="styles.css">
-  <link rel="stylesheet" href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
-
-</head>
-<body>
-  <!-- Polyfills -->
-  <script src="node_modules/core-js/client/shim.min.js"></script>
-
-  <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
-  <script src="node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
-
-  <script src="node_modules/zone.js/dist/zone.js"></script>
-  <script src="node_modules/zone.js/dist/zone-testing.js"></script>
-
-  <script>
-    var __spec_files__ = [
-      'app/about/about.component.spec',
-      'app/app-initial.component.spec',
-      'app/app.component.router.spec',
-      'app/app.component.spec',
-      'app/banner/banner-initial.component.spec',
-      'app/banner/banner.component.spec',
-      'app/banner/banner.component.detect-changes.spec',
-      'app/banner/banner-external.component.spec',
-      'app/dashboard/dashboard-hero.component.spec',
-      'app/dashboard/dashboard.component.no-testbed.spec',
-      'app/dashboard/dashboard.component.spec',
-      'app/hero/hero-detail.component.no-testbed.spec',
-      'app/hero/hero-detail.component.spec',
-      'app/hero/hero-list.component.spec',
-      'app/model/hero.service.spec',
-      'app/shared/highlight.directive.spec',
-      'app/shared/title-case.pipe.spec',
-      'app/twain/twain.component.spec',
-      // 'app/twain/twain.component.marbles.spec',
-      'app/welcome/welcome.component.spec',
-
-      'app/demo/async-helper.spec',
-      'app/demo/demo.spec',
-      'app/demo/demo.testbed.spec',
-    ];
-  </script>
-  <script src="browser-test-shim.js"></script>
-</body>
-
-</html>

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

@@ -13,17 +13,17 @@ describe('AppComponent', () => {
 
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
 
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app');
   }));
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

aio/content/examples/toh-pt0/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Tour of Heroes</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/toh-pt1/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Tour of Heroes</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/toh-pt2/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Tour of Heroes</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/toh-pt3/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Tour of Heroes</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/toh-pt4/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Tour of Heroes</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/toh-pt5/src/index.html

@@ -6,7 +6,6 @@
   <!-- #docregion base-href -->
   <base href="/">
   <!-- #enddocregion base-href -->
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/toh-pt6/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Tour of Heroes</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/two-way-binding/src/app/app.component.spec.ts

@@ -10,15 +10,15 @@ describe('AppComponent', () => {
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   }));
   it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('app');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

aio/content/examples/two-way-binding/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Two-way Binding</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

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

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Tour of Heroes</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/upgrade-lazy-load-ajs/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>AngularJS Hybrid</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

aio/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js

@@ -16,6 +16,15 @@ module.exports = function(config) {
       '**/*.spec.js'
     ],
 
+    // This is needed, because the AngularJS files are loaded from `https://code.angularjs.org/`.
+    // Without this, latest browsers prevent loading the scripts from localhost with:
+    // ```
+    // Access to script at 'https://code.angularjs.org/1.5.5/angular.js' from origin
+    // 'http://localhost:9876' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
+    // header is present on the requested resource.
+    // ```
+    crossOriginAttribute: false,
+
     autoWatch: true,
 
     frameworks: ['jasmine'],

aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js

@@ -44,12 +44,21 @@ module.exports = function(config) {
       // #enddocregion files
     ],
 
+    // This is needed, because the AngularJS files are loaded from `https://code.angularjs.org/`.
+    // Without this, latest browsers prevent loading the scripts from localhost with:
+    // ```
+    // Access to script at 'https://code.angularjs.org/1.5.5/angular.js' from origin
+    // 'http://localhost:9876' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
+    // header is present on the requested resource.
+    // ```
+    crossOriginAttribute: false,
+
     // #docregion html
     // proxied base paths for loading assets
     proxies: {
       // required for component assets fetched by Angular's compiler
-      "/phone-detail": '/base/app/phone-detail',
-      "/phone-list": '/base/app/phone-list'
+      '/phone-detail': '/base/app/phone-detail',
+      '/phone-list': '/base/app/phone-list'
     },
     // #enddocregion html
 

aio/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js

@@ -1,5 +1,4 @@
 // #docregion
-import rollup      from 'rollup'
 import nodeResolve from 'rollup-plugin-node-resolve'
 import commonjs    from 'rollup-plugin-commonjs';
 import uglify      from 'rollup-plugin-uglify'

aio/content/examples/visual-studio-2015/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "removeComments": false,
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "typeRoots": [
-      "node_modules/@types"
-    ]
-  },
-  "compileOnSave": true,
-  "angularCompilerOptions": {
-    "enableIvy": false
-  }
-}

aio/content/guide/architecture.md

@@ -1,6 +1,6 @@
 # Introduction to Angular concepts
 
-Angular is a platform and framework for building single-page client applications in HTML and TypeScript.
+Angular is a platform and framework for building single-page client applications using HTML and TypeScript.
 Angular is written in TypeScript.
 It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.
 

aio/content/guide/http.md

@@ -185,7 +185,7 @@ searchHeroes(term: string): Observable {
 
   let heroesURL = `${this.heroesURL}?${term}`;
   return this.http.jsonp(heroesUrl, 'callback').pipe(
-      catchError(this.handleError('searchHeroes', []) // then handle the error
+      catchError(this.handleError('searchHeroes', [])) // then handle the error
     );
 };
 ```

aio/content/guide/ivy-compatibility.md

@@ -75,6 +75,10 @@ Please note that these constants are not meant to be used by 3rd party library o
 
 * ICU parsing happens at runtime, so only text, HTML tags and text bindings are allowed inside ICU cases (previously, directives were also permitted inside ICUs).
 
+* Adding text bindings into i18n translations that are not present in the source template itself will throw a runtime error (previously, including extra bindings in translations was permitted).
+
+* Extra HTML tags in i18n translations that are not present in the source template itself will be rendered as plain text (previously, these tags would render as HTML).
+
 * Providers formatted as `{provide: X}` without a `useValue`, `useFactory`, `useExisting`, or `useClass` property are treated like `{provide: X, useClass: X}` (previously, it defaulted to `{provide: X, useValue: undefined}`).
 
 * `DebugElement.attributes` returns `undefined` for attributes that were added and then subsequently removed (previously, attributes added and later removed would have a value of `null`).

aio/content/guide/template-syntax.md

@@ -2256,22 +2256,20 @@ It works perfectly with long property paths such as `a?.b?.c?.d`.
 
 ### The non-null assertion operator ( `!` )
 
-As of Typescript 2.0, you can enforce [strict null checking](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript") with the `--strictNullChecks` flag. TypeScript then ensures that no variable is unintentionally null or undefined.
+As of Typescript 2.0, you can enforce [strict null checking](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript") with the `--strictNullChecks` flag. TypeScript then ensures that no variable is unintentionally `null` or `undefined`.
 
 In this mode, typed variables disallow `null` and `undefined` by default. The type checker throws an error if you leave a variable unassigned or try to assign `null` or `undefined` to a variable whose type disallows `null` and `undefined`.
 
-The type checker also throws an error if it can't determine whether a variable will be `null` or undefined at runtime. You tell the type checker not to throw an error by applying the postfix
+The type checker also throws an error if it can't determine whether a variable will be `null` or `undefined` at runtime. You tell the type checker not to throw an error by applying the postfix
 [non-null assertion operator, !](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator "Non-null assertion operator").
 
 The Angular non-null assertion operator, `!`, serves the same purpose in
-an Angular template. For example, after you use [*ngIf](guide/template-syntax#ngIf)
-to check that `item` is defined, you can assert that
-`item` properties are also defined.
+an Angular template. For example, you can assert that `item` properties are also defined.
 
 <code-example path="template-expression-operators/src/app/app.component.html" region="non-null" header="src/app/app.component.html"></code-example>
 
 When the Angular compiler turns your template into TypeScript code,
-it prevents TypeScript from reporting that `item` might be `null` or `undefined`.
+it prevents TypeScript from reporting that `item.color` might be `null` or `undefined`.
 
 Unlike the [_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe navigation operator (?)"),
 the non-null assertion operator does not guard against `null` or `undefined`.

aio/content/guide/upgrade.md

@@ -960,6 +960,12 @@ angular.module('myHybridApp', [...])
 
 Once you introduce the Angular Router, using the Angular Router triggers navigations through the unified location service, still providing a single source for navigating with AngularJS and Angular.
 
+<!--
+TODO:
+Correctly document how to use AOT with SystemJS-based `ngUpgrade` apps (or better yet update the
+`ngUpgrade` examples/guides to use `@angular/cli`).
+See https://github.com/angular/angular/issues/35989.
+
 ## Using Ahead-of-time compilation with hybrid apps
 
 You can take advantage of Ahead-of-time (AOT) compilation on hybrid apps just like on any other
@@ -979,6 +985,7 @@ bootstrap the hybrid app:
 </code-example>
 
 And that's all you need do to get the full benefit of AOT for Angular apps!
+-->
 
 ## PhoneCat Upgrade Tutorial
 
@@ -1364,7 +1371,7 @@ You also need to make a couple of adjustments
 to the `systemjs.config.js` file installed during [upgrade setup](guide/upgrade-setup).
 
 Point the browser to the project root when loading things through SystemJS,
-instead of using the  `<base>` URL.
+instead of using the `<base>` URL.
 
 Install the `upgrade` package via `npm install @angular/upgrade --save`
 and add a mapping for the `@angular/upgrade/static` package.

aio/content/guide/zone.md

@@ -218,7 +218,7 @@ zone.run(() => {
 This new context, `zoneThis`, can be retrieved from the `setTimeout()` callback function, and this context is the same when the `setTimeout()` is scheduled.
 To get the context, you can call [`Zone.current`](https://github.com/angular/angular/blob/master/packages/zone.js/lib/zone.ts).
 
-### Zones and async lifecycle hooks
+## Zones and async lifecycle hooks
 
 Zone.js can create contexts that persist across asynchronous operations as well as provide lifecycle hooks for asynchronous operations.
 
@@ -303,7 +303,7 @@ This service creates a zone named `angular` to automatically trigger change dete
 
 ### NgZone `run()`/`runOutsideOfAngular()`
 
-`Zone` handles most asynchronous APIs such as `setTimeout()`, `Promise.then(),and `addEventListener()`.
+`Zone` handles most asynchronous APIs such as `setTimeout()`, `Promise.then()`, and `addEventListener()`.
 For the full list, see the [Zone Module document](https://github.com/angular/angular/blob/master/packages/zone.js/MODULE.md).
 Therefore in those asynchronous APIs, you don't need to trigger change detection manually.
 
@@ -315,12 +315,12 @@ This function, and all asynchronous operations in that function, trigger change
 export class AppComponent implements OnInit {
   constructor(private ngZone: NgZone) {}
   ngOnInit() {
-    // new async API is not handled by Zone, so you need to
-    // use ngZone.run to make the asynchronous operation in angular zone
-    // and trigger change detection automatically
+    // New async API is not handled by Zone, so you need to
+    // use ngZone.run() to make the asynchronous operation in the angular zone
+    // and trigger change detection automatically.
     this.ngZone.run(() => {
       someNewAsyncAPI(() => {
-        // update data of component
+        // update the data of the component
       });
     });
   }
@@ -335,19 +335,20 @@ In that situation, you can use another NgZone method: [runOutsideAngular()](api/
 export class AppComponent implements OnInit {
   constructor(private ngZone: NgZone) {}
   ngOnInit() {
-    // you know no data will be updated
-    // you don't want to do change detection in this
-    // specified operation, you can call runOutsideAngular
+    // You know no data will be updated,
+    // so you don't want to trigger change detection in this
+    // specified operation. Instead, call ngZone.runOutsideAngular()
     this.ngZone.runOutsideAngular(() => {
       setTimeout(() => {
-        // do something will not update component data
+        // update component data
+        // but don't trigger change detection.
       });
     });
   }
 }
 ```
 
-### Seting up Zone.js
+### Setting up Zone.js
 
 To make Zone.js available in Angular, you need to import the zone.js package.
 If you are using the Angular CLI, this step is done automatically, and you will see the following line in the `src/polyfills.ts`:

aio/content/marketing/events.html

@@ -13,18 +13,17 @@
       </tr>
     </thead>
     <tbody>
-      <!-- ngIndia 2020 -->
-      <tr>
-        <th><a href="https://www.ng-ind.com/" title="ngIndia">ngIndia</a></th>
-        <td>Delhi, India</td>
-        <td>Feb 29, 2020</td>
-      </tr>
       <!-- ng-conf 2020 -->
       <tr>
         <th><a href="https://ng-conf.org/" title="ng-conf">ng-conf</a></th>
         <td>Salt Lake City, Utah</td>
         <td>April 1-3, 2020</td>
       </tr>
+      <tr>
+        <th><a href="https://ngvikings.org/" title="ngVikings">ngVikings</a></th>
+        <td>Oslo, Norway</td>
+        <td>May 25-26 conference, 27 workshops, 2020</td>
+      </tr>
     </tbody>
   </table>
 
@@ -38,6 +37,12 @@
       </tr>
     </thead>
     <tbody>
+      <!-- ngIndia 2020 -->
+      <tr>
+        <th><a href="https://www.ng-ind.com/" title="ngIndia">ngIndia</a></th>
+        <td>Delhi, India</td>
+        <td>Feb 29, 2020</td>
+      </tr>
       <!-- ReactiveConf 2019 -->
       <tr>
         <th><a href="https://reactiveconf.com/" title="ReactiveConf">ReactiveConf</a></th>

aio/content/start/start-data.md

@@ -141,19 +141,22 @@ Create the cart page in two steps:
     <code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="cart-route">
     </code-example>
 
+1. Update the "Checkout" button so that it routes to the `/cart` url.
+
+    Open `top-bar.component.html` and add a `routerLink` directive pointing to `/cart`.
+
+    <code-example
+        header="src/app/top-bar/top-bar.component.html"
+        path="getting-started/src/app/top-bar/top-bar.component.html"
+        region="cart-route">
+    </code-example>
+
 1. To see the new cart component, click the "Checkout" button. You can see the "cart works!" default text, and the URL has the pattern `https://getting-started.stackblitz.io/cart`,  where `getting-started.stackblitz.io` may be different for your StackBlitz project.
 
-    <div class="alert is-helpful">
-
-    The starter code for the "Checkout" button already includes a `routerLink` for `/cart` the top-bar component.
-
-    </div>
-
     <div class="lightbox">
       <img src='generated/images/guide/start/cart-works.png' alt="Display cart page before customizing">
     </div>
 
-
 ### Display the cart items
 
 You can use services to share data across components:

aio/src/app/app.component.html

@@ -6,8 +6,8 @@
 
 <mat-toolbar color="primary" class="app-toolbar no-print" [class.transitioning]="isTransitioning">
   <mat-toolbar-row class="notification-container">
-    <aio-notification notificationId="survey-february-2019" expirationDate="2019-03-01" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
-      <a href="http://bit.ly/angular-survey-2019">
+    <aio-notification notificationId="survey-march-2020" expirationDate="2020-04-01" [dismissOnContentClick]="true" (dismissed)="notificationDismissed()">
+      <a href="https://goo.gle/angular-survey-2020">
         <mat-icon class="icon" svgIcon="insert_comment" aria-label="Announcement"></mat-icon>
         <span class="message">Help Angular by taking a <b>1 minute survey</b>!</span>
         <span class="action-button">Go to survey</span>

aio/src/styles/2-modules/_api-pages.scss

@@ -1,176 +1,9 @@
 .api-body {
   max-width: 1200px;
 
-  table {
-    margin: 12px 0 24px;
-
-    th {
-        text-transform: none;
-        @include font-size(16);
-        font-weight: bold;
-    }
-
-    tr {
-        border-bottom: 1px solid $lightgray;
-    }
-
-    td {
-      vertical-align: middle;
-    }
-
-    // This is overriding a style here:
-    // https://github.com/angular/angular/blob/95993e1/aio/src/styles/2-modules/_table.scss#L58-L62
-    tbody > tr > td tr td:first-child {
-      @media screen and (max-width: 480px) {
-        background-color: inherit;
-      }
-    }
-
-    hr {
-      margin: 16px 0;
-    }
-
-    tr:last-child {
-      border-bottom: none;
-    }
-
-    &.item-table {
-      td {
-        padding: 32px;
-      }
-    }
-
-    &.list-table {
-      td {
-        padding: 16px 24px;
-      }
-    }
-
-    .short-description {
-      margin-left: 0;
-    }
-
-    &.parameters-table {
-      margin-top: 0;
-      @include font-size(14);
-      box-shadow: none;
-
-      tr {
-        @media screen and (max-width: 480px) {
-          display: flex;
-          flex-direction: column;
-        }
-
-        td:first-child {
-          font-weight: 600;
-          padding-left: 16px;
-          width: 20%;
-        }
-      }
-
-      td {
-        padding: 8px 8px 8px 0;
-        border: 0;
-        vertical-align: top;
-      }
-    }
-
-    &.property-table {
-      td {
-        vertical-align: top;
-      }
-    }
-  }
-
-  .class-overview {
-    position: relative;
-
-    code-example {
-      clear: left;
-    }
-  }
-
-  .short-description {
-    margin-top: 8px;
-  }
-
   h1 {
     margin-top: -4px;
   }
-}
-
-.github-links {
-  float: right;
-
-  .material-icons {
-    border-radius: 4px;
-    padding: 4px;
-    @include font-size(20);
-
-    &:hover {
-      background-color: $mist;
-    }
-  }
-}
-
-.api-body {
-  .class-overview {
-    position: relative;
-
-    code-example {
-      clear: left;
-    }
-  }
-
-  .method-table,
-  .option-table,
-  .list-table {
-    td > code {
-      background-color: inherit;
-      white-space: pre-wrap;
-    }
-
-    .with-github-links {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-
-      .github-links {
-        a {
-          color: $mediumgray;
-          .material-icons:hover {
-            background: none;
-            color: $blue;
-          }
-        }
-      }
-    }
-
-    h3 {
-      margin: 6px 0;
-      font-weight: 500;
-      clear: left;
-    }
-
-    h4 {
-      @include font-size(14);
-      font-weight: bold;
-      margin-top: 12px;
-    }
-  }
-
-  .api-heading {
-    @include font-size(14);
-    margin: 16px;
-  }
-
-  .parameters-table {
-    margin-top: 0;
-    @include font-size(14);
-    td:nth-child(1) {
-      width: 20%;
-    }
-  }
 
   details.overloads {
     box-shadow: none;
@@ -229,6 +62,145 @@
     margin: 0;
   }
 
+  table {
+    margin: 12px 0 24px;
+
+    &.item-table {
+      td {
+        padding: 32px;
+      }
+    }
+
+    &.list-table {
+      td {
+        padding: 16px 24px;
+      }
+    }
+
+    &.parameters-table {
+      margin-top: 0;
+      @include font-size(14);
+      box-shadow: none;
+
+      tr {
+        @media screen and (max-width: 480px) {
+          display: flex;
+          flex-direction: column;
+        }
+
+        td:first-child {
+          font-weight: 600;
+          padding-left: 16px;
+          width: 20%;
+        }
+      }
+
+      td {
+        padding: 8px 8px 8px 0;
+        border: 0;
+        vertical-align: top;
+      }
+    }
+
+    &.property-table {
+      td {
+        vertical-align: top;
+      }
+    }
+
+    &.method-table,
+    &.option-table,
+    &.list-table {
+      td > code {
+        background-color: inherit;
+        white-space: pre-wrap;
+      }
+
+      .with-github-links {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+
+        .github-links {
+          a {
+            color: $mediumgray;
+
+            .material-icons:hover {
+              background: none;
+              color: $blue;
+            }
+          }
+        }
+      }
+
+      h3 {
+        margin: 6px 0;
+        font-weight: 500;
+        clear: left;
+      }
+
+      h4 {
+        @include font-size(14);
+        font-weight: bold;
+        margin-top: 12px;
+      }
+    }
+
+    th {
+      text-transform: none;
+      @include font-size(16);
+      font-weight: bold;
+    }
+
+    tr {
+      border-bottom: 1px solid $lightgray;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    td {
+      vertical-align: middle;
+    }
+
+    // This is overriding a style here:
+    // https://github.com/angular/angular/blob/95993e1/aio/src/styles/2-modules/_table.scss#L58-L62
+    tbody > tr > td tr td:first-child {
+      @media screen and (max-width: 480px) {
+        background-color: inherit;
+      }
+    }
+
+    hr {
+      margin: 16px 0;
+    }
+
+    .short-description {
+      margin-left: 0;
+    }
+  }
+
+  .class-overview {
+    position: relative;
+
+    code-example {
+      clear: left;
+    }
+  }
+
+  .member-name .pln {
+    font-weight: 700;
+  }
+
+  .short-description {
+    margin-top: 8px;
+  }
+
+  .api-heading {
+    @include font-size(14);
+    margin: 16px;
+  }
 
   .from-constructor,
   .read-only-property,
@@ -269,6 +241,20 @@
   }
 }
 
+.github-links {
+  float: right;
+
+  .material-icons {
+    border-radius: 4px;
+    padding: 4px;
+    @include font-size(20);
+
+    &:hover {
+      background-color: $mist;
+    }
+  }
+}
+
 .breadcrumb-container {
   display: flex;
   flex-direction: row;
@@ -290,18 +276,6 @@
   }
 }
 
-.github-links {
-  float: right;
-  .material-icons {
-    border-radius: 4px;
-    padding: 4px;
-    font-size: 20px;
-    &:hover {
-      background-color: $mist;
-    }
-  }
-}
-
 .deprecated-api-item {
   text-decoration: line-through;
 }

aio/src/styles/2-modules/_notification.scss

@@ -32,6 +32,7 @@ aio-notification {
 
   .content {
     max-width: calc(100% - #{$notificationHeight});
+    background: $darkgray;
     text-transform: none;
     padding: 0;
 

aio/src/styles/2-modules/_search-results.scss

@@ -106,7 +106,7 @@ aio-search-results {
         }
       }
 
-      .not-found {
+      .no-results {
         color: $darkgray;
       }
 

aio/tools/example-zipper/customizer/package-json/systemjs.json

@@ -13,32 +13,47 @@
     { "name": "serve:upgrade" },
     { "name": "build:aot" },
     { "name": "serve:aot" },
-    { "name": "build:babel" },
-    { "name": "copy-dist-files" },
-    { "name": "i18n" }
+    { "name": "copy-dist-files" }
   ],
   "dependencies": [
-    "systemjs"
+    "@angular/animations",
+    "@angular/common",
+    "@angular/compiler",
+    "@angular/core",
+    "@angular/forms",
+    "@angular/platform-browser",
+    "@angular/platform-browser-dynamic",
+    "@angular/router",
+    "@angular/upgrade",
+    "rxjs",
+    "systemjs",
+    "tslib",
+    "zone.js"
   ],
   "devDependencies": [
+    "@angular/compiler-cli",
     "@types/angular",
     "@types/angular-animate",
-    "@types/angular-cookies",
     "@types/angular-mocks",
     "@types/angular-resource",
     "@types/angular-route",
-    "@types/angular-sanitize",
-    "babel-cli",
-    "babel-preset-angular2",
-    "babel-preset-es2015",
-    "canonical-path",
-    "http-server",
+    "@types/jasmine",
+    "@types/jasminewd2",
+    "@types/node",
     "concurrently",
+    "http-server",
+    "jasmine-core",
+    "karma",
+    "karma-chrome-launcher",
+    "karma-jasmine",
+    "karma-jasmine-html-reporter",
     "lite-server",
+    "protractor",
     "rollup",
     "rollup-plugin-commonjs",
     "rollup-plugin-node-resolve",
     "rollup-plugin-uglify",
-    "source-map-explorer"
+    "tslint",
+    "typescript"
   ]
 }

aio/tools/examples/example-boilerplate.js

@@ -30,6 +30,8 @@ const BOILERPLATE_PATHS = {
 // This maps the CLI files that exists in a parent folder
 const cliRelativePath = BOILERPLATE_PATHS.cli.map(file => `../cli/${file}`);
 
+BOILERPLATE_PATHS.elements = [...cliRelativePath, 'package.json'];
+
 BOILERPLATE_PATHS.i18n = [...cliRelativePath, 'angular.json', 'package.json'];
 
 BOILERPLATE_PATHS['service-worker'] = [...cliRelativePath, 'angular.json', 'package.json'];

aio/tools/examples/run-example-e2e.js

@@ -183,7 +183,9 @@ function runE2eTestsSystemJS(appDir, outputFile) {
 
   let run = runProtractorSystemJS(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
 
-  if (fs.existsSync(appDir + '/aot/index.html')) {
+  // Only run AOT tests in ViewEngine mode. The current AOT setup does not work in Ivy.
+  // See https://github.com/angular/angular/issues/35989.
+  if (!argv.ivy && fs.existsSync(appDir + '/aot/index.html')) {
     run = run.then((ok) => ok && runProtractorAoT(appDir, outputFile));
   }
   return run;

aio/tools/examples/shared/boilerplate/cli-ajs/package.json

@@ -12,45 +12,43 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.0.0",
-    "@angular/common": "^8.0.0",
-    "@angular/compiler": "^8.0.0",
-    "@angular/core": "^8.0.0",
-    "@angular/forms": "^8.0.0",
-    "@angular/platform-browser": "^8.0.0",
-    "@angular/platform-browser-dynamic": "^8.0.0",
-    "@angular/router": "^8.0.0",
-    "angular": "1.7.8",
-    "angular-in-memory-web-api": "^0.8.0",
-    "angular-route": "1.7.8",
-    "core-js": "^2.5.4",
-    "rxjs": "^6.5.1",
+    "@angular/animations": "~9.0.6",
+    "@angular/common": "~9.0.6",
+    "@angular/compiler": "~9.0.6",
+    "@angular/core": "~9.0.6",
+    "@angular/forms": "~9.0.6",
+    "@angular/platform-browser": "~9.0.6",
+    "@angular/platform-browser-dynamic": "~9.0.6",
+    "@angular/router": "~9.0.6",
+    "angular": "1.7.9",
+    "angular-in-memory-web-api": "~0.9.0",
+    "angular-route": "1.7.9",
+    "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
-    "web-animations-js": "^2.3.1",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.800.0",
-    "@angular/cli": "^8.0.0",
-    "@angular/compiler-cli": "^8.0.0",
-    "@angular/language-service": "^8.0.0",
-    "@types/angular": "^1.6.47",
-    "@types/angular-route": "^1.3.5",
-    "@types/jasmine": "~3.3.8",
+    "@angular-devkit/build-angular": "~0.900.6",
+    "@angular/cli": "~9.0.6",
+    "@angular/compiler-cli": "~9.0.6",
+    "@angular/language-service": "~9.0.6",
+    "@types/angular": "^1.6.57",
+    "@types/angular-route": "^1.7.0",
+    "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "codelyzer": "~5.0.0",
-    "jasmine-core": "~2.99.1",
-    "jasmine-marbles": "^0.5.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^5.1.2",
+    "jasmine-core": "~3.5.0",
+    "jasmine-marbles": "~0.6.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma": "~4.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
     "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.15.0",
-    "typescript": "~3.4.4"
+    "karma-jasmine-html-reporter": "^1.4.2",
+    "protractor": "~5.4.3",
+    "ts-node": "~8.3.0",
+    "tslint": "~5.18.0",
+    "typescript": "~3.7.5"
   }
 }

aio/tools/examples/shared/boilerplate/cli/.gitignore

@@ -11,8 +11,8 @@
 /node_modules
 
 # profiling files
-chrome-profiler-events.json
-speed-measure-plugin.json
+chrome-profiler-events*.json
+speed-measure-plugin*.json
 
 # IDEs and editors
 /.idea

aio/tools/examples/shared/boilerplate/cli/angular.json

@@ -49,6 +49,11 @@
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
                 }
               ]
             }

aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js

@@ -13,7 +13,7 @@ exports.config = {
     './src/**/*.e2e-spec.ts'
   ],
   capabilities: {
-    'browserName': 'chrome'
+    browserName: 'chrome'
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',