fix(ivy): avoid type coercion in binding-related instruction asserts (#29470)

ivy's bindingUpdated instruction is using the assertNotEqual check to make
sure that NO_CHANGE value (of type Object) is not passed as a value to be
dirty-checked. In practice it means that any value passed as a binding
value would be compared to the NO_CHANGE object.

It turns out that the assertNotEqual is using == and given
that binding values are of different type and we always compare it to the
NO_CHANGE object we were doing lots of type coercion. It resulted in calls
to expensive types conversions and calls to Object.toString().

A profiler reported ~15% of the self time spent in the assertNotEqual
but it turns out that removing type coercion speeds up Material Chips with
input scenario much more (~40ms down to ~20ms).

This PR introduces new assert method `assertNotSame` that uses strict equality
check. The new assertion is used in binding instructions to compare to
NO_CHANGE object reference.

PR Close #29470

.bazelrc

@@ -1,5 +1,3 @@
-# Load any settings specific to the current user
-try-import .bazelrc.user
 ################################
 # Settings for Angular team members only
 ################################
@@ -12,8 +10,10 @@ build:angular-team --remote_http_cache=https://storage.googleapis.com/angular-te
 
 # Make compilation fast, by keeping a few copies of the compilers
 # running as daemons, and cache SourceFile AST's to reduce parse time.
-build --strategy=TypeScriptCompile=worker
 build --strategy=AngularTemplateCompile=worker
+# TODO(alexeagle): re-enable after fixing worker instability with rxjs typings
+# build --strategy=TypeScriptCompile=worker
+build --strategy=TypeScriptCompile=standalone
 
 # Enable debugging tests with --config=debug
 test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test_strategy=exclusive --test_timeout=9999 --nocache_test_results
@@ -135,3 +135,7 @@ build:remote --remote_instance_name=projects/internal-200822/instances/default_i
 # Do not accept remote cache.
 # We need to understand the security risks of using prior build artifacts.
 build:remote --remote_accept_cached=false
+
+# Load any settings specific to the current user. Needs to be last statement in this
+# config, as the user configuration should be able to overwrite flags from this file.
+try-import .bazelrc.user

.circleci/config.yml

@@ -63,26 +63,19 @@ var_6: &job_defaults
   docker:
   - image: *default_docker_image
 
-# After checkout, rebase on top of master.
-# Similar to travis behavior, but not quite the same.
-# See https://discuss.circleci.com/t/1662
+# After checkout, rebase on top of target branch.
 var_7: &post_checkout
   run:
-    name: Post checkout step
+    name: Rebase PR on target branch
     command: >
       if [[ -n "${CIRCLE_PR_NUMBER}" ]]; then
-        # Fetch the head and merge commits for this PR.
-        git fetch origin +refs/pull/$CIRCLE_PR_NUMBER/head:pr/$CIRCLE_PR_NUMBER/head
-        git fetch origin +refs/pull/$CIRCLE_PR_NUMBER/merge:pr/$CIRCLE_PR_NUMBER/merge
-        # Checkout the merged PR for testing as CircleCI will just use the PR head otherwise.
-        git checkout -qf pr/$CIRCLE_PR_NUMBER/merge
-        # Reset the merge commit into its PR head.
-        git reset pr/$CIRCLE_PR_NUMBER/head
-        # Commit the merge changes into the head of the PR.
-        # This way we keep the last commit message.
+        # User is required for rebase.
         git config user.name "angular-ci"
         git config user.email "angular-ci"
-        git commit . --amend --no-edit
+        # Rebase PR on top of target branch.
+        node tools/rebase-pr.js angular/angular ${CIRCLE_PR_NUMBER}
+      else
+        echo "This build is not over a PR, nothing to do."
       fi
 
 var_8: &yarn_install
@@ -216,7 +209,7 @@ jobs:
           path: dist/bin/packages/core/test/bundling/todo/bundle.min.js.br
           destination: core/todo/bundle.br
 
-  test_saucelabs:
+  test_saucelabs_bazel:
     <<: *job_defaults
     # In order to avoid the bottleneck of having a slow host machine, we acquire a better
     # container for this job. This is necessary because we launch a lot of browsers concurrently
@@ -332,6 +325,7 @@ jobs:
       # Needed because the example e2e tests depend on Chrome.
       - image: *browsers_docker_image
     parallelism: 4
+    resource_class: xlarge
     steps:
       - *attach_workspace
       - *init_environment
@@ -340,13 +334,14 @@ jobs:
         # Run examples tests. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
         # Since the parallelism is set to "3", there will be three parallel CircleCI containers
         # with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
-      - run: yarn --cwd aio example-e2e --setup --local --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
+      - run: yarn --cwd aio example-e2e --setup --local --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
 
   test_docs_examples_ivy:
     <<: *job_defaults
     docker:
       # Needed because the example e2e tests depend on Chrome.
       - image: *browsers_docker_image
+    resource_class: xlarge
     # We increase the parallelism here to five while the "test_docs_examples" job runs with
     # a parallelism of four. This is necessary because this job also need to run NGCC which
     # takes up more time and we don't want these jobs to impact the overall CI turnaround.
@@ -365,7 +360,7 @@ jobs:
         # Run examples tests with ivy. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
         # Since the parallelism is set to "3", there will be three parallel CircleCI containers
         # with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
-      - run: yarn --cwd aio example-e2e --setup --local --ivy --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
+      - run: yarn --cwd aio example-e2e --setup --local --ivy --cliSpecsConcurrency=5 --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
 
   # This job should only be run on PR builds, where `CI_PULL_REQUEST` is not `false`.
   aio_preview:
@@ -468,6 +463,7 @@ jobs:
     steps:
       - *attach_workspace
       - *init_environment
+      - run: uname -r
       # 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}
@@ -564,10 +560,43 @@ jobs:
     resource_class: xlarge
     docker:
       - image: *browsers_docker_image
+    # The Material unit tests support splitting the browsers across multiple CircleCI
+    # instances. Since by default this job launches two browsers, we run each browser
+    # in its own container instance.
+    # https://github.com/angular/material2/blob/7baeaa797b19da2d2998f0d26f6fede3c8a13714/test/karma.conf.js#L107-L110
+    parallelism: 2
+    environment:
+      # The Material unit tests also support launching the same browser multiple times by
+      # sharding individual specs across the defined multiple instances.
+      # See: https://github.com/angular/material2/blob/7baeaa797b19da2d2998f0d26f6fede3c8a13714/test/karma.conf.js#L113-L116
+      KARMA_PARALLEL_BROWSERS: 3
     steps:
       - *attach_workspace
       - *init_environment
-      - run: ./scripts/ci/run_angular_material_unit_tests.sh
+      - run:
+          name: "Cloning Material repository"
+          command: ./scripts/ci/clone_angular_material_repo.sh
+      - restore_cache:
+          # Material directory must be kept in sync with the `$MATERIAL_REPO_TMP_DIR` env variable.
+          # It needs to be hardcoded here, because env variables interpolation is not supported.
+          keys:
+            - v2-angular-material-{{ checksum "/tmp/material2/yarn.lock" }}
+            - v2-angular-material-
+      - run:
+          name: Installing Material dependencies.
+          command: yarn --cwd ${MATERIAL_REPO_TMP_DIR} install --frozen-lockfile --non-interactive
+      # Save the cache before we run the Material unit tests script. This is necessary
+      # because we don't want to cache the node modules which have been modified to contain
+      # the attached Ivy package output.
+      - save_cache:
+          # Material directory must be kept in sync with the `$MATERIAL_REPO_TMP_DIR` env variable.
+          # It needs to be hardcoded here, because env variables interpolation is not supported.
+          key: v2-angular-material-{{ checksum "/tmp/material2/yarn.lock" }}
+          paths:
+            - "/tmp/material2/node_modules"
+      - run:
+          name: "Running Material unit tests"
+          command: ./scripts/ci/run_angular_material_unit_tests.sh
 
 workflows:
   version: 2
@@ -592,6 +621,9 @@ workflows:
       - test_aio:
           requires:
           - setup
+      - legacy-unit-tests-saucelabs:
+          requires:
+          - setup
       - deploy_aio:
           requires:
             - test_aio
@@ -645,6 +677,7 @@ workflows:
             # since the publishing script expects the legacy outputs layout.
             - build-npm-packages
             - build-ivy-npm-packages
+            - legacy-unit-tests-saucelabs
             - legacy-misc-tests
       - material-unit-tests:
           requires:
@@ -653,14 +686,9 @@ workflows:
   saucelabs_tests:
     jobs:
       - setup
-      - test_saucelabs:
+      - test_saucelabs_bazel:
           requires:
             - setup
-      - legacy-unit-tests-saucelabs:
-          # Don't open up multiple saucelabs tunnels at the same
-          # time to minimize flakes
-          requires:
-            - test_saucelabs
     triggers:
       - schedule:
           # Runs the Saucelabs legacy tests every hour. We still want to run Saucelabs

.circleci/env.sh

@@ -62,6 +62,15 @@ setPublicVar SAUCE_TUNNEL_IDENTIFIER "angular-${CIRCLE_BUILD_NUM}-${CIRCLE_NODE_
 # acquire CircleCI instances for too long if sauceconnect failed, we need a connect timeout.
 setPublicVar SAUCE_READY_FILE_TIMEOUT 120
 
+####################################################################################################
+# Define environment variables for the Angular Material unit tests job.
+####################################################################################################
+# We specifically use a directory within "/tmp" here because we want the cloned repo to be
+# completely isolated from angular/angular in order to avoid any bad interactions between
+# their separate build setups.
+setPublicVar MATERIAL_REPO_TMP_DIR "/tmp/material2"
+setPublicVar MATERIAL_REPO_URL "https://github.com/angular/material2.git"
+setPublicVar MATERIAL_REPO_BRANCH "ivy-2019"
 
 # Source `$BASH_ENV` to make the variables available immediately.
 source $BASH_ENV;

.codefresh/Dockerfile.win-1809

@@ -0,0 +1,103 @@
+ARG core=mcr.microsoft.com/windows/servercore:1809
+ARG target=mcr.microsoft.com/powershell:windowsservercore-1809
+
+FROM $core as download
+
+ARG node_version=10.13.0
+ARG yarn_version=1.13.0
+
+SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
+
+ENV GPG_VERSION 2.3.4
+
+RUN Invoke-WebRequest $('https://files.gpg4win.org/gpg4win-vanilla-{0}.exe' -f $env:GPG_VERSION) -OutFile 'gpg4win.exe' -UseBasicParsing ; \
+    Start-Process .\gpg4win.exe -ArgumentList '/S' -NoNewWindow -Wait
+
+RUN @( \
+    '94AE36675C464D64BAFA68DD7434390BDBE9B9C5', \
+    'FD3A5288F042B6850C66B31F09FE44734EB7990E', \
+    '71DCFD284A79C3B38668286BC97EC7A07EDE3FC1', \
+    'DD8F2338BAE7501E3DD5AC78C273792F7D83545D', \
+    'C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8', \
+    'B9AE9905FFD7803F25714661B63B535A4C206CA9', \
+    '77984A986EBC2AA786BC0F66B01FBB92821C587A', \
+    '8FCCA13FEF1D0C2E91008E09770F7A9A5AE15600', \
+    '4ED778F539E3634C779C87C6D7062848A1AB005C', \
+    'A48C2BEE680E841632CD4E44F07496B3EB3C1762', \
+    'B9E2F5981AA6E0CD28160D9FF13993A75599653C' \
+    ) | foreach { \
+      gpg --keyserver ha.pool.sks-keyservers.net --recv-keys $_ ; \
+    }
+
+ENV NODE_VERSION=$node_version
+
+RUN Invoke-WebRequest $('https://nodejs.org/dist/v{0}/SHASUMS256.txt.asc' -f $env:NODE_VERSION) -OutFile 'SHASUMS256.txt.asc' -UseBasicParsing ; \
+    gpg --batch --decrypt --output SHASUMS256.txt SHASUMS256.txt.asc
+
+RUN Invoke-WebRequest $('https://nodejs.org/dist/v{0}/node-v{0}-win-x64.zip' -f $env:NODE_VERSION) -OutFile 'node.zip' -UseBasicParsing ; \
+    $sum = $(cat SHASUMS256.txt.asc | sls $('  node-v{0}-win-x64.zip' -f $env:NODE_VERSION)) -Split ' ' ; \
+    if ((Get-FileHash node.zip -Algorithm sha256).Hash -ne $sum[0]) { Write-Error 'SHA256 mismatch' } ; \
+    Expand-Archive node.zip -DestinationPath C:\ ; \
+    Rename-Item -Path $('C:\node-v{0}-win-x64' -f $env:NODE_VERSION) -NewName 'C:\nodejs'
+
+ENV YARN_VERSION=$yarn_version
+
+RUN [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12 ; \
+    Invoke-WebRequest $('https://yarnpkg.com/downloads/{0}/yarn-{0}.msi' -f $env:YARN_VERSION) -OutFile yarn.msi -UseBasicParsing ; \
+    $sig = Get-AuthenticodeSignature yarn.msi ; \
+    if ($sig.Status -ne 'Valid') { Write-Error 'Authenticode signature is not valid' } ; \
+    Write-Output $sig.SignerCertificate.Thumbprint ; \
+    if (@( \
+      '7E253367F8A102A91D04829E37F3410F14B68A5F', \
+      'AF764E1EA56C762617BDC757C8B0F3780A0CF5F9' \
+      ) -notcontains $sig.SignerCertificate.Thumbprint) { Write-Error 'Unknown signer certificate' } ; \
+    Start-Process msiexec.exe -ArgumentList '/i', 'yarn.msi', '/quiet', '/norestart' -NoNewWindow -Wait
+
+ENV GIT_VERSION 2.20.1
+ENV GIT_DOWNLOAD_URL https://github.com/git-for-windows/git/releases/download/v${GIT_VERSION}.windows.1/MinGit-${GIT_VERSION}-busybox-64-bit.zip
+ENV GIT_SHA256 9817ab455d9cbd0b09d8664b4afbe4bbf78d18b556b3541d09238501a749486c
+
+RUN [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12 ; \
+    Invoke-WebRequest -UseBasicParsing $env:GIT_DOWNLOAD_URL -OutFile git.zip; \
+    if ((Get-FileHash git.zip -Algorithm sha256).Hash -ne $env:GIT_SHA256) {exit 1} ; \
+    Expand-Archive git.zip -DestinationPath C:\git; \
+    Remove-Item git.zip
+
+FROM $target as baseimage
+
+ENV NPM_CONFIG_LOGLEVEL info
+
+COPY --from=download /nodejs /nodejs
+COPY --from=download [ "/Program Files (x86)/yarn", "/yarn" ]
+COPY --from=download /git /git
+
+ARG SETX=/M
+RUN setx %SETX% PATH "%PATH%;C:\nodejs;C:\yarn\bin;C:\git\cmd;C:\git\mingw64\bin;C:\git\usr\bin"
+
+CMD [ "node.exe" ]        
+
+FROM baseimage
+
+SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
+
+RUN Invoke-WebRequest -UseBasicParsing 'https://www.7-zip.org/a/7z1805-x64.exe' -OutFile 7z.exe; \
+    Start-Process -FilePath 'C:\\7z.exe' -ArgumentList '/S', '/D=C:\\7zip0' -NoNewWindow -Wait; \
+    Invoke-WebRequest -UseBasicParsing 'http://repo.msys2.org/distrib/x86_64/msys2-base-x86_64-20180531.tar.xz' -OutFile msys2.tar.xz; \
+    Start-Process -FilePath 'C:\\7zip\\7z' -ArgumentList 'e', 'msys2.tar.xz' -Wait; \
+    Start-Process -FilePath 'C:\\7zip\\7z' -ArgumentList 'x', 'msys2.tar', '-oC:\\' -Wait; \
+    Remove-Item msys2.tar.xz; \
+    Remove-Item msys2.tar; \
+    Remove-Item 7z.exe; \
+    Remove-Item -Recurse 7zip; \
+    [Environment]::SetEnvironmentVariable('Path', $env:Path + ';C:\msys64\usr\bin', [System.EnvironmentVariableTarget]::Machine); \
+    [Environment]::SetEnvironmentVariable('BAZEL_SH', 'C:\msys64\usr\bin\bash.exe', [System.EnvironmentVariableTarget]::Machine); \
+    Invoke-WebRequest -UseBasicParsing 'https://download.microsoft.com/download/9/3/F/93FCF1E7-E6A4-478B-96E7-D4B285925B00/vc_redist.x64.exe' -OutFile vc_redist.x64.exe; \
+    Start-Process 'c:\\vc_redist.x64.exe' -ArgumentList '/Install', '/Passive', '/NoRestart' -NoNewWindow -Wait; \
+    Remove-Item vc_redist.x64.exe
+
+# Add a fix for https://github.com/docker/for-win/issues/2920 as entry point to the container.
+SHELL ["cmd", "/c"]
+COPY "fix-msys64.cmd" "C:\\fix-msys64.cmd"
+ENTRYPOINT cmd /C C:\\fix-msys64.cmd && cmd /c
+
+CMD ["cmd.exe"]

.codefresh/README.md

@@ -0,0 +1,33 @@
+# CodeFresh configuration
+
+[![Codefresh build status](https://g.codefresh.io/api/badges/pipeline/angular/angular%2Fangular%2Fangular?type=cf-1)](https://g.codefresh.io/public/accounts/angular/pipelines/angular/angular/angular)
+
+This folder contains configuration for the [CodeFresh](<https://codefresh.io/>) based CI checks for this repository.
+
+## The build pipeline
+
+CodeFresh uses a several pipeline for each repository. The `codefresh.yml` file defines pipeline [build steps](https://codefresh.io/docs/docs/configure-ci-cd-pipeline/introduction-to-codefresh-pipelines/) for this repository.
+
+Run results can be seen in the GitHub checks interface and in the [public pipeline](https://g.codefresh.io/public/accounts/angular/pipelines/angular/angular/angular)
+
+Although most configuration is done via `pipeline.yml`, some options are only available in the online [pipeline settings](https://g.codefresh.io/pipelines/angular/services?repoOwner=angular&repoName=angular&project=angular%2Fangular&context=github&serviceName=angular%2Fangular), which needs a login to access.
+
+
+## Caretaker
+
+CodeFresh status can be found at <http://status.codefresh.io/>.
+
+Issues related to the CodeFresh setup should be escalated to the Tools Team via the current caretaker, followed by Alex Eagle and Filipe Silva.
+
+## Rollout strategy
+
+Currently it is only used for tests on Windows platforms, on the master branch, and without pushing user-facing reports. It's only possible to see current builds in the [public pipeline dashboard](https://g.codefresh.io/public/accounts/angular/pipelines/angular/angular/angular).
+
+After a week or two of running like this, we should reassess how stable and reliable it is. 
+
+Next steps include:
+- building PRs
+- showing build status publicly
+- blocking PRs that break the build
+- expanding the test suite
+

.codefresh/bazel.rc

@@ -0,0 +1,40 @@
+# These options are enabled when running on CI
+# We do this by copying this file to /etc/bazel.bazelrc at the start of the build.
+# See documentation in /docs/BAZEL.md
+
+# Save downloaded repositories in a location that can be cached by CodeFresh. This helps us
+# speeding up the analysis time significantly with Bazel managed node dependencies on the CI.
+# build --repository_cache=C:/codefresh/volume/bazel_repository_cache
+
+# Don't be spammy in the logs
+# TODO(gmagolan): Hide progress again once build performance improves
+# Presently, CircleCI can timeout during bazel test ... with the following
+# error: Too long with no output (exceeded 10m0s)
+# build --noshow_progress
+
+# Print all the options that apply to the build.
+# This helps us diagnose which options override others
+# (e.g. /etc/bazel.bazelrc vs. tools/bazel.rc)
+build --announce_rc
+
+# Workaround https://github.com/bazelbuild/bazel/issues/3645
+# Bazel doesn't calculate the memory ceiling correctly when running under Docker.
+# Limit Bazel to consuming resources that fit in CodeFresh VMs
+# TODO(filipesilva): determine the correct memory limit
+build --local_resources=8000,8.0,1.0
+
+# Retry in the event of flakes, eg. https://circleci.com/gh/angular/angular/31309
+test --flaky_test_attempts=2
+
+# More details on failures
+build --verbose_failures=true
+
+# Include PATH in Windows build/tests
+# https://github.com/bazelbuild/rules_typescript/pull/356
+build --action_env=PATH
+test --action_env=PATH --test_env=PATH
+
+# Exclude tests known to not work on Windows.
+
+# Chrome web tests are currently broken.
+test --test_tag_filters=-browser:chromium-local

.codefresh/codefresh.yml

@@ -0,0 +1,26 @@
+version: '1.0'
+
+steps:
+  BuildImage:
+    type: build
+    image_name: node-bazel-windows
+    working_directory: ./.codefresh
+    no_cf_cache: true
+    build_arguments:
+      - node_version=10.13.0
+      - yarn_version=1.13.0
+    dockerfile: ./Dockerfile.win-1809
+
+  RunTests:
+    title: Run Example
+    image: ${{BuildImage}}
+    commands:
+    # Install dependencies
+    - yarn install --frozen-lockfile --non-interactive --network-timeout 100000 --no-progress
+    # Create symlinks needed for Windows.
+    - scripts\windows\create-symlinks.cmd
+    # Add Bazel CI config
+    - copy .codefresh\bazel.rc %ProgramData%\bazel.bazelrc
+    # Run tests
+    - yarn bazel test //tools/ts-api-guardian:all
+    - yarn test-ivy-aot //packages/animations/test //packages/common/test //packages/forms/test //packages/http/test //packages/platform-browser/test //packages/platform-browser-dynamic/test //packages/router/test

.codefresh/fix-msys64.cmd

@@ -0,0 +1,6 @@
+@echo off
+REM Fix for https://github.com/docker/for-win/issues/2920
+REM echo "Fixing msys64 folder..."
+REM Touch all .dll files inside C:\msys64\
+forfiles /p C:\msys64\ /s /m *.dll /c "cmd /c Copy /B @path+,, >NUL"
+REM echo "Fixed msys64 folder."

.github/CODEOWNERS

@@ -39,12 +39,14 @@
 #  (just to make this file easier to understand)
 # ================================================
 
+#  alan-agius4 - Alan Agius
 #  alexeagle - Alex Eagle
 #  alxhub - Alex Rickabaugh
 #  AndrewKushnir - Andrew Kushnir
 #  andrewseguin - Andrew Seguin
 #  benlesh - Ben Lesh
 #  brandonroberts - Brandon Roberts
+#  devversion - Paul Gschwendtner
 #  filipesilva - Filipe Silva
 #  gkalpak - George Kalpakas
 #  hansl - Hans Larsen
@@ -86,6 +88,7 @@
 #   - IgorMinar
 #   - kara
 #   - mhevery
+#   - alexeagle
 
 
 # ===========================================================
@@ -293,6 +296,17 @@
 #   - IgorMinar
 
 
+# ===========================================================
+#  @angular/tools-docs-libraries
+# ===========================================================
+#
+#   - alan-agius4
+#   - alexeagle
+#   - hansl
+#   - IgorMinar
+#   - mgechev
+
+
 # ===========================================================
 #  @angular/fw-docs-marketing
 # ===========================================================
@@ -313,6 +327,7 @@
 # ===========================================================
 #
 #   - alexeagle
+#   - devversion
 #   - filipesilva
 #   - gkalpak
 #   - IgorMinar
@@ -349,10 +364,19 @@
 
 /packages/animations/**                                         @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-browser/animations/**                        @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
 /aio/content/guide/animations.md                                @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/animations/**                             @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/animations/**                         @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
+/aio/content/guide/complex-animation-sequences.md               @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+/aio/content/guide/reusable-animations.md                       @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+/aio/content/guide/route-animations.md                          @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+/aio/content/guide/transition-and-triggers.md                   @angular/fw-animations @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
 
 
 # ================================================
@@ -383,12 +407,13 @@
 
 
 # ================================================
-#  @angular/compiler-cli/ngtools
+#  Framework/cli integration
 #
 #  a rule to control API changes between @angular/compiler-cli and @angular/cli
 # ================================================
 
 /packages/compiler-cli/src/ngtools/**                           @angular/tools-cli @angular/framework-global-approvers
+/aio/content/guide/ivy.md                                       @angular/tools-cli @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -408,6 +433,14 @@
 /packages/platform-webworker/**                                 @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-webworker-dynamic/**                         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
+/aio/content/guide/architecture-components.md                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/architecture-modules.md                      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/architecture-next-steps.md                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/architecture-services.md                     @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/architecture.md                              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/architecture/**                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/architecture/**                       @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
 /aio/content/guide/attribute-directives.md                      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/attribute-directives/**                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/attribute-directives/**               @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -415,6 +448,8 @@
 /aio/content/guide/bootstrapping.md                             @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/bootstrapping/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
+/aio/content/guide/cheatsheet.md                                @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
 /aio/content/guide/component-interaction.md                     @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/component-interaction/**                  @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/component-interaction/**              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -430,7 +465,13 @@
 /aio/content/examples/dependency-injection-in-action/**         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/dependency-injection-in-action/**     @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
-/aio/content/guide/dependency-injection-pattern.md              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/dependency-injection-navtree.md              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+/aio/content/guide/dependency-injection-providers.md            @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+/aio/content/guide/displaying-data.md                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/displaying-data/**                        @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/displaying-data/**                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/dynamic-component-loader.md                  @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/dynamic-component-loader/**               @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -457,12 +498,9 @@
 /aio/content/images/guide/lifecycle-hooks/**                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/examples/ngcontainer/**                            @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/ngcontainer/**                        @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/ngmodules.md                                 @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/ngmodules/**                              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/ngmodule/**                               @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/ngmodule/**                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/ngmodule-api.md                              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
@@ -474,6 +512,8 @@
 /aio/content/guide/module-types.md                              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/template-syntax.md                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/event-binding/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/interpolation/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/template-syntax/**                        @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/template-syntax/**                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
@@ -496,6 +536,10 @@
 /aio/content/examples/structural-directives/**                  @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/images/guide/structural-directives/**              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
+/aio/content/guide/user-input.md                                @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/user-input/**                             @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/user-input/**                         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
 
 
 # ================================================
@@ -521,6 +565,7 @@
 /aio/content/guide/elements.md                                  @angular/fw-elements @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
+
 # ================================================
 #  @angular/forms
 # ================================================
@@ -651,6 +696,7 @@ testing/**                                                      @angular/fw-test
 /packages/platform-browser/src/security/**                      @angular/fw-security
 /aio/content/guide/security.md                                  @angular/fw-security @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/security/**                               @angular/fw-security @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/security/**                           @angular/fw-security @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -681,6 +727,14 @@ testing/**                                                      @angular/fw-test
 /aio/tests/**                                                   @angular/docs-infra @angular/framework-global-approvers
 /aio/tools/**                                                   @angular/docs-infra @angular/framework-global-approvers
 
+# Hidden docs
+/aio/content/guide/change-log.md                                @angular/docs-infra @angular/framework-global-approvers
+/aio/content/guide/docs-style-guide.md                          @angular/docs-infra @angular/framework-global-approvers
+/aio/content/examples/docs-style-guide/**                       @angular/docs-infra @angular/framework-global-approvers
+/aio/content/images/guide/docs-style-guide/**                   @angular/docs-infra @angular/framework-global-approvers
+/aio/content/guide/visual-studio-2015.md                        @angular/docs-infra @angular/framework-global-approvers
+/aio/content/examples/visual-studio-2015/**                     @angular/docs-infra @angular/framework-global-approvers
+
 
 
 # ================================================
@@ -688,7 +742,17 @@ testing/**                                                      @angular/fw-test
 # ================================================
 
 /aio/content/guide/quickstart.md                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/cli-quickstart/**                         @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/cli-quickstart/**                     @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/tutorial/**                                        @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/toh/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt0/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt1/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt2/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt3/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt4/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt5/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/toh-pt6/**                                @angular/fw-docs-intro @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -696,17 +760,15 @@ testing/**                                                      @angular/fw-test
 #  Docs: observables
 # ================================================
 
-/aio/content/examples/observables/**                            @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/observables/**                        @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/observables.md                               @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/observables/**                            @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/comparing-observables.md                     @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/observables-in-angular/**                 @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/images/guide/observables-in-angular/**             @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/observables-in-angular.md                    @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/practical-observable-usage/**             @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/observables-in-angular/**                 @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/practical-observable-usage.md                @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/rx-library/**                             @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/practical-observable-usage/**             @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/rx-library.md                                @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/rx-library/**                             @angular/fw-docs-observables @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -717,12 +779,26 @@ testing/**                                                      @angular/fw-test
 /aio/content/guide/npm-packages.md                              @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/browser-support.md                           @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/typescript-configuration.md                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/guide/setup-systemjs-anatomy.md                    @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/quickstart/**                             @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/setup.md                                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/setup/**                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/build.md                                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/images/guide/build/**                              @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/deployment.md                                @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/file-structure.md                            @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/releases.md                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/updating.md                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/workspace-config.md                          @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+
+
+
+# ================================================
+#  Docs: libraries
+# ================================================
+
+/aio/content/guide/creating-libraries.md                        @angular/tools-docs-libraries @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/libraries.md                                 @angular/tools-docs-libraries @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/using-libraries.md                           @angular/tools-docs-libraries @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 
 
@@ -745,7 +821,9 @@ testing/**                                                      @angular/fw-test
 /*                                                              @angular/fw-dev-infra
 /.buildkite/**                                                  @angular/fw-dev-infra
 /.circleci/**                                                   @angular/fw-dev-infra
+/.codefresh/**                                                  @angular/fw-dev-infra
 /.github/**                                                     @angular/fw-dev-infra
+/.vscode/**                                                     @angular/fw-dev-infra
 /docs/BAZEL.md                                                  @angular/fw-dev-infra
 /packages/*                                                     @angular/fw-dev-infra
 /scripts/**                                                     @angular/fw-dev-infra
@@ -768,6 +846,8 @@ testing/**                                                      @angular/fw-test
 /tools/*
 *.bzl                                                           @angular/fw-dev-infra
 
+
+
 # ================================================
 #  Material CI
 # ================================================
@@ -775,11 +855,16 @@ testing/**                                                      @angular/fw-test
 /tools/material-ci/**                                           @angular/fw-core @angular/framework-global-approvers
 
 
+
 # ================================================
 #  Public API
 # ================================================
 
 /tools/public_api_guard/**                                      @angular/fw-public-api
+/aio/content/guide/glossary.md                                  @angular/fw-public-api
+/aio/content/guide/styleguide.md                                @angular/fw-public-api
+/aio/content/examples/styleguide/**                             @angular/fw-public-api
+/aio/content/images/guide/styleguide/**                         @angular/fw-public-api
 
 
 

.vscode/extensions.json

@@ -4,6 +4,7 @@
 
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
+    "devondcarew.bazel-code",
     "gkalpak.aio-docs-utils",
     "ms-vscode.vscode-typescript-tslint-plugin",
     "xaver.clang-format",

.vscode/settings.json

@@ -14,12 +14,14 @@
     "**/node_modules/**": true,
     "**/bazel-out/**": true,
     "**/dist/**": true,
+    "**/aio/src/generated/**": true,
   },
   "search.exclude": {
     "**/node_modules": true,
     "**/bower_components": true,
     "**/bazel-out": true,
     "**/dist": true,
+    "**/aio/src/generated": true,
   },
   "git.ignoreLimitWarning": true,
 }

CHANGELOG.md

@@ -1,3 +1,89 @@
+<a name="8.0.0-beta.9"></a>
+# [8.0.0-beta.9](https://github.com/angular/angular/compare/8.0.0-beta.8...8.0.0-beta.9) (2019-03-20)
+
+
+### Bug Fixes
+
+* **bazel:** correct regexp test for self-references in metadata ([#29346](https://github.com/angular/angular/issues/29346)) ([9d090cb](https://github.com/angular/angular/commit/9d090cb))
+* **bazel:** don't produce self-references in metadata ([#29317](https://github.com/angular/angular/issues/29317)) ([3facdeb](https://github.com/angular/angular/commit/3facdeb)), closes [#29315](https://github.com/angular/angular/issues/29315)
+* **bazel:** fix strict null checks compile error in packages/bazel/src/schematics/ng-add/index.ts ([#29282](https://github.com/angular/angular/issues/29282)) ([9a7f560](https://github.com/angular/angular/commit/9a7f560))
+* **bazel:** Remove [@angular](https://github.com/angular)/upgrade from dev dependencies ([#29319](https://github.com/angular/angular/issues/29319)) ([1db8bf3](https://github.com/angular/angular/commit/1db8bf3))
+* **bazel:** Support new e2e project layout ([#29318](https://github.com/angular/angular/issues/29318)) ([8ef690c](https://github.com/angular/angular/commit/8ef690c))
+* **bazel:** turn off pure call tree shaking for ng_package ([#29210](https://github.com/angular/angular/issues/29210)) ([4990b93](https://github.com/angular/angular/commit/4990b93))
+* **compiler-cli:** incorrect metadata bundle for multiple unnamed re-exports ([#29360](https://github.com/angular/angular/issues/29360)) ([105cfaf](https://github.com/angular/angular/commit/105cfaf)), closes [/github.com/angular/material2/blob/master/tools/package-tools/build-release.ts#L78-L85](https://github.com//github.com/angular/material2/blob/master/tools/package-tools/build-release.ts/issues/L78-L85)
+* **core:** don't wrap `<tr>` and `<col>` elements into a required parent ([#29219](https://github.com/angular/angular/issues/29219)) ([f2dc32e](https://github.com/angular/angular/commit/f2dc32e))
+* **core:** parse incorrect ML open tag as text ([#29328](https://github.com/angular/angular/issues/29328)) ([4605df8](https://github.com/angular/angular/commit/4605df8)), closes [#29231](https://github.com/angular/angular/issues/29231)
+
+
+### Features
+
+* add support for TypeScript 3.3 (and drop older versions) ([#29004](https://github.com/angular/angular/issues/29004)) ([75748d6](https://github.com/angular/angular/commit/75748d6))
+
+
+### BREAKING CHANGES
+
+* **core:** Certain elements (like `<tr>` or `<col>`) require parent elements to be of a certain type by the HTML specification
+(ex. `<tr>` can only be inside `<tbody>` / `<thead>`). Before this change Angular template parser was auto-correcting
+"invalid" HTML using the following rules:
+- `<tr>` would be wrapped in `<tbody>` if not inside `<tbody>`, `<tfoot>` or `<thead>`;
+- `<col>` would be wrapped in `<colgroup>` if not inside `<colgroup>`.
+
+This meachanism of automatic wrapping / auto-correcting was problematic for several reasons:
+- it is non-obvious and arbitrary (ex. there are more HTML elements that has rules for parent type);
+- it is incorrect for cases where `<tr>` / `<col>` are at the root of a component's content, ex.:
+
+```html
+<projecting-tr-inside-tbody>
+  <tr>...</tr>
+</projecting-tr-inside-tbody>
+```
+
+In the above example the `<projecting-tr-inside-tbody>` component could be "surprised" to see additional
+`<tbody>` elements inserted by Angular HTML parser.
+
+
+* TypeScript 3.1 and 3.2 are no longer supported.
+
+Please update your TypeScript version to 3.3
+
+
+
+<a name="7.2.10"></a>
+## [7.2.10](https://github.com/angular/angular/compare/7.2.9...7.2.10) (2019-03-20)
+
+
+### Bug Fixes
+
+* **compiler-cli:** incorrect metadata bundle for multiple unnamed re-exports ([#29360](https://github.com/angular/angular/issues/29360)) ([cf8d934](https://github.com/angular/angular/commit/cf8d934)), closes [/github.com/angular/material2/blob/master/tools/package-tools/build-release.ts#L78-L85](https://github.com//github.com/angular/material2/blob/master/tools/package-tools/build-release.ts/issues/L78-L85)
+
+
+
+<a name="8.0.0-beta.8"></a>
+# [8.0.0-beta.8](https://github.com/angular/angular/compare/8.0.0-beta.7...8.0.0-beta.8) (2019-03-12)
+
+
+### Bug Fixes
+
+* **bazel:** add missing binary path for api-extractor ([#29202](https://github.com/angular/angular/issues/29202)) ([df354d1](https://github.com/angular/angular/commit/df354d1))
+* **bazel:** ng build should produce prod bundle ([#29136](https://github.com/angular/angular/issues/29136)) ([14ce8a9](https://github.com/angular/angular/commit/14ce8a9))
+* **compiler:** ensure template is updated if an output is transformed ([#29041](https://github.com/angular/angular/issues/29041)) ([c7e4931](https://github.com/angular/angular/commit/c7e4931))
+
+
+### Features
+
+* **bazel:** Eject Bazel ([#29167](https://github.com/angular/angular/issues/29167)) ([36a1550](https://github.com/angular/angular/commit/36a1550))
+* **bazel:** Hide Bazel files in Bazel builder ([#29110](https://github.com/angular/angular/issues/29110)) ([7060d90](https://github.com/angular/angular/commit/7060d90))
+* **forms:** clear (remove all) components from a FormArray ([#28918](https://github.com/angular/angular/issues/28918)) ([a68b1a1](https://github.com/angular/angular/commit/a68b1a1)), closes [#18531](https://github.com/angular/angular/issues/18531)
+* **platform-server:** wait on returned BEFORE_APP_SERIALIZED promises ([#29120](https://github.com/angular/angular/issues/29120)) ([7102ea8](https://github.com/angular/angular/commit/7102ea8))
+
+
+
+<a name="7.2.9"></a>
+## [7.2.9](https://github.com/angular/angular/compare/7.2.8...7.2.9) (2019-03-12)
+
+This release contains various API docs improvements.
+
+
 <a name="8.0.0-beta.7"></a>
 # [8.0.0-beta.7](https://github.com/angular/angular/compare/8.0.0-beta.6...8.0.0-beta.7) (2019-03-06)
 

WORKSPACE

@@ -15,13 +15,12 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 # Fetch rules_nodejs so we can install our npm dependencies
 http_archive(
     name = "build_bazel_rules_nodejs",
-    sha256 = "5c86b055c57e15bf32d9009a15bcd6d8e190c41b1ff2fb18037b75e0012e4e7c",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.26.0/rules_nodejs-0.26.0.tar.gz"],
+    sha256 = "fb87ed5965cef93188af9a7287511639403f4b0da418961ce6defb9dcf658f51",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.27.7/rules_nodejs-0.27.7.tar.gz"],
 )
 
 # Check the bazel version and download npm dependencies
-load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "node_repositories", "yarn_install")
-load("@build_bazel_rules_nodejs//:package.bzl", "check_rules_nodejs_version")
+load("@build_bazel_rules_nodejs//:defs.bzl", "check_bazel_version", "check_rules_nodejs_version", "node_repositories", "yarn_install")
 
 # Bazel version must be at least v0.21.0 because:
 #   - 0.21.0 Using --incompatible_strict_action_env flag fixes cache when running `yarn bazel`
@@ -49,6 +48,14 @@ node_repositories(
     node_version = "10.9.0",
     package_json = ["//:package.json"],
     preserve_symlinks = True,
+    # yarn 1.13.0 under Bazel has a regression on Windows that causes build errors on rebuilds:
+    # ```
+    # ERROR: Source forest creation failed: C:/.../fyuc5c3n/execroot/angular/external (Directory not empty)
+    # ```
+    # See https://github.com/angular/angular/pull/29431 for more information.
+    # It possible that versions of yarn past 1.13.0 do not have this issue, however, before
+    # advancing this version we need to test manually on Windows that the above error does not
+    # happen as the issue is not caught by CI.
     yarn_version = "1.12.1",
 )
 

aio/aio-builds-setup/dockerbuild/Dockerfile

@@ -26,8 +26,8 @@ ARG      AIO_GITHUB_ORGANIZATION=angular
 ARG TEST_AIO_GITHUB_ORGANIZATION=test-org
 ARG      AIO_GITHUB_REPO=angular
 ARG TEST_AIO_GITHUB_REPO=test-repo
-ARG      AIO_GITHUB_TEAM_SLUGS=aio-contributors
-ARG TEST_AIO_GITHUB_TEAM_SLUGS=aio-contributors
+ARG      AIO_GITHUB_TEAM_SLUGS=aio-auto-previews,aio-contributors
+ARG TEST_AIO_GITHUB_TEAM_SLUGS=test-team-1,test-team-2
 ARG      AIO_NGINX_HOSTNAME=$AIO_DOMAIN_NAME
 ARG TEST_AIO_NGINX_HOSTNAME=$TEST_AIO_DOMAIN_NAME
 ARG      AIO_NGINX_PORT_HTTP=80

aio/content/cli/usage-analytics-gathering.md

@@ -0,0 +1,38 @@
+# Gathering Usage Analytics
+Administrators can configure their instances of Angular CLI to share usage analytics with
+third parties. This sharing is separate from and in addition to usage analytics shared
+with Google. It is disabled by default and cannot be enabled at the project level for
+all users. It must be set at the global configuration level for each user to allow
+managed users to opt in and share usage analytics.  
+
+To configure usage analytics sharing, use the `ng config` command to add both the user ID
+and the third-party ID to the user's global Angular CLI configuration. 
+
+- The third-party ID is the tracking identifier of the third-party Google Analytics
+  account. This ID is a string that looks like `UA-123456-12`.
+- You can choose a user ID, or be assigned a random user ID when you run the CLI command.  
+
+Once you have the third-party tracking ID, add it to your global configuration using the  following command:
+
+```
+ng config --global cli.analyticsSharing.tracking UA-123456-12
+```
+
+To add a custom user ID to the global configuration using the following command. This
+should be unique per users to identify unique usage of commands and flags.
+
+```
+ng config --global cli.analyticsSharing.user SOME_USER_NAME
+```
+
+To generate a new random user ID, run the following command:
+
+```
+ng config --global cli.analyticsSharing.user ""
+```
+
+To turn off this feature, run the following command:
+
+```
+ng config --global --remove cli.analyticsSharing
+```

aio/content/examples/.gitignore

@@ -92,3 +92,6 @@ upgrade-phonecat-3-final/tsconfig-aot.json
 upgrade-phonecat-3-final/rollup-config.js
 !upgrade-phonecat-*/**/karma.conf.js
 !upgrade-phonecat-*/**/karma-test-shim.js
+
+# schematics
+!schematics-for-libraries/projects/my-lib/package.json

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

@@ -0,0 +1,20 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
+describe('Built Template Functions Example', function () {
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('should have title Built-in Template Functions', function () {
+    let title = element.all(by.css('h1')).get(0);
+    expect(title.getText()).toEqual('Built-in Template Functions');
+  });
+
+  it('should display $any( ) in h2', function () {
+    let header = element(by.css('h2'));
+    expect(header.getText()).toContain('$any( )');
+  });
+
+});

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

@@ -0,0 +1,15 @@
+<h1>{{title}}</h1>
+
+<h2><code>$any( )</code> type cast function and an undeclared member</h2>
+
+<p>There is no such member as <code>bestByDate</code> in the following two examples, so nothing renders:</p>
+<!-- #docregion any-type-cast-function-1 -->
+<p>The item's undeclared best by date is: {{$any(item).bestByDate}}</p>
+<!-- #enddocregion any-type-cast-function-1 -->
+
+<h2>using <code>this</code></h2>
+<!-- #docregion any-type-cast-function-2 -->
+<p>The item's undeclared best by date is: {{$any(this).bestByDate}}</p>
+<!-- #enddocregion any-type-cast-function-2 -->
+
+

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

@@ -0,0 +1,16 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+});

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Built-in Template Functions';
+
+  item = {
+    name : 'Telephone',
+    origin : 'Sweden',
+    price: 98
+  };
+}

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

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

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

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <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>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

aio/content/examples/built-in-template-functions/src/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/built-in-template-functions/stackblitz.json

@@ -0,0 +1,10 @@
+{
+  "description": "Built-in Template Functions",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "file": "src/app/app.component.ts",
+  "tags": ["Built-in Template Functions"]
+}

aio/content/examples/component-interaction/example-config.json

@@ -4,7 +4,8 @@
       "cmd": "yarn",
       "args": [
         "e2e",
-        "--no-webdriver-update"
+        "--no-webdriver-update",
+        "--port={PORT}"
       ]
     }
   ]

aio/content/examples/dependency-injection/example-config.json

@@ -4,7 +4,8 @@
       "cmd": "yarn",
       "args": [
         "e2e",
-        "--no-webdriver-update"
+        "--no-webdriver-update",
+        "--port={PORT}"
       ]
     }
   ]

aio/content/examples/http/src/browser-test-shim.js

@@ -28,7 +28,6 @@
       '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
       '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
       '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
       '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
       '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
     },

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

@@ -5,7 +5,8 @@
       "cmd": "yarn",
       "args": [
         "e2e",
-        "--no-webdriver-update"
+        "--no-webdriver-update",
+        "--port={PORT}"
       ]
     }
   ]

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

@@ -13,15 +13,4 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
-  it(`should have as title 'Featured product:'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('Featured product:');
-  }));
-  it('should render title in a p tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('p').textContent).toContain('Featured product:');
-  }));
 });

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

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent {
-  itemImageUrl = '../assets/lamp.png';
-  isUnchanged = true;
-  classes = 'special';
-  // #docregion parent-data-type
-  parentItem = 'bananas';
-  // #enddocregion parent-data-type
-
-  // #docregion pass-object
-  currentItem = [{
-    id: 21,
-    name: 'peaches'
-  }];
-  // #enddocregion pass-object
-
-  interpolationTitle = 'Interpolation';
-  propertyTitle = 'Property binding';
-
-  // #docregion malicious-content
-  evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
-  // #enddocregion malicious-content
-}

aio/content/examples/router/e2e/src/app.e2e-spec.ts

@@ -31,6 +31,7 @@ describe('Router', () => {
       heroDetailTitle: heroDetail.element(by.xpath('*[2]')),
 
       adminHref: hrefEles.get(2),
+      adminPage: element(by.css('app-root > div > app-admin')),
       adminPreloadList: element.all(by.css('app-root > div > app-admin > app-admin-dashboard > ul > li')),
 
       loginHref: hrefEles.get(3),
@@ -138,6 +139,31 @@ describe('Router', () => {
     expect(page.secondaryOutlet.count()).toBe(1, 'secondary outlet');
   });
 
+  it('should redirect with secondary route', async () => {
+    const page = getPageStruct();
+
+    // go to login page and login
+    await browser.get('');
+    await page.loginHref.click();
+    await page.loginButton.click();
+
+    // open secondary outlet
+    await page.contactHref.click();
+
+    // go to login page and logout
+    await page.loginHref.click();
+    await page.loginButton.click();
+
+    // attempt to go to admin page, redirects to login with secondary outlet open
+    await page.adminHref.click();
+
+    // login, get redirected back to admin with outlet still open
+    await page.loginButton.click();
+
+    expect(await page.adminPage.isDisplayed()).toBeTruthy();
+    expect(page.secondaryOutlet.count()).toBeTruthy();
+  });
+
   async function crisisCenterEdit(index: number, save: boolean) {
     const page = getPageStruct();
     await page.crisisHref.click();

aio/content/examples/router/src/app/auth/login/login.component.1.ts

@@ -27,10 +27,10 @@ export class LoginComponent {
       if (this.authService.isLoggedIn) {
         // Get the redirect URL from our auth service
         // If no redirect has been set, use the default
-        let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/crisis-center/admin';
+        let redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/admin';
 
         // Redirect the user
-        this.router.navigate([redirect]);
+        this.router.navigateByUrl(redirect);
       }
     });
   }

aio/content/examples/router/src/app/auth/login/login.component.ts

@@ -28,7 +28,7 @@ export class LoginComponent {
       if (this.authService.isLoggedIn) {
         // Get the redirect URL from our auth service
         // If no redirect has been set, use the default
-        let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/admin';
+        let redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/admin';
 
         // #docregion preserve
         // Set our navigation extras object
@@ -39,7 +39,7 @@ export class LoginComponent {
         };
 
         // Redirect the user
-        this.router.navigate([redirect], navigationExtras);
+        this.router.navigateByUrl(redirect, navigationExtras);
         // #enddocregion preserve
       }
     });

aio/content/examples/schematics-for-libraries/example-config.json

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

aio/content/examples/schematics-for-libraries/projects/my-lib/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/my-lib",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/package.json

@@ -0,0 +1,20 @@
+// #docplaster
+// #docregion collection
+{
+  "name": "my-lib",
+  "version": "0.0.1",
+// #enddocregion collection
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p tsconfig.schematics.json",
+    "copy:schemas": "cp --parents schematics/*/schema.json ../../dist/my-lib/",
+    "copy:files": "cp --parents -p schematics/*/files/** ../../dist/my-lib/",
+    "copy:collection": "cp schematics/collection.json ../../dist/my-lib/schematics/collection.json",
+    "postbuild": "npm run copy:schemas && npm run copy:files && npm run copy:collection"
+  },
+  "peerDependencies": {
+    "@angular/common": "^7.2.0",
+    "@angular/core": "^7.2.0"
+  },
+// #docregion collection
+  "schematics": "./schematics/collection.json"
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.1.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add my library to the project.",
+      "factory": "./ng-add/index#ngAdd"
+    }
+  }
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add my library to the project.",
+      "factory": "./ng-add/index#ngAdd"
+    },
+    "my-service": {
+      "description": "Generate a service in the project.",
+      "factory": "./my-service/index#myService",
+      "schema": "./my-service/schema.json"
+    }
+  }
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/files/__name@dasherize__.service.ts.template

@@ -0,0 +1,10 @@
+// #docregion template
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class <%= classify(name) %>Service {
+  constructor(private http: HttpClient) { }
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts

@@ -0,0 +1,11 @@
+import { Rule, Tree } from '@angular-devkit/schematics';
+
+import { Schema as MyServiceSchema } from './schema';
+
+// #docregion factory
+export function myService(options: MyServiceSchema): Rule {
+  return (tree: Tree) => {
+    return tree;
+  };
+}
+// #enddocregion factory

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts

@@ -0,0 +1,66 @@
+// #docplaster
+// #docregion schematics-imports, schema-imports, workspace
+import {
+  Rule, Tree, SchematicsException,
+  apply, url, applyTemplates, move,
+  chain, mergeWith
+} from '@angular-devkit/schematics';
+
+import { strings, normalize, experimental } from '@angular-devkit/core';
+// #enddocregion schematics-imports
+
+import { Schema as MyServiceSchema } from './schema';
+// #enddocregion schema-imports
+
+export function myService(options: MyServiceSchema): Rule {
+  return (tree: Tree) => {
+    const workspaceConfig = tree.read('/angular.json');
+    if (!workspaceConfig) {
+      throw new SchematicsException('Could not find Angular workspace configuration');
+    }
+
+    // convert workspace to string
+    const workspaceContent = workspaceConfig.toString();
+
+    // parse workspace string into JSON object
+    const workspace: experimental.workspace.WorkspaceSchema = JSON.parse(workspaceContent);
+// #enddocregion workspace
+// #docregion project-fallback
+    if (!options.project) {
+      options.project = workspace.defaultProject;
+    }
+// #enddocregion project-fallback
+
+// #docregion project-info
+    const projectName = options.project as string;
+
+    const project = workspace.projects[projectName];
+
+    const projectType = project.projectType === 'application' ? 'app' : 'lib';
+// #enddocregion project-info
+
+// #docregion path
+    if (options.path === undefined) {
+      options.path = `${project.sourceRoot}/${projectType}`;
+    }
+// #enddocregion path
+
+// #docregion template
+    const templateSource = apply(url('./files'), [
+      applyTemplates({
+        classify: strings.classify,
+        dasherize: strings.dasherize,
+        name: options.name
+      }),
+      move(normalize(options.path as string))
+    ]);
+// #enddocregion template
+
+// #docregion chain
+    return chain([
+      mergeWith(templateSource)
+    ]);
+// #enddocregion chain
+// #docregion workspace
+  };
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "SchematicsMyService",
+  "title": "My Service Schema",
+  "type": "object",
+  "properties": {
+    "name": {
+      "description": "The name of the service.",
+      "type": "string"
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the service.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+   },
+  "required": [
+    "name"
+  ]
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.ts

@@ -0,0 +1,10 @@
+export interface Schema {
+  // The name of the service.
+  name: string;
+
+  // The path to create the service.
+  path?: string;
+
+  // The name of the project.
+  project?: string;
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts

@@ -0,0 +1,10 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+
+// Just return the tree
+export function ngAdd(_options: any): Rule {
+  return (tree: Tree, _context: SchematicContext) => {
+    _context.addTask(new NodePackageInstallTask());
+    return tree;
+  };
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyLibComponent } from './my-lib.component';
+
+describe('MyLibComponent', () => {
+  let component: MyLibComponent;
+  let fixture: ComponentFixture<MyLibComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MyLibComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyLibComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

aio/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-my-lib',
+  template: `
+    <p>
+      my-lib works!
+    </p>
+  `,
+  styles: []
+})
+export class MyLibComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { MyLibComponent } from './my-lib.component';
+
+@NgModule({
+  declarations: [MyLibComponent],
+  imports: [
+  ],
+  exports: [MyLibComponent]
+})
+export class MyLibModule { }

aio/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MyLibService } from './my-lib.service';
+
+describe('MyLibService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: MyLibService = TestBed.get(MyLibService);
+    expect(service).toBeTruthy();
+  });
+});

aio/content/examples/schematics-for-libraries/projects/my-lib/src/lib/my-lib.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MyLibService {
+
+  constructor() { }
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/src/public_api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of my-lib
+ */
+
+export * from './lib/my-lib.service';
+export * from './lib/my-lib.component';
+export * from './lib/my-lib.module';

aio/content/examples/schematics-for-libraries/projects/my-lib/tsconfig.lib.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/tsconfig.schematics.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "lib": [
+      "es2018",
+      "dom"
+    ],
+    "declaration": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "rootDir": "schematics",
+    "outDir": "../../dist/my-lib/schematics",
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "es6",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "include": [
+    "schematics/**/*"
+  ],
+  "exclude": [
+    "schematics/*/files/**/*"
+  ]
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

aio/content/examples/schematics-for-libraries/src/app/app.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <h2>Library Schematics</h2>
+  `,
+  styles: []
+})
+export class AppComponent {
+  title = 'schematics-for-libraries';
+}

aio/content/examples/schematics-for-libraries/src/app/app.module.ts

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

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

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <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>
+<body>
+  <app-root></app-root>
+</body>
+</html>

aio/content/examples/schematics-for-libraries/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

aio/content/examples/schematics-for-libraries/zipper.json

@@ -0,0 +1,10 @@
+{
+  "description": "Schematics For Libraries",
+  "files": [
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1].*",
+    "**/*.template"
+  ],
+  "tags": ["Angular", "Libraries", "Schematics"]
+}

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

@@ -1,7 +1,7 @@
 {
   "projectType": "service-worker",
   "e2e": [
-    {"cmd": "yarn", "args": ["e2e", "--no-webdriver-update"]},
+    {"cmd": "yarn", "args": ["e2e", "--no-webdriver-update", "--port={PORT}"]},
     {"cmd": "yarn", "args": ["build", "--prod"]},
     {"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw.json'), 'ngsw.json is missing')"]},
     {"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw-worker.js'), 'ngsw-worker.js is missing')"]},

aio/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts

@@ -1,19 +1,16 @@
 import { Injectable } from '@angular/core';
-import { Http }       from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 
-import { Hero }       from './hero.model';
+import { Hero } from './hero.model';
 
 @Injectable()
 export class HeroService {
 
-  constructor(private http: Http) {}
+  constructor(private http: HttpClient) {}
 
   getHeroes(): Observable<Hero[]> {
-    return this.http.get('api/heroes').pipe(
-      map(resp => resp.json().data as Hero[])
-    );
+    return this.http.get<Hero[]>('api/heroes');
   }
 }

aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts

@@ -2,10 +2,10 @@
 /* avoid */
 
 import { OnInit } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { Observable } from 'rxjs';
-import { catchError, finalize, map } from 'rxjs/operators';
+import { catchError, finalize } from 'rxjs/operators';
 
 import { Hero } from '../shared/hero.model';
 
@@ -13,11 +13,10 @@ const heroesUrl = 'http://angular.io';
 
 export class HeroListComponent implements OnInit {
   heroes: Hero[];
-  constructor(private http: Http) {}
+  constructor(private http: HttpClient) {}
   getHeroes() {
     this.heroes = [];
     this.http.get(heroesUrl).pipe(
-      map((response: Response) => <Hero[]>response.json().data),
       catchError(this.catchBadResponse),
       finalize(() => this.hideSpinner())
     ).subscribe((heroes: Hero[]) => this.heroes = heroes);

aio/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts

@@ -1,18 +1,16 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { map } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
 
 import { Hero } from './hero.model';
 
 @Injectable()
 // #docregion example
 export class HeroService {
-  constructor(private http: Http) { }
+  constructor(private http: HttpClient) { }
 
   getHeroes() {
-    return this.http.get('api/heroes').pipe(
-      map((response: Response) => <Hero[]>response.json()));
+    return this.http.get<Hero[]>('api/heroes');
   }
 }
 // #enddocregion example

aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { Inject } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { HeroService } from './hero.service';
 // #docregion example
@@ -9,6 +9,6 @@ import { HeroService } from './hero.service';
 export class HeroArena {
   constructor(
       @Inject(HeroService) private heroService: HeroService,
-      @Inject(Http) private http: Http) {}
+      @Inject(HttpClient) private http: HttpClient) {}
 }
 // #enddocregion example

aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts

@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { HeroService } from './hero.service';
 
@@ -10,7 +10,7 @@ import { HeroService } from './hero.service';
 export class HeroArena {
   constructor(
     private heroService: HeroService,
-    private http: Http) {}
+    private http: HttpClient) {}
     // #enddocregion example
     // test harness
     getParticipants() {

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

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

aio/content/examples/testing/src/app/demo/async-helper.spec.ts

@@ -4,86 +4,103 @@ import { interval, of } from 'rxjs';
 import { delay, take } from 'rxjs/operators';
 
 describe('Angular async helper', () => {
-  let actuallyDone = false;
 
-  beforeEach(() => { actuallyDone = false; });
+  describe('async', () => {
+    let actuallyDone = false;
 
-  afterEach(() => { expect(actuallyDone).toBe(true, 'actuallyDone should be true'); });
+    beforeEach(() => { actuallyDone = false; });
 
-  it('should run normal test', () => { actuallyDone = true; });
+    afterEach(() => { expect(actuallyDone).toBe(true, 'actuallyDone should be true'); });
 
-  it('should run normal async test', (done: DoneFn) => {
-    setTimeout(() => {
-      actuallyDone = true;
-      done();
-    }, 0);
+    it('should run normal test', () => { actuallyDone = true; });
+
+    it('should run normal async test', (done: DoneFn) => {
+      setTimeout(() => {
+        actuallyDone = true;
+        done();
+      }, 0);
+    });
+
+    it('should run async test with task',
+       async(() => { setTimeout(() => { actuallyDone = true; }, 0); }));
+
+    it('should run async test with task', async(() => {
+      const id = setInterval(() => {
+        actuallyDone = true;
+        clearInterval(id);
+      }, 100);
+    }));
+
+    it('should run async test with successful promise', async(() => {
+      const p = new Promise(resolve => { setTimeout(resolve, 10); });
+      p.then(() => { actuallyDone = true; });
+    }));
+
+    it('should run async test with failed promise', async(() => {
+      const p = new Promise((resolve, reject) => { setTimeout(reject, 10); });
+      p.catch(() => { actuallyDone = true; });
+    }));
+
+    // Use done. Can also use async or fakeAsync.
+    it('should run async test with successful delayed Observable', (done: DoneFn) => {
+      const source = of (true).pipe(delay(10));
+      source.subscribe(val => actuallyDone = true, err => fail(err), done);
+    });
+
+    it('should run async test with successful delayed Observable', async(() => {
+      const source = of (true).pipe(delay(10));
+      source.subscribe(val => actuallyDone = true, err => fail(err));
+    }));
+
+    it('should run async test with successful delayed Observable', fakeAsync(() => {
+      const source = of (true).pipe(delay(10));
+      source.subscribe(val => actuallyDone = true, err => fail(err));
+
+      tick(10);
+    }));
   });
 
-  it('should run async test with task',
-     async(() => { setTimeout(() => { actuallyDone = true; }, 0); }));
+  describe('fakeAsync', () => {
+    // #docregion fake-async-test-tick
+    it('should run timeout callback with delay after call tick with millis', fakeAsync(() => {
+        let called = false;
+        setTimeout(() => { called = true; }, 100);
+        tick(100);
+        expect(called).toBe(true);
+      }));
+    // #enddocregion fake-async-test-tick
 
-  it('should run async test with task', async(() => {
-       const id = setInterval(() => {
-         actuallyDone = true;
-         clearInterval(id);
-       }, 100);
-     }));
+    // #docregion fake-async-test-date
+    it('should get Date diff correctly in fakeAsync', fakeAsync(() => {
+        const start = Date.now();
+        tick(100);
+        const end = Date.now();
+        expect(end - start).toBe(100);
+      }));
+    // #enddocregion fake-async-test-date
 
-  it('should run async test with successful promise', async(() => {
-       const p = new Promise(resolve => { setTimeout(resolve, 10); });
-       p.then(() => { actuallyDone = true; });
-     }));
+    // #docregion fake-async-test-rxjs
+    it('should get Date diff correctly in fakeAsync with rxjs scheduler', fakeAsync(() => {
+        // need to add `import 'zone.js/dist/zone-patch-rxjs-fake-async'
+        // to patch rxjs scheduler
+        let result = null;
+        of ('hello').pipe(delay(1000)).subscribe(v => { result = v; });
+        expect(result).toBeNull();
+        tick(1000);
+        expect(result).toBe('hello');
 
-  it('should run async test with failed promise', async(() => {
-       const p = new Promise((resolve, reject) => { setTimeout(reject, 10); });
-       p.catch(() => { actuallyDone = true; });
-     }));
+        const start = new Date().getTime();
+        let dateDiff = 0;
+        interval(1000).pipe(take(2)).subscribe(() => dateDiff = (new Date().getTime() - start));
 
-  // Use done. Can also use async or fakeAsync.
-  it('should run async test with successful delayed Observable', (done: DoneFn) => {
-    const source = of (true).pipe(delay(10));
-    source.subscribe(val => actuallyDone = true, err => fail(err), done);
+        tick(1000);
+        expect(dateDiff).toBe(1000);
+        tick(1000);
+        expect(dateDiff).toBe(2000);
+      }));
+    // #enddocregion fake-async-test-rxjs
   });
 
-  // #docregion fake-async-test-tick
-  it('should run timeout callback with delay after call tick with millis', fakeAsync(() => {
-       let called = false;
-       setTimeout(() => { called = true; }, 100);
-       tick(100);
-       expect(called).toBe(true);
-     }));
-  // #enddocregion fake-async-test-tick
-
-  // #docregion fake-async-test-date
-  it('should get Date diff correctly in fakeAsync', fakeAsync(() => {
-       const start = Date.now();
-       tick(100);
-       const end = Date.now();
-       expect(end - start).toBe(100);
-     }));
-  // #enddocregion fake-async-test-date
-
-  // #docregion fake-async-test-rxjs
-  it('should get Date diff correctly in fakeAsync with rxjs scheduler', fakeAsync(() => {
-       // need to add `import 'zone.js/dist/zone-patch-rxjs-fake-async'
-       // to patch rxjs scheduler
-       let result = null;
-       of ('hello').pipe(delay(1000)).subscribe(v => { result = v; });
-       expect(result).toBeNull();
-       tick(1000);
-       expect(result).toBe('hello');
-
-       const start = new Date().getTime();
-       let dateDiff = 0;
-       interval(1000).pipe(take(2)).subscribe(() => dateDiff = (new Date().getTime() - start));
-
-       tick(1000);
-       expect(dateDiff).toBe(1000);
-       tick(1000);
-       expect(dateDiff).toBe(2000);
-     }));
-  // #enddocregion fake-async-test-rxjs
-
   // #docregion fake-async-test-clock
   describe('use jasmine.clock()', () => {
     // need to config __zone_symbol__fakeAsyncPatchLock flag
@@ -124,16 +141,4 @@ describe('Angular async helper', () => {
   });
   // #enddocregion async-test-promise-then
 
-  it('should run async test with successful delayed Observable', async(() => {
-       const source = of (true).pipe(delay(10));
-       source.subscribe(val => actuallyDone = true, err => fail(err));
-     }));
-
-  it('should run async test with successful delayed Observable', fakeAsync(() => {
-       const source = of (true).pipe(delay(10));
-       source.subscribe(val => actuallyDone = true, err => fail(err));
-
-       tick(10);
-     }));
-
 });

aio/content/examples/testing/src/app/model/http-hero.service.spec.ts

@@ -1,126 +0,0 @@
-/**
- * Test the HeroService when implemented with the OLD HttpModule
- */
-import {
-   async, inject, TestBed
-} from '@angular/core/testing';
-
-import {
-  MockBackend,
-  MockConnection
-} from '@angular/http/testing';
-
-import {
-  HttpModule, Http, XHRBackend, Response, ResponseOptions
-} from '@angular/http';
-
-import { of } from 'rxjs';
-
-import { Hero } from './hero';
-import { HttpHeroService } from './http-hero.service';
-
-const makeHeroData = () => [
-  { id: 1, name: 'Windstorm' },
-  { id: 2, name: 'Bombasto' },
-  { id: 3, name: 'Magneta' },
-  { id: 4, name: 'Tornado' }
-] as Hero[];
-
-////////  Tests  /////////////
-describe('HttpHeroService (using old HttpModule)', () => {
-  let backend: MockBackend;
-  let service: HttpHeroService;
-
-  beforeEach( () => {
-    TestBed.configureTestingModule({
-      imports: [ HttpModule ],
-      providers: [
-        HttpHeroService,
-        { provide: XHRBackend, useClass: MockBackend }
-      ]
-    });
-  });
-
-  it('can instantiate service via DI', () => {
-      service = TestBed.get(HttpHeroService);
-      expect(service instanceof HttpHeroService).toBe(true);
-  });
-
-  it('can instantiate service with "new"', () => {
-    const http = TestBed.get(Http);
-    expect(http).not.toBeNull('http should be provided');
-    let service = new HttpHeroService(http);
-    expect(service instanceof HttpHeroService).toBe(true, 'new service should be ok');
-  });
-
-  it('can provide the mockBackend as XHRBackend', () => {
-    const backend = TestBed.get(XHRBackend);
-    expect(backend).not.toBeNull('backend should be provided');
-  });
-
-  describe('when getHeroes', () => {
-    let fakeHeroes: Hero[];
-    let http: Http;
-    let response: Response;
-
-    beforeEach(() => {
-
-      backend = TestBed.get(XHRBackend);
-      http = TestBed.get(Http);
-
-      service = new HttpHeroService(http);
-      fakeHeroes = makeHeroData();
-      let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}});
-      response = new Response(options);
-    });
-
-    it('should have expected fake heroes (then)', () => {
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
-
-      service.getHeroes().toPromise()
-      // .then(() => Promise.reject('deliberate'))
-        .then(heroes => {
-          expect(heroes.length).toBe(fakeHeroes.length,
-            'should have expected no. of heroes');
-        })
-        .catch(fail);
-    });
-
-    it('should have expected fake heroes (Observable tap)', () => {
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
-
-      service.getHeroes().subscribe(
-        heroes => {
-          expect(heroes.length).toBe(fakeHeroes.length,
-            'should have expected no. of heroes');
-        },
-        fail
-      );
-    });
-
-
-    it('should be OK returning no heroes', () => {
-      let resp = new Response(new ResponseOptions({status: 200, body: {data: []}}));
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
-
-      service.getHeroes().subscribe(
-        heroes => {
-          expect(heroes.length).toBe(0, 'should have no heroes');
-        },
-        fail
-      );
-    });
-
-    it('should treat 404 as an Observable error', () => {
-      let resp = new Response(new ResponseOptions({status: 404}));
-      backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp));
-
-      service.getHeroes().subscribe(
-        heroes => fail('should not respond with heroes'),
-        err => {
-          expect(err).toMatch(/Bad response status/, 'should catch bad response status code');
-          return of(null); // failure is the expected test result
-        });
-    });
-  });
-});

aio/content/examples/testing/src/app/model/http-hero.service.ts

@@ -1,69 +0,0 @@
-// The OLD Http module. See HeroService for use of the current HttpClient
-// #docplaster
-// #docregion
-import { Injectable }     from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { Headers, RequestOptions } from '@angular/http';
-import { Hero }           from './hero';
-
-import { Observable } from 'rxjs';
-import { throwError } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
-
-@Injectable()
-export class HttpHeroService {
-  private _heroesUrl = 'app/heroes';  // URL to web api
-
-  constructor (private http: Http) {}
-
-  getHeroes (): Observable<Hero[]> {
-    return this.http.get(this._heroesUrl).pipe(
-      map(this.extractData),
-      // tap(data => console.log(data)), // eyeball results in the console
-      catchError(this.handleError)
-    );
-  }
-
-  getHero(id: number | string) {
-    return this.http.get('app/heroes/?id=${id}').pipe(
-      map((r: Response) => r.json().data as Hero[])
-    );
-  }
-
-  addHero (name: string): Observable<Hero>  {
-    let body = JSON.stringify({ name });
-    let headers = new Headers({ 'Content-Type': 'application/json' });
-    let options = new RequestOptions({ headers: headers });
-
-    return this.http.post(this._heroesUrl, body, options).pipe(
-      map(this.extractData),
-      catchError(this.handleError)
-    );
-  }
-
-  updateHero (hero: Hero): Observable<Hero>  {
-    let body = JSON.stringify(hero);
-    let headers = new Headers({ 'Content-Type': 'application/json' });
-    let options = new RequestOptions({ headers: headers });
-
-    return this.http.put(this._heroesUrl, body, options).pipe(
-      map(this.extractData),
-      catchError(this.handleError)
-    );
-  }
-
-  private extractData(res: Response) {
-    if (res.status < 200 || res.status >= 300) {
-      throw new Error('Bad response status: ' + res.status);
-    }
-    let body = res.json();
-    return body.data || { };
-  }
-
-  private handleError (error: any) {
-    // In a real world app, we might send the error to remote logging infrastructure
-    let errMsg = error.message || 'Server error';
-    console.error(errMsg); // log to console instead
-    return throwError(errMsg);
-  }
-}

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

@@ -41,7 +41,6 @@
       'app/hero/hero-detail.component.spec',
       'app/hero/hero-list.component.spec',
       'app/model/hero.service.spec',
-      'app/model/http-hero.service.spec',
       'app/shared/highlight.directive.spec',
       'app/shared/title-case.pipe.spec',
       'app/twain/twain.component.spec',

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

@@ -17,7 +17,6 @@ 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';

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

@@ -11,7 +11,7 @@
 <!-- #docregion name-input -->
 <div>
   <label>name:
-    <input [(ngModel)]="hero.name" placeholder="name">
+    <input [(ngModel)]="hero.name" placeholder="name"/>
   </label>
 </div>
 <!-- #enddocregion name-input -->

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

@@ -5,6 +5,6 @@
 <div><span>id: </span>{{hero.id}}</div>
 <div>
   <label>name:
-    <input [(ngModel)]="hero.name" placeholder="name">
+    <input [(ngModel)]="hero.name" placeholder="name"/>
   </label>
 </div>

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

@@ -18,7 +18,7 @@
   <div><span>id: </span>{{selectedHero.id}}</div>
   <div>
     <label>name:
-      <input [(ngModel)]="selectedHero.name" placeholder="name">
+      <input [(ngModel)]="selectedHero.name" placeholder="name"/>
     </label>
   </div>
   <!-- #enddocregion selectedHero-details -->

aio/content/examples/upgrade-module/src/systemjs.config.1.js

@@ -15,10 +15,10 @@
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       // #docregion upgrade-static-umd

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

@@ -6,9 +6,9 @@ import { BrowserModule } from '@angular/platform-browser';
 // #docregion upgrademodule
 import { UpgradeModule } from '@angular/upgrade/static';
 // #enddocregion upgrademodule
-// #docregion httpmodule
-import { HttpModule } from '@angular/http';
-// #enddocregion httpmodule
+// #docregion httpclientmodule
+import { HttpClientModule } from '@angular/common/http';
+// #enddocregion httpclientmodule
 // #docregion phonelist
 import { FormsModule } from '@angular/forms';
 // #enddocregion phonelist
@@ -28,7 +28,7 @@ import { routeParamsProvider } from './ajs-upgraded-providers';
 import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
 // #enddocregion phonedetail
 
-// #docregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
+// #docregion bare, upgrademodule, httpclientmodule, phone, phonelist, phonedetail, checkmarkpipe
 
 @NgModule({
   imports: [
@@ -36,12 +36,12 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
     // #enddocregion bare
     UpgradeModule,
     // #enddocregion upgrademodule
-    HttpModule,
-    // #enddocregion httpmodule, phone
+    HttpClientModule,
+    // #enddocregion httpclientmodule, phone
     FormsModule,
-  // #docregion bare, upgrademodule, httpmodule, phone
+  // #docregion bare, upgrademodule, httpclientmodule, phone
   ],
-  // #enddocregion bare, upgrademodule, httpmodule, phone
+  // #enddocregion bare, upgrademodule, httpclientmodule, phone
   declarations: [
     PhoneListComponent,
     // #enddocregion phonelist
@@ -63,7 +63,7 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component';
     // #docregion phone
   ]
   // #enddocregion routeparams
-// #docregion bare, upgrademodule, httpmodule, phonelist
+// #docregion bare, upgrademodule, httpclientmodule, phonelist
 })
 export class AppModule {
   // #enddocregion bare
@@ -73,4 +73,4 @@ export class AppModule {
   }
   // #docregion bare
 }
-// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe
+// #enddocregion bare, upgrademodule, httpclientmodule, phone, phonelist, phonedetail, checkmarkpipe

aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts

@@ -1,12 +1,6 @@
 // #docregion
 import { inject, TestBed } from '@angular/core/testing';
-import {
-  Http,
-  BaseRequestOptions,
-  ResponseOptions,
-  Response
-} from '@angular/http';
-import { MockBackend, MockConnection } from '@angular/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { Phone, PhoneData } from './phone.service';
 
 describe('Phone', function() {
@@ -16,35 +10,34 @@ describe('Phone', function() {
     {name: 'Phone Y', snippet: '', images: []},
     {name: 'Phone Z', snippet: '', images: []}
   ];
-  let mockBackend: MockBackend;
+  let httpMock: HttpTestingController;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [
+        HttpClientTestingModule
+      ],
       providers: [
         Phone,
-        MockBackend,
-        BaseRequestOptions,
-        { provide: Http,
-          useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options),
-          deps: [MockBackend, BaseRequestOptions]
-        }
       ]
     });
   });
 
-  beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => {
-    mockBackend = _mockBackend_;
+  beforeEach(inject([HttpTestingController, Phone], (_httpMock_: HttpTestingController, _phone_: Phone) => {
+    httpMock = _httpMock_;
     phone = _phone_;
   }));
 
-  it('should fetch the phones data from `/phones/phones.json`', (done: () => void) => {
-    mockBackend.connections.subscribe((conn: MockConnection) => {
-      conn.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)})));
-    });
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('should fetch the phones data from `/phones/phones.json`', () => {
     phone.query().subscribe(result => {
       expect(result).toEqual(phonesData);
-      done();
     });
+    const req = httpMock.expectOne(`/phones/phones.json`);
+    req.flush(phonesData);
   });
 
 });

aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts

@@ -1,8 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 
 // #docregion downgrade-injectable
 declare var angular: angular.IAngularStatic;
@@ -22,16 +21,12 @@ export interface PhoneData {
 @Injectable()
 export class Phone {
 // #enddocregion classdef, downgrade-injectable
-  constructor(private http: Http) { }
+  constructor(private http: HttpClient) { }
   query(): Observable<PhoneData[]> {
-    return this.http.get(`phones/phones.json`).pipe(
-      map((res: Response) => res.json())
-    );
+    return this.http.get<PhoneData[]>(`phones/phones.json`);
   }
   get(id: string): Observable<PhoneData> {
-    return this.http.get(`phones/${id}.json`).pipe(
-      map((res: Response) => res.json())
-    );
+    return this.http.get<PhoneData>(`phones/${id}.json`);
   }
 // #docregion classdef, downgrade-injectable
 }

aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js

@@ -41,7 +41,6 @@ System.config({
     '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
     '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
     '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
     '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
     '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
   },

aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js

@@ -48,7 +48,6 @@ System.config({
     '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
     '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
     '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
     '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
     '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
   },

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

@@ -6,11 +6,13 @@ import uglify      from 'rollup-plugin-uglify'
 
 //paths are relative to the execution path
 export default {
-  entry: 'app/main-aot.js',
-  dest: 'aot/dist/build.js', // output a single application bundle
-  sourceMap: true,
-  sourceMapFile: 'aot/dist/build.js.map',
-  format: 'iife',
+  input: 'app/main-aot.js',
+  output: {
+    file: 'aot/dist/build.js', // output a single application bundle
+    format: 'iife',
+    sourcemap: true,
+    sourcemapFile: 'aot/dist/build.js.map'
+  },
   plugins: [
     nodeResolve({jsnext: true, module: true}),
     commonjs({

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

@@ -16,10 +16,10 @@
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

aio/content/examples/upgrade-phonecat-3-final/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 { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent }     from './app.component';
@@ -15,7 +15,7 @@ import { PhoneListComponent }   from './phone-list/phone-list.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     AppRoutingModule
   ],
   declarations: [

aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts

@@ -1,11 +1,5 @@
 import { inject, TestBed } from '@angular/core/testing';
-import {
-  Http,
-  BaseRequestOptions,
-  ResponseOptions,
-  Response
-} from '@angular/http';
-import { MockBackend, MockConnection } from '@angular/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { Phone, PhoneData } from './phone.service';
 
 describe('Phone', function() {
@@ -15,35 +9,26 @@ describe('Phone', function() {
     {name: 'Phone Y', snippet: '', images: []},
     {name: 'Phone Z', snippet: '', images: []}
   ];
-  let mockBackend: MockBackend;
+  let mockHttp: HttpTestingController;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [
-        Phone,
-        MockBackend,
-        BaseRequestOptions,
-        { provide: Http,
-          useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options),
-          deps: [MockBackend, BaseRequestOptions]
-        }
-      ]
+      imports: [HttpClientTestingModule],
+      providers: [Phone]
     });
   });
 
-  beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => {
-    mockBackend = _mockBackend_;
+  beforeEach(inject([HttpTestingController, Phone], (_mockHttp_: HttpTestingController, _phone_: Phone) => {
+    mockHttp = _mockHttp_;
     phone = _phone_;
   }));
 
-  it('should fetch the phones data from `/phones/phones.json`', (done: () => void) => {
-    mockBackend.connections.subscribe((conn: MockConnection) => {
-      conn.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)})));
-    });
+  it('should fetch the phones data from `/phones/phones.json`', () => {
     phone.query().subscribe(result => {
       expect(result).toEqual(phonesData);
-      done();
     });
+    const req = mockHttp.expectOne(`/phones/phones.json`);
+    req.flush(phonesData);
   });
 
 });

aio/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts

@@ -1,8 +1,7 @@
 // #docregion
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 
 export interface PhoneData {
   name: string;
@@ -12,15 +11,11 @@ export interface PhoneData {
 
 @Injectable()
 export class Phone {
-  constructor(private http: Http) { }
+  constructor(private http: HttpClient) { }
   query(): Observable<PhoneData[]> {
-    return this.http.get(`phones/phones.json`).pipe(
-      map((res: Response) => res.json())
-    );
+    return this.http.get<PhoneData[]>(`phones/phones.json`);
   }
   get(id: string): Observable<PhoneData> {
-    return this.http.get(`phones/${id}.json`).pipe(
-      map((res: Response) => res.json())
-    );
+    return this.http.get<PhoneData>(`phones/${id}.json`);
   }
 }

aio/content/examples/upgrade-phonecat-3-final/karma-test-shim.js

@@ -44,10 +44,10 @@ System.config({
   map: {
     '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
     '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+    '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js',
     '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
     '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
     '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
-    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
     '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
     '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
   },

aio/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js

@@ -16,10 +16,10 @@
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
+      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

aio/content/guide/app-shell.md

@@ -0,0 +1,59 @@
+# App shell
+
+App shell is a way to render a portion of your application via a route at build time.
+It can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads.
+
+This gives users a meaningful first paint of your application that appears quickly because the browser can simply render the HTML and CSS without the need to initialize any JavaScript.
+
+Learn more in [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell).
+
+## Step 1: Prepare the application
+
+You can do this with the following CLI command:
+<code-example format="." language="bash" linenums="false">
+ng new my-app --routing
+</code-example>
+
+For an existing application, you have to manually add the `RouterModule` and defining a `<router-outlet>` within your application.
+
+## Step 2: Create the app shell
+
+Use the CLI to automatically create the app shell.
+
+<code-example format="." language="bash" linenums="false">
+ng generate app-shell --client-project my-app --universal-project server-app
+</code-example>
+
+* `my-app` takes the name of your client application.
+* `server-app` takes the name of the Universal (or server) application.
+
+After running this command you will notice that the `angular.json` configuration file has been updated to add two new targets, with a few other changes.
+
+<code-example format="." language="none" linenums="false">
+"server": {
+  "builder": "@angular-devkit/build-angular:server",
+  "options": {
+    "outputPath": "dist/my-app-server",
+    "main": "src/main.server.ts",
+    "tsConfig": "tsconfig.server.json"
+  }
+},
+"app-shell": {
+  "builder": "@angular-devkit/build-angular:app-shell",
+  "options": {
+    "browserTarget": "my-app:build",
+    "serverTarget": "my-app:server",
+    "route": "shell"
+  }
+}
+</code-example>
+
+## Step 3: Verify the app is built with the shell content
+
+Use the CLI to build the `app-shell` target.
+
+<code-example format="." language="bash" linenums="false">
+ng run my-app:app-shell
+</code-example>
+
+To verify the build output, open `dist/my-app/index.html`. Look for default text `app-shell works!` to show that the app shell route was rendered as part of the output.

aio/content/guide/creating-libraries.md

@@ -2,7 +2,7 @@
 
 You can create and publish new libraries to extend Angular functionality. If you find that you need to solve the same problem in more than one app (or want to share your solution with other developers), you have a candidate for a library.
 
-An simple example might be a button that sends users to your company website, that would be included in all apps that your company builds.
+A simple example might be a button that sends users to your company website, that would be included in all apps that your company builds.
 
 ## Getting started
 
@@ -42,7 +42,7 @@ This builder, among other things, ensures that the library is always built with
 
 To make library code reusable you must define a public API for it. This "user layer" defines what is available to consumers of your library. A user of your library should be able to access public functionality (such as NgModules, service providers and general utility functions) through a single import path.
 
-The public API for your library is maintained in the `index.ts` file of your library folder.
+The public API for your library is maintained in the `public-api.ts` file in your library folder.
 Anything exported from this file is made public when your library is imported into an application.
 Use an NgModule to expose services and components.
 

aio/content/guide/file-structure.md

@@ -1,43 +1,54 @@
 # Workspace and project file structure
 
-You develop apps in the context of an Angular [workspace](guide/glossary#workspace). A workspace contains the files for one or more [projects](guide/glossary#project). A project is the set of files that comprise a standalone app, a library, or a set of end-to-end (e2e) tests. 
+You develop applications in the context of an Angular [workspace](guide/glossary#workspace). A workspace contains the files for one or more [projects](guide/glossary#project). A project is the set of files that comprise a standalone application or a shareable library.
 
-The Angular CLI command `ng new <project_name>` gets you started. 
-When you run this command, the CLI installs the necessary Angular npm packages and other dependencies in a new workspace, with a root folder named *project_name*. 
-It also creates the following workspace and starter project files:
+The Angular CLI `ng new` command creates a workspace.
 
-* An initial skeleton app project, also called *project_name* (in the `src/` subfolder).
-* An end-to-end test project (in the `e2e/` subfolder).
-* Related configuration files.
+<code-example language="bash" linenums="false">
+ng new &lt;project_name&gt;
+</code-example>
 
-The initial app project contains a simple Welcome app, ready to run. 
+When you run this command, the CLI installs the necessary Angular npm packages and other dependencies in a new workspace, with a root folder named *project_name*.
+The workspace root folder contains workspace configuration files and a README file with generated descriptive text that you can customize.
 
-## Workspace files
+By default, `ng new` also creates an initial skeleton application, along with its end-to-end tests.
+The skeleton is for a simple Welcome application that is ready to run and easy to modify.
+This *root application* has the same name as the workspace, and the source files reside in the `src/` subfolder of the workspace.
 
-The top level of the workspace contains a number of workspace-wide configuration files.
+This default behavior is suitable for a typical "multi-repo" development style where each application resides in its own workspace.
+Beginners and intermediate users are encouraged to use `ng new` to create a separate workspace for each application.
+
+Angular also supports workspaces with [multiple projects](#multiple-projects).
+This type of development environment is suitable for advanced users who are developing [shareable libraries](guide/glossary#library),
+and for enterprises that use a "mono-repo" development style, with a single repository and global configuration for all Angular projects.
+
+To set up a mono-repo workspace, you should skip the creating the root application.
+See [Setting up for a multi-project workspace](#multiple-projects) below.
+
+## Workspace configuration files
+
+All projects within a workspace share a [CLI configuration context](guide/workspace-config).
+The top level of the workspace contains workspace-wide configuration files.
 
 | WORKSPACE CONFIG FILES    | PURPOSE |
 | :--------------------- | :------------------------------------------|
+| `node_modules/`        | Provides [npm packages](guide/npm-packages) to the entire workspace. Workspace-wide `node_modules` dependencies are visible to all projects. |
 | `.editorconfig`        | Configuration for code editors. See [EditorConfig](https://editorconfig.org/). |
 | `.gitignore`           | Specifies intentionally untracked files that [Git](https://git-scm.com/) should ignore. |
 | `angular.json`         | CLI configuration defaults for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses, such as [TSLint](https://palantir.github.io/tslint/), [Karma](https://karma-runner.github.io/), and [Protractor](http://www.protractortest.org/). For details, see [Angular Workspace Configuration](guide/workspace-config). |
-| `node_modules`         | Provides [npm packages](guide/npm-packages) to the entire workspace. |
-| `package.json`         | Configures [npm package dependencies](guide/npm-packages) that are available to all projects in the workspace. See [npm documentation](https://docs.npmjs.com/files/package.json) for the specific format and contents of this file. |
-| `package-lock.json`    | Provides version information for all packages installed into `node_modules` by the npm client. See [npm documentation](https://docs.npmjs.com/files/package-lock.json) for details. If you use the yarn client, this file will be [yarn.lock](https://yarnpkg.com/lang/en/docs/yarn-lock/) instead. |
-| `tsconfig.json`        | Default [TypeScript](https://www.typescriptlang.org/) configuration for apps in the workspace, including TypeScript and Angular template compiler options. See [TypeScript Configuration](guide/typescript-configuration). |
-| `tslint.json`          | Default [TSLint](https://palantir.github.io/tslint/) configuration for apps in the workspace. |
-| `README.md`            | Introductory documentation. |
+| `package.json`          | Configures [npm package dependencies](guide/npm-packages) that are available to all projects in the workspace. See [npm documentation](https://docs.npmjs.com/files/package.json) for the specific format and contents of this file. |
+| `package-lock.json`     | Provides version information for all packages installed into `node_modules` by the npm client. See [npm documentation](https://docs.npmjs.com/files/package-lock.json) for details. If you use the yarn client, this file will be [yarn.lock](https://yarnpkg.com/lang/en/docs/yarn-lock/) instead. |
+| `README.md`             | Introductory documentation for the root app. |
+| `tsconfig.json`         | Default [TypeScript](https://www.typescriptlang.org/) configuration for projects in the workspace. |
+| `tslint.json`           | Default [TSLint](https://palantir.github.io/tslint/) configuration for projects in the workspace. |
 
-All projects within a workspace share a [CLI configuration context](guide/workspace-config). 
-Project-specific [TypeScript](https://www.typescriptlang.org/) configuration files inherit from the workspace-wide `tsconfig.*.json`, and app-specific [TSLint](https://palantir.github.io/tslint/) configuration files inherit from the workspace-wide `tslint.json`.
+## Application project files
 
-### Default app project files
+By default, the CLI command `ng new my-app` creates a workspace folder named "my-app" and generates a new application skeleton for a root application at the top level of the workspace.
+A newly generated application contains source files for a root module, with a root component and template.
 
-The CLI command `ng new my-app` creates a workspace folder named "my-app" and generates a new app skeleton. 
-This initial app is the *default app* for CLI commands (unless you change the default after creating additional apps). 
-
-A newly generated app contains the source files for a root module, with a root component and template. 
-When the workspace file structure is in place, you can use the `ng generate` command on the command line to add functionality and data to the initial app.
+When the workspace file structure is in place, you can use the `ng generate` command on the command line to add functionality and data to the application.
+This initial starter application is the *default app* for CLI commands (unless you change the default after creating [additional apps](#multiple-projects)).
 
 <div class="alert is-helpful">
 
@@ -45,69 +56,109 @@ When the workspace file structure is in place, you can use the `ng generate` com
 
 </div>
 
-The `src/` subfolder contains the source files (app logic, data, and assets), along with configuration files for the initial app.
-Workspace-wide `node_modules` dependencies are visible to this project.
+For a single-application workspace, the `src/` subfolder of the workspace contains the source files (application logic, data, and assets) for the root  application.
+For a multi-project workspace, additional projects in the `projects/` folder contain a `project-name/src/` subfolder with the same structure.
 
-| APP SOURCE & CONFIG FILES    | PURPOSE |
+### Application source files
+
+Files at the top level of `src/` support testing and running your  application. Subfolders contain the application source and  application-specific configuration.
+
+| APP SUPPORT FILES    | PURPOSE |
 | :--------------------- | :------------------------------------------|
-| `app/`                 | Contains the component files in which your app logic and data are defined. See details in [App source folder](#app-src) below. |
-| `assets/`              | Contains image files and other asset files to be copied as-is when you build your application. | 
+| `app/`                 | Contains the component files in which your application logic and data are defined. See details [below](#app-src). |
+| `assets/`              | Contains image and other asset files to be copied as-is when you build your application. |
 | `environments/`        | Contains build configuration options for particular target environments. By default there is an unnamed standard development environment and a production ("prod") environment. You can define additional target environment configurations. |
-| `browserslist`          | Configures sharing of target browsers and Node.js versions among various front-end tools. See [Browserslist on GitHub](https://github.com/browserslist/browserslist) for more information.  |
-| `favicon.ico`          | An icon to use for this app in the bookmark bar. |
+| `favicon.ico`          | An icon to use for this application in the bookmark bar. |
 | `index.html`           | The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any `<script>` or` <link>` tags here manually. |
-| `main.ts`              | The main entry point for your app. Compiles the application with the [JIT compiler](https://angular.io/guide/glossary#jit) and bootstraps the application's root module (AppModule) to run in the browser. You can also use the [AOT compiler](https://angular.io/guide/aot-compiler) without changing any code by appending the `--aot` flag to the CLI `build` and `serve` commands. |
+| `main.ts`              | The main entry point for your  application. Compiles the application with the [JIT compiler](https://angular.io/guide/glossary#jit) and bootstraps the application's root module (AppModule) to run in the browser. You can also use the [AOT compiler](https://angular.io/guide/aot-compiler) without changing any code by appending the `--aot` flag to the CLI `build` and `serve` commands. |
 | `polyfills.ts`         | Provides polyfill scripts for browser support. |
 | `styles.sass`          | Lists CSS files that supply styles for a project. The extension reflects the style preprocessor you have configured for the project. |
 | `test.ts`              | The main entry point for your unit tests, with some Angular-specific configuration. You don't typically need to edit this file. |
-| `tsconfig.app.json`   | Inherits from the workspace-wide `tsconfig.json` file. |
-| `tsconfig.spec.json`  | Inherits from the workspace-wide `tsconfig.json` file. |
-| `tslint.json`         | Inherits from the workspace-wide `tslint.json` file. |
-
-### Default app project e2e files
-
-An `e2e/` subfolder contains configuration and source files for a set of end-to-end tests that correspond to the initial app.
-Workspace-wide `node_modules` dependencies are visible to this project.
-
-<code-example language="none" linenums="false">
-my-app/
-  e2e/                  (end-to-end test app for my-app)
-    src/                (app source files)
-    protractor.conf.js  (test-tool config)
-    tsconfig.e2e.json   (TypeScript config inherits from workspace tsconfig.json)
-</code-example>
-
-### Project folders for additional apps and libraries
-
-When you generate new projects in a workspace, 
-the CLI creates a new *workspace*`/projects` folder, and adds the generated files there.
-
-When you generate an app (`ng generate application my-other-app`), the CLI adds folders under `projects/` for both the app and its corresponding end-to-end tests. Newly generated libraries are also added under `projects/`.
-
-<code-example language="none" linenums="false">
-my-app/
-  ...
-  projects/           (additional apps and libs)
-    my-other-app/     (a second app)
-      src/
-      (config files)
-    my-other-app-e2e/  (corresponding test app) 
-      src/
-      (config files)
-    my-lib/            (a generated library)
-      (config files)
-</code-example>
 
 {@a app-src}
-## App source folder
 
-Inside the `src/` folder, the `app/` folder contains your app's logic and data. Angular components, templates, and styles go here. An `assets/` subfolder contains images and anything else your app needs. Files at the top level of `src/` support testing and running your app.
+Inside the `src/` folder, the `app/` folder contains your project's logic and data.
+Angular components, templates, and styles go here.
 
-| APP SOURCE FILES | PURPOSE |
+| `src/app/` FILES | PURPOSE |
 | :-------------------------- | :------------------------------------------|
-| `app/app.component.ts`      | Defines the logic for the app's root component, named `AppComponent`. The view associated with this root component becomes the root of the [view hierarchy](guide/glossary#view-hierarchy) as you add components and services to your app. |
+| `app/app.component.ts`      | Defines the logic for the app's root component, named `AppComponent`. The view associated with this root component becomes the root of the [view hierarchy](guide/glossary#view-hierarchy) as you add components and services to your  application. |
 | `app/app.component.html`    | Defines the HTML template associated with the root `AppComponent`. |
 | `app/app.component.css`     | Defines the base CSS stylesheet for the root `AppComponent`. |
 | `app/app.component.spec.ts` | Defines a unit test for the root `AppComponent`. |
 | `app/app.module.ts`         | Defines the root module, named `AppModule`, that tells Angular how to assemble the application. Initially declares only the `AppComponent`. As you add more components to the app, they must be declared here. |
-| `assets/*`                  | Contains image files and other asset files to be copied as-is when you build your application. |
+
+### Application configuration files
+
+The application-specific configuration files for the root application reside at the workspace root level.
+For a multi-project workspace, project-specific configuration files are in the project root, under `projects/project-name/`.
+
+Project-specific [TypeScript](https://www.typescriptlang.org/) configuration files inherit from the workspace-wide `tsconfig.json`, and project-specific [TSLint](https://palantir.github.io/tslint/) configuration files inherit from the workspace-wide `tslint.json`.
+
+| APPLICATION-SPECIFIC CONFIG FILES    | PURPOSE |
+| :--------------------- | :------------------------------------------|
+| `browserslist`         | Configures sharing of target browsers and Node.js versions among various front-end tools. See [Browserslist on GitHub](https://github.com/browserslist/browserslist) for more information.  |
+| `karma.conf.js`      | Application-specific [Karma](https://karma-runner.github.io/2.0/config/configuration-file.html) configuration. |
+| `tsconfig.app.json`    | Application-specific [TypeScript](https://www.typescriptlang.org/) configuration, including TypeScript and Angular template compiler options. See [TypeScript Configuration](guide/typescript-configuration). |
+| `tsconfig.spec.json`   | [TypeScript](https://www.typescriptlang.org/) configuration for the application tests. See [TypeScript Configuration](guide/typescript-configuration). |
+| `tslint.json`          | Application-specific [TSLint](https://palantir.github.io/tslint/) configuration. |
+
+### End-to-end test files
+
+An `e2e/` subfolder contains source files for a set of end-to-end tests that correspond to an application, along with test-specific configuration files.
+
+<code-example language="none" linenums="false">
+my-app/
+  e2e/
+     src/                 (end-to-end tests for my-app)
+        app.e2e-spec.ts
+        app.po.ts
+      protractor.conf.js  (test-tool config)
+      tsconfig.json       (TypeScript config inherits from workspace)
+</code-example>
+
+{@a multiple-projects}
+
+## Multiple projects
+
+A multi-project workspace is suitable for an enterprise that uses a single repository and global configuration for all Angular projects (the "mono-repo" model). A multi-project workspace also supports library development.
+
+### Setting up for a multi-project workspace
+
+If you intend to have multiple projects in a workspace, you can skip the initial application generation when you create the workspace, and give the workspace a unique name.
+The following command creates a workspace with all of the workspace-wide configuration files, but no root application.
+
+<code-example language="bash" linenums="false">
+ng new my-workspace --createApplication="false"
+</code-example>
+
+You can then generate apps and libraries with names that are unique within the workspace.
+
+<code-example language="bash" linenums="false">
+cd my-workspace
+ng generate application my-first-app
+</code-example>
+
+### Multiple project file structure
+
+The first explicitly generated application goes into the `projects/` folder along with all other projects in the workspace.
+Newly generated libraries are also added under `projects/`.
+When you create projects this way, the file structure of the workspace is entirely consistent with the structure of the [workspace configuration file](guide/workspace-config), `angular.json`.
+
+<code-example language="none" linenums="false">
+my-workspace/
+  ...             (workspace-wide config files)
+  projects/       (generated applications and libraries)
+    my-first-app/ --(an explicitly generated application)
+      ...         --(application-specific config)
+      e2e/        ----(corresponding e2e tests)
+         src/     ----(e2e tests source)
+         ...      ----(e2e-specific config)
+      src/        --(source and support files for application)
+    my-lib/       --(a generated library)
+      ...         --(library-specific config)
+      src/        --source and support files for library)
+</code-example>
+
+Libraries (unlike applications and their associated e2e projects) have their own `package.json` configuration files.
+For more information about the library project structure, see [Creating Libraries](https://angular.io/guide/creating-libraries).

aio/content/guide/i18n.md

@@ -49,18 +49,6 @@ locale id to find the correct corresponding locale data.
 
 By default, Angular uses the locale `en-US`, which is English as spoken in the United States of America.
 
-To set your app's locale to another value, use the CLI parameter `--configuration` with the value of the locale id that you want to use:
-
-<code-example language="sh" class="code-shell">
-  ng serve --configuration=fr
-</code-example>
-
-If you use JIT, you also need to define the `LOCALE_ID` provider in your main module:
-
-<code-example path="i18n/doc-files/app.module.ts" header="src/app/app.module.ts" linenums="false">
-</code-example>
-
-
 For more information about Unicode locale identifiers, see the
 [CLDR core spec](http://cldr.unicode.org/core-spec#Unicode_Language_and_Locale_Identifiers).
 

aio/content/guide/ivy.md

@@ -5,10 +5,10 @@
 
 ## Starting a new project using Ivy
 
-To start a new project with Ivy enabled, use the `--experimental-ivy` flag with the [`ng new`](cli/new) command:
+To start a new project with Ivy enabled, use the `--enable-ivy` flag with the [`ng new`](cli/new) command:
 
 ```sh
-ng new shiny-ivy-app --experimental-ivy
+ng new shiny-ivy-app --enable-ivy
 ```
 
 Everything will be configured for you:

aio/content/guide/npm-packages.md

@@ -67,7 +67,6 @@ Package name                               | Description
 **@angular/compiler** | Angular's template compiler. It understands templates and can convert them to code that makes the application run and render. Typically you don’t interact with the compiler directly; rather, you use it indirectly via `platform-browser-dynamic` when JIT compiling in the browser. For more information, see the [Ahead-of-time Compilation guide](guide/aot-compiler).
 [**@angular/core**](api/core) | Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators, `Component`, `Directive`,  dependency injection, and the component lifecycle hooks.
 [**@angular/forms**](api/forms) | Support for both [template-driven](guide/forms) and [reactive forms](guide/reactive-forms). For information about choosing the best forms approach for your app, see [Introduction to forms](guide/forms-overview).
-[**@angular/http**](api/http) | Angular's legacy HTTP client, which was deprecated in version 5.0 in favor of [@angular/common/http](api/common/http).
 [**@angular/<br />platform&#8209;browser**](api/platform-browser) | Everything DOM and browser related, especially the pieces that help render into the DOM. This package also includes the `bootstrapModuleFactory()` method for bootstrapping applications for production builds that pre-compile with [AOT](guide/aot-compiler).
 [**@angular/<br />platform&#8209;browser&#8209;dynamic**](api/platform-browser-dynamic) | Includes [providers](api/core/Provider) and methods to compile and run the app on the client using the [JIT compiler](guide/aot-compiler).
 [**@angular/router**](api/router) | The router module navigates among your app pages when the browser URL changes. For more information, see [Routing and Navigation](guide/router).

aio/content/guide/quickstart.md

@@ -158,7 +158,7 @@ You can <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blan
 </div>
 
 
-For more information about Angular project files and the file structure, see [Workspace and project file struture](guide/file-structure).
+For more information about Angular project files and the file structure, see [Workspace and project file structure](guide/file-structure).
 
 
 

aio/content/guide/router.md

@@ -1280,8 +1280,9 @@ The **Routing Module** has several characteristics:
 ### Integrate routing with your app
 
 The sample routing application does not include routing by default.
-When you use the [Angular CLI](cli) to create a project that will use routing, set the `--routing` option for the project or app, and for each NgModule. 
-When you create or initialize a new project (using the CLI [`ng new`](cli/new) command) or a new app (using the [`ng generate app`](cli/generate) command), specify the `--routing` option.  This tells the CLI to include the `@angular/router` npm package and create a file named `app-routing.module.ts`.
+When you create a new workspace and initial application, the [Angular CLI](cli) [`ng new`](cli/new) command prompts you to add "Angular routing". Enter `Y`.
+When you generate a new application using the [`ng generate app`](cli/generate) command, specify the `--routing` option.  These options tell the CLI to include the `@angular/router` npm package and create a file named `app-routing.module.ts`.
+
 You can then use routing in any NgModule that you add to the project or app.
 
 For example, the following command generates an NgModule that can use routing.
@@ -3849,7 +3850,7 @@ Update the `AuthGuard` to provide a `session_id` query that will remain after na
 
 Add an `anchor` element so you can jump to a certain point on the page.
 
-Add the `NavigationExtras` object to the `router.navigate` method that navigates you to the `/login` route.
+Add the `NavigationExtras` object to the `router.navigate()` method that navigates you to the `/login` route.
 
 
 <code-example path="router/src/app/auth/auth.guard.4.ts" linenums="false" header="src/app/auth/auth.guard.ts (v3)">
@@ -3860,7 +3861,7 @@ Add the `NavigationExtras` object to the `router.navigate` method that navigates
 
 You can also preserve query parameters and fragments across navigations without having to provide them
 again when navigating. In the `LoginComponent`, you'll add an *object* as the
-second argument in the `router.navigate` function
+second argument in the `router.navigateUrl()` function
 and provide the `queryParamsHandling` and `preserveFragment` to pass along the current query parameters
 and fragment to the next route.
 

aio/content/guide/schematics-authoring.md

@@ -0,0 +1,194 @@
+# Authoring Schematics
+
+You can create your own schematics to operate on Angular projects.
+Library developers typically package schematics with their libraries in order to integrate them with the Angular CLI.
+You can also create stand-alone schematics to manipulate the files and constructs in Angular applications as a way of customizing them for your development environment and making them conform to your standards and constraints.
+Schematics can be chained, running other schematics to perform complex operations.
+
+Manipulating the code in an application has the potential to be both very powerful and correspondingly dangerous.
+For example, creating a file that already exists would be an error, and if it was applied immediately, it would discard all the other changes applied so far.
+The Angular Schematics tooling guards against side effects and errors by creating a virtual file system.
+A schematic describes a pipeline of transformations that can be applied to the virtual file system.
+When a schematic runs, the transformations are recorded in memory, and only applied in the real file system once they're confirmed to be valid.
+
+## Schematics concepts
+
+The public API for schematics defines classes that represent the basic concepts.
+
+* The virtual file system is represented by a `Tree`.   The `Tree` data structure contains a *base* (a set of files that already exists) and a *staging area* (a list of changes to be applied to the base).
+When making modifications, you don't actually change the base, but add those modifications to the staging area.
+
+* A `Rule` object defines a function that takes a `Tree`, applies transformations, and returns a new `Tree`. The main file for a schematic, `index.ts`, defines a set of rules that implement the schematic's logic.
+
+* A transformation is represented by an `Action`. There are four action types: `Create`, `Rename`, `Overwrite`, and `Delete`.
+
+* Each schematic runs in a context, represented by a `SchematicContext` object.
+
+The context object passed into a rule provides access to utility functions and metadata that the schematic may need to work with, including a logging API to help with debugging.
+The context also defines a *merge strategy* that determines how changes are merged from the staged tree into the base tree. A change can be accepted or ignored, or throw an exception.
+
+### Defining rules and actions
+
+When you create a new blank schematic with the [Schematics CLI](#cli), the generated entry function is a *rule factory*.
+A `RuleFactory`object defines a higher-order function that creates a `Rule`.
+
+<code-example language="TypeScript" linenums="false">
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+
+// You don't have to export the function as default.
+// You can also have more than one rule factory per file.
+export function helloWorld(_options: any): Rule {
+ return (tree: Tree, _context: SchematicContext) => {
+   return tree;
+ };
+}
+</code-example>
+
+Your rules can make changes to your projects by calling external tools and implementing logic.
+You need a rule, for example, to define how a template in the schematic is to be merged into the hosting project.
+
+Rules can make use of utilities provided with the `@schematics/angular` package. Look for helper functions for working with modules, dependencies, TypeScript, AST, JSON, Angular CLI workspaces and projects, and more.
+
+<code-example language="none" linenums="false">
+
+import {
+  JsonAstObject,
+  JsonObject,
+  JsonValue,
+  Path,
+  normalize,
+  parseJsonAst,
+  strings,
+} from '&#64;angular-devkit/core';
+
+</code-example>
+
+### Defining input options with a schema and interfaces
+
+Rules can collect option values from the caller and inject them into templates.
+The options available to your rules, with their allowed values and defaults, are defined in the schematic's JSON schema file, `<schematic>/schema.json`.
+You can define variable or enumerated data types for the schema using TypeScript interfaces.
+
+You can see examples of schema files for the Angular CLI command schematics in [`@schematics/angular`](https://github.com/angular/angular-cli/blob/7.0.x/packages/schematics/angular/application/schema.json).
+
+{@a cli}
+
+## Schematics CLI
+
+Schematics come with their own command-line tool.
+Using Node 6.9 or above, install the Schematics command line tool globally:
+
+<code-example language="bash" linenums="false">
+npm install -g @angular-devkit/schematics-cli
+</code-example>
+
+This installs the `schematics` executable, which you can use to create a new schematics collection in its own project folder, add a new schematic to an existing collection, or extend an existing schematic.
+
+In the following sections, we will create a new schematics collection using the CLI in order to introduce the files and file structure, and some of the basic concepts.
+
+The most common use of schematics, however, is to integrate an Angular library with the Angular CLI.
+You can do this by creating the schematic files directly within the library project in an Angular workspace, without using the Schematics CLI.
+See [Schematics for Libraries](guide/schematics-for-libraries).
+
+### Creating a schematics collection
+
+The following command creates a new schematic named `hello-world` in a new project folder of the same name.
+
+<code-example language="bash" linenums="false">
+schematics blank --name=hello-world
+</code-example>
+
+The `blank` schematic is provided by the Schematics CLI. The command creates a new project folder (the root folder for the collection) and an initial named schematic in the collection.
+
+Go to the collection folder, install your npm dependencies, and open your new collection in your favorite editor to see the generated files. For example, if you are using VSCode:
+
+<code-example language="bash" linenums="false">
+cd hello-world
+npm install
+npm run build
+code .
+</code-example>
+
+The initial schematic gets the same name as the project folder, and is generated in `src/hello-world`.
+You can add related schematics to this collection, and modify the generated skeleton code to define your schematic's functionality.
+Each schematic name must be unique within the collection.
+
+### Running a schematic
+
+Use the `schematics` command to run a named schematic.
+Provide the path to the project folder, the schematic name, and any mandatory options, in the following format.
+
+<code-example language="bash" linenums="false">
+schematics &lt;path-to-schematics-project&gt;:&lt;schematics-name&gt; --&lt;required-option&gt;=&lt;value&gt;
+</code-example>
+
+The path can be absolute or relative to the current working directory where the command is executed.
+For example, to run the schematic we just generated (which has no required options), use the following command.
+
+<code-example language="bash" linenums="false">
+schematics .:hello-world
+</code-example>
+
+### Adding a schematic to a collection
+
+To add a schematic to an existing collection, use the same command you use to start a new schematics project, but run the command inside the project folder.
+
+<code-example language="bash" linenums="false">
+cd hello-world
+schematics blank --name=goodbye-world
+</code-example>
+
+The command generates the new named schematic inside your collection, with a main `index.ts` file and its associated test spec.
+It also adds the name, description, and factory function for the new schematic to the collection's schema in the `collection.json` file.
+
+## Collection contents
+
+The top level of the root project folder for a collection contains configuration files, a `node_modules` folder, and a `src/` folder.
+The `src/` folder contains subfolders for named schematics in the collection, and a schema, `collection.json`, which describes the collected schematics.
+Each schematic is created with a name, description, and factory function.
+
+<code-example language="none" linenums="false">
+{
+  "$schema":
+     "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "hello-world": {
+      "description": "A blank schematic.",
+      "factory": "./hello-world/index#helloWorld"
+    }
+  }
+}
+</code-example>
+
+* The `$schema` property specifies the schema that the CLI uses for validation.
+* The `schematics` property lists named schematics that belong to this collection.
+   Each schematic has a plain-text description, and points to the generated entry function in the main file.
+* The `factory` property points to the generated entry function. In this example, you invoke the `hello-world` schematic by calling the `helloWorld()` factory function.
+* The optional  `schema` property points to a JSON schema file that defines the command-line options available to the schematic.
+* The optional `aliases` array specifies one or more strings that can be used to invoke the schematic.
+   For example, the schematic for the Angular CLI “generate” command  has an alias “g”, allowing you to use the command `ng g`.
+
+### Named schematics
+
+When you use the Schematics CLI to create a blank schematics project, the new blank schematic is the first member of the collection, and has the same name as the collection.
+When you add a new named schematic to this collection, it is automatically added to the  `collection.json`  schema.
+
+In addition to the name and description, each schematic has a `factory` property that identifies the schematic’s entry point.
+In the example, you invoke the schematic's defined functionality by calling the `helloWorld()` function in the main file,  `hello-world/index.ts`.
+
+<figure>
+  <img src="generated/images/guide/schematics/collection-files.gif" alt="overview">
+</figure>
+
+Each named schematic in the collection has the following main parts.
+
+| | |
+| :------------- | :-------------------------------------------|
+| `index.ts`     | Code that defines the transformation logic for a named schematic.  |
+| `schema.json`  | Schematic variable definition. |
+| `schema.d.ts`  | Schematic variables.  |
+| `files/`       | Optional component/template files to replicate. |
+
+It is possible for a schematic to provide all of its logic in the `index.ts` file, without additional templates.
+You can create dynamic schematics for Angular, however, by providing components and templates in the `files/` folder, like those in standalone Angular projects.
+The logic in the index file configures these templates by defining rules that inject data and modify variables.

aio/content/guide/schematics-for-libraries.md

@@ -0,0 +1,320 @@
+# Schematics for Libraries
+
+When you create an Angular library, you can provide and package it with schematics that integrate it with the Angular CLI.
+With your schematics, your users can use  `ng add` to install an initial version of your library,
+`ng generate` to create artifacts defined in your library, and `ng update` to adjust their project for a new version of your library that introduces breaking changes.
+
+All three types of schematics can be part of a collection that you package with your library.
+
+Download the <live-example downloadOnly>library schematics project</live-example> for a completed example of the steps below.
+
+## Creating a schematics collection
+
+To start a collection, you need to create the schematic files.
+The following steps show you how to add initial support without modifying any project files.
+
+1. In your library's root folder, create a `schematics/`  folder.
+
+1. In the `schematics/` folder, create an `ng-add/` folder for your first schematic.
+
+1. At the root level of the `schematics/` folder, create a `collection.json` file.
+
+1. Edit the `collection.json` file to define the initial schema for your collection.
+
+<code-example header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="schematics-for-libraries/projects/my-lib/schematics/collection.1.json">
+</code-example>
+
+  * The `$schema` path is relative to the Angular Devkit collection schema.
+  * The `schematics` object describes the named schematics that are part of this collection.
+  * The first entry is for a schematic named `ng-add`. It contains the description, and points to the factory function that is called when your schematic is executed.
+
+1. In your library project's `package.json` file, add a "schematics" entry with the path to your schema file.
+   The Angular CLI uses this entry to find named schematics in your collection when it runs commands.
+
+<code-example header="projects/my-lib/package.json (Schematics Collection Reference)" path="schematics-for-libraries/projects/my-lib/package.json" region="collection">
+</code-example>
+
+The initial schema that you have created tells the CLI where to find the schematic that supports the `ng add` command.
+Now you are ready to create that schematic.
+
+## Providing installation support
+
+A schematic for the `ng add` command can enhance the initial installation process for your users.
+The following steps will define this type of schematic.
+
+1. Go to the <lib-root>/schematics/ng-add/ folder.
+
+1. Create the main file, `index.ts`.
+
+1. Open `index.ts` and add the source code for your schematic factory function.
+
+<code-example header="projects/my-lib/schematics/ng-add/index.ts (ng-add Rule Factory)" path="schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts">
+</code-example>
+
+The only step needed to provide initial `ng add` support is to trigger an installation task using the `SchematicContext`.
+The task uses the user's preferred package manager to add the library to the project's `package.json` configuration file, and install it in the project’s `node_modules` directory.
+
+In this example, the function receives the current `Tree` and returns it without any modifications.
+If you need to, you can do additional setup when your package is installed, such as generating files, updating configuration, or any other initial setup your library requires.
+
+## Building your schematics
+
+To bundle your schematics together with your library, you must configure the library to build the schematics separately, then add them to the bundle.
+You must build your schematics *after* you build your library, so they are placed in the correct directory.
+
+* Your library needs a custom Typescript configuration file with instructions on how to compile your schematics into your distributed library.
+
+* To add the schematics to the library bundle, add scripts to the library's `package.json` file.
+
+Assume you have a library project `my-lib` in your Angular workspace.
+To tell the library how to build the schematics, add a `tsconfig.schematics.json` file next to the generated `tsconfig.lib.json` file that configures the library build.
+
+1. Edit the `tsconfig.schematics.json` file to add the following content.
+
+<code-example header="projects/my-lib/tsconfig.schematics.json (TypeScript Config)" path="schematics-for-libraries/projects/my-lib/tsconfig.schematics.json">
+</code-example>
+
+  * The `rootDir` specifies that your `schematics/` folder contains the input files to be compiled.
+
+  * The `outDir` maps to the library's output folder. By default, this is  the `dist/my-lib` folder at the root of your workspace.
+
+1. To make sure your schematics source files get compiled into the library bundle, add the following scripts to the `package.json` file in your library project's root folder (`projects/my-lib`).
+
+<code-example header="projects/my-lib/package.json (Build Scripts)" path="schematics-for-libraries/projects/my-lib/package.json">
+</code-example>
+
+  * The `build` script compiles your schematic using the custom `tsconfig.schematics.json` file.
+  * The `copy:*` statements copy compiled schematic files into the proper locations in the library output folder in order to preserve the file structure.
+  * The `postbuild` script copies the schematic files after the `build` script completes.
+
+## Providing generation support
+
+You can add a named schematic to your collection that lets your users use the `ng generate` command to create an artifact that is defined in your library.
+
+We'll assume that your library defines a service, `my-service`, that requires some setup. You want your users to be able to generate it using the following CLI command.
+
+<code-example language="bash" linenums="false">
+ng generate my-lib:my-service
+</code-example>
+
+To begin, create a new subfolder, `my-service`, in the `schematics` folder.
+
+### Configure the new schematic
+
+When you add a schematic to the collection, you have to point to it in the collection's schema, and provide configuration files to define options that a user can pass to the command.
+
+1. Edit the `schematics/collection.json` file to point to the new schematic subfolder, and include a pointer to a schema file that will specify inputs for the new schematic.
+
+<code-example header="projects/my-lib/schematics/collection.json (Schematics Collection)" path="schematics-for-libraries/projects/my-lib/schematics/collection.json">
+</code-example>
+
+1. Go to the `<lib-root>/schematics/my-service/` folder.
+
+1. Create a `schema.json` file and define the available options for the schematic.
+
+<code-example header="projects/my-lib/schematics/my-service/schema.json (Schematic JSON Schema)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/schema.json">
+</code-example>
+
+  * *id* : A unique id for the schema in the collection.
+  * *title* : A human-readable description of the schema.
+  * *type* : A descriptor for the type provided by the properties.
+  * *properties* : An object that defines the available options for the schematic.
+
+  Each option associates key with a type, description, and optional alias.
+  The type defines the shape of the value you expect, and the description is displayed when the user requests usage help for your schematic.
+
+  See the workspace schema for additional customizations for schematic options.
+
+1. Create a `schema.ts` file and define an interface that stores the values of the options defined in the `schema.json` file.
+
+<code-example header="projects/my-lib/schematics/my-service/schema.ts (Schematic Interface)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/schema.ts">
+</code-example>
+
+  * *name* : The name you want to provide for the created service.
+  * *path* : Overrides the path provided to the schematic. The default path value is based on the current working directory.
+  * *project* : Provides a specific project to run the schematic on. In the schematic, you can provide a default if the option is not provided by the user.
+
+### Add template files
+
+To add artifacts to a project, your schematic needs its own template files.
+Schematic templates support special syntax to execute code and variable substitution.
+
+1. Create a `files/` folder inside the `schematics/my-service/` folder.
+
+1. Create a file named `__name@dasherize__.service.ts.template` that defines a template you can use for generating files. This template will generate a service that already has Angular's `HttpClient` injected into its constructor.
+
+<code-example lang="ts" header="projects/my-lib/schematics/my-service/files/__name@dasherize__.service.ts.template (Schematic Template)">
+
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class <%= classify(name) %>Service {
+  constructor(private http: HttpClient) { }
+}
+
+</code-example>
+
+* The `classify` and `dasherize` methods are utility functions you schematic will use to transform your source template and filename.
+
+* The `name` is provided as a property from your factory function. It is the same `name` you defined in the schema.
+
+### Add the factory function
+
+Now that you have the infrastructure in place, you can define the main function that performs the modifications you need in the user's project.
+
+The Schematics framework provides a file templating system, which supports both path and content templates.
+The system operates on placeholders defined inside files or paths that loaded in the input `Tree`.
+It fills these in using values passed into the `Rule`.
+
+For details of these data structure and syntax, see the [Schematics README](https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/README.md).
+
+
+1. Create the main file, `index.ts` and add the source code for your schematic factory function.
+
+1. First, import the schematics definitions you will need. The Schematics framework offers many utility functions to create and use rules when running a schematic.
+
+<code-example header="projects/my-lib/schematics/my-service/index.ts (Imports)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="schematics-imports">
+</code-example>
+
+1. Import the defined schema interface that provides the type information for your schematic's options.
+
+<code-example header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="schema-imports">
+</code-example>
+
+1. To build up the generation schematic, start with an empty rule factory.
+
+<code-example header="projects/my-lib/schematics/my-service/index.ts (Initial Rule)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts" region="factory">
+</code-example>
+
+This simple rule factory returns the tree without modification.
+The options are the option values passed through from the `ng generate` command.
+
+## Define a generation rule
+
+We now have the framework in place for creating the code that actually modifies the user's application to set it up for the service defined in your library.
+
+The Angular workspace where the user has installed your library contains multiple projects (applications and libraries).
+The user can specify the project on the command line, or allow it to default.
+In either case, your code needs to identify the specific project to which this schematic is being applied, so that you can retrieve information from the project configuration.
+
+You can do this using the `Tree` object that is passed in to the factory function.
+The `Tree` methods give you access to the complete file tree in your workspace, allowing you to  read and write files during the execution of the schematic.
+
+### Get the project configuration
+
+1. To determine the destination project, use the `Tree.read()` method to read the contents of the workspace configuration file, `angular.json`, at the root of the workspace.
+   Add the following code to your factory function.
+
+<code-example header="projects/my-lib/schematics/my-service/index.ts (Schema Import)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="workspace">
+</code-example>
+
+  * Be sure to check that the context exists and throw the appropriate error.
+
+  * After reading the contents into a string, parse the configuration into a JSON object, typed to the `WorkspaceSchema`.
+
+1. The `WorkspaceSchema` contains all the properties of the workspace configuration, including a `defaultProject` value for determining which project to use if not provided.
+   We will use that value as a fallback, if no project is explicitly specified in the `ng generate` command.
+
+<code-example header="projects/my-lib/schematics/my-service/index.ts (Default Project)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="project-fallback">
+</code-example>
+
+1. Now that you have the project name, use it to retrieve the project-specific configuration information.
+
+<code-example header="projects/my-lib/schematics/my-service/index.ts (Project)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="project-info">
+</code-example>
+
+   The `workspace projects` object contains all the project-specific configuration information.
+
+1. The `options.path` determines where the schematic template files are moved to once the schematic is applied.
+
+   The `path` option in the schematic's schema is substituted by default with the current working directory.
+   If the `path` is not defined, use the `sourceRoot` from the project configuration along with the `projectType`.
+
+<code-example header="projects/my-lib/schematics/my-service/index.ts (Project Info)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="path">
+</code-example>
+
+### Define the rule
+
+A `Rule` can use external template files, transform them, and return another `Rule` object with the transformed template. You can use the templating to generate any custom files required for your schematic.
+
+1. Add the following code to your factory function.
+
+<code-example header="projects/my-lib/schematics/my-service/index.ts (Template transform)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="template">
+</code-example>
+
+  * The `apply()` method applies multiple rules to a source and returns the transformed source. It takes 2 arguments, a source and an array of rules.
+  * The `url()` method reads source files from your filesystem, relative to the schematic.
+  * The `applyTemplates()` method receives an argument of methods and properties you want make available to the schematic template and the schematic filenames. It returns a `Rule`. This is where you define the `classify()` and `dasherize()` methods, and the `name` property.
+  * The `classify()` method takes a value and returns the value in title case. For example, if the provided name is `my service`, it is returned as `MyService`
+  * The `dasherize()` method takes a value and  returns the value in dashed and lowercase. For example, if the provided name is MyService, it is returned as `my-service.
+  * The `move` method moves the provided source files to their destination when the schematic is applied.
+
+1. Finally, the rule factory must return a rule.
+
+<code-example header="projects/my-lib/schematics/my-service/index.ts (Chain Rule)" path="schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts" region="chain">
+</code-example>
+
+  The `chain()` method allows you to combine multiple rules into a single rule, so that you can perform multiple operations in a single schematic.
+  Here you are only merging the template rules with any code executed by the schematic.
+
+See a complete exampled of the schematic rule function.
+
+<code-example header="projects/my-lib/schematics/my-service/index.ts" path="schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts">
+</code-example>
+
+For more information about rules and utility methods, see [Provided Rules](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/schematics#provided-rules).
+
+## Running your library schematic
+
+After you build your library and schematics, you can install the schematics collection to run against your project. The steps below show you how to generate a service using the schematic you created above.
+
+
+### Build your library and schematics
+
+From the root of your workspace, run the `ng build` command for your library.
+
+<code-example language="bash" linenums="false">
+
+  ng build my-lib
+
+</code-example>
+
+Then, you change into your library directory to build the schematic
+
+<code-example language="bash" linenums="false">
+
+  cd projects/my-lib
+  npm run build
+
+</code-example>
+
+### Link the library
+
+Your library and schematics are packaged and placed in the `dist/my-lib` folder at the root of your workspace. For running the schematic, you need to link the library into your `node_modules` folder. From the root of your workspace, run the `npm link` command with the path to your distributable library.
+
+<code-example language="bash" linenums="false">
+
+npm link dist/my-lib
+
+</code-example>
+
+### Run the schematic
+
+Now that your library is installed, you can run the schematic using the `ng generate` command.
+
+<code-example language="bash" linenums="false">
+
+ng generate my-lib:my-service --name my-data
+
+</code-example>
+
+In the console, you will see that the schematic was run and the `my-data.service.ts` file was created in your app folder.
+
+<code-example language="bash" linenums="false" hideCopy="true">
+
+CREATE src/app/my-data.service.ts (208 bytes)
+
+</code-example>

aio/content/guide/schematics.md

@@ -0,0 +1,121 @@
+# Schematics
+
+A schematic is a template-based code generator that supports complex logic.
+It is a set of instructions for transforming a software project by generating or modifying code.
+Schematics are packaged into [collections](guide/glossary#collection) and installed with npm.
+
+The schematic collection can be a powerful tool for creating, modifying, and maintaining any software project, but is particularly useful for customizing Angular projects to suit the particular needs of your own organization.
+You might use schematics, for example, to generate commonly-used UI patterns or specific components, using predefined templates or layouts.
+You can use schematics to enforce architectural rules and conventions, making your projects consistent and inter-operative.
+
+## Schematics for the Angular CLI
+
+Schematics are part of the Angular ecosystem. The [Angular CLI](guide/glossary#cli)  uses schematics to apply transforms to a web-app project.
+You can modify these schematics, and define new ones to do things like update your code to fix breaking changes in a dependency, for example, or to add a new configuration option or framework to an existing project.
+
+Schematics that are included in the `@schematics/angular` collection are run by default by the commands `ng generate` and `ng add`.
+The package contains named schematics that configure the options that are available to the CLI for `ng generate` sub-commands, such as `ng generate component` and `ng generate service`.
+The subcommands for `ng generate` are shorthand for the corresponding schematic. You can specify a particular schematic (or collection of schematics) to generate, using the long form:
+
+<code-example language="bash" linenums="false">
+ng generate my-schematic-collection:my-schematic-name
+</code-example>
+
+&mdash;or&mdash;
+
+<code-example language="bash" linenums="false">
+ng generate my-schematic-name --collection collection-name
+</code-example>
+
+### Configuring CLI schematics
+
+A JSON schema associated with a schematic tells the Angular CLI what options are available to commands and subcommands, and determines the defaults.
+These defaults can be overridden by providing a different value for an option on the command line.
+See [Workspace Configuration](guide/workspace-config) for information about how you can change the generation option defaults for your workspace.
+
+The JSON schemas for the default schematics used by the CLI to generate projects and parts of projects are collected in the package [`@schematics/angular`](https://raw.githubusercontent.com/angular/angular-cli/v7.0.0/packages/schematics/angular/application/schema.json).
+The schema describes the options available to the CLI for each of the `ng generate` sub-commands, as shown in the `--help` output.
+
+## Developing schematics for libraries
+
+As a library developer, you can create your own collections of custom schematics to integrate your library with the Angular CLI.
+
+* An *add schematic* allows developers to install your library in an Angular workspace using `ng add`.
+
+* *Generation schematics* can tell the `ng generate` subcommands how to modify projects, add configurations and scripts, and scaffold  artifacts that are defined in your library.
+
+* An *update schematic* can tell the `ng update` command how to update your library's dependencies and adjust for breaking changes when you release a new version.
+
+For more details of what these look like and how to create them, see:
+* [Authoring Schematics](guide/schematics-authoring)
+* [Schematics for Libraries](guide/schematics-for-libraries)
+
+### Add schematics
+
+An add schematic is typically supplied with a library, so that the library can be added to an existing project with `ng add`.
+The `add` command uses your package manager to download new dependencies, and invokes an installation script that is implemented as a schematic.
+
+For example, the [`@angular/material`](https://material.angular.io/guide/schematics) schematic tells the `add` command to install and set up Angular Material and theming, and register new starter components that can be created with `ng generate`.
+You can look at this one as an example and model for your own add schematic.
+
+Partner and third party libraries also support the Angular CLI with add schematics.
+For example, `@ng-bootstrap/schematics` adds [ng-bootstrap](https://ng-bootstrap.github.io/)  to an app, and  `@clr/angular` installs and sets up [Clarity from VMWare](https://vmware.github.io/clarity/documentation/v1.0/get-started).
+
+An add schematic can also update a project with configuration changes, add additional dependencies (such as polyfills), or scaffold package-specific initialization code.
+For example, the `@angular/pwa` schematic turns your application into a PWA by adding an app manifest and service worker, and the `@angular/elements`  schematic adds  the `document-register-element.js` polyfill and dependencies for Angular Elements.
+
+### Generation schematics
+
+Generation schematics are instructions for the `ng generate` command.
+The documented sub-commands use the default Angular generation schematics, but you can specify a different schematic (in place of a sub-command) to generate an artifact defined in your library.
+
+Angular Material, for example, supplies generation schematics for the UI components that it defines.
+The following command uses one of these schematics to render an Angular Material `<mat-table>` that is pre-configured with a datasource for sorting and pagination.
+
+<code-example language="bash" linenums="false">
+ng generate @angular/material:table <component-name>
+</code-example>
+
+### Update schematics
+
+ The `ng update` command can be used to update your workspace's library dependencies. If you supply no options or use the help option, the command examines your workspace and suggests libraries to update.
+
+<code-example language="bash" linenums="false">
+ng update
+    We analyzed your package.json, there are some packages to update:
+
+      Name                               Version                  Command to update
+     --------------------------------------------------------------------------------
+      @angular/cdk                       7.2.2 -> 7.3.1           ng update @angular/cdk
+      @angular/cli                       7.2.3 -> 7.3.0           ng update @angular/cli
+      @angular/core                      7.2.2 -> 7.2.3           ng update @angular/core
+      @angular/material                  7.2.2 -> 7.3.1           ng update @angular/material
+      rxjs                               6.3.3 -> 6.4.0           ng update rxjs
+
+
+    There might be additional packages that are outdated.
+    Run "ng update --all" to try to update all at the same time.
+</code-example>
+
+If you pass the command a set of libraries to update (or the `--all` flag), it updates those libraries, their peer dependencies, and the peer dependencies that depend on them.
+
+<div class="alert is-helpful">
+
+If there are inconsistencies (for example, if peer dependencies cannot be matched by a simple [semver](https://semver.io/) range), the command generates an error and does not change anything in the workspace.
+
+We recommend that you do not force an update of all dependencies by default. Try updating specific dependencies first.
+
+For more about how the `ng update` command works, see [Update Command](https://github.com/angular/angular-cli/blob/master/docs/specifications/update.md).
+
+</div>
+
+If you create a new version of your library that introduces potential breaking changes, you can provide an *update schematic* to enable the `ng update` command to automatically resolve any such changes in the project being updated.
+
+For example, suppose you want to update the Angular Material library.
+
+<code-example language="bash" linenums="false">
+ng update @angular/material
+</code-example>
+
+This command updates both `@angular/material` and its dependency `@angular/cdk` in your workspace's `package.json`.
+If either package contains an update schematic that covers migration from the existing version to a new version, the command runs that schematic on your workspace.

aio/content/guide/styleguide.md

@@ -1749,447 +1749,6 @@ A consistent class and file name convention make these modules easy to spot and
 </table>
 
 
-
-<a href="#toc">Back to top</a>
-
-
-## Coding conventions
-
-Have a consistent set of coding, naming, and whitespace conventions.
-
-
-
-{@a 03-01}
-
-### Classes
-
-#### Style 03-01
-
-<div class="s-rule do">
-
-
-
-**Do** use upper camel case when naming classes.
-
-
-</div>
-
-
-
-<div class="s-why">
-
-
-
-**Why?** Follows conventional thinking for class names.
-
-
-</div>
-
-
-
-<div class="s-why-last">
-
-
-
-**Why?** Classes can be instantiated and construct an instance.
-By convention, upper camel case indicates a constructable asset.
-
-
-</div>
-
-
-
-<code-example path="styleguide/src/03-01/app/core/exception.service.avoid.ts" region="example" header="app/shared/exception.service.ts">
-
-</code-example>
-
-
-
-
-
-<code-example path="styleguide/src/03-01/app/core/exception.service.ts" region="example" header="app/shared/exception.service.ts">
-
-</code-example>
-
-
-
-<a href="#toc">Back to top</a>
-
-
-{@a 03-02}
-
-### Constants
-
-#### Style 03-02
-
-<div class="s-rule do">
-
-
-
-**Do** declare variables with `const` if their values should not change during the application lifetime.
-
-
-</div>
-
-
-
-<div class="s-why">
-
-
-
-**Why?** Conveys to readers that the value is invariant.
-
-
-</div>
-
-
-
-<div class="s-why-last">
-
-
-
-**Why?** TypeScript helps enforce that intent by requiring immediate initialization and by
-preventing subsequent re-assignment.
-
-
-</div>
-
-
-
-<div class="s-rule consider">
-
-
-
-**Consider** spelling `const` variables in lower camel case.
-
-
-</div>
-
-
-
-<div class="s-why">
-
-
-
-**Why?** Lower camel case variable names (`heroRoutes`) are easier to read and understand
-than the traditional UPPER_SNAKE_CASE names (`HERO_ROUTES`).
-
-
-</div>
-
-
-
-<div class="s-why-last">
-
-
-
-**Why?** The tradition of naming constants in UPPER_SNAKE_CASE reflects
-an era before the modern IDEs that quickly reveal the `const` declaration.
-TypeScript prevents accidental reassignment.
-
-
-</div>
-
-
-
-<div class="s-rule do">
-
-
-
-**Do** tolerate _existing_ `const` variables that are spelled in UPPER_SNAKE_CASE.
-
-
-</div>
-
-
-
-<div class="s-why-last">
-
-
-
-**Why?** The tradition of UPPER_SNAKE_CASE remains popular and pervasive,
-especially in third party modules.
-It is rarely worth the effort to change them at the risk of breaking existing code and documentation.
-
-
-</div>
-
-
-
-<code-example path="styleguide/src/03-02/app/core/data.service.ts" header="app/shared/data.service.ts">
-
-</code-example>
-
-
-
-<a href="#toc">Back to top</a>
-
-
-{@a 03-03}
-
-### Interfaces
-
-#### Style 03-03
-
-<div class="s-rule do">
-
-
-
-**Do** name an interface using upper camel case.
-
-
-</div>
-
-
-
-<div class="s-rule consider">
-
-
-
-**Consider** naming an interface without an `I` prefix.
-
-
-</div>
-
-
-
-<div class="s-rule consider">
-
-
-
-**Consider** using a class instead of an interface for services and declarables (components, directives, and pipes).
-
-
-</div>
-
-
-
-<div class="s-rule consider">
-
-
-
-**Consider** using an interface for data models.
-
-
-</div>
-
-
-
-<div class="s-why">
-
-
-
-**Why?** <a href="https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines">TypeScript guidelines</a>
-discourage the `I` prefix.
-
-
-</div>
-
-
-
-<div class="s-why">
-
-
-
-**Why?** A class alone is less code than a _class-plus-interface_.
-
-
-</div>
-
-
-
-<div class="s-why">
-
-
-
-**Why?** A class can act as an interface (use `implements` instead of `extends`).
-
-
-</div>
-
-
-
-<div class="s-why-last">
-
-
-
-**Why?** An interface-class can be a provider lookup token in Angular dependency injection.
-
-
-</div>
-
-
-
-<code-example path="styleguide/src/03-03/app/core/hero-collector.service.avoid.ts" region="example" header="app/shared/hero-collector.service.ts">
-
-</code-example>
-
-
-
-
-
-<code-example path="styleguide/src/03-03/app/core/hero-collector.service.ts" region="example" header="app/shared/hero-collector.service.ts">
-
-</code-example>
-
-
-
-<a href="#toc">Back to top</a>
-
-{@a 03-04}
-
-### Properties and methods
-
-#### Style 03-04
-
-
-<div class="s-rule do">
-
-
-
-**Do** use lower camel case to name properties and methods.
-
-
-</div>
-
-
-
-<div class="s-rule avoid">
-
-
-
-**Avoid** prefixing private properties and methods with an underscore.
-
-
-</div>
-
-
-
-<div class="s-why">
-
-
-
-**Why?** Follows conventional thinking for properties and methods.
-
-
-</div>
-
-
-
-<div class="s-why">
-
-
-
-**Why?** JavaScript lacks a true private property or method.
-
-
-</div>
-
-
-
-<div class="s-why-last">
-
-
-
-**Why?** TypeScript tooling makes it easy to identify private vs. public properties and methods.
-
-
-</div>
-
-
-
-<code-example path="styleguide/src/03-04/app/core/toast.service.avoid.ts" region="example" header="app/shared/toast.service.ts">
-
-</code-example>
-
-
-
-
-
-<code-example path="styleguide/src/03-04/app/core/toast.service.ts" region="example" header="app/shared/toast.service.ts">
-
-</code-example>
-
-
-
-<a href="#toc">Back to top</a>
-
-{@a 03-06}
-
-### Import line spacing
-
-#### Style 03-06
-
-
-<div class="s-rule consider">
-
-
-
-**Consider** leaving one empty line between third party imports and application imports.
-
-
-</div>
-
-
-
-<div class="s-rule consider">
-
-
-
-**Consider** listing import lines alphabetized by the module.
-
-
-</div>
-
-
-
-<div class="s-rule consider">
-
-
-
-**Consider** listing destructured imported symbols alphabetically.
-
-
-</div>
-
-
-
-<div class="s-why">
-
-
-
-**Why?** The empty line separates _your_ stuff from _their_ stuff.
-
-
-</div>
-
-
-
-<div class="s-why-last">
-
-
-
-**Why?** Alphabetizing makes it easier to read and locate symbols.
-
-
-</div>
-
-
-
-<code-example path="styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts" region="example" header="app/heroes/shared/hero.service.ts">
-
-</code-example>
-
-
-
-
-
-<code-example path="styleguide/src/03-06/app/heroes/shared/hero.service.ts" region="example" header="app/heroes/shared/hero.service.ts">
-
-</code-example>
-
-
-
 <a href="#toc">Back to top</a>