release: cut the v8.2.3 release

Updates the SHA that will be tested against in the `material-unit-tests` job
to the latest commit in the components repository. SHA 18b9ef3f5529f0fa8f034944681486447af7b879
is needed in order to make the newly introduced material-ci test blocklist effective.

Patch version of #32243.

PR Close #32244

.bazelrc

@@ -36,22 +36,6 @@ build --incompatible_strict_action_env
 run --incompatible_strict_action_env
 test --incompatible_strict_action_env
 
-###############################
-# Saucelabs support           #
-# Turn on these settings with #
-#  --config=saucelabs         #
-###############################
-
-# Expose SauceLabs environment to actions
-# These environment variables are needed by
-# web_test_karma to run on Saucelabs
-test:saucelabs --action_env=SAUCE_USERNAME
-test:saucelabs --action_env=SAUCE_ACCESS_KEY
-test:saucelabs --action_env=SAUCE_READY_FILE
-test:saucelabs --action_env=SAUCE_PID_FILE
-test:saucelabs --action_env=SAUCE_TUNNEL_IDENTIFIER
-test:saucelabs --define=KARMA_WEB_TEST_MODE=SL_REQUIRED
-
 ###############################
 # Release support             #
 # Turn on these settings with #

.circleci/bazel.rc

@@ -37,5 +37,5 @@ build --verbose_failures=true
 # > Example job: https://circleci.com/gh/angular/angular/385517
 # We expect that TypeScript compilations will parallelize wider than the number of local cores anyway
 # so we should saturate remote workers with TS compilations
-build --strategy=TypeScriptCompile=standalone
-build --strategy=AngularTemplateCompile=standalone
+build --strategy=AngularTemplateCompile=local
+build --strategy=TypeScriptCompile=local

.circleci/config.yml

@@ -143,7 +143,7 @@ var_14: &notify_dev_infra_on_fail
 
 # Cache key for the Material unit tests job. **Note** when updating the SHA in the cache keys,
 # also update the SHA for the "MATERIAL_REPO_COMMIT" environment variable.
-var_15: &material_unit_tests_cache_key v4-angular-material-701302dc482d7e4b77990b24e3b5ab330bbf1aa5
+var_15: &material_unit_tests_cache_key v4-angular-material-18b9ef3f5529f0fa8f034944681486447af7b879
 var_16: &material_unit_tests_cache_key_short v4-angular-material
 
 version: 2
@@ -256,23 +256,19 @@ jobs:
       - *init_environment
       - *setup_circleci_bazel_config
       - run:
-          name: Preparing environment for running tests on Saucelabs.
-          command: setSecretVar SAUCE_ACCESS_KEY $(echo $SAUCE_ACCESS_KEY | rev)
-      - run:
-          name: Starting Saucelabs tunnel
-          command: ./scripts/saucelabs/start-tunnel.sh
-          background: true
-        # Waits for the Saucelabs tunnel to be ready. This ensures that we don't run tests
-        # too early without Saucelabs not being ready.
-      - run: ./scripts/saucelabs/wait-for-tunnel.sh
-        # All web tests are contained within a single //:test_web_all target for Saucelabs
-        # as running each set of tests as a separate target will attempt to acquire too
-        # many browsers on Saucelabs (7 per target currently) and some tests will always
-        # fail to acquire browsers. For example:
-        # 14 02 2019 19:52:33.170:WARN [launcher]: chrome beta on SauceLabs have not captured in 180000 ms, killing.
-        # //packages/forms/test:web_test_sauce TIMEOUT in 315.0s
-      - run: yarn bazel test --config=saucelabs //:test_web_all
-      - run: ./scripts/saucelabs/stop-tunnel.sh
+          name: Run Bazel tests in saucelabs
+          # All web tests are contained within a single //:test_web_all target for Saucelabs
+          # as running each set of tests as a separate target will attempt to acquire too
+          # many browsers on Saucelabs (7 per target currently) and some tests will always
+          # fail to acquire browsers. For example:
+          # 14 02 2019 19:52:33.170:WARN [launcher]: chrome beta on SauceLabs have not captured in 180000 ms, killing.
+          # //packages/forms/test:web_test_sauce TIMEOUT in 315.0s
+          command:  |
+            ./scripts/saucelabs/run-bazel-via-tunnel.sh \
+              --tunnel-id angular-${CIRCLE_BUILD_NUM}-${CIRCLE_NODE_INDEX} \
+              --username $SAUCE_USERNAME \
+              --key $(echo $SAUCE_ACCESS_KEY | rev) \
+              yarn bazel test //:test_web_all
       - *notify_dev_infra_on_fail
 
   test_aio:
@@ -673,7 +669,10 @@ workflows:
   version: 2
   default_workflow:
     jobs:
-      - setup
+      - setup:
+          filters:
+            branches:
+              ignore: g3
       - lint:
           requires:
             - setup
@@ -784,9 +783,3 @@ workflows:
             branches:
               only:
                 - master
-
-# TODO:
-# - don't build the g3 branch
-# - verify that we are bootstrapping with the right yarn version coming from the docker image
-# - check local chrome version pulled from docker image
-# - remove /tools/ngcontainer

.circleci/env.sh

@@ -61,6 +61,7 @@ else
   setPublicVar SAUCE_USERNAME "angular-ci";
   setSecretVar SAUCE_ACCESS_KEY "9b988f434ff8-fbca-8aa4-4ae3-35442987";
 fi
+# TODO(josephperrott): Remove environment variables once all saucelabs tests are via bazel method.
 setPublicVar SAUCE_LOG_FILE /tmp/angular/sauce-connect.log
 setPublicVar SAUCE_READY_FILE /tmp/angular/sauce-connect-ready-file.lock
 setPublicVar SAUCE_PID_FILE /tmp/angular/sauce-connect-pid-file.lock
@@ -79,7 +80,7 @@ setPublicVar MATERIAL_REPO_TMP_DIR "/tmp/material2"
 setPublicVar MATERIAL_REPO_URL "https://github.com/angular/material2.git"
 setPublicVar MATERIAL_REPO_BRANCH "master"
 # **NOTE**: When updating the commit SHA, also update the cache key in the CircleCI "config.yml".
-setPublicVar MATERIAL_REPO_COMMIT "701302dc482d7e4b77990b24e3b5ab330bbf1aa5"
+setPublicVar MATERIAL_REPO_COMMIT "18b9ef3f5529f0fa8f034944681486447af7b879"
 
 # Source `$BASH_ENV` to make the variables available immediately.
 source $BASH_ENV;

.codefresh/Dockerfile.win-1809

@@ -1,126 +0,0 @@
-# escape=`
-
-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';"]
-
-# Install Bazel prereqs on Windows (https://docs.bazel.build/versions/master/install-windows.html)
-
-# Install MSYS2
-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)
-
-# Install MSYS2 packages
-RUN C:\msys64\usr\bin\bash.exe -l -c \"pacman --needed --noconfirm -S zip unzip patch diffutils git\"
-
-# Install VS Build Tools (required to build C++ targets)
-RUN Invoke-WebRequest -UseBasicParsing https://download.visualstudio.microsoft.com/download/pr/df649173-11e9-4af2-8eb7-0eb02ba8958a/cadb5bdac41e55bb8f6a6b7c45273370/vs_buildtools.exe -OutFile vs_BuildTools.exe; `
-    # Installer won't detect DOTNET_SKIP_FIRST_TIME_EXPERIENCE if ENV is used, must use setx /M
-    setx /M DOTNET_SKIP_FIRST_TIME_EXPERIENCE 1; `
-    Start-Process vs_BuildTools.exe `
-        -ArgumentList `
-            '--add', 'Microsoft.VisualStudio.Workload.VCTools', `
-            '--add', 'Microsoft.VisualStudio.Component.VC.Tools.x86.x64', `
-            '--add', 'Microsoft.Component.VC.Runtime.UCRTSDK', `
-            '--add', 'Microsoft.VisualStudio.Component.Windows10SDK.17763', `
-            '--quiet', '--norestart', '--nocache' `
-        -NoNewWindow -Wait; `
-    Remove-Item -Force vs_buildtools.exe; `
-    Remove-Item -Force -Recurse \"${Env:ProgramFiles(x86)}\Microsoft Visual Studio\Installer\"; `
-    Remove-Item -Force -Recurse ${Env:TEMP}\*; `
-    Remove-Item -Force -Recurse \"${Env:ProgramData}\Package Cache\"; `
-    [Environment]::SetEnvironmentVariable('BAZEL_VC', \"${Env:ProgramFiles(x86)}\Microsoft Visual Studio\2019\BuildTools\VC\", [System.EnvironmentVariableTarget]::Machine)
-
-# Install Python (required to build Python targets)
-RUN Invoke-WebRequest -UseBasicParsing https://www.python.org/ftp/python/3.5.1/python-3.5.1.exe -OutFile python-3.5.1.exe; `
-    Start-Process python-3.5.1.exe -ArgumentList '/quiet InstallAllUsers=1 PrependPath=1' -Wait; `
-    Remove-Item -Force python-3.5.1.exe
-
-CMD ["cmd.exe"]

.codefresh/README.md

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

@@ -1,38 +0,0 @@
-# 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 built files and downloaded repositories in a location that can be cached by CodeFresh and
-# shared between builds. This helps speed up the analysis time significantly with Bazel managed node
-# dependencies on the CI.
-# https://codefresh.io/docs/docs/configure-ci-cd-pipeline/introduction-to-codefresh-pipelines/#caching-the-artifacts-of-your-build-system
-build --repository_cache=C:/codefresh/volume/bazel_repository_cache
-# Setting the output_base to a Docker volume is currently broken because of a Docker bug on Windows:
-# https://github.com/moby/moby/issues/37024
-# This affects Bazel because bazel_output_base\external\bazel_tools is an absolute path junction.
-# When its fixed we can uncomment this line, and use a different output_base for Ivy tests (they
-# use a separate compiler and destructively replace the cache).
-# startup --output_base=C:/codefresh/volume/bazel_output_base
-
-# 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=10240,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

.codefresh/codefresh.yml

@@ -1,28 +0,0 @@
-version: '1.0'
-
-steps:
-  BuildImage:
-    title: Build Docker image
-    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 Bazel tests
-    image: ${{BuildImage}}
-    commands:
-    # Install dependencies
-    - yarn install --frozen-lockfile --non-interactive --network-timeout 100000 --no-progress
-    # Add Bazel CI config
-    - copy .codefresh\bazel.rc %ProgramData%\bazel.bazelrc
-    # Run tests
-    # At the moment 'browser:chromium-local' are broken in CI while locally they work
-    # VE
-    - yarn bazel test --build_tag_filters=-ivy-only --test_tag_filters=-ivy-only,-browser:chromium-local //...
-    # Ivy
-    - yarn bazel test --define=compile=aot --build_tag_filters=-no-ivy-aot,-fixme-ivy-aot --test_tag_filters=-no-ivy-aot,-fixme-ivy-aot,-browser:chromium-local //...

.github/CODEOWNERS

@@ -101,7 +101,6 @@
 #
 #   - brandonroberts
 #   - gkalpak
-#   - jenniferfell
 #   - petebacondarwin
 
 
@@ -884,7 +883,6 @@ testing/**                                                      @angular/fw-test
 /*                                                              @angular/fw-dev-infra
 /.buildkite/**                                                  @angular/fw-dev-infra
 /.circleci/**                                                   @angular/fw-dev-infra
-/.codefresh/**                                                  @angular/fw-dev-infra
 /.devcontainer/**                                               @angular/fw-dev-infra
 /.github/**                                                     @angular/fw-dev-infra
 /.vscode/**                                                     @angular/fw-dev-infra
@@ -912,14 +910,6 @@ testing/**                                                      @angular/fw-test
 
 
 
-# ================================================
-#  Material CI
-# ================================================
-
-/tools/material-ci/**                                           @angular/fw-core @angular/framework-global-approvers
-
-
-
 # ================================================
 #  Public API
 # ================================================

CHANGELOG.md

@@ -1,3 +1,22 @@
+<a name="8.2.3"></a>
+## [8.2.3](https://github.com/angular/angular/compare/8.2.2...8.2.3) (2019-08-21)
+
+
+### Bug Fixes
+
+* **bazel:** pin `[@microsoft](https://github.com/microsoft)/api-extractor` ([#32187](https://github.com/angular/angular/issues/32187)) ([a7b9478](https://github.com/angular/angular/commit/a7b9478))
+
+
+
+<a name="8.2.2"></a>
+## [8.2.2](https://github.com/angular/angular/compare/8.2.1...8.2.2) (2019-08-12)
+
+
+### Bug Fixes
+
+* **bazel:** disable treeshaking when generating FESM and UMD bundles ([#32069](https://github.com/angular/angular/issues/32069)) ([3420d29](https://github.com/angular/angular/commit/3420d29))
+
+
 <a name="8.2.1"></a>
 ## [8.2.1](https://github.com/angular/angular/compare/8.2.0...8.2.1) (2019-08-08)
 

CONTRIBUTING.md

@@ -233,6 +233,7 @@ There are currently a few exceptions to the "use package name" rule:
 * **docs-infra**: used for docs-app (angular.io) related changes within the /aio directory of the
   repo
 * **ivy**: used for changes to the [Ivy renderer](https://github.com/angular/angular/issues/21706).
+* **ngcc**: used for changes to the [Angular Compatibility Compiler](./packages/compiler-cli/ngcc/README.md)
 * none/empty string: useful for `style`, `test` and `refactor` changes that are done across all
   packages (e.g. `style: add missing semicolons`) and for docs changes that are not related to a
   specific package (e.g. `docs: fix typo in tutorial`).

README.md

@@ -6,7 +6,7 @@
 
 # Angular
 
-Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages.
+Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript and other languages.
 
 ## Quickstart
 
@@ -14,7 +14,7 @@ Angular is a development platform for building mobile and desktop web applicatio
 
 ## Changelog
 
-[Learn about the latest improvements][changelog]. 
+[Learn about the latest improvements][changelog].
 
 ## Want to help?
 

aio/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,24 @@
+import { browser, element, by } from 'protractor';
+import { logging } from 'selenium-webdriver';
+
+describe('Providers and ViewProviders', function () {
+
+
+  beforeEach(() => {
+    browser.get('');
+  });
+
+  it('shows basic flower emoji', function() {
+    expect(element.all(by.css('p')).get(0).getText()).toContain('🌺');
+  });
+
+  it('shows whale emoji', function() {
+    expect(element.all(by.css('p')).get(1).getText()).toContain('🐳');
+  });
+
+  it('shows sunflower from FlowerService', function() {
+    expect(element.all(by.css('p')).get(8).getText()).toContain('🌻');
+  });
+
+});
+

aio/content/examples/providers-viewproviders/src/app/animal.service.ts

@@ -0,0 +1,10 @@
+// #docregion animal-service
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AnimalService {
+  emoji = '🐳';
+}
+// #enddocregion animal-service

aio/content/examples/providers-viewproviders/src/app/app.component.1.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { FlowerService } from './flower.service';
+import { AnimalService } from './animal.service';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.css' ]
+})
+// #docregion injection
+export class AppComponent  {
+  constructor(public flower: FlowerService) {}
+}
+// #enddocregion injection

aio/content/examples/providers-viewproviders/src/app/app.component.html

@@ -0,0 +1,15 @@
+
+<h2>From AppComponent:</h2>
+<!-- #docregion binding-flower -->
+<p>Emoji from FlowerService: {{flower.emoji}}</p>
+<!-- #enddocregion binding-flower -->
+<!-- #docregion binding-animal -->
+<p>Emoji from AnimalService: {{animal.emoji}}</p>
+<!-- #enddocregion binding-animal -->
+
+<hr />
+
+<h2>From ChildComponent:</h2>
+<!-- #docregion content-projection -->
+<app-child><app-inspector></app-inspector></app-child>
+<!-- #enddocregion content-projection -->

aio/content/examples/providers-viewproviders/src/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { FlowerService } from './flower.service';
+import { AnimalService } from './animal.service';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.css' ]
+})
+// #docregion inject-animal-service
+export class AppComponent  {
+  constructor(public flower: FlowerService, public animal: AnimalService) {}
+}
+// #enddocregion inject-animal-service

aio/content/examples/providers-viewproviders/src/app/app.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { ChildComponent } from './child/child.component';
+import { InspectorComponent } from './inspector/inspector.component';
+
+// #docregion appmodule
+@NgModule({
+  imports:      [ BrowserModule, FormsModule ],
+  declarations: [ AppComponent, ChildComponent, InspectorComponent ],
+  bootstrap:    [ AppComponent ],
+  providers: []
+})
+export class AppModule { }
+// #enddocregion appmodule

aio/content/examples/providers-viewproviders/src/app/child/child.component.1.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Host, SkipSelf, Optional } from '@angular/core';
+import { FlowerService } from '../flower.service';
+
+// #docregion flowerservice
+@Component({
+  selector: 'app-child',
+  templateUrl: './child.component.html',
+  styleUrls: ['./child.component.css'],
+  // use the providers array to provide a service
+  providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }]
+})
+
+export class ChildComponent {
+  // inject the service
+  constructor( public flower: FlowerService) { }
+}
+
+// #enddocregion flowerservice
+

aio/content/examples/providers-viewproviders/src/app/child/child.component.css

@@ -0,0 +1,4 @@
+.container {
+  border: 1px solid darkblue;
+  padding: 1rem;
+}

aio/content/examples/providers-viewproviders/src/app/child/child.component.html

@@ -0,0 +1,24 @@
+<!-- #docplaster -->
+<!-- #docregion child-component -->
+<!-- #docregion flower-binding -->
+<p>Emoji from FlowerService: {{flower.emoji}}</p>
+<!-- #enddocregion flower-binding -->
+<!-- #docregion animal-binding -->
+<p>Emoji from AnimalService: {{animal.emoji}}</p>
+<!-- #enddocregion animal-binding -->
+
+<div class="container">
+  <h3>Content projection</h3>
+  <!-- #enddocregion child-component -->
+  <p>The following is coming from content. It doesn't get to see the puppy because the puppy is declared inside the view only.</p>
+  <!-- #docregion child-component -->
+	<ng-content></ng-content>
+</div>
+
+<h3>Inside the view</h3>
+<!-- #enddocregion child-component -->
+<p>The following is inside the view so it does see the puppy.</p>
+<!-- #docregion child-component -->
+<app-inspector></app-inspector>
+<!-- #enddocregion child-component -->
+

aio/content/examples/providers-viewproviders/src/app/child/child.component.ts

@@ -0,0 +1,44 @@
+// #docplaster
+import { Component, OnInit, Host, SkipSelf, Optional } from '@angular/core';
+import { FlowerService } from '../flower.service';
+import { AnimalService } from '../animal.service';
+
+// #docregion provide-animal-service
+@Component({
+  selector: 'app-child',
+  templateUrl: './child.component.html',
+  styleUrls: ['./child.component.css'],
+  // provide services
+  providers: [{ provide: FlowerService, useValue: { emoji: '🌻' } }],
+  viewProviders: [{ provide: AnimalService, useValue: { emoji: '🐶' } }]
+})
+
+export class ChildComponent {
+  // inject service
+  constructor( public flower: FlowerService, public animal: AnimalService) { }
+// #enddocregion provide-animal-service
+
+  // viewProviders ensures that only the view gets to see this.
+  // With the AnimalService in the viewProviders, the
+  // InspectorComponent doesn't get to see it because the
+  // inspector is in the content.
+
+
+  // constructor( public flower: FlowerService, @Optional() @Host()  public animal: AnimalService) { }
+
+// Comment out the above constructor and alternately
+// uncomment the two following constructors to see the
+// effects of @Host() and @Host() + @SkipSelf().
+
+// constructor(
+//     @Host() public animal : AnimalService,
+//     @Host() @Optional() public flower : FlowerService) { }
+
+// constructor(
+//     @SkipSelf() @Host() public animal : AnimalService,
+//     @SkipSelf() @Host() @Optional() public flower : FlowerService) { }
+
+// #docregion provide-animal-service
+}
+// #enddocregion provide-animal-service
+

aio/content/examples/providers-viewproviders/src/app/flower.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+// #docregion flowerservice
+@Injectable({
+  providedIn: 'root'
+})
+export class FlowerService {
+  emoji = '🌺';
+}
+// #enddocregion flowerservice
+

aio/content/examples/providers-viewproviders/src/app/inspector/inspector.component.html

@@ -0,0 +1,4 @@
+ <!-- #docregion binding -->
+<p>Emoji from FlowerService: {{flower.emoji}}</p>
+<p>Emoji from AnimalService: {{animal.emoji}}</p>
+ <!-- #enddocregion binding -->

aio/content/examples/providers-viewproviders/src/app/inspector/inspector.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { FlowerService } from '../flower.service';
+import { AnimalService } from '../animal.service';
+
+@Component({
+  selector: 'app-inspector',
+  templateUrl: './inspector.component.html',
+  styleUrls: ['./inspector.component.css']
+})
+// #docregion injection
+export class InspectorComponent {
+  constructor(public flower: FlowerService, public animal: AnimalService) { }
+}
+// #enddocregion injection

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

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>providers vs. viewProviders</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

aio/content/examples/providers-viewproviders/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.log(err));

aio/content/examples/providers-viewproviders/stackblitz.json

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

aio/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,21 @@
+import { browser, element, by } from 'protractor';
+
+describe('Resolution-modifiers-example', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+
+  it('shows basic flower emoji', function() {
+    expect(element.all(by.css('p')).get(0).getText()).toContain('🌸');
+  });
+
+  it('shows basic leaf emoji', function() {
+    expect(element.all(by.css('p')).get(1).getText()).toContain('🌿');
+  });
+
+  it('shows yellow flower in host child', function() {
+    expect(element.all(by.css('p')).get(9).getText()).toContain('🌼');
+  });
+
+});

aio/content/examples/resolution-modifiers/src/app/app.component.html

@@ -0,0 +1,14 @@
+<h1>DI resolution modifiers</h1>
+
+<p>Basic flower service: {{flower.emoji}}</p>
+<p>Basic leaf service: {{leaf.emoji}}</p>
+
+<app-optional></app-optional>
+
+<app-self></app-self>
+
+<app-self-no-data></app-self-no-data>
+
+<app-skipself></app-skipself>
+
+<app-host-parent></app-host-parent>

aio/content/examples/resolution-modifiers/src/app/app.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { LeafService } from './leaf.service';
+import { FlowerService } from './flower.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.css' ]
+})
+export class AppComponent {
+  name = 'Angular';
+  constructor(public flower: FlowerService, public leaf: LeafService) {}
+}

aio/content/examples/resolution-modifiers/src/app/app.module.ts

@@ -0,0 +1,33 @@
+;
+import { OptionalComponent } from './optional/optional.component';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { SelfNoDataComponent } from './self-no-data/self-no-data.component';
+import { HostComponent } from './host/host.component';
+import { SelfComponent } from './self/self.component';
+import { SkipselfComponent } from './skipself/skipself.component';
+import { HostParentComponent } from './host-parent/host-parent.component';
+import { HostChildComponent } from './host-child/host-child.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [
+    AppComponent,
+    OptionalComponent,
+    SelfComponent,
+    SelfNoDataComponent,
+    HostComponent,
+    SkipselfComponent,
+    HostParentComponent,
+    HostChildComponent
+  ],
+  bootstrap: [AppComponent],
+  providers: []
+})
+export class AppModule { }

aio/content/examples/resolution-modifiers/src/app/flower.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root' // provide this service in the root ModuleInjector
+
+})
+export class FlowerService {
+  emoji = '🌸';
+}

aio/content/examples/resolution-modifiers/src/app/host-child/host-child.component.css

@@ -0,0 +1,5 @@
+.section {
+  border: 2px solid #369;
+  padding: 1rem;
+  margin: 1rem 0;
+}

aio/content/examples/resolution-modifiers/src/app/host-child/host-child.component.html

@@ -0,0 +1,4 @@
+<div class="section">
+	<h2>Child of @Host() Component</h2>
+  <p>Flower emoji: {{flower.emoji}}</p>
+</div>

aio/content/examples/resolution-modifiers/src/app/host-child/host-child.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { FlowerService } from '../flower.service';
+
+@Component({
+  selector: 'app-host-child',
+  templateUrl: './host-child.component.html',
+  styleUrls: ['./host-child.component.css']
+})
+export class HostChildComponent {
+  constructor(public flower: FlowerService) { }
+}

aio/content/examples/resolution-modifiers/src/app/host-parent/host-parent.component.css

@@ -0,0 +1,5 @@
+.section {
+  border: 2px solid #369;
+  padding: 1rem;
+  margin: 1rem 0;
+}

aio/content/examples/resolution-modifiers/src/app/host-parent/host-parent.component.html

@@ -0,0 +1,5 @@
+<div class="section">
+	<h2>Parent of @Host() Component</h2>
+	<p>Flower emoji: {{flower.emoji}}</p>
+	<app-host></app-host>
+</div>

aio/content/examples/resolution-modifiers/src/app/host-parent/host-parent.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { FlowerService } from '../flower.service';
+
+
+@Component({
+  selector: 'app-host-parent',
+  templateUrl: './host-parent.component.html',
+  styleUrls: ['./host-parent.component.css'],
+  providers: [{ provide: FlowerService, useValue: { emoji: '🌺' } }]
+
+})
+export class HostParentComponent {
+
+  constructor(public flower: FlowerService) { }
+
+}

aio/content/examples/resolution-modifiers/src/app/host/host.component.css

@@ -0,0 +1,5 @@
+.section {
+  border: 2px solid #369;
+  padding: 1rem;
+  margin: 1rem 0;
+}

aio/content/examples/resolution-modifiers/src/app/host/host.component.html

@@ -0,0 +1,6 @@
+<div class="section">
+	<h2>@Host() Component</h2>
+	<p>Flower emoji: {{flower.emoji}}</p>
+	<p><i>(@Host() stops it here)</i></p>
+	<app-host-child></app-host-child>
+</div>

aio/content/examples/resolution-modifiers/src/app/host/host.component.ts

@@ -0,0 +1,21 @@
+import { Component, Host, Optional } from '@angular/core';
+import { FlowerService } from '../flower.service';
+
+// #docregion host-component
+@Component({
+  selector: 'app-host',
+  templateUrl: './host.component.html',
+  styleUrls: ['./host.component.css'],
+  //  provide the service
+  providers: [{ provide: FlowerService, useValue: { emoji: '🌼' } }]
+})
+export class HostComponent {
+  // use @Host() in the constructor when injecting the service
+  constructor(@Host() @Optional() public flower: FlowerService) { }
+
+}
+// #enddocregion host-component
+
+// if you take out @Host() and the providers array, flower will be red hibiscus
+
+

aio/content/examples/resolution-modifiers/src/app/leaf.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+// #docregion leafservice
+export class LeafService {
+  emoji = '🌿';
+}
+// #enddocregion leafservice
+

aio/content/examples/resolution-modifiers/src/app/optional.service.ts

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class OptionalService {
+}
+
+// This service isn't provided anywhere.

aio/content/examples/resolution-modifiers/src/app/optional/optional.component.css

@@ -0,0 +1,5 @@
+.section {
+  border: 2px solid #369;
+  padding: 1rem;
+  margin: 1rem 0;
+}

aio/content/examples/resolution-modifiers/src/app/optional/optional.component.html

@@ -0,0 +1,4 @@
+<div class="section">
+	<h2>@Optional() Component</h2>
+	<p>This component still works even though the OptionalService (notice @Optional() in the consturctor isn't provided or configured anywhere. Angular goes through tree and visibilty rules, and if it doesn't find the requested service, returns null.</p>
+</div>

aio/content/examples/resolution-modifiers/src/app/optional/optional.component.ts

@@ -0,0 +1,21 @@
+import { Component, Optional } from '@angular/core';
+import { OptionalService } from '../optional.service';
+
+@Component({
+  selector: 'app-optional',
+  templateUrl: './optional.component.html',
+  styleUrls: ['./optional.component.css']
+})
+
+// #docregion optional-component
+export class OptionalComponent {
+  constructor(@Optional() public optional: OptionalService) {}
+}
+// #enddocregion optional-component
+
+// The OptionalService isn't provided here, in the @Injectable()
+// providers array, or in the NgModule. If you remove @Optional()
+// from the constructor, you'll get an error.
+
+
+

aio/content/examples/resolution-modifiers/src/app/self-no-data/self-no-data.component.css

@@ -0,0 +1,5 @@
+.section {
+  border: 2px solid #369;
+  padding: 1rem;
+  margin: 1rem 0;
+}

aio/content/examples/resolution-modifiers/src/app/self-no-data/self-no-data.component.html

@@ -0,0 +1,4 @@
+<div class="section">
+	<h2>@Self() Component (without a provider)</h2>
+  <p>Leaf emoji: {{leaf?.emoji}}</p>
+</div>

aio/content/examples/resolution-modifiers/src/app/self-no-data/self-no-data.component.ts

@@ -0,0 +1,18 @@
+import { Component, Self, Optional } from '@angular/core';
+import { LeafService } from '../leaf.service';
+
+// #docregion self-no-data-component
+@Component({
+  selector: 'app-self-no-data',
+  templateUrl: './self-no-data.component.html',
+  styleUrls: ['./self-no-data.component.css']
+})
+export class SelfNoDataComponent {
+  constructor(@Self() @Optional() public leaf: LeafService) { }
+}
+
+// #enddocregion self-no-data-component
+
+// The app doesn't break because the value being available at self is optional.
+// If you remove @Optional(), the app breaks.
+

aio/content/examples/resolution-modifiers/src/app/self/self.component.css

@@ -0,0 +1,5 @@
+.section {
+  border: 2px solid #369;
+  padding: 1rem;
+  margin: 1rem 0;
+}

aio/content/examples/resolution-modifiers/src/app/self/self.component.html

@@ -0,0 +1,4 @@
+<div class="section">
+	<h2>@Self() Component</h2>
+  <p>Flower emoji: {{flower?.emoji}}</p>
+</div>

aio/content/examples/resolution-modifiers/src/app/self/self.component.ts

@@ -0,0 +1,19 @@
+import { Component, Self } from '@angular/core';
+import { FlowerService } from '../flower.service';
+
+// #docregion self-component
+@Component({
+  selector: 'app-self',
+  templateUrl: './self.component.html',
+  styleUrls: ['./self.component.css'],
+  providers: [{ provide: FlowerService, useValue: { emoji: '🌼' } }]
+
+})
+export class SelfComponent {
+  constructor(@Self() public flower: FlowerService) {}
+}
+// #enddocregion self-component
+
+// This component provides the FlowerService so the injector
+// doesn't have to look further up the injector tree
+

aio/content/examples/resolution-modifiers/src/app/skipself/skipself.component.css

@@ -0,0 +1,5 @@
+.section {
+  border: 2px solid #369;
+  padding: 1rem;
+  margin: 1rem 0;
+}

aio/content/examples/resolution-modifiers/src/app/skipself/skipself.component.html

@@ -0,0 +1,4 @@
+<div class="section">
+	<h2>@SkipSelf() Component</h2>
+  <p>Leaf emoji: {{leaf.emoji}}</p>
+</div>

aio/content/examples/resolution-modifiers/src/app/skipself/skipself.component.ts

@@ -0,0 +1,18 @@
+import { Component, SkipSelf } from '@angular/core';
+import { LeafService } from '../leaf.service';
+
+// #docregion skipself-component
+@Component({
+  selector: 'app-skipself',
+  templateUrl: './skipself.component.html',
+  styleUrls: ['./skipself.component.css'],
+  // Angular would ignore this LeafService instance
+  providers: [{ provide: LeafService, useValue: { emoji: '🍁' } }]
+})
+export class SkipselfComponent {
+  // Use @SkipSelf() in the constructor
+  constructor(@SkipSelf() public leaf: LeafService) { }
+}
+// #enddocregion skipself-component
+
+// @SkipSelf(): Specifies that the dependency resolution should start from the parent injector, not here.

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

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>DI Resolution Modifiers Example</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

aio/content/examples/resolution-modifiers/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/resolution-modifiers/stackblitz.json

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

aio/content/guide/cli-builder.md

@@ -253,7 +253,7 @@ In the `package.json` file, add a `builders` key that tells the Architect tool w
 </code-example>
 
 The official name of our builder is now ` @example/command-runner:command`.
-The first part  of this is the package name (resolved using node resolution), and the second part is the builder name (resolved using the `builder.json` file).
+The first part  of this is the package name (resolved using node resolution), and the second part is the builder name (resolved using the `builders.json` file).
 
 Using one of our `options` is very straightforward, we did this in the previous section when we accessed `options.command`.
 
@@ -279,28 +279,28 @@ By default, for example, the `build` command runs the builder  `@angular-devkit/
   "myApp": {
     ...
     "architect": {
-        "build": {
-             "builder": "@angular-devkit/build-angular:browser",
-             "options": {
-            "outputPath": "dist/myApp",
-            "index": "src/index.html",
-        ...
-   },
-          "configurations": {
-            "production": {
-                 "fileReplacements": [
-                    {
-                         "replace": "src/environments/environment.ts",
-                         "with": "src/environments/environment.prod.ts"
-                    }
-                 ],
-               "optimization": true,
-               "outputHashing": "all",
-      ...
-            }
-             }
+      "build": {
+        "builder": "@angular-devkit/build-angular:browser",
+        "options": {
+          "outputPath": "dist/myApp",
+          "index": "src/index.html",
+          ...
         },
-       ...
+        "configurations": {
+          "production": {
+            "fileReplacements": [
+              {
+                "replace": "src/environments/environment.ts",
+                "with": "src/environments/environment.prod.ts"
+              }
+            ],
+            "optimization": true,
+            "outputHashing": "all",
+            ...
+          }
+        }
+      },
+      ...
 
 </code-example>
 
@@ -419,15 +419,13 @@ We need to update the `angular.json` file to add a target for this builder to th
   "projects": {
     "builder-test": {
       "architect": {
-        "builder-test": {
-          "touch": {
-            "builder": "@example/command-runner:command",
-            "options": {
-              "command": "touch",
-              "args": [
-                "src/main.ts"
-              ]
-            }
+        "touch": {
+          "builder": "@example/command-runner:command",
+          "options": {
+            "command": "touch",
+            "args": [
+              "src/main.ts"
+            ]
           }
         },
         "build": {
@@ -497,14 +495,14 @@ The test uses the builder to run the `ls` command, then validates that it ran su
 
 <code-example language="typescript">
 
-import { Architect, ArchitectHost } from '@angular-devkit/architect';
+import { Architect } from '@angular-devkit/architect';
 import { TestingArchitectHost } from '@angular-devkit/architect/testing';
 // Our builder forwards the STDOUT of the command to the logger.
 import { logging, schema } from '@angular-devkit/core';
 
 describe('Command Runner Builder', () => {
   let architect: Architect;
-  let architectHost: ArchitectHost;
+  let architectHost: TestingArchitectHost;
 
   beforeEach(async () => {
     const registry = new schema.CoreSchemaRegistry();

aio/content/guide/complex-animation-sequences.md

@@ -30,7 +30,7 @@ The Filter/Stagger tab in the live example shows a list of heroes with an introd
 
 The following example demonstrates how to use `query()` and `stagger()` functions on the entry of an animated element.
 
-* Use `query()` to look for any element entering or leaving the page. The query specifies elements meeting certain CSS class criteria.
+* Use `query()` to look for an element entering the page that meets certain criteria.
 
 * For each of these elements, use `style()` to set the same initial style for the element. Make it invisible and use `transform` to move it out of position so that it can slide into place.
 

aio/content/guide/dependency-injection.md

@@ -134,7 +134,7 @@ The `@NgModule()` and `@Component()` decorators have the `providers` metadata op
 
 Components are directives, and the `providers` option is inherited from `@Directive()`. You can also configure providers for directives and pipes at the same level as the component.
 
-Learn more about [where to configure providers](guide/hierarchical-dependency-injection#where-to-register).
+Learn more about [where to configure providers](guide/hierarchical-dependency-injection).
 
 </div>
 

aio/content/guide/service-worker-config.md

@@ -137,8 +137,9 @@ export interface DataGroup {
 Similar to `assetGroups`, every data group has a `name` which uniquely identifies it.
 
 ### `urls`
-A list of URL patterns. URLs that match these patterns will be cached according to this data group's policy.<br>
-  _(Negative glob patterns are not supported and `?` will be matched literally; i.e. it will not match any character other than `?`.)_
+A list of URL patterns. URLs that match these patterns are cached according to this data group's policy. Only non-mutating requests (GET and HEAD) are cached.
+ * Negative glob patterns are not supported.
+ * `?` is matched literally; that is, it matches *only* the character `?`.
 
 ### `version`
 Occasionally APIs change formats in a way that is not backward-compatible. A new version of the app may not be compatible with the old API format and thus may not be compatible with existing cached resources from that API.

aio/content/guide/service-worker-intro.md

@@ -31,11 +31,34 @@ Installing the Angular service worker is as simple as including an `NgModule`. I
 
 ## Prerequisites
 
-Your application must run in a web browser that supports service workers. Currently, service workers are supported in the latest versions of Chrome, Firefox, Edge, Safari, Opera, UC Browser (Android version) and Samsung Internet. Browsers like IE and Opera Mini do not provide the support. To learn more about other browsers that are service worker ready, see the [Can I Use](https://caniuse.com/#feat=serviceworkers) page and [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API).
+To make use of all the features of Angular service worker, use the latest versions of Angular and the Angular CLI.
 
-In addition, in order for service workers to be registered, the app must be accessed over HTTPS, not HTTP. Browsers will ignore service workers on pages that are served over an insecure connection. The reason is that service workers are quite powerful, so extra care needs to be taken to ensure the service worker script has not been tampered with.
+In order for service workers to be registered, the app must be accessed over HTTPS, not HTTP.
+Browsers ignore service workers on pages that are served over an insecure connection.
+The reason is that service workers are quite powerful, so extra care needs to be taken to ensure the service worker script has not been tampered with.
+
+There is one exception to this rule: to make local development easier, browsers do _not_ require a secure connection when accessing an app on `localhost`.
+
+### Browser support
+
+To benefit from the Angular service worker, your app must run in a web browser that supports service workers in general.
+Currently, service workers are supported in the latest versions of Chrome, Firefox, Edge, Safari, Opera, UC Browser (Android version) and Samsung Internet.
+Browsers like IE and Opera Mini do not support service workers.
+
+If the user is accessing your app via a browser that does not support service workers, the service worker is not registered and related behavior such as offline cache management and push notifications does not happen.
+More specifically:
+
+* The browser does not download the service worker script and `ngsw.json` manifest file.
+* Active attempts to interact with the service worker, such as calling `SwUpdate.checkForUpdate()`, return rejected promises.
+* The observable events of related services, such as `SwUpdate.available`, are not triggered.
+
+It is highly recommended that you ensure that your app works even without service worker support in the browser.
+Although an unsupported browser ignores service worker caching, it will still report errors if the app attempts to interact with the service worker.
+For example, calling `SwUpdate.checkForUpdate()` will return rejected promises.
+To avoid such an error, you can check whether the Angular service worker is enabled using `SwUpdate.isEnabled()`.
+
+To learn more about other browsers that are service worker ready, see the [Can I Use](https://caniuse.com/#feat=serviceworkers) page and [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API).
 
-There is one exception to this rule: To make local development easier, browsers do _not_ require a secure connection when accessing an app on `localhost`.
 
 ## Related resources
 
@@ -46,7 +69,6 @@ For more information about browser support, see the [browser support](https://de
 
 The remainder of this Angular documentation specifically addresses the Angular implementation of service workers.
 
-## More on Angular service workers
+## Next steps
 
-You may also be interested in the following:
-* [Getting Started with service workers](guide/service-worker-getting-started).
+To begin using Angular service workers, see [Getting Started with service workers](guide/service-worker-getting-started).

aio/content/guide/styleguide.md

@@ -1080,6 +1080,10 @@ For example, the prefix `toh` represents **T**our **o**f **H**eroes and the pref
 
 
 **Do** use consistent names for all pipes, named after their feature.
+The pipe class name should use [UpperCamelCase](guide/glossary#case-types)
+(the general convention for class names),
+and the corresponding `name` string should use *lowerCamelCase*.
+The `name` string cannot use hyphens ("dash-case" or "kebab-case").
 
 
 </div>

aio/content/images/guide/dependency-injection/injectors.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 600 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g id="NullInjector"><rect x="11.864" y="16.952" width="575.424" height="114.429" style="fill:#fff;stroke:#0159d3;stroke-width:3.81px;"/><text x="208.488px" y="67.96px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:30.514px;">NullInjector()</text><g transform="matrix(0.847458,0,0,0.847619,-81.3559,-80.5238)"><text x="286.27px" y="212px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">always throws an error unless</text><text x="334.768px" y="236.785px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">you use @Optional()</text></g></g><path d="M286.822,144.941l-7.161,0l11.017,-11.017l11.017,11.017l-7.161,0l0,38.992l-7.712,0l0,-38.992Z" style="fill:#0159d3;stroke:#0159d3;stroke-width:3.81px;"/><path d="M286.822,297.512l-7.161,0l11.017,-11.017l11.017,11.017l-7.161,0l0,38.993l-7.712,0l0,-38.993Z" style="fill:#0159d3;stroke:#0159d3;stroke-width:3.81px;"/><g id="Moduleinjector"><rect x="11.864" y="168.913" width="575.424" height="114.429" style="fill:#fff;stroke:#0159d3;stroke-width:3.81px;"/><text x="215.313px" y="211.956px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:25.429px;">ModuleInjector</text><g transform="matrix(0.847458,0,0,0.847619,-24.5763,-79.6762)"><text x="215.592px" y="385px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">(configured by PlatformModule)</text><text x="74.879px" y="409.785px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">has special things like DomSanitizer =&gt; platformBrowser()</text></g></g><g id="root"><rect x="10.599" y="320.428" width="577.966" height="113.581" style="fill:#fff;stroke:#0159d3;stroke-width:3.81px;"/><g transform="matrix(0.847458,0,0,0.847619,-59.3163,262.743)"><text x="280.144px" y="115px" style="font-family:'Courier';font-size:30px;">root</text><text x="370.158px" y="115px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:30px;">ModuleInjector</text></g><g transform="matrix(0.847458,0,0,0.847619,15.5593,-82.219)"><text x="165.889px" y="559px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">(configured by <tspan x="324.209px 338.014px 351.361px " y="559px 559px 559px ">You</tspan>rAppModule)</text><text x="5.57px" y="583.785px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:24px;">has things for your app  =&gt; bootstrapModule(Y<tspan x="498.332px 511.68px " y="583.785px 583.785px ">ou</tspan>rAppModule)</text></g></g></svg>

aio/content/marketing/contributors.json

@@ -276,8 +276,7 @@
     "twitter": "deborahkurata",
     "website": "http://blogs.msmvps.com/deborahk/",
     "bio": "Deborah is a software developer, author, and Google Developer Expert. She is author of several Pluralsight courses including: 'Angular 2: Getting Started' and ‘Angular Routing’",
-    "groups": ["Collaborators", "GDE"],
-    "mentor": "kara"
+    "groups": ["GDE"]
   },
   "alyssa": {
     "name": "Alyssa Nicoll",

aio/content/marketing/events.html

@@ -13,36 +13,18 @@
     </tr>
     </thead>
     <tbody>
-    <!-- ng-conf 2019-->
-    <tr>
-      <th><a href="https://ng-conf.org/" title="ng-conf">ng-conf</a></th>
-      <td>Salt Lake City, Utah</td>
-      <td>May 1-3, 2019</td>
-    </tr>
-    <!-- ngVikings 2019-->
-    <tr>
-      <th><a href="https://ngvikings.org/" title="ngVikings">ngVikings</a></th>
-      <td>Copenhagen, Denmark</td>
-      <td>May 26 (workshops), 27-28 (conference), 2019</td>
-    </tr>
-    <!-- ngJapan-->
-    <tr>
-      <th><a href="https://ngjapan.org" title="ng-japan">ng-japan</a></th>
-      <td>Tokyo, Japan</td>
-      <td>July 13, 2019</td>
-    </tr>      
-    <!-- AngularConnect 2019-->
-    <tr>
-      <th><a href="https://www.angularconnect.com/?utm_source=angular.io&utm_medium=referral" title="AngularConnect">AngularConnect</a></th>
-      <td>London, UK</td>
-      <td>September 19-20, 2019</td>
-    </tr>
     <!-- NG-DE 2019-->
     <tr>
       <th><a href="https://ng-de.org/" title="NG-DE">NG-DE</a></th>
       <td>Berlin, Germany</td>
       <td>August 29th workshops, 30-31 conference, 2019</td>
     </tr>
+    <!-- AngularConnect 2019-->
+    <tr>
+      <th><a href="https://www.angularconnect.com/?utm_source=angular.io&utm_medium=referral" title="AngularConnect">AngularConnect</a></th>
+      <td>London, UK</td>
+      <td>September 19-20, 2019</td>
+    </tr>
     <!-- ReactiveConf 2019 -->
     <tr>
       <th><a href="https://reactiveconf.com/" title="ReactiveConf">ReactiveConf</a></th>
@@ -62,6 +44,24 @@
     </tr>
     </thead>
     <tbody>
+      <!-- ngJapan-->
+      <tr>
+        <th><a href="https://ngjapan.org" title="ng-japan">ng-japan</a></th>
+        <td>Tokyo, Japan</td>
+        <td>July 13, 2019</td>
+      </tr>
+      <!-- ngVikings 2019-->
+      <tr>
+        <th><a href="https://ngvikings.org/" title="ngVikings">ngVikings</a></th>
+        <td>Copenhagen, Denmark</td>
+        <td>May 26 (workshops), 27-28 (conference), 2019</td>
+      </tr>
+      <!-- ng-conf 2019-->
+      <tr>
+        <th><a href="https://ng-conf.org/" title="ng-conf">ng-conf</a></th>
+        <td>Salt Lake City, Utah</td>
+        <td>May 1-3, 2019</td>
+      </tr>
       <!-- ng-India 2019-->
       <tr>
         <th><a href="https://www.ng-ind.com/" title="ng-India">ng-India</a></th>

aio/content/marketing/resources.json

@@ -259,6 +259,12 @@
       "UI Components": {
         "order": 4,
         "resources": {
+           "AngularUIToolkit": {
+            "desc": "Angular UI Toolkit: 115 professionally maintained UI components ranging from a robust grid to charts and more. Try for free & build Angular apps faster.",
+            "rev": true,
+            "title": "Angular UI Toolkit",
+            "url": "https://www.angular-ui-tools.com"
+          },
           "IgniteUIforAngular": {
             "desc": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps.",
             "rev": true,

aio/package.json

@@ -23,7 +23,7 @@
     "build-with-ivy": "yarn ~~build",
     "prebuild-with-ivy-ci": "yarn setup-local --no-build-packages && node scripts/switch-to-ivy",
     "build-with-ivy-ci": "yarn ~~build --progress=false",
-    "extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js de49294bf",
+    "extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js e0055d293",
     "lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint && yarn tools-lint",
     "test": "yarn check-env && ng test",
     "pree2e": "yarn check-env && yarn update-webdriver",

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

@@ -50,140 +50,140 @@
         background: $lightgray;
       }
     }
+  }
 
-    &.toc-heading {
-      mat-icon.rotating-icon {
-        height: 18px;
-        width: 18px;
-        position: relative;
-        left: -4px;
-        top: 5px;
-      }
-
-      &:hover:not(.embedded) {
-        color: $accentblue;
-      }
+  &.toc-heading {
+    mat-icon.rotating-icon {
+      height: 18px;
+      width: 18px;
+      position: relative;
+      left: -4px;
+      top: 5px;
     }
 
-    &.toc-more-items {
-      color: $mediumgray;
-      top: 10px;
+    &:hover:not(.embedded) {
+      color: $accentblue;
+    }
+  }
+
+  &.toc-more-items {
+    color: $mediumgray;
+    top: 10px;
+    position: relative;
+
+    &:hover {
+      color: $accentblue;
+    }
+
+    &::after {
+      content: 'expand_less';
+    }
+
+    &.collapsed::after {
+      content: 'more_horiz';
+    }
+  }
+
+  .mat-icon {
+    &.collapsed {
+      @include rotate(0deg);
+    }
+
+    &:not(.collapsed) {
+      @include rotate(90deg);
+    }
+  }
+
+  ul.toc-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0 8px 0 0;
+    
+    @media (max-width: 800px) {
+      width: auto;
+    }
+
+    li {
+      box-sizing: border-box;
+      @include font-size(12);
+      @include line-height(16);
+      padding: 3px 0 3px 12px;
       position: relative;
+      transition: all 0.3s ease-in-out;
+
+      &.h1:after {
+        content: '';
+        display: block;
+        height: 1px;
+        width: 40%;
+        margin: 7px 0 4px 0;
+        background: $lightgray;
+        clear: both;
+      }
+
+      &.h3 {
+        padding-left: 24px;
+      }
+
+      a {
+        color: lighten($darkgray, 10);
+        overflow: visible;
+        @include font-size(12);
+        display: table-cell;
+      }
 
       &:hover {
-        color: $accentblue;
-      }
-
-      &::after {
-        content: 'expand_less';
-      }
-
-      &.collapsed::after {
-        content: 'more_horiz';
-      }
-    }
-
-    .mat-icon {
-      &.collapsed {
-        @include rotate(0deg);
-      }
-
-      &:not(.collapsed) {
-        @include rotate(90deg);
-      }
-    }
-
-    ul.toc-list {
-      list-style-type: none;
-      margin: 0;
-      padding: 0 8px 0 0;
-
-      @media (max-width: 800px) {
-        width: auto;
-      }
-
-      li {
-        box-sizing: border-box;
-        @include font-size(12);
-        @include line-height(16);
-        padding: 3px 0 3px 12px;
-        position: relative;
-        transition: all 0.3s ease-in-out;
-
-        &.h1:after {
-          content: '';
-          display: block;
-          height: 1px;
-          width: 40%;
-          margin: 7px 0 4px 0;
-          background: $lightgray;
-          clear: both;
+        * {
+          color: $accentblue;
         }
+      }
 
-        &.h3 {
-          padding-left: 24px;
-        }
+      &.active {
+        * {
+          color: $blue;
+          font-weight: 500;
 
-        a {
-          color: lighten($darkgray, 10);
-          overflow: visible;
-          @include font-size(12);
-          display: table-cell;
-        }
-
-        &:hover {
-          * {
-            color: $accentblue;
-          }
-        }
-
-        &.active {
-          * {
-            color: $blue;
-            font-weight: 500;
-
-            &:before {
-              content: '';
-              border-radius: 50%;
-              left: -3px;
-              top: 12px;
-              background: $blue;
-              position: absolute;
-              width: 6px;
-              height: 6px;
-            }
+          &:before {
+            content: '';
+            border-radius: 50%;
+            left: -3px;
+            top: 12px;
+            background: $blue;
+            position: absolute;
+            width: 6px;
+            height: 6px;
           }
         }
       }
+    }
 
-      &:not(.embedded) li {
-        &:before {
-          border-left: 1px solid $lightgray;
-          bottom: 0;
-          content: '';
-          left: 0;
-          position: absolute;
-          top: 0;
-        }
+    &:not(.embedded) li {
+      &:before {
+        border-left: 1px solid $lightgray;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        top: 0;
+      }
 
-        &:first-child:before {
-          top: 13px;
-        }
+      &:first-child:before {
+        top: 13px;
+      }
 
-        &:last-child:before {
-          bottom: calc(100% - 14px);
-        }
+      &:last-child:before {
+        bottom: calc(100% - 14px);
+      }
 
-        &:not(.active):hover a:before {
-          content: '';
-          border-radius: 50%;
-          left: -3px;
-          top: 12px;
-          background: $lightgray;
-          position: absolute;
-          width: 6px;
-          height: 6px;
-        }
+      &:not(.active):hover a:before {
+        content: '';
+        border-radius: 50%;
+        left: -3px;
+        top: 12px;
+        background: $lightgray;
+        position: absolute;
+        width: 6px;
+        height: 6px;
       }
     }
   }

docs/DEBUG_MATERIAL_IVY.md

@@ -0,0 +1,40 @@
+# Debugging the Material unit tests job
+
+Currently all changes to Ivy are validated against the test suite of the
+`angular/components` repository. In order to debug the `material-unit-tests` CI
+job, the following steps can be used:
+
+1\) Build the Ivy package output by running `./scripts/build-ivy-npm-packages.sh` in
+the `angular/angular` repo.
+
+2\) Clone the `angular/components` repository if not done yet ([quick link to repo](https://github.com/angular/components)).
+
+3\) Set up the package output in the `components` repository by running the following
+command in the `angular/angular` repo:
+
+```bash
+node ./scripts/ci/update-deps-to-dist-packages.js {COMPONENTS_REPO}/package.json ./dist/packages-dist-ivy-aot
+```
+
+4\) Switch into the `components` repository and run the tests by using the
+following command:
+
+```bash
+yarn test --deleted_packages=//src/dev-app --define=compile=aot
+```
+
+### Running tests for individual entry-points
+
+The `yarn test` script from the `components` repository runs all tests in the project.
+This is sometimes not desired because it involves building and testing of all packages
+and entry-points. Running tests for an individual entry-point is possible by explicitly
+selecting a given test target.
+
+Here is an example of commands that run individual test targets. Note that it is
+**important** to specify the `--define=compile=aot` flag in order to run tests with Ivy.
+  
+```bash
+yarn bazel test --define=compile=aot src/material/slider:unit_tests
+yarn bazel test --define=compile=aot src/cdk/a11y:unit_tests
+yarn bazel test --define=compile=aot src/material/toolbar:unit_tests
+``` 

docs/TRIAGE_AND_LABELS.md

@@ -12,7 +12,6 @@ The owner of the component is then responsible for the secondary / component-lev
 The caretaker should be able to determine which component the issue belongs to.
 The components have a clear piece of source code associated with it within the `/packages/` folder of this repo.
 
-* `comp: docs-infra` - the angular.io application
 * `comp: animations`
 * `comp: bazel` - @angular/bazel rules
 * `comp: benchpress`
@@ -21,6 +20,8 @@ The components have a clear piece of source code associated with it within the `
 * `comp: core & compiler` - because core, compiler, compiler-cli and
   browser-platforms are very intertwined, we will be treating them as one
 * `comp: ivy` - a subset of core representing the new Ivy renderer.
+* `comp: ngcc` - a subset of ivy representing the [Angular Compatibility Compiler](../packages/compiler-cli/ngcc/README.md)
+* `comp: docs-infra` - the angular.io application and docs-related tooling
 * `comp: elements`
 * `comp: forms`
 * `comp: http`
@@ -170,7 +171,9 @@ If a PR is missing the `PR target: *` label, or if the label is set to "TBD" whe
 
 Before a PR can be merged it must be approved by the appropriate reviewer(s).
 
-To ensure that the right people review each change, we configured [GitHub CODEOWNERS](https://help.github.com/articles/about-codeowners/) (via `.github/CODEOWNERS`) and require that each PR has at least one approval from the appropriate code owner.
+To ensure that the right people review each change, we configured [GitHub CODEOWNERS](https://help.github.com/articles/about-codeowners/) (via `.github/CODEOWNERS`) and require that each PR has at least one approval from an appropriate code owner.
+
+If the PR author is a code owner themselves, the approval can come from _any_ repo collaborator (person with write access). GitHub CODEOWNERs does not support this scenario, so the `merge-assistance` label must be added, mentioning that the PR author is a code owner. In any case, the reviewer should actually look through the code and provide feedback if necessary.
 
 Note that approved state does not mean a PR is ready to be merged.
 For example, a reviewer might approve the PR but request a minor tweak that doesn't need further review, e.g., a rebase or small uncontroversial change.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-srcs",
-  "version": "8.2.1",
+  "version": "8.2.3",
   "private": true,
   "description": "Angular - a web framework for modern web apps",
   "homepage": "https://github.com/angular/angular",
@@ -39,7 +39,7 @@
     "@bazel/karma": "0.34.0",
     "@bazel/protractor": "0.34.0",
     "@bazel/typescript": "0.34.0",
-    "@microsoft/api-extractor": "^7.0.21",
+    "@microsoft/api-extractor": "7.0.21",
     "@schematics/angular": "^8.0.0-beta.15",
     "@types/angular": "^1.6.47",
     "@types/base64-js": "1.2.5",

packages/bazel/package.json

@@ -29,7 +29,7 @@
     "@angular-devkit/architect": "^0.800.0-beta.15",
     "@angular-devkit/core": "^8.0.0-beta.15",
     "@angular-devkit/schematics": "^8.0.0-beta.15",
-    "@microsoft/api-extractor": "^7.0.21",
+    "@microsoft/api-extractor": "7.0.21",
     "@schematics/angular": "^8.0.0-beta.15",
     "@types/node": "6.0.84",
     "semver": "^5.6.0",

packages/bazel/src/ng_package/ng_package.bzl

@@ -112,11 +112,13 @@ def _rollup(ctx, bundle_name, rollup_config, entry_point, inputs, js_output, for
         args.add("--amd.id", package_name)
 
     # After updating to build_bazel_rules_nodejs 0.27.0+, rollup has been updated to v1.3.1
-    # which tree shakes @__PURE__ annotations by default. We turn this feature off
-    # for ng_package as Angular bundles contain these annotations and there are
-    # test failures if they are removed. See comments in
-    # https://github.com/angular/angular/pull/29210 for more information.
-    args.add("--no-treeshake.annotations")
+    # which tree shakes @__PURE__ annotations and const variables which are later amended by NGCC.
+    # We turn this feature off for ng_package as Angular bundles contain these and there are
+    # test failures if they are removed.
+    # See comments in:
+    # https://github.com/angular/angular/pull/29210
+    # https://github.com/angular/angular/pull/32069
+    args.add("--no-treeshake")
 
     # Note: if the input has external source maps then we need to also install and use
     #   `rollup-plugin-sourcemaps`, which will require us to use rollup.config.js file instead

packages/bazel/test/ng_package/core_package.spec.ts

@@ -133,6 +133,10 @@ describe('@angular/core ng_package', () => {
       } else {
         it('should have decorators',
            () => { expect(shx.cat('fesm5/core.js')).toContain('__decorate'); });
+
+        // See: https://github.com/angular/angular/pull/32069
+        it('should retain access to const',
+           () => { expect(shx.cat('fesm5/core.js')).toContain('!ivyEnabled'); });
       }
 
       it('should load tslib from external bundle', () => {

packages/bazel/test/ng_package/example_package.golden

@@ -111,6 +111,41 @@ Hello
     See the Apache Version 2.0 License for specific language governing permissions
     and limitations under the License.
     ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+                t[p[i]] = s[p[i]];
+        return t;
+    }
 
     function __decorate(decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -119,6 +154,136 @@ Hello
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
 
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); }
+    }
+
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+    }
+
+    function __awaiter(thisArg, _arguments, P, generator) {
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f) throw new TypeError("Generator is already executing.");
+            while (_) try {
+                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+                if (y = 0, t) op = [op[0] & 2, t.value];
+                switch (op[0]) {
+                    case 0: case 1: t = op; break;
+                    case 4: _.label++; return { value: op[1], done: false };
+                    case 5: _.label++; y = op[1]; op = [0]; continue;
+                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                    default:
+                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                        if (t[2]) _.ops.pop();
+                        _.trys.pop(); continue;
+                }
+                op = body.call(thisArg, _);
+            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+
+    function __exportStar(m, exports) {
+        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+    }
+
+    function __values(o) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
+        if (m) return m.call(o);
+        return {
+            next: function () {
+                if (o && i >= o.length) o = void 0;
+                return { value: o && o[i++], done: !o };
+            }
+        };
+    }
+
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    }
+
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
+    }
+
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+    }
+
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+        return cooked;
+    };
+
+    function __importStar(mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+        result.default = mod;
+        return result;
+    }
+
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+
     /**
      * @license
      * Copyright Google Inc. All Rights Reserved.
@@ -210,6 +375,41 @@ e.SecondaryModule=o,e.a=1,Object.defineProperty(e,"__esModule",{value:!0})});
     See the Apache Version 2.0 License for specific language governing permissions
     and limitations under the License.
     ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+                t[p[i]] = s[p[i]];
+        return t;
+    }
 
     function __decorate(decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -218,6 +418,136 @@ e.SecondaryModule=o,e.a=1,Object.defineProperty(e,"__esModule",{value:!0})});
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
 
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); }
+    }
+
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+    }
+
+    function __awaiter(thisArg, _arguments, P, generator) {
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+            function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f) throw new TypeError("Generator is already executing.");
+            while (_) try {
+                if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+                if (y = 0, t) op = [op[0] & 2, t.value];
+                switch (op[0]) {
+                    case 0: case 1: t = op; break;
+                    case 4: _.label++; return { value: op[1], done: false };
+                    case 5: _.label++; y = op[1]; op = [0]; continue;
+                    case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                    default:
+                        if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                        if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                        if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                        if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                        if (t[2]) _.ops.pop();
+                        _.trys.pop(); continue;
+                }
+                op = body.call(thisArg, _);
+            } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+            if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+
+    function __exportStar(m, exports) {
+        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+    }
+
+    function __values(o) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
+        if (m) return m.call(o);
+        return {
+            next: function () {
+                if (o && i >= o.length) o = void 0;
+                return { value: o && o[i++], done: !o };
+            }
+        };
+    }
+
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    }
+
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
+    }
+
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+    }
+
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+        return cooked;
+    };
+
+    function __importStar(mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+        result.default = mod;
+        return result;
+    }
+
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+
     /**
      * @license
      * Copyright Google Inc. All Rights Reserved.

packages/common/src/i18n/format_number.ts

@@ -134,7 +134,8 @@ function formatNumberToLocaleString(
  * such as "$" or "Canadian Dollar". Used in output string, but does not affect the operation
  * of the function.
  * @param currencyCode The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217)
- * currency code to use in the result string, such as `USD` for the US dollar and `EUR` for the euro.
+ * currency code, such as `USD` for the US dollar and `EUR` for the euro.
+ * Used to determine the number of digits in the decimal part.
  * @param digitInfo Decimal representation options, specified by a string in the following format:
  * `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}`. See `DecimalPipe` for more details.
  *

packages/common/src/location/location.ts

@@ -25,12 +25,12 @@ export interface PopStateEvent {
  *
  * A service that applications can use to interact with a browser's URL.
  *
- * Depending on the `LocationStrategy` used, `Location` will either persist
+ * Depending on the `LocationStrategy` used, `Location` persists
  * to the URL's path or the URL's hash segment.
  *
  * @usageNotes
  *
- * It's better to use the {@link Router#navigate} service to trigger route changes. Use
+ * It's better to use the `Router#navigate` service to trigger route changes. Use
  * `Location` only if you need to interact with or create normalized URLs outside of
  * routing.
  *
@@ -77,9 +77,9 @@ export class Location {
   }
 
   /**
-   * Returns the normalized URL path.
+   * Normalizes the URL path for this location.
    *
-   * @param includeHash Whether path has an anchor fragment.
+   * @param includeHash True to include an anchor fragment in the path.
    *
    * @returns The normalized URL path.
    */
@@ -90,17 +90,18 @@ export class Location {
   }
 
   /**
-   * Returns the current value of the history.state object.
+   * Reports the current state of the location history.
+   * @returns The current value of the `history.state` object.
    */
   getState(): unknown { return this._platformLocation.getState(); }
 
   /**
    * Normalizes the given path and compares to the current normalized path.
    *
-   * @param path The given URL path
-   * @param query Query parameters
+   * @param path The given URL path.
+   * @param query Query parameters.
    *
-   * @returns `true` if the given URL path is equal to the current normalized path, `false`
+   * @returns True if the given URL path is equal to the current normalized path, false
    * otherwise.
    */
   isCurrentPathEqualTo(path: string, query: string = ''): boolean {
@@ -108,23 +109,21 @@ export class Location {
   }
 
   /**
-   * Given a string representing a URL, returns the URL path after stripping the
-   * trailing slashes.
+   * Normalizes a URL path by stripping any trailing slashes.
    *
    * @param url String representing a URL.
    *
-   * @returns Normalized URL string.
+   * @returns The normalized URL string.
    */
   normalize(url: string): string {
     return Location.stripTrailingSlash(_stripBaseHref(this._baseHref, _stripIndexHtml(url)));
   }
 
   /**
-   * Given a string representing a URL, returns the platform-specific external URL path.
-   * If the given URL doesn't begin with a leading slash (`'/'`), this method adds one
-   * before normalizing. This method also adds a hash if `HashLocationStrategy` is
-   * used, or the `APP_BASE_HREF` if the `PathLocationStrategy` is in use.
-   *
+   * Normalizes an external URL path.
+   * If the given URL doesn't begin with a leading slash (`'/'`), adds one
+   * before normalizing. Adds a hash if `HashLocationStrategy` is
+   * in use, or the `APP_BASE_HREF` if the `PathLocationStrategy` is in use.
    *
    * @param url String representing a URL.
    *
@@ -139,12 +138,12 @@ export class Location {
 
   // TODO: rename this method to pushState
   /**
-   * Changes the browsers URL to a normalized version of the given URL, and pushes a
+   * Changes the browser's URL to a normalized version of a given URL, and pushes a
    * new item onto the platform's history.
    *
-   * @param path  URL path to normalizze
-   * @param query Query parameters
-   * @param state Location history state
+   * @param path  URL path to normalize.
+   * @param query Query parameters.
+   * @param state Location history state.
    *
    */
   go(path: string, query: string = '', state: any = null): void {
@@ -157,9 +156,9 @@ export class Location {
    * Changes the browser's URL to a normalized version of the given URL, and replaces
    * the top item on the platform's history stack.
    *
-   * @param path  URL path to normalizze
-   * @param query Query parameters
-   * @param state Location history state
+   * @param path  URL path to normalize.
+   * @param query Query parameters.
+   * @param state Location history state.
    */
   replaceState(path: string, query: string = '', state: any = null): void {
     this._platformStrategy.replaceState(state, '', path, query);
@@ -178,8 +177,10 @@ export class Location {
   back(): void { this._platformStrategy.back(); }
 
   /**
-   * Register URL change listeners. This API can be used to catch updates performed by the Angular
-   * framework. These are not detectible through "popstate" or "hashchange" events.
+   * Registers a URL change listener. Use to catch updates performed by the Angular
+   * framework that are not detectible through "popstate" or "hashchange" events.
+   *
+   * @param fn The change handler function, which take a URL and a location history state.
    */
   onUrlChange(fn: (url: string, state: unknown) => void) {
     this._urlChangeListeners.push(fn);
@@ -192,7 +193,7 @@ export class Location {
   }
 
   /**
-   * Subscribe to the platform's `popState` events.
+   * Subscribes to the platform's `popState` events.
    *
    * @param value Event that is triggered when the state history changes.
    * @param exception The exception to throw.
@@ -206,25 +207,24 @@ export class Location {
   }
 
   /**
-   * Given a string of url parameters, prepend with `?` if needed, otherwise return the
-   * parameters as is.
+   * Normalizes URL parameters by prepending with `?` if needed.
    *
-   *  @param  params String of URL parameters
+   * @param  params String of URL parameters.
    *
-   *  @returns URL parameters prepended with `?` or the parameters as is.
+   * @returns The normalized URL parameters string.
    */
   public static normalizeQueryParams(params: string): string {
     return params && params[0] !== '?' ? '?' + params : params;
   }
 
   /**
-   * Given 2 parts of a URL, join them with a slash if needed.
+   * Joins two parts of a URL with a slash if needed.
    *
    * @param start  URL string
    * @param end    URL string
    *
    *
-   * @returns Given URL strings joined with a slash, if needed.
+   * @returns The joined URL string.
    */
   public static joinWithSlash(start: string, end: string): string {
     if (start.length == 0) {
@@ -250,14 +250,13 @@ export class Location {
   }
 
   /**
-   * If URL has a trailing slash, remove it, otherwise return the URL as is. The
-   * method looks for the first occurrence of either `#`, `?`, or the end of the
+   * Removes a trailing slash from a URL string if needed.
+   * Looks for the first occurrence of either `#`, `?`, or the end of the
    * line as `/` characters and removes the trailing slash if one exists.
    *
-   * @param url URL string
+   * @param url URL string.
    *
-   * @returns Returns a URL string after removing the trailing slash if one exists, otherwise
-   * returns the string as is.
+   * @returns The URL string, modified if needed.
    */
   public static stripTrailingSlash(url: string): string {
     const match = url.match(/#|\?|$/);

packages/core/schematics/BUILD.bazel

@@ -10,7 +10,6 @@ npm_package(
     srcs = ["migrations.json"],
     visibility = ["//packages/core:__pkg__"],
     deps = [
-        "//packages/core/schematics/migrations/injectable-pipe",
         "//packages/core/schematics/migrations/move-document",
         "//packages/core/schematics/migrations/renderer-to-renderer2",
         "//packages/core/schematics/migrations/static-queries",

packages/core/schematics/migrations/google3/BUILD.bazel

@@ -6,7 +6,6 @@ ts_library(
     tsconfig = "//packages/core/schematics:tsconfig.json",
     visibility = ["//packages/core/schematics/test:__pkg__"],
     deps = [
-        "//packages/core/schematics/migrations/injectable-pipe",
         "//packages/core/schematics/migrations/missing-injectable",
         "//packages/core/schematics/migrations/missing-injectable/google3",
         "//packages/core/schematics/migrations/static-queries",

packages/core/schematics/migrations/google3/injectablePipeRule.ts

@@ -1,55 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {Replacement, RuleFailure, Rules} from 'tslint';
-import * as ts from 'typescript';
-
-import {InjectablePipeVisitor} from '../injectable-pipe/angular/injectable_pipe_visitor';
-import {INJECTABLE_DECORATOR_NAME, addImport, getNamedImports} from '../injectable-pipe/util';
-
-
-/**
- * TSLint rule that flags `@Pipe` classes that haven't been marked as `@Injectable`.
- */
-export class Rule extends Rules.TypedRule {
-  applyWithProgram(sourceFile: ts.SourceFile, program: ts.Program): RuleFailure[] {
-    const visitor = new InjectablePipeVisitor(program.getTypeChecker());
-    const printer = ts.createPrinter();
-    const failures: RuleFailure[] = [];
-
-    visitor.visitNode(sourceFile);
-
-    visitor.missingInjectablePipes.forEach(data => {
-      const {pipeDecorator, importDeclarationMissingImport} = data;
-      const fixes = [new Replacement(
-          pipeDecorator.getStart(), pipeDecorator.getWidth(),
-          `@${INJECTABLE_DECORATOR_NAME}()\n${pipeDecorator.getText()}`)];
-
-      if (importDeclarationMissingImport) {
-        const namedImports = getNamedImports(importDeclarationMissingImport);
-
-        // Add another fix that'll add the missing import.
-        if (namedImports) {
-          fixes.push(new Replacement(
-              namedImports.getStart(), namedImports.getWidth(),
-              printer.printNode(
-                  ts.EmitHint.Unspecified, addImport(namedImports, INJECTABLE_DECORATOR_NAME),
-                  sourceFile)));
-        }
-      }
-
-      // Add a failure on Pipe decorators that are missing the Injectable decorator.
-      failures.push(new RuleFailure(
-          sourceFile, pipeDecorator.getStart(), pipeDecorator.getWidth(),
-          'Classes with @Pipe should be decorated with @Injectable so that they can be injected.',
-          this.ruleName, fixes));
-    });
-
-    return failures;
-  }
-}

packages/core/schematics/migrations/injectable-pipe/BUILD.bazel

@@ -1,18 +0,0 @@
-load("//tools:defaults.bzl", "ts_library")
-
-ts_library(
-    name = "injectable-pipe",
-    srcs = glob(["**/*.ts"]),
-    tsconfig = "//packages/core/schematics:tsconfig.json",
-    visibility = [
-        "//packages/core/schematics:__pkg__",
-        "//packages/core/schematics/migrations/google3:__pkg__",
-        "//packages/core/schematics/test:__pkg__",
-    ],
-    deps = [
-        "//packages/core/schematics/utils",
-        "@npm//@angular-devkit/schematics",
-        "@npm//@types/node",
-        "@npm//typescript",
-    ],
-)

packages/core/schematics/migrations/injectable-pipe/README.md

@@ -1,22 +0,0 @@
-## Injectable annotation on pipes
-
-In ViewEngine it was possible to inject a class that was annotated as a `Pipe`, however this no
-longer works in Ivy if the class also doesn't have the `Injectable` decorator. This migration
-adds `Injectable` automatically to all `Pipe` classes.
-
-### Before
-```ts
-import { Pipe } from '@angular/core';
-
-@Pipe({ name: 'myPipe' })
-class MyPipe {}
-```
-
-### After
-```ts
-import { Pipe, Injectable } from '@angular/core';
-
-@Injectable()
-@Pipe({ name: 'myPipe' })
-class MyPipe {}
-```

packages/core/schematics/migrations/injectable-pipe/angular/injectable_pipe_visitor.ts

@@ -1,67 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import * as ts from 'typescript';
-
-import {getAngularDecorators} from '../../../utils/ng_decorators';
-import {INJECTABLE_DECORATOR_NAME} from '../util';
-
-/**
- * Goes through all of the descendant nodes of a given node and lists out all of the pipes
- * that don't have `@Injectable`, as well as their `@Pipe` decorator and the import declaration
- * from which we'd need to import the `Injectable` decorator.
- */
-export class InjectablePipeVisitor {
-  /**
-   * Keeps track of all the classes that have a `Pipe` decorator, but not `Injectable`, as well
-   * as a reference to the `Pipe` decorator itself and import declarations from which we'll have
-   * to import the `Injectable` decorator.
-   */
-  missingInjectablePipes: {
-    classDeclaration: ts.ClassDeclaration,
-    importDeclarationMissingImport: ts.ImportDeclaration|null,
-    pipeDecorator: ts.Decorator
-  }[] = [];
-
-  constructor(private _typeChecker: ts.TypeChecker) {}
-
-  visitNode(node: ts.Node) {
-    switch (node.kind) {
-      case ts.SyntaxKind.ClassDeclaration:
-        this._visitClassDeclaration(node as ts.ClassDeclaration);
-        break;
-    }
-
-    ts.forEachChild(node, node => this.visitNode(node));
-  }
-
-  private _visitClassDeclaration(node: ts.ClassDeclaration) {
-    if (!node.decorators || !node.decorators.length) {
-      return;
-    }
-
-    const ngDecorators = getAngularDecorators(this._typeChecker, node.decorators);
-    const pipeDecorator = ngDecorators.find(decorator => decorator.name === 'Pipe');
-    const hasInjectableDecorator =
-        !ngDecorators.some(decorator => decorator.name === INJECTABLE_DECORATOR_NAME);
-
-    // Skip non-pipe classes and pipes that are already marked as injectable.
-    if (pipeDecorator && hasInjectableDecorator) {
-      const importNode = pipeDecorator.importNode;
-      const namedImports = importNode.importClause && importNode.importClause.namedBindings;
-      const needsImport = namedImports && ts.isNamedImports(namedImports) &&
-          !namedImports.elements.some(element => element.name.text === INJECTABLE_DECORATOR_NAME);
-
-      this.missingInjectablePipes.push({
-        classDeclaration: node,
-        importDeclarationMissingImport: needsImport ? importNode : null,
-        pipeDecorator: pipeDecorator.node
-      });
-    }
-  }
-}

packages/core/schematics/migrations/injectable-pipe/index.ts

@@ -1,92 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {Rule, SchematicsException, Tree} from '@angular-devkit/schematics';
-import {dirname, relative} from 'path';
-import * as ts from 'typescript';
-
-import {getProjectTsConfigPaths} from '../../utils/project_tsconfig_paths';
-import {parseTsconfigFile} from '../../utils/typescript/parse_tsconfig';
-
-import {InjectablePipeVisitor} from './angular/injectable_pipe_visitor';
-import {INJECTABLE_DECORATOR_NAME, addImport, getNamedImports} from './util';
-
-/**
- * Runs a migration over a TypeScript project that adds an `@Injectable`
- * annotation to all classes that have `@Pipe`.
- */
-export default function(): Rule {
-  return (tree: Tree) => {
-    const {buildPaths, testPaths} = getProjectTsConfigPaths(tree);
-    const basePath = process.cwd();
-    const allPaths = [...buildPaths, ...testPaths];
-
-    if (!allPaths.length) {
-      throw new SchematicsException(
-          'Could not find any tsconfig file. Cannot add Injectable annotation to pipes.');
-    }
-
-    for (const tsconfigPath of allPaths) {
-      runInjectablePipeMigration(tree, tsconfigPath, basePath);
-    }
-  };
-}
-
-function runInjectablePipeMigration(tree: Tree, tsconfigPath: string, basePath: string) {
-  const parsed = parseTsconfigFile(tsconfigPath, dirname(tsconfigPath));
-  const host = ts.createCompilerHost(parsed.options, true);
-
-  // We need to overwrite the host "readFile" method, as we want the TypeScript
-  // program to be based on the file contents in the virtual file tree. Otherwise
-  // if we run the migration for multiple tsconfig files which have intersecting
-  // source files, it can end up updating query definitions multiple times.
-  host.readFile = fileName => {
-    const buffer = tree.read(relative(basePath, fileName));
-    // Strip BOM as otherwise TSC methods (Ex: getWidth) will return an offset which
-    // which breaks the CLI UpdateRecorder.
-    // See: https://github.com/angular/angular/pull/30719
-    return buffer ? buffer.toString().replace(/^\uFEFF/, '') : undefined;
-  };
-
-  const program = ts.createProgram(parsed.fileNames, parsed.options, host);
-  const typeChecker = program.getTypeChecker();
-  const visitor = new InjectablePipeVisitor(typeChecker);
-  const sourceFiles = program.getSourceFiles().filter(
-      f => !f.isDeclarationFile && !program.isSourceFileFromExternalLibrary(f));
-  const printer = ts.createPrinter();
-
-  sourceFiles.forEach(sourceFile => visitor.visitNode(sourceFile));
-
-  visitor.missingInjectablePipes.forEach(data => {
-    const {classDeclaration, importDeclarationMissingImport} = data;
-    const sourceFile = classDeclaration.getSourceFile();
-    const update = tree.beginUpdate(relative(basePath, sourceFile.fileName));
-
-    // Note that we don't need to go through the AST to insert the decorator, because the change
-    // is pretty basic. Also this has a better chance of preserving the user's formatting.
-    update.insertLeft(classDeclaration.getStart(), `@${INJECTABLE_DECORATOR_NAME}()\n`);
-
-    // Add @Injectable to the imports if it isn't imported already. Note that this doesn't deal with
-    // the case where there aren't any imports for `@angular/core` at all. We don't need to handle
-    // it because the Pipe decorator won't be recognized if it hasn't been imported from Angular.
-    if (importDeclarationMissingImport) {
-      const namedImports = getNamedImports(importDeclarationMissingImport);
-
-      if (namedImports) {
-        update.remove(namedImports.getStart(), namedImports.getWidth());
-        update.insertRight(
-            namedImports.getStart(),
-            printer.printNode(
-                ts.EmitHint.Unspecified, addImport(namedImports, INJECTABLE_DECORATOR_NAME),
-                sourceFile));
-      }
-    }
-
-    tree.commitUpdate(update);
-  });
-}

packages/core/schematics/migrations/injectable-pipe/util.ts

@@ -1,36 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import * as ts from 'typescript';
-
-/** Name of the Injectable decorator. */
-export const INJECTABLE_DECORATOR_NAME = 'Injectable';
-
-/**
- * Adds an import to a named import node, if the import does not exist already.
- * @param node Node to which to add the import.
- * @param importName Name of the import that should be added.
- */
-export function addImport(node: ts.NamedImports, importName: string) {
-  const elements = node.elements;
-  const isAlreadyImported = elements.some(element => element.name.text === importName);
-
-  if (!isAlreadyImported) {
-    return ts.updateNamedImports(
-        node, [...elements, ts.createImportSpecifier(undefined, ts.createIdentifier(importName))]);
-  }
-
-  return node;
-}
-
-/** Gets the named imports node from an import declaration. */
-export function getNamedImports(node: ts.ImportDeclaration): ts.NamedImports|null {
-  const importClause = node.importClause;
-  const namedImports = importClause && importClause.namedBindings;
-  return (namedImports && ts.isNamedImports(namedImports)) ? namedImports : null;
-}

packages/core/schematics/migrations/static-queries/strategies/usage_strategy/usage_strategy.ts

@@ -166,16 +166,18 @@ function filterQueryClassMemberNodes(
   //  (1) queries used in the "ngOnInit" lifecycle hook are static.
   //  (2) inputs with setters can access queries statically.
   return classDecl.members
-      .filter(m => {
-        if (ts.isMethodDeclaration(m) && m.body && hasPropertyNameText(m.name) &&
-            STATIC_QUERY_LIFECYCLE_HOOKS[query.type].indexOf(m.name.text) !== -1) {
-          return true;
-        } else if (
-            knownInputNames && ts.isSetAccessor(m) && m.body && hasPropertyNameText(m.name) &&
-            knownInputNames.indexOf(m.name.text) !== -1) {
-          return true;
-        }
-        return false;
-      })
-      .map((member: ts.SetAccessorDeclaration | ts.MethodDeclaration) => member.body !);
+      .filter(
+          (m):
+              m is(ts.SetAccessorDeclaration | ts.MethodDeclaration) => {
+                if (ts.isMethodDeclaration(m) && m.body && hasPropertyNameText(m.name) &&
+                    STATIC_QUERY_LIFECYCLE_HOOKS[query.type].indexOf(m.name.text) !== -1) {
+                  return true;
+                } else if (
+                    knownInputNames && ts.isSetAccessor(m) && m.body &&
+                    hasPropertyNameText(m.name) && knownInputNames.indexOf(m.name.text) !== -1) {
+                  return true;
+                }
+                return false;
+              })
+      .map(member => member.body !);
 }

packages/core/schematics/test/BUILD.bazel

@@ -10,7 +10,6 @@ ts_library(
     ],
     deps = [
         "//packages/core/schematics/migrations/google3",
-        "//packages/core/schematics/migrations/injectable-pipe",
         "//packages/core/schematics/migrations/missing-injectable",
         "//packages/core/schematics/migrations/move-document",
         "//packages/core/schematics/migrations/renderer-to-renderer2",

packages/core/schematics/test/google3/injectable_pipe_spec.ts

@@ -1,93 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {readFileSync, writeFileSync} from 'fs';
-import {dirname, join} from 'path';
-import * as shx from 'shelljs';
-import {Configuration, Linter} from 'tslint';
-
-describe('Google3 injectable pipe TSLint rule', () => {
-  const rulesDirectory = dirname(require.resolve('../../migrations/google3/injectablePipeRule'));
-
-  let tmpDir: string;
-
-  beforeEach(() => {
-    tmpDir = join(process.env['TEST_TMPDIR'] !, 'google3-test');
-    shx.mkdir('-p', tmpDir);
-
-    writeFile('tsconfig.json', JSON.stringify({compilerOptions: {module: 'es2015'}}));
-  });
-
-  afterEach(() => shx.rm('-r', tmpDir));
-
-  function runTSLint(fix = true) {
-    const program = Linter.createProgram(join(tmpDir, 'tsconfig.json'));
-    const linter = new Linter({fix, rulesDirectory: [rulesDirectory]}, program);
-    const config = Configuration.parseConfigFile(
-        {rules: {'injectable-pipe': true}, linterOptions: {typeCheck: true}});
-
-    program.getRootFileNames().forEach(fileName => {
-      linter.lint(fileName, program.getSourceFile(fileName) !.getFullText(), config);
-    });
-
-    return linter;
-  }
-
-  function writeFile(fileName: string, content: string) {
-    writeFileSync(join(tmpDir, fileName), content);
-  }
-
-  function getFile(fileName: string) { return readFileSync(join(tmpDir, fileName), 'utf8'); }
-
-  it('should report pipes that are not marked as Injectable', () => {
-    writeFile('index.ts', `
-      import { Pipe } from '@angular/core';
-
-      @Pipe({ name: 'myPipe' })
-      export class MyPipe {
-      }
-    `);
-
-    const linter = runTSLint(false);
-    const failures = linter.getResult().failures;
-
-    expect(failures.length).toBe(1);
-    expect(failures[0].getFailure()).toMatch(/@Pipe should be decorated with @Injectable/);
-  });
-
-  it('should add @Injectable to pipes that do not have it', () => {
-    writeFile('/index.ts', `
-      import { Pipe } from '@angular/core';
-
-      @Pipe({ name: 'myPipe' })
-      export class MyPipe {
-      }
-    `);
-
-    runTSLint();
-    expect(getFile('/index.ts'))
-        .toMatch(/@Injectable\(\)\s+@Pipe\(\{ name: 'myPipe' \}\)\s+export class MyPipe/);
-  });
-
-  it('should add an import for Injectable to the @angular/core import declaration', () => {
-    writeFile('/index.ts', `
-      import { Pipe } from '@angular/core';
-
-      @Pipe()
-      export class MyPipe {
-      }
-    `);
-
-    runTSLint();
-
-    const content = getFile('/index.ts');
-    expect(content).toContain('import { Pipe, Injectable } from \'@angular/core\'');
-    expect((content.match(/import/g) || []).length).toBe(1, 'Expected only one import statement');
-  });
-
-});

packages/core/schematics/test/injectable_pipe_migration_spec.ts

@@ -1,143 +0,0 @@
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {getSystemPath, normalize, virtualFs} from '@angular-devkit/core';
-import {TempScopedNodeJsSyncHost} from '@angular-devkit/core/node/testing';
-import {HostTree} from '@angular-devkit/schematics';
-import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
-import * as shx from 'shelljs';
-
-describe('injectable pipe migration', () => {
-  let runner: SchematicTestRunner;
-  let host: TempScopedNodeJsSyncHost;
-  let tree: UnitTestTree;
-  let tmpDirPath: string;
-  let previousWorkingDir: string;
-
-  beforeEach(() => {
-    runner = new SchematicTestRunner('test', require.resolve('./test-migrations.json'));
-    host = new TempScopedNodeJsSyncHost();
-    tree = new UnitTestTree(new HostTree(host));
-
-    writeFile('/tsconfig.json', JSON.stringify({
-      compilerOptions: {
-        lib: ['es2015'],
-      }
-    }));
-    writeFile('/angular.json', JSON.stringify({
-      projects: {t: {architect: {build: {options: {tsConfig: './tsconfig.json'}}}}}
-    }));
-
-    previousWorkingDir = shx.pwd();
-    tmpDirPath = getSystemPath(host.root);
-
-    // Switch into the temporary directory path. This allows us to run
-    // the schematic against our custom unit test tree.
-    shx.cd(tmpDirPath);
-  });
-
-  afterEach(() => {
-    shx.cd(previousWorkingDir);
-    shx.rm('-r', tmpDirPath);
-  });
-
-  it('should add @Injectable to pipes that do not have it', async() => {
-    writeFile('/index.ts', `
-      import { Pipe } from '@angular/core';
-
-      @Pipe({ name: 'myPipe' })
-      export class MyPipe {
-      }
-    `);
-
-    await runMigration();
-    expect(tree.readContent('/index.ts'))
-        .toMatch(/@Injectable\(\)\s+@Pipe\(\{ name: 'myPipe' \}\)\s+export class MyPipe/);
-  });
-
-  it('should add @Injectable to pipes that do not have it (BOM)', () => {
-    writeFile('/index.ts', `\uFEFF
-      import { Pipe } from '@angular/core';
-
-      @Pipe({ name: 'myPipe' })
-      export class MyPipe {
-      }
-    `);
-
-    runMigration();
-    expect(tree.readContent('/index.ts'))
-        .toMatch(/@Injectable\(\)\s+@Pipe\(\{ name: 'myPipe' \}\)\s+export class MyPipe/);
-  });
-
-  it('should add an import for Injectable to the @angular/core import declaration', async() => {
-    writeFile('/index.ts', `
-      import { Pipe } from '@angular/core';
-
-      @Pipe()
-      export class MyPipe {
-      }
-    `);
-
-    await runMigration();
-
-    const content = tree.readContent('/index.ts');
-    expect(content).toContain('import { Pipe, Injectable } from \'@angular/core\'');
-    expect((content.match(/import/g) || []).length).toBe(1, 'Expected only one import statement');
-  });
-
-  it('should not add an import for Injectable if it is imported already', async() => {
-    writeFile('/index.ts', `
-      import { Pipe, Injectable, NgModule } from '@angular/core';
-
-      @Pipe()
-      export class MyPipe {
-      }
-    `);
-
-    await runMigration();
-    expect(tree.readContent('/index.ts'))
-        .toContain('import { Pipe, Injectable, NgModule } from \'@angular/core\'');
-  });
-
-  it('should do nothing if the pipe is marked as injectable already', async() => {
-    const source = `
-      import { Injectable, Pipe } from '@angular/core';
-
-      @Injectable()
-      @Pipe()
-      export class MyPipe {
-      }
-    `;
-
-    writeFile('/index.ts', source);
-    await runMigration();
-    expect(tree.readContent('/index.ts')).toBe(source);
-  });
-
-  it('should not add @Injectable if @Pipe was not imported from @angular/core', async() => {
-    const source = `
-      import { Pipe } from '@not-angular/core';
-
-      @Pipe()
-      export class MyPipe {
-      }
-    `;
-
-    writeFile('/index.ts', source);
-    await runMigration();
-    expect(tree.readContent('/index.ts')).toBe(source);
-  });
-
-  function writeFile(filePath: string, contents: string) {
-    host.sync.write(normalize(filePath), virtualFs.stringToFileBuffer(contents));
-  }
-
-  function runMigration() {
-    runner.runSchematicAsync('migration-injectable-pipe', {}, tree).toPromise();
-  }
-});

packages/core/schematics/test/test-migrations.json

@@ -2,10 +2,6 @@
   // Migrations which are not publicly enabled but still run as part of tests need to
   // be part of a schematic collection in order to be able to run it.
   "schematics": {
-    "migration-injectable-pipe": {
-      "description": "Migrates all Pipe classes so that they have an Injectable annotation",
-      "factory": "../migrations/injectable-pipe/index"
-    },
     "migration-missing-injectable": {
       "description": "Migrates all declared undecorated providers with the @Injectable decorator",
       "factory": "../migrations/missing-injectable/index"

packages/core/schematics/tsconfig.json

@@ -1,10 +1,8 @@
 {
   "compilerOptions": {
     "noImplicitReturns": true,
-    "noImplicitAny": true,
     "noFallthroughCasesInSwitch": true,
-    "strictNullChecks": true,
-    "strictPropertyInitialization": true,
+    "strict": true,
     "lib": ["es2015"],
     "types": [],
     "baseUrl": ".",