release: cut the v9.1.4 release

Previously the exec command was used, however the exec command would
exit the original calling script regardless of the whether exit was
called.  This caused the release script to always exit after the
pre-check phase.

PR Close #36862

.circleci/config.yml

@@ -236,7 +236,7 @@ jobs:
               git config user.name "angular-ci"
               git config user.email "angular-ci"
               # Rebase PR on top of target branch.
-              node tools/rebase-pr.js angular/angular ${CIRCLE_PR_NUMBER}
+              node tools/rebase-pr.js
             else
               echo "This build is not over a PR, nothing to do."
             fi
@@ -278,7 +278,8 @@ jobs:
       - run: 'yarn bazel:lint ||
               (echo -e "\n.bzl files have lint errors. Please run ''yarn bazel:lint-fix''"; exit 1)'
 
-      - run: yarn -s lint --branch $CI_GIT_BASE_REVISION
+      - run: yarn -s tslint
+      - run: yarn -s ng-dev format changed $CI_GIT_BASE_REVISION --check
       - run: yarn -s ts-circular-deps:check
       - run: yarn -s ng-dev pullapprove verify
       - run: yarn -s ng-dev commit-message validate-range --range $CI_COMMIT_RANGE

.circleci/env.sh

@@ -22,6 +22,7 @@ else
   ####################################################################################################
   # See https://circleci.com/docs/2.0/env-vars/#built-in-environment-variables for more info.
   ####################################################################################################
+  setPublicVar CI "$CI"
   setPublicVar PROJECT_ROOT "$projectDir";
   setPublicVar CI_AIO_MIN_PWA_SCORE "95";
   # This is the branch being built; e.g. `pull/12345` for PR builds.
@@ -36,9 +37,8 @@ else
   setPublicVar CI_PULL_REQUEST "${CIRCLE_PR_NUMBER:-false}";
   setPublicVar CI_REPO_NAME "$CIRCLE_PROJECT_REPONAME";
   setPublicVar CI_REPO_OWNER "$CIRCLE_PROJECT_USERNAME";
-
-  # Store a PR's refs and shas so they don't need to be requested multiple times.
-  setPublicVar GITHUB_REFS_AND_SHAS $(node tools/utils/get-refs-and-shas-for-target.js ${CIRCLE_PR_NUMBER:-false} | awk '{ gsub(/"/,"\\\"") } 1');
+  setPublicVar CI_PR_REPONAME "$CIRCLE_PR_REPONAME";
+  setPublicVar CI_PR_USERNAME "$CIRCLE_PR_USERNAME";
 
 
   ####################################################################################################
@@ -82,7 +82,7 @@ else
   setPublicVar COMPONENTS_REPO_BRANCH "master"
   # **NOTE**: When updating the commit SHA, also update the cache key in the CircleCI `config.yml`.
   setPublicVar COMPONENTS_REPO_COMMIT "598db096e668aa7e9debd56eedfd127b7a55e371"
-  
+
   # Save the created BASH_ENV into the bash env cache file.
   cat "$BASH_ENV" >> $bashEnvCachePath;
 fi

.dev-infra.json

@@ -1,7 +1,7 @@
 {
   "commitMessage": {
     "maxLength": 120,
-    "minBodyLength": 0,
+    "minBodyLength": 100,
     "types": [
       "build",
       "ci",
@@ -43,5 +43,27 @@
       "ve",
       "zone.js"
     ]
+  },
+  "format": {
+    "matchers": [
+      "dev-infra/**/*.{js,ts}",
+      "packages/**/*.{js,ts}",
+      "!packages/zone.js",
+      "!packages/common/locales/**/*.{js,ts}",
+      "!packages/common/src/i18n/available_locales.ts",
+      "!packages/common/src/i18n/currencies.ts",
+      "!packages/common/src/i18n/locale_en.ts",
+      "modules/benchmarks/**/*.{js,ts}",
+      "modules/playground/**/*.{js,ts}",
+      "tools/**/*.{js,ts}",
+      "!tools/gulp-tasks/cldr/extract.js",
+      "!tools/public_api_guard/**/*.d.ts",
+      "!tools/ts-api-guardian/test/fixtures/**",
+      "./*.{js,ts}",
+      "!**/node_modules/**",
+      "!**/dist/**",
+      "!**/built/**",
+      "!shims_for_IE.js"
+    ]
   }
-}
+}

.pullapprove.yml

@@ -189,7 +189,7 @@ groups:
       - *can-be-global-approved
       - *can-be-global-docs-approved
       - >
-        contains_any_globs(files, [
+        contains_any_globs(files.exclude('packages/compiler-cli/ngcc/**'), [
           'packages/compiler/**',
           'packages/examples/compiler/**',
           'packages/compiler-cli/**',
@@ -198,10 +198,6 @@ groups:
           'aio/content/guide/aot-metadata-errors.md',
           'aio/content/guide/template-typecheck.md '
           ])
-      - >
-        not contains_any_globs(files, [
-          'packages/compiler-cli/ngcc/**'
-          ])
     reviewers:
       users:
         - alxhub
@@ -217,10 +213,7 @@ groups:
     conditions:
       - *can-be-global-approved
       - *can-be-global-docs-approved
-      - >
-        contains_any_globs(files, [
-          'packages/compiler-cli/ngcc/**'
-          ])
+      - files.include('packages/compiler-cli/ngcc/**')
     reviewers:
       users:
         - alxhub
@@ -229,6 +222,22 @@ groups:
         - petebacondarwin
 
 
+  # =========================================================
+  #  Framework: Migrations
+  # =========================================================
+  fw-migrations:
+    conditions:
+      - *can-be-global-approved
+      - *can-be-global-docs-approved
+      - files.include("packages/core/schematics/**")
+    reviewers:
+      users:
+        - alxhub
+        - crisbeto
+        - devversion
+        - kara
+
+
   # =========================================================
   #  Framework: Core
   # =========================================================
@@ -237,7 +246,7 @@ groups:
       - *can-be-global-approved
       - *can-be-global-docs-approved
       - >
-        contains_any_globs(files, [
+        contains_any_globs(files.exclude("packages/core/schematics/**"), [
           'packages/core/**',
           'packages/examples/core/**',
           'packages/common/**',
@@ -566,6 +575,7 @@ groups:
           ])
     reviewers:
       users:
+        - AndrewKushnir
         - IgorMinar
         - kara
         - pkozlowski-opensource
@@ -848,7 +858,7 @@ groups:
           'aio/content/images/guide/deployment/**',
           'aio/content/guide/file-structure.md',
           'aio/content/guide/ivy.md',
-          'aio/content/guide/web-worker.md'
+          'aio/content/guide/web-worker.md',
           'aio/content/guide/workspace-config.md',
           ])
     reviewers:
@@ -1027,8 +1037,7 @@ groups:
       - *can-be-global-approved
       - >
         contains_any_globs(files, [
-          'aio/scripts/_payload-limits.json',
-          'integration/_payload-limits.json'
+          'goldens/size-tracking/**'
           ])
     reviewers:
       users:
@@ -1044,7 +1053,7 @@ groups:
       - *can-be-global-approved
       - >
         contains_any_globs(files, [
-          'goldens/packages-circular-deps.json'
+          'goldens/circular-deps/packages.json'
         ])
     reviewers:
       users:

.yarn/releases/yarn-1.22.4.js

@@ -34805,15 +34805,27 @@ function hasMergeConflicts(str) {
 function parse(str, fileLoc) {
   const parser = new Parser(str, fileLoc);
   parser.next();
-  try {
-    return parser.parse();
-  } catch (error1) {
+
+  if (!fileLoc.endsWith(`.yml`)) {
     try {
-      return safeLoad(str, {
-        schema: FAILSAFE_SCHEMA
-      });
-    } catch (error2) {
-      throw error1;
+      return parser.parse();
+    } catch (error1) {
+      try {
+        return safeLoad(str, {
+          schema: FAILSAFE_SCHEMA
+        });
+      } catch (error2) {
+        throw error1;
+      }
+    }
+  } else {
+    const result = safeLoad(str, {
+      schema: FAILSAFE_SCHEMA
+    });
+    if (typeof result === 'object') {
+      return result;
+    } else {
+      return {};
     }
   }
 }
@@ -46666,7 +46678,7 @@ function mkdirfix (name, opts, cb) {
 /* 194 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"yarn","installationMethod":"unknown","version":"1.21.1","license":"BSD-2-Clause","preferGlobal":true,"description":"📦🐈 Fast, reliable, and secure dependency management.","dependencies":{"@zkochan/cmd-shim":"^3.1.0","babel-runtime":"^6.26.0","bytes":"^3.0.0","camelcase":"^4.0.0","chalk":"^2.1.0","cli-table3":"^0.4.0","commander":"^2.9.0","death":"^1.0.0","debug":"^3.0.0","deep-equal":"^1.0.1","detect-indent":"^5.0.0","dnscache":"^1.0.1","glob":"^7.1.1","gunzip-maybe":"^1.4.0","hash-for-dep":"^1.2.3","imports-loader":"^0.8.0","ini":"^1.3.4","inquirer":"^6.2.0","invariant":"^2.2.0","is-builtin-module":"^2.0.0","is-ci":"^1.0.10","is-webpack-bundle":"^1.0.0","js-yaml":"^3.13.1","leven":"^2.0.0","loud-rejection":"^1.2.0","micromatch":"^2.3.11","mkdirp":"^0.5.1","node-emoji":"^1.6.1","normalize-url":"^2.0.0","npm-logical-tree":"^1.2.1","object-path":"^0.11.2","proper-lockfile":"^2.0.0","puka":"^1.0.0","read":"^1.0.7","request":"^2.87.0","request-capture-har":"^1.2.2","rimraf":"^2.5.0","semver":"^5.1.0","ssri":"^5.3.0","strip-ansi":"^4.0.0","strip-bom":"^3.0.0","tar-fs":"^1.16.0","tar-stream":"^1.6.1","uuid":"^3.0.1","v8-compile-cache":"^2.0.0","validate-npm-package-license":"^3.0.4","yn":"^2.0.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^7.2.3","babel-loader":"^6.2.5","babel-plugin-array-includes":"^2.0.3","babel-plugin-inline-import":"^3.0.0","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-inline-imports-commonjs":"^1.0.0","babel-plugin-transform-runtime":"^6.4.3","babel-preset-env":"^1.6.0","babel-preset-flow":"^6.23.0","babel-preset-stage-0":"^6.0.0","babylon":"^6.5.0","commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","eslint":"^4.3.0","eslint-config-fb-strict":"^22.0.0","eslint-plugin-babel":"^5.0.0","eslint-plugin-flowtype":"^2.35.0","eslint-plugin-jasmine":"^2.6.2","eslint-plugin-jest":"^21.0.0","eslint-plugin-jsx-a11y":"^6.0.2","eslint-plugin-prefer-object-spread":"^1.2.1","eslint-plugin-prettier":"^2.1.2","eslint-plugin-react":"^7.1.0","eslint-plugin-relay":"^0.0.28","eslint-plugin-yarn-internal":"file:scripts/eslint-rules","execa":"^0.11.0","fancy-log":"^1.3.2","flow-bin":"^0.66.0","git-release-notes":"^3.0.0","gulp":"^4.0.0","gulp-babel":"^7.0.0","gulp-if":"^2.0.1","gulp-newer":"^1.0.0","gulp-plumber":"^1.0.1","gulp-sourcemaps":"^2.2.0","jest":"^22.4.4","jsinspect":"^0.12.6","minimatch":"^3.0.4","mock-stdin":"^0.3.0","prettier":"^1.5.2","string-replace-loader":"^2.1.1","temp":"^0.8.3","webpack":"^2.1.0-beta.25","yargs":"^6.3.0"},"resolutions":{"sshpk":"^1.14.2"},"engines":{"node":">=4.0.0"},"repository":"yarnpkg/yarn","bin":{"yarn":"./bin/yarn.js","yarnpkg":"./bin/yarn.js"},"scripts":{"build":"gulp build","build-bundle":"node ./scripts/build-webpack.js","build-chocolatey":"powershell ./scripts/build-chocolatey.ps1","build-deb":"./scripts/build-deb.sh","build-dist":"bash ./scripts/build-dist.sh","build-win-installer":"scripts\\build-windows-installer.bat","changelog":"git-release-notes $(git describe --tags --abbrev=0 $(git describe --tags --abbrev=0)^)..$(git describe --tags --abbrev=0) scripts/changelog.md","dupe-check":"yarn jsinspect ./src","lint":"eslint . && flow check","pkg-tests":"yarn --cwd packages/pkg-tests jest yarn.test.js","prettier":"eslint src __tests__ --fix","release-branch":"./scripts/release-branch.sh","test":"yarn lint && yarn test-only","test-only":"node --max_old_space_size=4096 node_modules/jest/bin/jest.js --verbose","test-only-debug":"node --inspect-brk --max_old_space_size=4096 node_modules/jest/bin/jest.js --runInBand --verbose","test-coverage":"node --max_old_space_size=4096 node_modules/jest/bin/jest.js --coverage --verbose","watch":"gulp watch","commit":"git-cz"},"jest":{"collectCoverageFrom":["src/**/*.js"],"testEnvironment":"node","modulePathIgnorePatterns":["__tests__/fixtures/","packages/pkg-tests/pkg-tests-fixtures","dist/"],"testPathIgnorePatterns":["__tests__/(fixtures|__mocks__)/","updates/","_(temp|mock|install|init|helpers).js$","packages/pkg-tests"]},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}}}
+module.exports = {"name":"yarn","installationMethod":"unknown","version":"1.22.4","license":"BSD-2-Clause","preferGlobal":true,"description":"📦🐈 Fast, reliable, and secure dependency management.","dependencies":{"@zkochan/cmd-shim":"^3.1.0","babel-runtime":"^6.26.0","bytes":"^3.0.0","camelcase":"^4.0.0","chalk":"^2.1.0","cli-table3":"^0.4.0","commander":"^2.9.0","death":"^1.0.0","debug":"^3.0.0","deep-equal":"^1.0.1","detect-indent":"^5.0.0","dnscache":"^1.0.1","glob":"^7.1.1","gunzip-maybe":"^1.4.0","hash-for-dep":"^1.2.3","imports-loader":"^0.8.0","ini":"^1.3.4","inquirer":"^6.2.0","invariant":"^2.2.0","is-builtin-module":"^2.0.0","is-ci":"^1.0.10","is-webpack-bundle":"^1.0.0","js-yaml":"^3.13.1","leven":"^2.0.0","loud-rejection":"^1.2.0","micromatch":"^2.3.11","mkdirp":"^0.5.1","node-emoji":"^1.6.1","normalize-url":"^2.0.0","npm-logical-tree":"^1.2.1","object-path":"^0.11.2","proper-lockfile":"^2.0.0","puka":"^1.0.0","read":"^1.0.7","request":"^2.87.0","request-capture-har":"^1.2.2","rimraf":"^2.5.0","semver":"^5.1.0","ssri":"^5.3.0","strip-ansi":"^4.0.0","strip-bom":"^3.0.0","tar-fs":"^1.16.0","tar-stream":"^1.6.1","uuid":"^3.0.1","v8-compile-cache":"^2.0.0","validate-npm-package-license":"^3.0.4","yn":"^2.0.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^7.2.3","babel-loader":"^6.2.5","babel-plugin-array-includes":"^2.0.3","babel-plugin-inline-import":"^3.0.0","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-inline-imports-commonjs":"^1.0.0","babel-plugin-transform-runtime":"^6.4.3","babel-preset-env":"^1.6.0","babel-preset-flow":"^6.23.0","babel-preset-stage-0":"^6.0.0","babylon":"^6.5.0","commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","eslint":"^4.3.0","eslint-config-fb-strict":"^22.0.0","eslint-plugin-babel":"^5.0.0","eslint-plugin-flowtype":"^2.35.0","eslint-plugin-jasmine":"^2.6.2","eslint-plugin-jest":"^21.0.0","eslint-plugin-jsx-a11y":"^6.0.2","eslint-plugin-prefer-object-spread":"^1.2.1","eslint-plugin-prettier":"^2.1.2","eslint-plugin-react":"^7.1.0","eslint-plugin-relay":"^0.0.28","eslint-plugin-yarn-internal":"file:scripts/eslint-rules","execa":"^0.11.0","fancy-log":"^1.3.2","flow-bin":"^0.66.0","git-release-notes":"^3.0.0","gulp":"^4.0.0","gulp-babel":"^7.0.0","gulp-if":"^2.0.1","gulp-newer":"^1.0.0","gulp-plumber":"^1.0.1","gulp-sourcemaps":"^2.2.0","jest":"^22.4.4","jsinspect":"^0.12.6","minimatch":"^3.0.4","mock-stdin":"^0.3.0","prettier":"^1.5.2","string-replace-loader":"^2.1.1","temp":"^0.8.3","webpack":"^2.1.0-beta.25","yargs":"^6.3.0"},"resolutions":{"sshpk":"^1.14.2"},"engines":{"node":">=4.0.0"},"repository":"yarnpkg/yarn","bin":{"yarn":"./bin/yarn.js","yarnpkg":"./bin/yarn.js"},"scripts":{"build":"gulp build","build-bundle":"node ./scripts/build-webpack.js","build-chocolatey":"powershell ./scripts/build-chocolatey.ps1","build-deb":"./scripts/build-deb.sh","build-dist":"bash ./scripts/build-dist.sh","build-win-installer":"scripts\\build-windows-installer.bat","changelog":"git-release-notes $(git describe --tags --abbrev=0 $(git describe --tags --abbrev=0)^)..$(git describe --tags --abbrev=0) scripts/changelog.md","dupe-check":"yarn jsinspect ./src","lint":"eslint . && flow check","pkg-tests":"yarn --cwd packages/pkg-tests jest yarn.test.js","prettier":"eslint src __tests__ --fix","release-branch":"./scripts/release-branch.sh","test":"yarn lint && yarn test-only","test-only":"node --max_old_space_size=4096 node_modules/jest/bin/jest.js --verbose","test-only-debug":"node --inspect-brk --max_old_space_size=4096 node_modules/jest/bin/jest.js --runInBand --verbose","test-coverage":"node --max_old_space_size=4096 node_modules/jest/bin/jest.js --coverage --verbose","watch":"gulp watch","commit":"git-cz"},"jest":{"collectCoverageFrom":["src/**/*.js"],"testEnvironment":"node","modulePathIgnorePatterns":["__tests__/fixtures/","packages/pkg-tests/pkg-tests-fixtures","dist/"],"testPathIgnorePatterns":["__tests__/(fixtures|__mocks__)/","updates/","_(temp|mock|install|init|helpers).js$","packages/pkg-tests"]},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}}}
 
 /***/ }),
 /* 195 */
@@ -69876,12 +69888,12 @@ function getRcConfigForFolder(cwd) {
 }
 
 function loadRcFile(fileText, filePath) {
-  var _parse = (0, (_lockfile || _load_lockfile()).parse)(fileText, 'yarnrc');
+  var _parse = (0, (_lockfile || _load_lockfile()).parse)(fileText, filePath);
 
   let values = _parse.object;
 
 
-  if (filePath.match(/\.yml$/)) {
+  if (filePath.match(/\.yml$/) && typeof values.yarnPath === 'string') {
     values = { 'yarn-path': values.yarnPath };
   }
 
@@ -74848,7 +74860,20 @@ let run = exports.run = (() => {
         } else {
           let suggestion;
 
-          for (const commandName in scripts) {
+          for (var _iterator9 = scripts.keys(), _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
+            var _ref16;
+
+            if (_isArray9) {
+              if (_i9 >= _iterator9.length) break;
+              _ref16 = _iterator9[_i9++];
+            } else {
+              _i9 = _iterator9.next();
+              if (_i9.done) break;
+              _ref16 = _i9.value;
+            }
+
+            const commandName = _ref16;
+
             const steps = leven(commandName, action);
             if (steps < 2) {
               suggestion = commandName;
@@ -74933,19 +74958,19 @@ let run = exports.run = (() => {
 
       const printedCommands = new Map();
 
-      for (var _iterator9 = pkgCommands, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
-        var _ref16;
+      for (var _iterator10 = pkgCommands, _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
+        var _ref17;
 
-        if (_isArray9) {
-          if (_i9 >= _iterator9.length) break;
-          _ref16 = _iterator9[_i9++];
+        if (_isArray10) {
+          if (_i10 >= _iterator10.length) break;
+          _ref17 = _iterator10[_i10++];
         } else {
-          _i9 = _iterator9.next();
-          if (_i9.done) break;
-          _ref16 = _i9.value;
+          _i10 = _iterator10.next();
+          if (_i10.done) break;
+          _ref17 = _i10.value;
         }
 
-        const pkgCommand = _ref16;
+        const pkgCommand = _ref17;
 
         const action = scripts.get(pkgCommand);
         invariant(action, 'Action must exists');
@@ -76076,6 +76101,11 @@ class TarballFetcher extends (_baseFetcher || _load_baseFetcher()).default {
       chown: false, // don't chown. just leave as it is
       map: header => {
         header.mtime = now;
+        if (header.linkname) {
+          const basePath = path.posix.dirname(path.join('/', header.name));
+          const jailPath = path.posix.join(basePath, header.linkname);
+          header.linkname = path.posix.relative('/', jailPath);
+        }
         return header;
       },
       fs: patchedFs
@@ -78409,6 +78439,11 @@ class RequestManager {
       rejectNext(err);
     };
 
+    const rejectWithoutUrl = function rejectWithoutUrl(err) {
+      err.message = err.message;
+      rejectNext(err);
+    };
+
     const queueForRetry = reason => {
       const attempts = params.retryAttempts || 0;
       if (attempts >= this.maxRetryAttempts - 1) {
@@ -78464,6 +78499,11 @@ class RequestManager {
           }
         }
 
+        if (res.statusCode === 401 && res.caseless && res.caseless.get('server') === 'GitHub.com') {
+          const message = `${res.body.message}. If using GITHUB_TOKEN in your env, check that it is valid.`;
+          rejectWithoutUrl(new Error(this.reporter.lang('unauthorizedResponse', res.caseless.get('server'), message)));
+        }
+
         if (res.statusCode === 401 && res.headers['www-authenticate']) {
           const authMethods = res.headers['www-authenticate'].split(/,\s*/).map(s => s.toLowerCase());
 
@@ -96966,12 +97006,14 @@ function _load_asyncToGenerator() {
 
 let run = exports.run = (() => {
   var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    if (flags.install) {
+    const installVersion = flags[`2`] ? `berry` : flags.install;
+
+    if (installVersion) {
       const lockfilePath = path.resolve(config.cwd, 'yarn.lock');
       if (!(yield (_fs || _load_fs()).exists(lockfilePath))) {
         yield (_fs || _load_fs()).writeFile(lockfilePath, '');
       }
-      yield (_child || _load_child()).spawn((_constants || _load_constants()).NODE_BIN_PATH, [process.argv[1], 'policies', 'set-version', flags.install], {
+      yield (_child || _load_child()).spawn((_constants || _load_constants()).NODE_BIN_PATH, [process.argv[1], 'policies', 'set-version', installVersion], {
         stdio: 'inherit',
         cwd: config.cwd
       });
@@ -97266,6 +97308,7 @@ function setFlags(commander) {
   commander.option('-y, --yes', 'use default options');
   commander.option('-p, --private', 'use default options and private true');
   commander.option('-i, --install <value>', 'install a specific Yarn release');
+  commander.option('-2', 'generates the project using Yarn 2');
 }
 
 function hasWrapper(commander, args) {
@@ -98254,6 +98297,7 @@ var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).def
 
       let bundleUrl;
       let bundleVersion;
+      let isV2 = false;
 
       if (range === 'nightly' || range === 'nightlies') {
         bundleUrl = 'https://nightly.yarnpkg.com/latest.js';
@@ -98261,10 +98305,18 @@ var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).def
       } else if (range === 'berry' || range === 'v2' || range === '2') {
         bundleUrl = 'https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js';
         bundleVersion = 'berry';
+        isV2 = true;
       } else {
-        const releases = yield fetchReleases(config, {
-          includePrereleases: allowRc
-        });
+        let releases = [];
+
+        try {
+          releases = yield fetchReleases(config, {
+            includePrereleases: allowRc
+          });
+        } catch (e) {
+          reporter.error(e.message);
+          return;
+        }
 
         const release = releases.find(function (release) {
           // $FlowFixMe
@@ -98285,7 +98337,6 @@ var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).def
       reporter.log(`Downloading ${chalk.green(bundleUrl)}...`);
 
       const bundle = yield fetchBundle(config, bundleUrl);
-      const rc = (0, (_rc || _load_rc()).getRcConfigForFolder)(config.lockfileFolder);
 
       const yarnPath = path.resolve(config.lockfileFolder, `.yarn/releases/yarn-${bundleVersion}.js`);
       reporter.log(`Saving it into ${chalk.magenta(yarnPath)}...`);
@@ -98293,10 +98344,22 @@ var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).def
       yield (_fs || _load_fs()).writeFile(yarnPath, bundle);
       yield (_fs || _load_fs()).chmod(yarnPath, 0o755);
 
-      const rcPath = `${config.lockfileFolder}/.yarnrc`;
-      reporter.log(`Updating ${chalk.magenta(rcPath)}...`);
-      rc['yarn-path'] = path.relative(config.lockfileFolder, yarnPath);
-      yield (_fs || _load_fs()).writeFilePreservingEol(rcPath, `${(0, (_lockfile || _load_lockfile()).stringify)(rc)}\n`);
+      const targetPath = path.relative(config.lockfileFolder, yarnPath).replace(/\\/g, '/');
+
+      if (isV2) {
+        const rcPath = `${config.lockfileFolder}/.yarnrc.yml`;
+        reporter.log(`Updating ${chalk.magenta(rcPath)}...`);
+
+        yield (_fs || _load_fs()).writeFilePreservingEol(rcPath, `yarnPath: ${JSON.stringify(targetPath)}\n`);
+      } else {
+        const rcPath = `${config.lockfileFolder}/.yarnrc`;
+        reporter.log(`Updating ${chalk.magenta(rcPath)}...`);
+
+        const rc = (0, (_rc || _load_rc()).getRcConfigForFolder)(config.lockfileFolder);
+        rc['yarn-path'] = targetPath;
+
+        yield (_fs || _load_fs()).writeFilePreservingEol(rcPath, `${(0, (_lockfile || _load_lockfile()).stringify)(rc)}\n`);
+      }
 
       reporter.log(`Done!`);
     })();
@@ -99619,11 +99682,11 @@ let run = exports.run = (() => {
       throw new (_errors || _load_errors()).MessageError(reporter.lang('workspaceRootNotFound', config.cwd));
     }
 
-    if (flags.originalArgs < 1) {
+    if (args.length < 1) {
       throw new (_errors || _load_errors()).MessageError(reporter.lang('workspaceMissingWorkspace'));
     }
 
-    if (flags.originalArgs < 2) {
+    if (args.length < 2) {
       throw new (_errors || _load_errors()).MessageError(reporter.lang('workspaceMissingCommand'));
     }
 
@@ -99632,7 +99695,7 @@ let run = exports.run = (() => {
 
     const workspaces = yield config.resolveWorkspaces(workspaceRootFolder, manifest);
 
-    var _ref2 = flags.originalArgs || [];
+    var _ref2 = args || [];
 
     const workspaceName = _ref2[0],
           rest = _ref2.slice(1);
@@ -99818,28 +99881,23 @@ let runScript = exports.runScript = (() => {
     const workspaces = yield config.resolveWorkspaces(workspaceRootFolder, manifest);
 
     try {
-      var _ref6 = flags.originalArgs || [];
-
-      const _ = _ref6[0],
-            rest = _ref6.slice(1);
-
       for (var _iterator4 = Object.keys(workspaces), _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-        var _ref7;
+        var _ref6;
 
         if (_isArray4) {
           if (_i4 >= _iterator4.length) break;
-          _ref7 = _iterator4[_i4++];
+          _ref6 = _iterator4[_i4++];
         } else {
           _i4 = _iterator4.next();
           if (_i4.done) break;
-          _ref7 = _i4.value;
+          _ref6 = _i4.value;
         }
 
-        const workspaceName = _ref7;
+        const workspaceName = _ref6;
         const loc = workspaces[workspaceName].loc;
 
         reporter.log(`${os.EOL}> ${workspaceName}`);
-        yield (_child || _load_child()).spawn((_constants2 || _load_constants2()).NODE_BIN_PATH, [(_constants2 || _load_constants2()).YARN_BIN_PATH, ...rest], {
+        yield (_child || _load_child()).spawn((_constants2 || _load_constants2()).NODE_BIN_PATH, [(_constants2 || _load_constants2()).YARN_BIN_PATH, 'run', ...args], {
           stdio: 'inherit',
           cwd: loc
         });
@@ -100059,7 +100117,11 @@ let main = exports.main = (() => {
       commandName = 'install';
       isKnownCommand = true;
     }
-
+    if (commandName === 'set' && args[0] === 'version') {
+      commandName = 'policies';
+      args.splice(0, 1, 'set-version');
+      isKnownCommand = true;
+    }
     if (!isKnownCommand) {
       // if command is not recognized, then set default to `run`
       args.unshift(commandName);
@@ -100070,15 +100132,20 @@ let main = exports.main = (() => {
     let warnAboutRunDashDash = false;
     // we are using "yarn <script> -abc", "yarn run <script> -abc", or "yarn node -abc", we want -abc
     // to be script options, not yarn options
-    const PROXY_COMMANDS = new Set([`run`, `create`, `node`]);
-    if (PROXY_COMMANDS.has(commandName)) {
+
+    // PROXY_COMMANDS is a map of command name to the number of preservedArgs
+    const PROXY_COMMANDS = {
+      run: 1, // yarn run {command}
+      create: 1, // yarn create {project}
+      node: 0, // yarn node
+      workspaces: 1, // yarn workspaces {command}
+      workspace: 2 // yarn workspace {package} {command}
+    };
+    if (PROXY_COMMANDS.hasOwnProperty(commandName)) {
       if (endArgs.length === 0) {
-        let preservedArgs = 0;
-        // the "run" and "create" command take one argument that we want to parse as usual (the
-        // script/package name), hence the splice(1)
-        if (command === (_index3 || _load_index3()).default.run || command === (_index3 || _load_index3()).default.create) {
-          preservedArgs += 1;
-        }
+        // $FlowFixMe doesn't like that PROXY_COMMANDS doesn't have keys for all commands.
+        let preservedArgs = PROXY_COMMANDS[commandName];
+
         // If the --into option immediately follows the command (or the script name in the "run/create"
         // case), we parse them as regular options so that we can cd into them
         if (args[preservedArgs] === `--into`) {
@@ -100090,7 +100157,6 @@ let main = exports.main = (() => {
       }
     }
 
-    (_commander || _load_commander()).default.originalArgs = args;
     args = [...preCommandArgs, ...args];
 
     command.setFlags((_commander || _load_commander()).default);
@@ -100532,6 +100598,11 @@ let start = (() => {
       const opts = { stdio: 'inherit', env: Object.assign({}, process.env, { YARN_IGNORE_PATH: 1 }) };
       let exitCode = 0;
 
+      process.on(`SIGINT`, function () {
+        // We don't want SIGINT to kill our process; we want it to kill the
+        // innermost process, whose end will cause our own to exit.
+      });
+
       try {
         if (yarnPath.endsWith(`.js`)) {
           exitCode = yield (0, (_child || _load_child()).spawnp)(process.execPath, [yarnPath, ...argv], opts);
@@ -104923,6 +104994,7 @@ const messages = {
   errorExtractingTarball: 'Extracting tar content of $1 failed, the file appears to be corrupt: $0',
   updateInstalling: 'Installing $0...',
   hostedGitResolveError: 'Error connecting to repository. Please, check the url.',
+  unauthorizedResponse: 'Received a 401 from $0. $1',
 
   unknownFetcherFor: 'Unknown fetcher for $0',
 
@@ -106797,7 +106869,7 @@ const semver = __webpack_require__(22);
 const path = __webpack_require__(0);
 const url = __webpack_require__(24);
 
-const VALID_BIN_KEYS = /^[a-z0-9_-]+$/i;
+const VALID_BIN_KEYS = /^(?!\.{0,2}$)[a-z0-9._-]+$/i;
 
 const LICENSE_RENAMES = {
   'MIT/X11': 'MIT',
@@ -107660,7 +107732,11 @@ function parseRcPaths(paths, parser) {
     try {
       return parser((0, (_fs || _load_fs()).readFileSync)(path).toString(), path);
     } catch (error) {
-      return {};
+      if (error.code === 'ENOENT' || error.code === 'EISDIR') {
+        return {};
+      } else {
+        throw error;
+      }
     }
   }));
 }

.yarnrc

@@ -2,4 +2,4 @@
 # yarn lockfile v1
 
 
-yarn-path ".yarn/releases/yarn-1.21.1.js"
+yarn-path ".yarn/releases/yarn-1.22.4.js"

CHANGELOG.md

@@ -1,3 +1,61 @@
+<a name="9.1.4"></a>
+## [9.1.4](https://github.com/angular/angular/compare/9.1.3...9.1.4) (2020-04-29)
+
+
+### Bug Fixes
+
+* **core:** attempt to recover from user errors during creation ([#36381](https://github.com/angular/angular/issues/36381)) ([d743331](https://github.com/angular/angular/commit/d743331)), closes [#31221](https://github.com/angular/angular/issues/31221)
+* **core:** handle synthetic props in Directive host bindings correctly ([#35568](https://github.com/angular/angular/issues/35568)) ([0f389fa](https://github.com/angular/angular/commit/0f389fa)), closes [#35501](https://github.com/angular/angular/issues/35501)
+* **language-service:** disable update the `[@angular](https://github.com/angular)/core` module ([#36783](https://github.com/angular/angular/issues/36783)) ([d3a77ea](https://github.com/angular/angular/commit/d3a77ea))
+* **localize:** include legacy ids when describing messages ([#36761](https://github.com/angular/angular/issues/36761)) ([aa94cd5](https://github.com/angular/angular/commit/aa94cd5))
+* **ngcc:** recognize enum declarations emitted in JavaScript ([#36550](https://github.com/angular/angular/issues/36550)) ([c440165](https://github.com/angular/angular/commit/c440165)), closes [#35584](https://github.com/angular/angular/issues/35584)
+
+
+
+<a name="9.1.3"></a>
+## [9.1.3](https://github.com/angular/angular/compare/9.1.2...9.1.3) (2020-04-22)
+
+
+### Bug Fixes
+
+* **compiler:** avoid generating i18n attributes in plain form ([#36422](https://github.com/angular/angular/issues/36422)) ([08b8b51](https://github.com/angular/angular/commit/08b8b51))
+* **core:** do not use unbound attributes as inputs to structural directives ([#36441](https://github.com/angular/angular/issues/36441)) ([c0ed57d](https://github.com/angular/angular/commit/c0ed57d))
+* **core:** handle empty translations correctly ([#36499](https://github.com/angular/angular/issues/36499)) ([a5ea100](https://github.com/angular/angular/commit/a5ea100)), closes [#36476](https://github.com/angular/angular/issues/36476)
+* **core:** missing-injectable migration should not migrate `@NgModule` classes ([#36369](https://github.com/angular/angular/issues/36369)) ([0bd50e2](https://github.com/angular/angular/commit/0bd50e2)), closes [#35700](https://github.com/angular/angular/issues/35700)
+* **core:** pipes injecting viewProviders when used on a component host node ([#36512](https://github.com/angular/angular/issues/36512)) ([5ae8473](https://github.com/angular/angular/commit/5ae8473)), closes [#36146](https://github.com/angular/angular/issues/36146)
+* **core:** prevent unknown property check for AOT-compiled components ([#36072](https://github.com/angular/angular/issues/36072)) ([fe1d9ba](https://github.com/angular/angular/commit/fe1d9ba)), closes [#35945](https://github.com/angular/angular/issues/35945)
+* **core:** properly identify modules affected by overrides in TestBed ([#36649](https://github.com/angular/angular/issues/36649)) ([9724169](https://github.com/angular/angular/commit/9724169)), closes [#36619](https://github.com/angular/angular/issues/36619)
+* **language-service:** properly evaluate types in comparable expressions ([#36529](https://github.com/angular/angular/issues/36529)) ([5bab498](https://github.com/angular/angular/commit/5bab498))
+* **ngcc:** display unlocker process output in sync mode ([#36637](https://github.com/angular/angular/issues/36637)) ([da159bd](https://github.com/angular/angular/commit/da159bd)), closes [/github.com/nodejs/node/issues/3596#issuecomment-250890218](https://github.com//github.com/nodejs/node/issues/3596/issues/issuecomment-250890218)
+* **ngcc:** do not use cached file-system ([#36687](https://github.com/angular/angular/issues/36687)) ([18be33a](https://github.com/angular/angular/commit/18be33a)), closes [/github.com/angular/angular-cli/issues/16860#issuecomment-614694269](https://github.com//github.com/angular/angular-cli/issues/16860/issues/issuecomment-614694269)
+
+
+
+<a name="9.1.2"></a>
+## [9.1.2](https://github.com/angular/angular/compare/9.1.1...9.1.2) (2020-04-15)
+
+
+### Bug Fixes
+
+* **compiler:** handle type references to namespaced symbols correctly ([#36106](https://github.com/angular/angular/issues/36106)) ([468cf69](https://github.com/angular/angular/commit/468cf69)), closes [#36006](https://github.com/angular/angular/issues/36006)
+* **core:** undecorated-classes-with-decorated-fields migration should avoid error if base class has no value declaration ([#36543](https://github.com/angular/angular/issues/36543)) ([3992341](https://github.com/angular/angular/commit/3992341)), closes [#36522](https://github.com/angular/angular/issues/36522)
+* **ngcc:** correctly detect external files from nested `node_modules/` ([#36559](https://github.com/angular/angular/issues/36559)) ([8c559ef](https://github.com/angular/angular/commit/8c559ef)), closes [#36526](https://github.com/angular/angular/issues/36526)
+* **ngcc:** display output from the unlocker process on Windows ([#36569](https://github.com/angular/angular/issues/36569)) ([12266b2](https://github.com/angular/angular/commit/12266b2))
+* **ngcc:** do not spawn unlocker processes on cluster workers ([#36569](https://github.com/angular/angular/issues/36569)) ([e385abc](https://github.com/angular/angular/commit/e385abc)), closes [#35861](https://github.com/angular/angular/issues/35861)
+* **ngcc:** do not warn if `paths` mapping does not exist ([#36525](https://github.com/angular/angular/issues/36525)) ([33eee43](https://github.com/angular/angular/commit/33eee43)), closes [#36518](https://github.com/angular/angular/issues/36518)
+* **ngcc:** force ngcc to exit on error ([#36622](https://github.com/angular/angular/issues/36622)) ([933cbfb](https://github.com/angular/angular/commit/933cbfb)), closes [#36616](https://github.com/angular/angular/issues/36616)
+* **router:** pass correct component to canDeactivate checks when using two or more sibling router-outlets ([#36302](https://github.com/angular/angular/issues/36302)) ([8e7f903](https://github.com/angular/angular/commit/8e7f903)), closes [#34614](https://github.com/angular/angular/issues/34614)
+* **upgrade:** update $locationShim to handle Location changes before initialization ([#36498](https://github.com/angular/angular/issues/36498)) ([a67afcc](https://github.com/angular/angular/commit/a67afcc)), closes [#36492](https://github.com/angular/angular/issues/36492)
+
+
+### Performance Improvements
+
+* **ngcc:** only load  if it is needed ([#36486](https://github.com/angular/angular/issues/36486)) ([e06512b](https://github.com/angular/angular/commit/e06512b))
+* **ngcc:** read dependencies from entry-point manifest ([#36486](https://github.com/angular/angular/issues/36486)) ([918e628](https://github.com/angular/angular/commit/918e628)), closes [#issuecomment-608401834](https://github.com/angular/angular/issues/issuecomment-608401834)
+* **ngcc:** reduce the size of the entry-point manifest file ([#36486](https://github.com/angular/angular/issues/36486)) ([603b094](https://github.com/angular/angular/commit/603b094))
+
+
+
 <a name="9.1.1"></a>
 ## [9.1.1](https://github.com/angular/angular/compare/9.1.0...9.1.1) (2020-04-07)
 

WORKSPACE

@@ -8,8 +8,8 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 # Fetch rules_nodejs so we can install our npm dependencies
 http_archive(
     name = "build_bazel_rules_nodejs",
-    sha256 = "d0c4bb8b902c1658f42eb5563809c70a06e46015d64057d25560b0eb4bdc9007",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/1.5.0/rules_nodejs-1.5.0.tar.gz"],
+    sha256 = "f9e7b9f42ae202cc2d2ce6d698ccb49a9f7f7ea572a78fd451696d03ef2ee116",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/1.6.0/rules_nodejs-1.6.0.tar.gz"],
 )
 
 # Check the rules_nodejs version and download npm dependencies
@@ -17,7 +17,7 @@ http_archive(
 # assert on that.
 load("@build_bazel_rules_nodejs//:index.bzl", "check_rules_nodejs_version", "node_repositories", "yarn_install")
 
-check_rules_nodejs_version(minimum_version_string = "1.5.0")
+check_rules_nodejs_version(minimum_version_string = "1.6.0")
 
 # Setup the Node.js toolchain
 node_repositories(

aio/content/examples/.gitignore

@@ -82,9 +82,6 @@ upgrade-phonecat-2-hybrid/aot/**/*
 # styleguide
 !styleguide/src/systemjs.custom.js
 
-# universal
-!universal/webpack.server.config.js
-
 # stackblitz
 *stackblitz.no-link.html
 
@@ -97,4 +94,4 @@ upgrade-phonecat-3-final/rollup-config.js
 !upgrade-phonecat-*/**/karma-test-shim.js
 
 # schematics
-!schematics-for-libraries/projects/my-lib/package.json
+!schematics-for-libraries/projects/my-lib/package.json

aio/content/examples/router/src/app/app-routing.module.7.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router'; // CLI imports router
+
+const routes: Routes = []; // sets up routes constant where you define your routes
+
+// configures NgModule imports and exports
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

aio/content/examples/router/src/app/app-routing.module.8.ts

@@ -0,0 +1,26 @@
+// #docplaster
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router'; // CLI imports router
+
+// #docregion routes, routes-with-wildcard, redirect
+const routes: Routes = [
+  { path: 'first-component', component: FirstComponent },
+  { path: 'second-component', component: SecondComponent },
+  // #enddocregion routes
+  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
+  { path: '**', component: FirstComponent },
+  // #enddocregion redirect
+  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
+  // #docregion routes
+  // #docregion redirect
+];
+// #enddocregion routes, routes-with-wildcard, redirect
+
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+
+

aio/content/examples/router/src/app/app-routing.module.9.ts

@@ -0,0 +1,28 @@
+// #docplaster
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router'; // CLI imports router
+
+// #docregion child-routes
+const routes: Routes = [
+  { path: 'first-component',
+    component: FirstComponent, // this is the component with the <router-outlet> in the template
+    children: [
+      {
+        path: 'child-a', // child route path
+        component: ChildAComponent // child route component that the router renders
+      },
+      {
+        path: 'child-b',
+        component: ChildBComponent // another child route component that the router renders
+      }
+    ] },
+// #enddocregion child-routes
+
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+
+

aio/content/examples/router/src/app/app.component.4.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css']
+})
+export class AppComponent {
+// #docregion relative-to
+  goToItems() {
+    this.router.navigate(['items'], { relativeTo: this.route });
+  }
+// #enddocregion relative-to
+
+}

aio/content/examples/router/src/app/app.component.7.html

@@ -0,0 +1,10 @@
+<h1>Angular Router App</h1>
+<!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) -->
+<nav>
+  <ul>
+    <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
+    <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
+  </ul>
+</nav>
+<!-- The routed views render in the <router-outlet>-->
+<router-outlet></router-outlet>

aio/content/examples/router/src/app/app.component.8.html

@@ -0,0 +1,26 @@
+<!-- #docregion child-routes-->
+<h2>First Component</h2>
+
+<nav>
+  <ul>
+    <li><a routerLink="child-a">Child A</a></li>
+    <li><a routerLink="child-b">Child B</a></li>
+  </ul>
+</nav>
+
+<router-outlet></router-outlet>
+<!-- #enddocregion child-routes-->
+
+
+<!-- #docregion relative-route-->
+
+<h2>First Component</h2>
+
+<nav>
+  <ul>
+    <li><a routerLink="../second-component">Relative Route to second component</a></li>
+  </ul>
+</nav>
+<router-outlet></router-outlet>
+
+<!-- #enddocregion relative-route-->

aio/content/examples/router/src/app/app.module.8.ts

@@ -0,0 +1,17 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts

@@ -2,7 +2,9 @@
 // #docregion
 import { switchMap } from 'rxjs/operators';
 import { Component, OnInit } from '@angular/core';
+// #docregion imports-route-info
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+// #enddocregion imports-route-info
 import { Observable } from 'rxjs';
 
 import { HeroService }  from '../hero.service';
@@ -16,11 +18,16 @@ import { Hero } from '../hero';
 export class HeroDetailComponent implements OnInit {
   hero$: Observable<Hero>;
 
+  // #docregion activated-route
   constructor(
     private route: ActivatedRoute,
+  // #enddocregion activated-route
     private router: Router,
     private service: HeroService
+  // #docregion activated-route
   ) {}
+  // #enddocregion activated-route
+
 
   ngOnInit() {
     this.hero$ = this.route.paramMap.pipe(

aio/content/examples/toh-pt0/src/main.ts

@@ -8,4 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
+

aio/content/examples/toh-pt1/src/main.ts

@@ -9,5 +9,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
 // #enddocregion

aio/content/examples/toh-pt2/src/main.ts

@@ -9,5 +9,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
 // #enddocregion

aio/content/examples/toh-pt3/src/main.ts

@@ -9,5 +9,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
 // #enddocregion

aio/content/examples/toh-pt4/src/main.ts

@@ -8,4 +8,5 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css

@@ -19,7 +19,6 @@ button {
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  cursor: hand;
 }
 button:hover {
   background-color: #cfd8dc;

aio/content/examples/toh-pt5/src/main.ts

@@ -8,4 +8,5 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

aio/content/examples/toh-pt6/src/app/app.module.ts

@@ -1,5 +1,5 @@
 // #docplaster
-// #docregion, v1
+// #docregion , v1
 import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
@@ -59,6 +59,5 @@ import { MessagesComponent }    from './messages/messages.component';
 // #docregion import-httpclientmodule
 })
 // #enddocregion import-httpclientmodule
-
 export class AppModule { }
 // #enddocregion , v1

aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css

@@ -18,7 +18,7 @@ button {
   border: none;
   padding: 5px 10px;
   border-radius: 4px;
-  cursor: pointer; cursor: hand;
+  cursor: pointer;
 }
 button:hover {
   background-color: #cfd8dc;

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

@@ -33,10 +33,10 @@ export class HeroDetailComponent implements OnInit {
     this.location.back();
   }
 
- // #docregion save
- save(): void {
+  // #docregion save
+  save(): void {
     this.heroService.updateHero(this.hero)
       .subscribe(() => this.goBack());
   }
-// #enddocregion save
+  // #enddocregion save
 }

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

@@ -36,7 +36,7 @@ export class HeroService {
   // #docregion getHeroes, getHeroes-1
   /** GET heroes from the server */
   // #docregion getHeroes-2
-  getHeroes (): Observable<Hero[]> {
+  getHeroes(): Observable<Hero[]> {
     return this.http.get<Hero[]>(this.heroesUrl)
   // #enddocregion getHeroes-1
       .pipe(
@@ -98,7 +98,7 @@ export class HeroService {
 
   // #docregion addHero
   /** POST: add a new hero to the server */
-  addHero (hero: Hero): Observable<Hero> {
+  addHero(hero: Hero): Observable<Hero> {
     return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
       tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
       catchError(this.handleError<Hero>('addHero'))
@@ -108,7 +108,7 @@ export class HeroService {
 
   // #docregion deleteHero
   /** DELETE: delete the hero from the server */
-  deleteHero (hero: Hero | number): Observable<Hero> {
+  deleteHero(hero: Hero | number): Observable<Hero> {
     const id = typeof hero === 'number' ? hero : hero.id;
     const url = `${this.heroesUrl}/${id}`;
 
@@ -121,7 +121,7 @@ export class HeroService {
 
   // #docregion updateHero
   /** PUT: update the hero on the server */
-  updateHero (hero: Hero): Observable<any> {
+  updateHero(hero: Hero): Observable<any> {
     return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
       tap(_ => this.log(`updated hero id=${hero.id}`)),
       catchError(this.handleError<any>('updateHero'))
@@ -136,7 +136,7 @@ export class HeroService {
    * @param operation - name of the operation that failed
    * @param result - optional value to return as the observable result
    */
-  private handleError<T> (operation = 'operation', result?: T) {
+  private handleError<T>(operation = 'operation', result?: T) {
     return (error: any): Observable<T> => {
 
       // TODO: send the error to remote logging infrastructure

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

@@ -30,7 +30,7 @@
 }
 
 .heroes a:hover {
-  color:#607D8B;
+  color: #607D8B;
 }
 
 .heroes .badge {
@@ -38,7 +38,7 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
+  background-color: #405061;
   line-height: 1em;
   position: relative;
   left: -1px;

aio/content/examples/toh-pt6/src/app/in-memory-data.service.ts

@@ -1,7 +1,7 @@
 // #docregion , init
+import { Injectable } from '@angular/core';
 import { InMemoryDbService } from 'angular-in-memory-web-api';
 import { Hero } from './hero';
-import { Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root',

aio/content/examples/toh-pt6/src/main.ts

@@ -9,4 +9,5 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

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

@@ -0,0 +1,300 @@
+import { browser, by, element, ElementArrayFinder, ElementFinder, logging } from 'protractor';
+
+class Hero {
+  id: number;
+  name: string;
+
+  // Factory methods
+
+  // Hero from string formatted as '<id> <name>'.
+  static fromString(s: string): Hero {
+    return {
+      id: +s.substr(0, s.indexOf(' ')),
+      name: s.substr(s.indexOf(' ') + 1),
+    };
+  }
+
+  // Hero from hero list <li> element.
+  static async fromLi(li: ElementFinder): Promise<Hero> {
+    const stringsFromA = await li.all(by.css('a')).getText();
+    const strings = stringsFromA[0].split(' ');
+    return { id: +strings[0], name: strings[1] };
+  }
+
+  // Hero id and name from the given detail element.
+  static async fromDetail(detail: ElementFinder): Promise<Hero> {
+    // Get hero id from the first <div>
+    const id = await detail.all(by.css('div')).first().getText();
+    // Get name from the h2
+    const name = await detail.element(by.css('h2')).getText();
+    return {
+      id: +id.substr(id.indexOf(' ') + 1),
+      name: name.substr(0, name.lastIndexOf(' '))
+    };
+  }
+}
+
+describe('Universal', () => {
+  const expectedH1 = 'Tour of Heroes';
+  const expectedTitle = `${expectedH1}`;
+  const targetHero = { id: 15, name: 'Magneta' };
+  const targetHeroDashboardIndex = 3;
+  const nameSuffix = 'X';
+  const newHeroName = targetHero.name + nameSuffix;
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    const severeLogs = logs.filter(entry => entry.level === logging.Level.SEVERE);
+    expect(severeLogs).toEqual([]);
+  });
+
+  describe('Initial page', () => {
+    beforeAll(() => browser.get(''));
+
+    it(`has title '${expectedTitle}'`, () => {
+      expect(browser.getTitle()).toEqual(expectedTitle);
+    });
+
+    it(`has h1 '${expectedH1}'`, () => {
+        expectHeading(1, expectedH1);
+    });
+
+    const expectedViewNames = ['Dashboard', 'Heroes'];
+    it(`has views ${expectedViewNames}`, () => {
+      const viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText());
+      expect(viewNames).toEqual(expectedViewNames);
+    });
+
+    it('has dashboard as the active view', () => {
+      const page = getPageElts();
+      expect(page.appDashboard.isPresent()).toBeTruthy();
+    });
+  });
+
+  describe('Dashboard tests', () => {
+    beforeAll(() => browser.get(''));
+
+    it('has top heroes', () => {
+      const page = getPageElts();
+      expect(page.topHeroes.count()).toEqual(4);
+    });
+
+    it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
+
+    it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
+
+    it(`cancels and shows ${targetHero.name} in Dashboard`, () => {
+      element(by.buttonText('go back')).click();
+      browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+
+      const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
+      expect(targetHeroElt.getText()).toEqual(targetHero.name);
+    });
+
+    it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero);
+
+    it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
+
+    it(`saves and shows ${newHeroName} in Dashboard`, () => {
+      element(by.buttonText('save')).click();
+      browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+
+      const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
+      expect(targetHeroElt.getText()).toEqual(newHeroName);
+    });
+  });
+
+  describe('Heroes tests', () => {
+    beforeAll(() => browser.get(''));
+
+    it('can switch to Heroes view', () => {
+      getPageElts().appHeroesHref.click();
+      const page = getPageElts();
+      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(page.allHeroes.count()).toEqual(10, 'number of heroes');
+    });
+
+    it('can route to hero details', async () => {
+      getHeroLiEltById(targetHero.id).click();
+
+      const page = getPageElts();
+      expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+      const hero = await Hero.fromDetail(page.heroDetail);
+      expect(hero.id).toEqual(targetHero.id);
+      expect(hero.name).toEqual(targetHero.name.toUpperCase());
+    });
+
+    it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView);
+
+    it(`shows ${newHeroName} in Heroes list`, () => {
+      element(by.buttonText('save')).click();
+      browser.waitForAngular();
+      const expectedText = `${targetHero.id} ${newHeroName}`;
+      expect(getHeroAEltById(targetHero.id).getText()).toEqual(expectedText);
+    });
+
+    it(`deletes ${newHeroName} from Heroes list`, async () => {
+      const heroesBefore = await toHeroArray(getPageElts().allHeroes);
+      const li = getHeroLiEltById(targetHero.id);
+      li.element(by.buttonText('x')).click();
+
+      const page = getPageElts();
+      expect(page.appHeroes.isPresent()).toBeTruthy();
+      expect(page.allHeroes.count()).toEqual(9, 'number of heroes');
+      const heroesAfter = await toHeroArray(page.allHeroes);
+      // console.log(await Hero.fromLi(page.allHeroes[0]));
+      const expectedHeroes =  heroesBefore.filter(h => h.name !== newHeroName);
+      expect(heroesAfter).toEqual(expectedHeroes);
+      // expect(page.selectedHeroSubview.isPresent()).toBeFalsy();
+    });
+
+    it(`adds back ${targetHero.name}`, async () => {
+      const updatedHeroName = 'Alice';
+      const heroesBefore = await toHeroArray(getPageElts().allHeroes);
+      const numHeroes = heroesBefore.length;
+
+      element(by.css('input')).sendKeys(updatedHeroName);
+      element(by.buttonText('add')).click();
+
+      const page = getPageElts();
+      const heroesAfter = await toHeroArray(page.allHeroes);
+      expect(heroesAfter.length).toEqual(numHeroes + 1, 'number of heroes');
+
+      expect(heroesAfter.slice(0, numHeroes)).toEqual(heroesBefore, 'Old heroes are still there');
+
+      const maxId = heroesBefore[heroesBefore.length - 1].id;
+      expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: updatedHeroName});
+    });
+
+    it('displays correctly styled buttons', async () => {
+      element.all(by.buttonText('x')).then(buttons => {
+        for (const button of buttons) {
+          // Inherited styles from styles.css
+          expect(button.getCssValue('font-family')).toBe('Arial');
+          expect(button.getCssValue('border')).toContain('none');
+          expect(button.getCssValue('padding')).toBe('5px 10px');
+          expect(button.getCssValue('border-radius')).toBe('4px');
+          // Styles defined in heroes.component.css
+          expect(button.getCssValue('left')).toBe('194px');
+          expect(button.getCssValue('top')).toBe('-32px');
+        }
+      });
+
+      const addButton = element(by.buttonText('add'));
+      // Inherited styles from styles.css
+      expect(addButton.getCssValue('font-family')).toBe('Arial');
+      expect(addButton.getCssValue('border')).toContain('none');
+      expect(addButton.getCssValue('padding')).toBe('5px 10px');
+      expect(addButton.getCssValue('border-radius')).toBe('4px');
+    });
+  });
+
+  describe('Progressive hero search', () => {
+    beforeAll(() => browser.get(''));
+
+    it(`searches for 'Ma'`, async () => {
+      getPageElts().searchBox.sendKeys('Ma');
+      browser.sleep(1000);
+
+      expect(getPageElts().searchResults.count()).toBe(4);
+    });
+
+    it(`continues search with 'g'`, async () => {
+      getPageElts().searchBox.sendKeys('g');
+      browser.sleep(1000);
+      expect(getPageElts().searchResults.count()).toBe(2);
+    });
+
+    it(`continues search with 'e' and gets ${targetHero.name}`, async () => {
+      getPageElts().searchBox.sendKeys('n');
+      browser.sleep(1000);
+      const page = getPageElts();
+      expect(page.searchResults.count()).toBe(1);
+      const hero = page.searchResults.get(0);
+      expect(hero.getText()).toEqual(targetHero.name);
+    });
+
+    it(`navigates to ${targetHero.name} details view`, async () => {
+      const hero = getPageElts().searchResults.get(0);
+      expect(hero.getText()).toEqual(targetHero.name);
+      hero.click();
+
+      const page = getPageElts();
+      expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+      const hero2 = await Hero.fromDetail(page.heroDetail);
+      expect(hero2.id).toEqual(targetHero.id);
+      expect(hero2.name).toEqual(targetHero.name.toUpperCase());
+    });
+  });
+
+  // Helpers
+  function addToHeroName(text: string): Promise<void> {
+    return element(by.css('input')).sendKeys(text) as Promise<void>;
+  }
+
+  async function dashboardSelectTargetHero(): Promise<void> {
+    const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex);
+    expect(targetHeroElt.getText()).toEqual(targetHero.name);
+    targetHeroElt.click();
+    browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6
+
+    const page = getPageElts();
+    expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail');
+    const hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(targetHero.name.toUpperCase());
+  }
+
+  function expectHeading(hLevel: number, expectedText: string): void {
+      const hTag = `h${hLevel}`;
+      const hText = element(by.css(hTag)).getText();
+      expect(hText).toEqual(expectedText, hTag);
+  }
+
+  function getHeroAEltById(id: number): ElementFinder {
+    const spanForId = element(by.cssContainingText('li span.badge', id.toString()));
+    return spanForId.element(by.xpath('..'));
+  }
+
+  function getHeroLiEltById(id: number): ElementFinder {
+    const spanForId = element(by.cssContainingText('li span.badge', id.toString()));
+    return spanForId.element(by.xpath('../..'));
+  }
+
+  function getPageElts() {
+    const navElts = element.all(by.css('app-root nav a'));
+
+    return {
+      navElts,
+
+      appDashboardHref: navElts.get(0),
+      appDashboard: element(by.css('app-root app-dashboard')),
+      topHeroes: element.all(by.css('app-root app-dashboard > div h4')),
+
+      appHeroesHref: navElts.get(1),
+      appHeroes: element(by.css('app-root app-heroes')),
+      allHeroes: element.all(by.css('app-root app-heroes li')),
+      selectedHeroSubview: element(by.css('app-root app-heroes > div:last-child')),
+
+      heroDetail: element(by.css('app-root app-hero-detail > div')),
+
+      searchBox: element(by.css('#search-box')),
+      searchResults: element.all(by.css('.search-result li'))
+    };
+  }
+
+  async function toHeroArray(allHeroes: ElementArrayFinder): Promise<Hero[]> {
+    return await allHeroes.map(Hero.fromLi);
+  }
+
+  async function updateHeroNameInDetailView(): Promise<void> {
+    // Assumes that the current view is the hero details view.
+    addToHeroName(nameSuffix);
+
+    const page = getPageElts();
+    const hero = await Hero.fromDetail(page.heroDetail);
+    expect(hero.id).toEqual(targetHero.id);
+    expect(hero.name).toEqual(newHeroName.toUpperCase());
+  }
+});

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

@@ -1,3 +1,7 @@
 {
-  "projectType": "universal"
+  "projectType": "universal",
+  "e2e": [
+    {"cmd": "yarn", "args": ["e2e", "--prod", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]},
+    {"cmd": "yarn", "args": ["run", "build:ssr"]}
+  ]
 }

aio/content/examples/universal/server.ts

@@ -6,24 +6,28 @@ import { join } from 'path';
 
 import { AppServerModule } from './src/main.server';
 import { APP_BASE_HREF } from '@angular/common';
+import { existsSync } from 'fs';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app() {
   const server = express();
-  const distFolder = join(process.cwd(), 'dist/express-engine-ivy/browser');
+  const distFolder = join(process.cwd(), 'dist/browser');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
 
   // #docregion ngExpressEngine
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
   server.engine('html', ngExpressEngine({
     bootstrap: AppServerModule,
   }));
   // #enddocregion ngExpressEngine
+
   server.set('view engine', 'html');
   server.set('views', distFolder);
 
   // #docregion data-request
   // TODO: implement data requests securely
-  server.get('/api/*', (req, res) => {
-    res.status(404).send('data requests are not supported');
+  server.get('/api/**', (req, res) => {
+    res.status(404).send('data requests are not yet supported');
   });
   // #enddocregion data-request
 
@@ -37,7 +41,7 @@ export function app() {
   // #docregion navigation-request
   // All regular routes use the Universal engine
   server.get('*', (req, res) => {
-    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
   });
   // #enddocregion navigation-request
 
@@ -59,7 +63,8 @@ function run() {
 // The below code is to ensure that the server is run only when not requiring the bundle.
 declare const __non_webpack_require__: NodeRequire;
 const mainModule = __non_webpack_require__.main;
-if (mainModule && mainModule.filename === __filename) {
+const moduleFilename = mainModule && mainModule.filename || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
   run();
 }
 

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

@@ -1,7 +1,6 @@
 /* AppComponent's private CSS styles */
 h1 {
   font-size: 1.2em;
-  color: #999;
   margin-bottom: 0;
 }
 h2 {
@@ -18,7 +17,7 @@ nav a {
   border-radius: 4px;
 }
 nav a:visited, a:link {
-  color: #607D8B;
+  color: #334953;
 }
 nav a:hover {
   color: #039be5;

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

@@ -14,8 +14,6 @@ import { DashboardComponent }   from './dashboard/dashboard.component';
 import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
 import { HeroesComponent }      from './heroes/heroes.component';
 import { HeroSearchComponent }  from './hero-search/hero-search.component';
-import { HeroService }          from './hero.service';
-import { MessageService }       from './message.service';
 import { MessagesComponent }    from './messages/messages.component';
 
 // #docregion platform-detection
@@ -32,6 +30,10 @@ import { isPlatformBrowser } from '@angular/common';
     FormsModule,
     AppRoutingModule,
     HttpClientModule,
+
+    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
+    // and returns simulated server responses.
+    // Remove it when a real server is ready to receive requests.
     HttpClientInMemoryWebApiModule.forRoot(
       InMemoryDataService, { dataEncapsulation: false }
     )
@@ -44,7 +46,6 @@ import { isPlatformBrowser } from '@angular/common';
     MessagesComponent,
     HeroSearchComponent
   ],
-  providers: [ HeroService, MessageService ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule {

aio/content/examples/universal/src/app/app.server.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
-import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
 
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
@@ -9,11 +8,10 @@ import { AppComponent } from './app.component';
   imports: [
     AppModule,
     ServerModule,
-    ModuleMapLoaderModule
   ],
   providers: [
-    // Add universal-only providers here
+    // Add server-only providers here.
   ],
-  bootstrap: [ AppComponent ],
+  bootstrap: [AppComponent],
 })
 export class AppServerModule {}

aio/content/examples/universal/src/app/dashboard/dashboard.component.css

@@ -34,7 +34,7 @@ h4 {
   color: #eee;
   max-height: 120px;
   min-width: 120px;
-  background-color: #607D8B;
+  background-color: #3f525c;
   border-radius: 2px;
 }
 .module:hover {

aio/content/examples/universal/src/app/dashboard/dashboard.component.html

@@ -8,4 +8,4 @@
   </a>
 </div>
 
-<hero-search></hero-search>
+<app-hero-search></app-hero-search>

aio/content/examples/universal/src/app/dashboard/dashboard.component.ts

@@ -18,6 +18,6 @@ export class DashboardComponent implements OnInit {
 
   getHeroes(): void {
     this.heroService.getHeroes()
-    .subscribe(heroes => this.heroes = heroes.slice(1, 5));
+      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
   }
 }

aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css

@@ -19,7 +19,6 @@ button {
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  cursor: hand;
 }
 button:hover {
   background-color: #cfd8dc;

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

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

aio/content/examples/universal/src/app/hero-detail/hero-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 
@@ -11,7 +11,7 @@ import { HeroService }  from '../hero.service';
   styleUrls: [ './hero-detail.component.css' ]
 })
 export class HeroDetailComponent implements OnInit {
-  hero: Hero;
+  @Input() hero: Hero;
 
   constructor(
     private route: ActivatedRoute,
@@ -33,7 +33,7 @@ export class HeroDetailComponent implements OnInit {
     this.location.back();
   }
 
- save(): void {
+  save(): void {
     this.heroService.updateHero(this.hero)
       .subscribe(() => this.goBack());
   }

aio/content/examples/universal/src/app/hero-search/hero-search.component.html

@@ -1,10 +1,10 @@
 <div id="search-component">
-  <h4>Hero Search</h4>
+  <h4><label for="search-box">Hero Search</label></h4>
 
   <input #searchBox id="search-box" (input)="search(searchBox.value)" />
 
   <ul class="search-result">
-    <li *ngFor="let hero of heroes | async" >
+    <li *ngFor="let hero of heroes$ | async" >
       <a routerLink="/detail/{{hero.id}}">
         {{hero.name}}
       </a>

aio/content/examples/universal/src/app/hero-search/hero-search.component.ts

@@ -10,12 +10,12 @@ import { Hero } from '../hero';
 import { HeroService } from '../hero.service';
 
 @Component({
-  selector: 'hero-search',
+  selector: 'app-hero-search',
   templateUrl: './hero-search.component.html',
   styleUrls: [ './hero-search.component.css' ]
 })
 export class HeroSearchComponent implements OnInit {
-  heroes: Observable<Hero[]>;
+  heroes$: Observable<Hero[]>;
   private searchTerms = new Subject<string>();
 
   constructor(private heroService: HeroService) {}
@@ -26,7 +26,7 @@ export class HeroSearchComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.heroes = this.searchTerms.pipe(
+    this.heroes$ = this.searchTerms.pipe(
       // wait 300ms after each keystroke before considering the term
       debounceTime(300),
 

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

@@ -1,6 +1,5 @@
-import { Injectable, Inject, Optional } from '@angular/core';
-import { APP_BASE_HREF } from '@angular/common';
-import { HttpClient, HttpHeaders }from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 import { Observable, of } from 'rxjs';
 import { catchError, map, tap } from 'rxjs/operators';
@@ -8,30 +7,26 @@ import { catchError, map, tap } from 'rxjs/operators';
 import { Hero } from './hero';
 import { MessageService } from './message.service';
 
-const httpOptions = {
-  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
-};
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class HeroService {
 
   private heroesUrl = 'api/heroes';  // URL to web api
 
-  // #docregion ctor
+  httpOptions = {
+    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+  };
+
   constructor(
     private http: HttpClient,
-    private messageService: MessageService,
-    @Optional() @Inject(APP_BASE_HREF) origin?: string) {
-      this.heroesUrl = `${origin}${this.heroesUrl}`;
-    }
-  // #enddocregion ctor
+    private messageService: MessageService) { }
 
   /** GET heroes from the server */
-  getHeroes (): Observable<Hero[]> {
+  getHeroes(): Observable<Hero[]> {
     return this.http.get<Hero[]>(this.heroesUrl)
       .pipe(
-        tap(heroes => this.log('fetched heroes')),
-        catchError(this.handleError('getHeroes', []))
+        tap(_ => this.log('fetched heroes')),
+        catchError(this.handleError<Hero[]>('getHeroes', []))
       );
   }
 
@@ -65,7 +60,9 @@ export class HeroService {
       return of([]);
     }
     return this.http.get<Hero[]>(`${this.heroesUrl}/?name=${term}`).pipe(
-      tap(_ => this.log(`found heroes matching "${term}"`)),
+      tap(x => x.length ?
+         this.log(`found heroes matching "${term}"`) :
+         this.log(`no heroes matching "${term}"`)),
       catchError(this.handleError<Hero[]>('searchHeroes', []))
     );
   }
@@ -73,29 +70,27 @@ export class HeroService {
   //////// Save methods //////////
 
   /** POST: add a new hero to the server */
-  addHero (name: string): Observable<Hero> {
-    const hero = { name };
-
-    return this.http.post<Hero>(this.heroesUrl, hero, httpOptions).pipe(
-      tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
+  addHero(hero: Hero): Observable<Hero> {
+    return this.http.post<Hero>(this.heroesUrl, hero, this.httpOptions).pipe(
+      tap((newHero: Hero) => this.log(`added hero w/ id=${newHero.id}`)),
       catchError(this.handleError<Hero>('addHero'))
     );
   }
 
   /** DELETE: delete the hero from the server */
-  deleteHero (hero: Hero | number): Observable<Hero> {
+  deleteHero(hero: Hero | number): Observable<Hero> {
     const id = typeof hero === 'number' ? hero : hero.id;
     const url = `${this.heroesUrl}/${id}`;
 
-    return this.http.delete<Hero>(url, httpOptions).pipe(
+    return this.http.delete<Hero>(url, this.httpOptions).pipe(
       tap(_ => this.log(`deleted hero id=${id}`)),
       catchError(this.handleError<Hero>('deleteHero'))
     );
   }
 
   /** PUT: update the hero on the server */
-  updateHero (hero: Hero): Observable<any> {
-    return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
+  updateHero(hero: Hero): Observable<any> {
+    return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe(
       tap(_ => this.log(`updated hero id=${hero.id}`)),
       catchError(this.handleError<any>('updateHero'))
     );
@@ -107,7 +102,7 @@ export class HeroService {
    * @param operation - name of the operation that failed
    * @param result - optional value to return as the observable result
    */
-  private handleError<T> (operation = 'operation', result?: T) {
+  private handleError<T>(operation = 'operation', result?: T) {
     return (error: any): Observable<T> => {
 
       // TODO: send the error to remote logging infrastructure

aio/content/examples/universal/src/app/heroes/heroes.component.css

@@ -22,7 +22,7 @@
 }
 
 .heroes a {
-  color: #888;
+  color: #333;
   text-decoration: none;
   position: relative;
   display: block;
@@ -30,7 +30,7 @@
 }
 
 .heroes a:hover {
-  color:#607D8B;
+  color: #607D8B;
 }
 
 .heroes .badge {
@@ -38,7 +38,7 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color: #405061;
   line-height: 1em;
   position: relative;
   left: -1px;
@@ -50,7 +50,7 @@
   border-radius: 4px 0 0 4px;
 }
 
-.button {
+button {
   background-color: #eee;
   border: none;
   padding: 5px 10px;

aio/content/examples/universal/src/app/heroes/heroes.component.html

@@ -16,6 +16,6 @@
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </a>
     <button class="delete" title="delete hero"
-    (click)="delete(hero);$event.stopPropagation()">x</button>
+      (click)="delete(hero)">x</button>
   </li>
 </ul>

aio/content/examples/universal/src/app/heroes/heroes.component.ts

@@ -25,17 +25,15 @@ export class HeroesComponent implements OnInit {
   add(name: string): void {
     name = name.trim();
     if (!name) { return; }
-    this.heroService.addHero(name)
+    this.heroService.addHero({ name } as Hero)
       .subscribe(hero => {
         this.heroes.push(hero);
       });
   }
 
   delete(hero: Hero): void {
-    this.heroService.deleteHero(hero)
-        .subscribe(() => {
-          this.heroes = this.heroes.filter(h => h !== hero);
-        });
+    this.heroes = this.heroes.filter(h => h !== hero);
+    this.heroService.deleteHero(hero).subscribe();
   }
 
 }

aio/content/examples/universal/src/app/in-memory-data.service.ts

@@ -1,5 +1,10 @@
+import { Injectable } from '@angular/core';
 import { InMemoryDbService } from 'angular-in-memory-web-api';
+import { Hero } from './hero';
 
+@Injectable({
+  providedIn: 'root',
+})
 export class InMemoryDataService implements InMemoryDbService {
   createDb() {
     const heroes = [
@@ -16,4 +21,13 @@ export class InMemoryDataService implements InMemoryDbService {
     ];
     return {heroes};
   }
+
+  // Overrides the genId method to ensure that a hero always has an id.
+  // If the heroes array is empty,
+  // the method below returns the initial number (11).
+  // if the heroes array is not empty, the method below returns the highest
+  // hero id + 1.
+  genId(heroes: Hero[]): number {
+    return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11;
+  }
 }

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

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class MessageService {
   messages: string[] = [];
 

aio/content/examples/universal/src/app/messages/messages.component.css

@@ -30,6 +30,6 @@ button:disabled {
   cursor: auto;
 }
 button.clear {
-  color: #888;
+  color: #333;
   margin-bottom: 12px;
 }

aio/content/examples/universal/src/main.ts

@@ -8,4 +8,7 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+document.addEventListener('DOMContentLoaded', () => {
+  platformBrowserDynamic().bootstrapModule(AppModule)
+    .catch(err => console.error(err));
+});

aio/content/examples/universal/webpack.server.config.js

@@ -1,32 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-
-module.exports = {
-  entry: { server: './server.ts' },
-  resolve: { extensions: ['.js', '.ts'] },
-  target: 'node',
-  mode: 'none',
-  // this makes sure we include node_modules and other 3rd party libraries
-  externals: [/node_modules/],
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: '[name].js'
-  },
-  module: {
-    rules: [{ test: /\.ts$/, loader: 'ts-loader' }]
-  },
-  plugins: [
-    // Temporary Fix for issue: https://github.com/angular/angular/issues/11580
-    // for 'WARNING Critical dependency: the request of a dependency is an expression'
-    new webpack.ContextReplacementPlugin(
-      /(.+)?angular(\\|\/)core(.+)?/,
-      path.join(__dirname, 'src'), // location of your src
-      {} // a map of your routes
-    ),
-    new webpack.ContextReplacementPlugin(
-      /(.+)?express(\\|\/)(.+)?/,
-      path.join(__dirname, 'src'),
-      {}
-    )
-  ]
-};

aio/content/guide/accessibility.md

@@ -10,6 +10,12 @@ For an in-depth introduction to issues and techniques for designing accessible a
 This page discusses best practices for designing Angular applications that
 work well for all users, including those who rely on assistive technologies.
 
+<div class="alert is-helpful">
+
+  For the sample app that this page describes, see the <live-example></live-example>.
+
+</div>
+
 ## Accessibility attributes
 
 Building accessible web experience often involves setting [ARIA attributes](https://developers.google.com/web/fundamentals/accessibility/semantics-aria)
@@ -92,8 +98,6 @@ The following example shows how to make a simple progress bar accessible by usin
    <code-example path="accessibility/src/app/app.component.html" header="src/app/app.component.html" region="template"></code-example>
 
 
-To see the progress bar in a working example app, refer to the <live-example></live-example>.
-
 ## Routing and focus management
 
 Tracking and controlling [focus](https://developers.google.com/web/fundamentals/accessibility/focus/) in a UI is an important consideration in designing for accessibility.

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

@@ -415,8 +415,8 @@ The following are some of the key AngularJS built-in directives and their equiva
       <code-example hideCopy path="ajs-quick-reference/src/app/app.component.html" region="router-link"></code-example>
 
 
-      For more information on routing, see the [RouterLink binding](guide/router#router-link)
-      section of the [Routing & Navigation](guide/router) page.
+      For more information on routing, see [Defining a basic route](guide/router#basic-route)
+      in the [Routing & Navigation](guide/router) page.
 
     </td>
 

aio/content/guide/architecture.md

@@ -19,12 +19,17 @@ Both components and services are simply classes, with *decorators* that mark the
 
 An app's components typically define many views, arranged hierarchically. Angular provides the `Router` service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities.
 
-<div class="alert is-helpful>
+<div class="alert is-helpful">
 
   See the [Angular Glossary](guide/glossary) for basic definitions of important Angular terms and usage.
 
 </div>
 
+<div class="alert is-helpful">
+
+  For the sample app that this page describes, see the <live-example></live-example>.
+</div>
+
 ## Modules
 
 Angular *NgModules* differ from and complement JavaScript (ES2015) modules. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units.
@@ -148,10 +153,5 @@ Each of these subjects is introduced in more detail in the following pages.
 
 * [Introduction to services and dependency injection](guide/architecture-services)
 
-<div class="alert is-helpful">
-
-   Note that the code referenced on these pages is available as a <live-example></live-example>.
-</div>
-
 When you're familiar with these fundamental building blocks, you can explore them in more detail in the documentation. To learn about more tools and techniques that are available to help you build and deploy Angular applications, see [Next steps: tools and techniques](guide/architecture-next-steps).
 </div>

aio/content/guide/browser-support.md

@@ -303,7 +303,7 @@ Some features of Angular may require additional polyfills.
     <td>
 
       [Router](guide/router) when using
-      [hash-based routing](guide/router#appendix-locationstrategy-and-browser-url-styles)
+      [hash-based routing](guide/router#location-strategy)
     </td>
 
     <td>

aio/content/guide/build.md

@@ -311,11 +311,11 @@ To use CSS grid with IE10/11, you must explicitly enable it using the `autoplace
 To do this, add the following to the top of the global styles file (or within a specific css selector scope):
 
 ```
-/* autoprefixer grid: autoplace /
+/* autoprefixer grid: autoplace */
 ```
 or
 ```
-/ autoprefixer grid: no-autoplace */
+/* autoprefixer grid: no-autoplace */
 ```
 
 For more information, see [Autoprefixer documentation](https://autoprefixer.github.io/).

aio/content/guide/deployment.md

@@ -321,7 +321,7 @@ absolutely must be present when the app starts.
 
 Configure the Angular Router to defer loading of all other modules (and their associated code), either by
 [waiting until the app has launched](guide/router#preloading  "Preloading")
-or by [_lazy loading_](guide/router#asynchronous-routing "Lazy loading")
+or by [_lazy loading_](guide/router#lazy-loading "Lazy loading")
 them on demand.
 
 <div class="callout is-helpful">

aio/content/guide/deprecations.md

@@ -318,6 +318,7 @@ const routes: Routes = [{
 
 
 {@a activatedroute-props}
+
 ### ActivatedRoute params and queryParams properties
 
 [ActivatedRoute](api/router/ActivatedRoute) contains two [properties](api/router/ActivatedRoute#properties) that are less capable than their replacements and may be deprecated in a future Angular version.
@@ -327,7 +328,7 @@ const routes: Routes = [{
 | `params` | `paramMap` |
 | `queryParams` | `queryParamMap` |
 
-For more information see the [Router guide](guide/router#activated-route).
+For more information see the [Getting route information](guide/router#activated-route) section of the [Router guide](guide/router).
 
 
 {@a reflect-metadata}

aio/content/guide/releases.md

@@ -101,10 +101,10 @@ The following table provides the status for Angular versions under support.
 
 Version | Status | Released     | Active Ends  | LTS Ends
 ------- | ------ | ------------ | ------------ | ------------
-^8.0.0  | Active | May 28, 2019 | Nov 28, 2019 | Nov 28, 2020
-^7.0.0  | LTS    | Oct 18, 2018 | Apr 18, 2019 | Apr 18, 2020
+^9.0.0  | Active | Feb 06, 2020 | Aug 06, 2020 | Aug 06, 2021
+^8.0.0  | LTS    | May 28, 2019 | Nov 28, 2019 | Nov 28, 2020
 
-Angular versions ^4.0.0, ^5.0.0 and ^6.0.0 are no longer under support.
+Angular versions ^4.0.0, ^5.0.0, ^6.0.0 and ^7.0.0 are no longer under support.
 
 {@a deprecation}
 ## Deprecation practices

aio/content/guide/setup-local.md

@@ -18,11 +18,19 @@ If you are new to Angular, see [Getting Started](start). Getting Started helps y
 {@a prerequisites}
 ## Prerequisites
 
-Before you begin, make sure your development environment includes `Node.js®` and an npm package manager.
+To use the Angular framework, you should be familiar with the following:
+
+* [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
+* [HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML)
+* [CSS](https://developer.mozilla.org/docs/Learn/CSS/First_steps)
+
+Knowledge of [TypeScript](https://www.typescriptlang.org/) is helpful, but not required.
 
 {@a nodejs}
 ### Node.js
 
+Make sure your development environment includes `Node.js®` and an npm package manager.
+
 Angular requires a [current, active LTS, or maintenance LTS](https://nodejs.org/about/releases/) version of `Node.js`. See the `engines` key for the specific version requirements in our [package.json](https://unpkg.com/@angular/cli/package.json).
 
 * To check your version, run `node -v` in a terminal/console window.

aio/content/guide/testing.md

@@ -1277,7 +1277,7 @@ In this example, we have a new macro task (nested setTimeout), by default, when
   region="fake-async-test-tick-new-macro-task-async">
 </code-example>
 
-And in some case, we don't want to trigger the new macro task when ticking, we can use `tick(milliseconds, {processNewMacroTasksSynchronously: false})` to not invoke new maco task.
+And in some case, we don't want to trigger the new macro task when ticking, we can use `tick(milliseconds, {processNewMacroTasksSynchronously: false})` to not invoke new macro task.
 
 #### Comparing dates inside fakeAsync()
 
@@ -1958,7 +1958,7 @@ for the `id` to change during its lifetime.
 
 <div class="alert is-helpful">
 
-The [Router](guide/router#route-parameters) guide covers `ActivatedRoute.paramMap` in more detail.
+The [ActivatedRoute in action](guide/router#activated-route-in-action) section of the [Router](guide/router) guide covers `ActivatedRoute.paramMap` in more detail.
 
 </div>
 

aio/content/guide/universal.md

@@ -15,7 +15,7 @@ The CLI schematic `@nguniversal/express-engine` performs the required steps, as
 
 <div class="alert is-helpful">
 
-  **Note:** [Download the finished sample code](generated/zips/universal/universal.zip),
+  **Note:** <live-example downloadOnly>Download the finished sample code</live-example>,
   which runs in a [Node.js® Express](https://expressjs.com/) server.
 
 </div>
@@ -27,7 +27,7 @@ The [Tour of Heroes tutorial](tutorial) is the foundation for this walkthrough.
 
 In this example, the Angular CLI compiles and bundles the Universal version of the app with the
 [Ahead-of-Time (AOT) compiler](guide/aot-compiler).
-A Node Express web server compiles HTML pages with Universal based on client requests.
+A Node.js Express web server compiles HTML pages with Universal based on client requests.
 
 To create the server-side app module, `app.server.module.ts`, run the following CLI command.
 
@@ -62,10 +62,10 @@ The files marked with `*` are new and not in the original tutorial sample.
 To start rendering your app with Universal on your local system, use the following command.
 
 <code-example language="bash">
-npm run build:ssr && npm run serve:ssr
+npm run dev:ssr
 </code-example>
 
-Open a browser and navigate to http://localhost:4000/.
+Open a browser and navigate to http://localhost:4200/.
 You should see the familiar Tour of Heroes dashboard page.
 
 Navigation via `routerLinks` works correctly because they use the native anchor (`<a>`) tags.
@@ -158,13 +158,12 @@ The sample web server for this guide is based on the popular [Express](https://e
 Universal applications use the Angular `platform-server` package (as opposed to `platform-browser`), which provides
 server implementations of the DOM, `XMLHttpRequest`, and other low-level features that don't rely on a browser.
 
-The server ([Node Express](https://expressjs.com/) in this guide's example)
+The server ([Node.js Express](https://expressjs.com/) in this guide's example)
 passes client requests for application pages to the NgUniversal `ngExpressEngine`. Under the hood, this
 calls Universal's `renderModule()` function, while providing caching and other helpful utilities.
 
 The `renderModule()` function takes as inputs a *template* HTML page (usually `index.html`),
-an Angular *module* containing components,
-and a *route* that determines which components to display.
+an Angular *module* containing components, and a *route* that determines which components to display.
 The route comes from the client's request to the server.
 
 Each request results in the appropriate view for the requested route.
@@ -188,71 +187,6 @@ Similarly, without mouse or keyboard events, a server-side app can't rely on a u
 The app must determine what to render based solely on the incoming client request.
 This is a good argument for making the app [routable](guide/router).
 
-{@a http-urls}
-### Using absolute URLs for server requests
-
-The tutorial's `HeroService` and `HeroSearchService` delegate to the Angular `HttpClient` module to fetch application data.
-These services send requests to _relative_ URLs such as `api/heroes`.
-In a Universal app, HTTP URLs must be _absolute_ (for example, `https://my-server.com/api/heroes`).
-This means you need to change your services to make requests with absolute URLs when running on the server and with relative
-URLs when running in the browser.
-
-One solution is to provide the full URL to your application on the server, and write an interceptor that can retrieve this
-value and prepend it to the request URL. If you're using the `ngExpressEngine`, as shown in the example in this guide, half
-the work is already done. We'll assume this is the case, but it's trivial to provide the same functionality.
-
-Start by creating an [HttpInterceptor](api/common/http/HttpInterceptor).
-
-<code-example language="typescript" header="universal-interceptor.ts">
-
-import {Injectable, Inject, Optional} from '@angular/core';
-import {HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders} from '@angular/common/http';
-import {Request} from 'express';
-import {REQUEST} from '@nguniversal/express-engine/tokens';
-
-@Injectable()
-export class UniversalInterceptor implements HttpInterceptor {
-
-  constructor(@Optional() @Inject(REQUEST) protected request?: Request) {}
-
-  intercept(req: HttpRequest<any>, next: HttpHandler) {
-    let serverReq: HttpRequest<any> = req;
-    if (this.request) {
-      let newUrl = `${this.request.protocol}://${this.request.get('host')}`;
-      if (!req.url.startsWith('/')) {
-        newUrl += '/';
-      }
-      newUrl += req.url;
-      serverReq = req.clone({url: newUrl});
-    }
-    return next.handle(serverReq);
-  }
-}
-
-</code-example>
-
-Next, provide the interceptor in the providers for the server `AppModule`.
-
-<code-example language="typescript" header="app.server.module.ts">
-
-import {HTTP_INTERCEPTORS} from '@angular/common/http';
-import {UniversalInterceptor} from './universal-interceptor';
-
-@NgModule({
-  ...
-  providers: [{
-    provide: HTTP_INTERCEPTORS,
-    useClass: UniversalInterceptor,
-    multi: true
-  }],
-})
-export class AppServerModule {}
-
-</code-example>
-
-Now, on every HTTP request made on the server, this interceptor will fire and replace the request URL with the absolute
-URL provided in the Express `Request` object.
-
 {@a universal-engine}
 ### Universal template engine
 
@@ -262,16 +196,10 @@ The important bit in the `server.ts` file is the `ngExpressEngine()` function.
 </code-example>
 
 The `ngExpressEngine()` function is a wrapper around Universal's `renderModule()` function which turns a client's
-requests into server-rendered HTML pages.
+requests into server-rendered HTML pages. It accepts an object with the following properties:
 
-* The first parameter is `AppServerModule`.
-It's the bridge between the Universal server-side renderer and the Angular application.
-
-* The second parameter, `extraProviders`, is optional. It lets you specify dependency providers that apply only when
-running on this server.
-You can do this when your app needs information that can only be determined by the currently running server instance.
-One example could be the running server's *origin*, which could be used to [calculate absolute HTTP URLs](#http-urls) if
-not using the `Request` token as shown above.
+* `bootstrap`: The root `NgModule` or `NgModule` factory to use for bootstraping the app when rendering on the server. For the example app, it is `AppServerModule`. It's the bridge between the Universal server-side renderer and the Angular application.
+* `extraProviders`: This is optional and lets you specify dependency providers that apply only when rendering the app on the server. You can do this when your app needs information that can only be determined by the currently running server instance.
 
 The `ngExpressEngine()` function returns a `Promise` callback that resolves to the rendered page.
 It's up to the engine to decide what to do with that page.
@@ -287,7 +215,7 @@ which then forwards it to the client in the HTTP response.
 
 ### Filtering request URLs
 
-NOTE: the basic behavior described below is handled automatically when using the NgUniversal Express schematic, this
+NOTE: The basic behavior described below is handled automatically when using the NgUniversal Express schematic. This
 is helpful when trying to understand the underlying behavior or replicate it without using the schematic.
 
 The web server must distinguish _app page requests_ from other kinds of requests.
@@ -307,8 +235,8 @@ Because we use routing, we can easily recognize the three types of requests and
 1. **App navigation**: request URL with no file extension.
 1. **Static asset**: all other requests.
 
-A Node Express server is a pipeline of middleware that filters and processes requests one after the other.
-You configure the Node Express server pipeline with calls to `app.get()` like this one for data requests.
+A Node.js Express server is a pipeline of middleware that filters and processes requests one after the other.
+You configure the Node.js Express server pipeline with calls to `server.get()` like this one for data requests.
 
 <code-example path="universal/server.ts" header="server.ts (data URL)" region="data-request"></code-example>
 
@@ -328,13 +256,32 @@ The following code filters for request URLs with no extensions and treats them a
 
 ### Serving static files safely
 
-A single `app.use()` treats all other URLs as requests for static assets
+A single `server.use()` treats all other URLs as requests for static assets
 such as JavaScript, image, and style files.
 
 To ensure that clients can only download the files that they are permitted to see, put all client-facing asset files in
 the `/dist` folder and only honor requests for files from the `/dist` folder.
 
-The following Node Express code routes all remaining requests to `/dist`, and returns a `404 - NOT FOUND` error if the
+The following Node.js Express code routes all remaining requests to `/dist`, and returns a `404 - NOT FOUND` error if the
 file isn't found.
 
 <code-example path="universal/server.ts" header="server.ts (static files)" region="static"></code-example>
+
+### Using absolute URLs for HTTP (data) requests on the server
+
+The tutorial's `HeroService` and `HeroSearchService` delegate to the Angular `HttpClient` module to fetch application data.
+These services send requests to _relative_ URLs such as `api/heroes`.
+In a server-side rendered app, HTTP URLs must be _absolute_ (for example, `https://my-server.com/api/heroes`).
+This means that the URLs must be somehow converted to absolute when running on the server and be left relative when running in the browser.
+
+If you are using one of the `@nguniversal/*-engine` packages (such as `@nguniversal/express-engine`), this is taken care for you automatically.
+You don't need to do anything to make relative URLs work on the server.
+
+If, for some reason, you are not using an `@nguniversal/*-engine` package, you may need to handle it yourself.
+
+The recommended solution is to pass the full request URL to the `options` argument of [renderModule()](api/platform-server/renderModule) or [renderModuleFactory()](api/platform-server/renderModuleFactory) (depending on what you use to render `AppServerModule` on the server).
+This option is the least intrusive as it does not require any changes to the app.
+Here, "request URL" refers to the URL of the request as a response to which the app is being rendered on the server.
+For example, if the client requested `https://my-server.com/dashboard` and you are rendering the app on the server to respond to that request, `options.url` should be set to `https://my-server.com/dashboard`.
+
+Now, on every HTTP request made as part of rendering the app on the server, Angular can correctly resolve the request URL to an absolute URL, using the provided `options.url`.

aio/content/guide/zone.md

@@ -29,8 +29,8 @@ To clarify how changes are detected and values updated, consider the following c
 ```javascript
 <html>
   <div id="dataDiv"></div>
-  <button id="btn">updateData<btn>
-  <canvas id="canvas"><canvas>
+  <button id="btn">updateData</button>
+  <canvas id="canvas"></canvas>
   <script>
     let value = 'initialValue';
     // initial rendering

aio/content/marketing/contributors.json

@@ -44,15 +44,6 @@
     "groups": ["Angular"],
     "lead": "juleskremer"
   },
-  "robwormald": {
-    "name": "Rob Wormald",
-    "picture": "rob-wormald.jpg",
-    "twitter": "robwormald",
-    "website": "http://github.com/robwormald",
-    "bio": "Rob is a Developer Advocate on the Angular team at Google. He's the Angular team's resident reactive programming geek and founded the Reactive Extensions for Angular project, ngrx.",
-    "groups": ["Angular"],
-    "lead": "stephenfluin"
-  },
   "alexeagle": {
     "name": "Alex Eagle",
     "picture": "alex-eagle.jpg",
@@ -667,6 +658,13 @@
     "groups": ["Angular"],
     "lead": "dennispbrown"
   },
+  "rockument69": {
+    "name": "Tony Bove",
+    "picture": "rockument69.jpg",
+    "bio": "Tony is a technical writer with Expert Support. His lifelong passions are helping people use technology, writing fiction, and playing music. When he's not working or playing the harmonica with friends in a bluegrass band, he's swimming and snorkeling on a Kauai beach and playing ball with his Irish Wolfhound. He's worked at home for decades before it became a thing.",
+    "groups": ["Angular"],
+    "lead": "aikidave"
+  },
   "kapunahelewong": {
     "name": "Kapunahele Wong",
     "picture": "kapunahele.jpg",
@@ -835,5 +833,12 @@
     "bio": "Manu heads technical program management for Angular at Google. Manu keeps the big picture in focus and works with cross-functional teams to plan, execute and usher programs through the entire lifecycle.",
     "groups": ["Angular"],
     "lead": "juleskremer"
+  },
+  "anneiyw": {
+    "name": "Annie Wang",
+    "picture": "annieyw.jpg",
+    "bio": "Annie is an engineering resident on the Angular Components team at Google. She is passionate about the intersection between design and technology and enjoys drawing in her free time.",
+    "groups": ["Angular"],
+    "lead": "jelbourn"
   }
 }

aio/content/marketing/events.html

@@ -13,12 +13,6 @@
       </tr>
     </thead>
     <tbody>
-      <!-- ng-conf 2020 -->
-      <tr>
-        <th><a href="https://ng-conf.org/" title="ng-conf">ng-conf</a></th>
-        <td>Salt Lake City, Utah</td>
-        <td>April 1-3, 2020</td>
-      </tr>
       <tr>
         <th><a href="https://ngvikings.org/" title="ngVikings">ngVikings</a></th>
         <td>Oslo, Norway</td>
@@ -37,6 +31,12 @@
       </tr>
     </thead>
     <tbody>
+      <!-- ng-conf 2020 -->
+      <tr>
+        <th><a href="https://ng-conf.org/" title="ng-conf">ng-conf</a></th>
+        <td>Salt Lake City, Utah</td>
+        <td>April 1-3, 2020</td>
+      </tr>
       <!-- ngIndia 2020 -->
       <tr>
         <th><a href="https://www.ng-ind.com/" title="ngIndia">ngIndia</a></th>

aio/content/start/start-data.md

@@ -101,6 +101,12 @@ This section walks you through using the cart service to add a product to the ca
 
         <code-example header="src/app/product-details/product-details.component.html" path="getting-started/src/app/product-details/product-details.component.html">
         </code-example>
+    
+    <div class="alert is-helpful">
+
+    The line, `<h4>{{ product.price | currency }}</h4>` uses the `currency` pipe to transform `product.price` from a number to a currency string. A pipe is a way you can transform data in your HTML template. For more information about Angular pipes, see [Pipes](guide/pipes "Pipes").
+
+    </div>
 
 1. To see the new "Buy" button, refresh the application and click on a product's name to display its details.
 

aio/package.json

@@ -23,7 +23,7 @@
     "build-local-with-viewengine": "yarn ~~build",
     "prebuild-local-with-viewengine-ci": "node scripts/switch-to-viewengine && yarn setup-local-ci",
     "build-local-with-viewengine-ci": "yarn ~~build --progress=false",
-    "extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js 526c3cc37",
+    "extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js 31ac61357",
     "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",
@@ -83,7 +83,7 @@
   "//engines-comment": "Keep this in sync with /package.json and /aio/tools/examples/shared/package.json",
   "engines": {
     "node": ">=10.9.0 <13.0.0",
-    "yarn": ">=1.21.1 <2"
+    "yarn": ">=1.22.4 <2"
   },
   "private": true,
   "dependencies": {

aio/scripts/payload.sh

@@ -12,4 +12,4 @@ source ../scripts/ci/payload-size.sh
 # Provide node_modules from aio
 NODE_MODULES_BIN=$PROJECT_ROOT/aio/node_modules/.bin/
 
-trackPayloadSize "$target" "dist/*.js" true "${thisDir}/_payload-limits.json"
+trackPayloadSize "$target" "dist/*.js" true "$PROJECT_ROOT/goldens/size-tracking/aio-payloads.json"

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

@@ -7,13 +7,26 @@
     justify-content: space-between;
     max-width: 880px;
 
+    @media (max-width: 600px) {
+      flex-direction: column;
+    }
+
     > :first-child {
       margin-right: 2rem;
       width: 60%;
+      @media (max-width: 600px) {
+        width: 100%;
+      }
     }
 
     &:last-child {
       margin-bottom: 0;
     }
+
+    .button {
+      @media (max-width: 600px) {
+        margin-top: 14px;
+      }
+    }
   }
 }

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

@@ -19,6 +19,14 @@ aio-contributor-list {
 .group-buttons {
   margin: 32px auto;
 
+  @media (max-width: 480px) {
+    .filter-button.button {
+      font-size: 1.2rem;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
   a {
     &.selected {
       background-color: $blue;

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

@@ -18,7 +18,6 @@
   ],
   "devDependencies": [
     "@angular/compiler-cli",
-    "@angular/platform-server",
     "@types/jasmine",
     "@types/node",
     "jasmine-core",

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

@@ -8,7 +8,8 @@
     { "name": "e2e", "command": "ng e2e" }
   ],
   "dependencies": [
-    "@angular/elements"
+    "@angular/elements",
+    "@webcomponents/custom-elements"
   ],
   "devDependencies": [
     "@angular-devkit/build-angular",

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

@@ -1,27 +1,29 @@
 {
   "scripts": [
     { "name": "ng", "command": "ng" },
+    { "name": "build", "command": "ng build" },
     { "name": "start", "command": "ng serve" },
     { "name": "test", "command": "ng test" },
     { "name": "lint", "command": "ng lint" },
     { "name": "e2e", "command": "ng e2e" },
-    { "name": "build:ssr", "command": "npm run build:client-and-server-bundles && npm run webpack:server" },
-    { "name": "serve:ssr", "command": "node dist/server.js" },
-    { "name": "build:client-and-server-bundles", "command": "ng build --prod && ng run angular.io-example:server" },
-    { "name": "webpack:server", "command": "webpack --config webpack.server.config.js --progress --colors" }
+    { "name": "dev:ssr", "command": "ng run angular.io-example:serve-ssr" },
+    { "name": "build:ssr", "command": "ng build --prod && ng run angular.io-example:server:production" },
+    { "name": "serve:ssr", "command": "node dist/server/main.js" },
+    { "name": "prerender", "command": "ng run angular.io-example:prerender" }
   ],
   "dependencies": [
+    "@angular/platform-server",
     "@nguniversal/express-engine",
-    "@nguniversal/module-map-ngfactory-loader"
+    "express"
   ],
   "devDependencies": [
     "@angular-devkit/build-angular",
     "@angular/cli",
+    "@nguniversal/builders",
+    "@types/express",
     "@types/jasminewd2",
     "jasmine-spec-reporter",
     "karma-coverage-istanbul-reporter",
-    "ts-loader",
-    "ts-node",
-    "webpack-cli"
+    "ts-node"
   ]
 }

aio/tools/examples/example-boilerplate.js

@@ -30,7 +30,7 @@ const BOILERPLATE_PATHS = {
 // This maps the CLI files that exists in a parent folder
 const cliRelativePath = BOILERPLATE_PATHS.cli.map(file => `../cli/${file}`);
 
-BOILERPLATE_PATHS.elements = [...cliRelativePath, 'package.json'];
+BOILERPLATE_PATHS.elements = [...cliRelativePath, 'package.json', 'src/polyfills.ts'];
 
 BOILERPLATE_PATHS.i18n = [...cliRelativePath, 'angular.json', 'package.json'];
 
@@ -79,7 +79,7 @@ class ExampleBoilerPlate {
     if (!fs.existsSync(SHARED_NODE_MODULES_PATH)) {
       throw new Error(
           `The shared node_modules folder for the examples (${SHARED_NODE_MODULES_PATH}) is missing.\n` +
-          `Perhaps you need to run "yarn example-use-npm" or "yarn example-use-local" to install the dependencies?`);
+          'Perhaps you need to run "yarn example-use-npm" or "yarn example-use-local" to install the dependencies?');
     }
 
     if (!viewengine) {

aio/tools/examples/shared/boilerplate/UPDATING_CLI.md

@@ -1,4 +1,4 @@
-# How to update the CLI project 
+# How to update the CLI project
 
 The Angular CLI default setup is updated using `ng update`. Any necessary file changes will be done automatically through migration schematics.
 
@@ -46,5 +46,5 @@ The specific changes to each project type are listed below:
     - Includes a `server` target in the `build` architect runners
   - package.json
     - Includes custom scripts for building the `server`
-    - Includes additional `dependencies` on `@nguniversal/common`, `@nguniversal/express-engine`, and `@nguniversal/module-map-ngfactory-loader`
-    - Includes `devDependencies` on `@angular/platform-server`, and `ts-loader`
+    - Includes additional `dependencies` on `@angular/platform-server`, `@nguniversal/express-engine`, and `express`
+    - Includes additional `devDependencies` on `@nguniversal/builders` and `@types/express`

aio/tools/examples/shared/boilerplate/elements/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "~9.0.6",
     "@angular/platform-browser-dynamic": "~9.0.6",
     "@angular/router": "~9.0.6",
+    "@webcomponents/custom-elements": "^1.4.1",
     "angular-in-memory-web-api": "~0.9.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",

aio/tools/examples/shared/boilerplate/elements/src/polyfills.ts

@@ -0,0 +1,70 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch
+ * requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch
+ * specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+// Custom Elements polyfill. Required for browsers that do not natively support Custom Elements.
+import '@webcomponents/custom-elements';
+// Custom Elements ES5 shim. Required when using ES5 bundles on browsers that natively support
+// Custom Elements (either because the browser does not support ES2015 modules or because the app
+// is explicitly configured to generate ES5 only bundles).
+import '@webcomponents/custom-elements/src/native-shim';

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

@@ -122,8 +122,47 @@
           "builder": "@angular-devkit/build-angular:server",
           "options": {
             "outputPath": "dist/server",
-            "main": "src/main.server.ts",
+            "main": "server.ts",
             "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "optimization": true
+            }
+          }
+        },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "options": {
+            "browserTarget": "angular.io-example:build",
+            "serverTarget": "angular.io-example:server"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular.io-example:build:production",
+              "serverTarget": "angular.io-example:server:production"
+            }
+          }
+        },
+        "prerender": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "browserTarget": "angular.io-example:build:production",
+            "serverTarget": "angular.io-example:server:production",
+            "routes": [
+              "/"
+            ]
+          },
+          "configurations": {
+            "production": {}
           }
         }
       }

aio/tools/examples/shared/boilerplate/universal/package.json

@@ -9,10 +9,10 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
-    "serve:ssr": "node dist/server.js",
-    "build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
-    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
+    "dev:ssr": "ng run angular.io-example:serve-ssr",
+    "serve:ssr": "node dist/server/main.js",
+    "build:ssr": "ng build --prod && ng run angular.io-example:server:production",
+    "prerender": "ng run angular.io-example:prerender"
   },
   "private": true,
   "dependencies": {
@@ -23,12 +23,11 @@
     "@angular/forms": "~9.0.6",
     "@angular/platform-browser": "~9.0.6",
     "@angular/platform-browser-dynamic": "~9.0.6",
+    "@angular/platform-server": "~9.0.6",
     "@angular/router": "~9.0.6",
-    "@nguniversal/common": "~9.0.1",
     "@nguniversal/express-engine": "~9.0.1",
-    "@nguniversal/module-map-ngfactory-loader": "~9.0.0-next.9",
     "angular-in-memory-web-api": "~0.9.0",
-    "express": "^4.17.1",
+    "express": "^4.15.2",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.3"
@@ -38,8 +37,8 @@
     "@angular/cli": "~9.0.6",
     "@angular/compiler-cli": "~9.0.6",
     "@angular/language-service": "~9.0.6",
-    "@angular/platform-server": "~9.0.6",
-    "@types/express": "^4.17.2",
+    "@nguniversal/builders": "^9.0.2",
+    "@types/express": "^4.17.0",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
@@ -53,10 +52,8 @@
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.2",
     "protractor": "~5.4.3",
-    "ts-loader": "^6.2.1",
     "ts-node": "~8.3.0",
     "tslint": "~5.18.0",
-    "typescript": "~3.7.5",
-    "webpack-cli": "^3.3.10"
+    "typescript": "~3.7.5"
   }
 }

aio/tools/examples/shared/package.json

@@ -28,17 +28,17 @@
     "@angular/forms": "~9.0.6",
     "@angular/platform-browser": "~9.0.6",
     "@angular/platform-browser-dynamic": "~9.0.6",
+    "@angular/platform-server": "~9.0.6",
     "@angular/router": "~9.0.6",
     "@angular/service-worker": "~9.0.6",
     "@angular/upgrade": "~9.0.6",
-    "@nguniversal/common": "~9.0.1",
     "@nguniversal/express-engine": "~9.0.1",
-    "@nguniversal/module-map-ngfactory-loader": "~9.0.0-next.9",
+    "@webcomponents/custom-elements": "^1.4.1",
     "angular": "1.7.9",
     "angular-in-memory-web-api": "~0.9.0",
     "angular-route": "1.7.9",
     "core-js": "^2.5.4",
-    "express": "^4.17.1",
+    "express": "^4.15.2",
     "rxjs": "~6.5.4",
     "systemjs": "0.19.39",
     "tslib": "^1.10.0",
@@ -49,13 +49,13 @@
     "@angular/cli": "~9.0.6",
     "@angular/compiler-cli": "~9.0.6",
     "@angular/language-service": "~9.0.6",
-    "@angular/platform-server": "~9.0.6",
+    "@nguniversal/builders": "^9.0.2",
     "@types/angular": "1.6.47",
     "@types/angular-animate": "1.5.10",
     "@types/angular-mocks": "1.6.0",
     "@types/angular-resource": "1.5.14",
     "@types/angular-route": "1.3.5",
-    "@types/express": "4.0.35",
+    "@types/express": "^4.17.0",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/jquery": "3.3.28",
@@ -82,10 +82,8 @@
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-uglify": "^1.0.1",
     "source-map-explorer": "^1.3.2",
-    "ts-loader": "^6.2.1",
     "ts-node": "~8.3.0",
     "tslint": "~5.18.0",
-    "typescript": "~3.7.5",
-    "webpack-cli": "^3.3.10"
+    "typescript": "~3.7.5"
   }
 }

aio/tools/transforms/angular-base-package/post-processors/auto-link-code.js

@@ -28,56 +28,100 @@ module.exports = function autoLinkCode(getDocFromAlias) {
   return autoLinkCodeImpl;
 
   function autoLinkCodeImpl() {
-    return (ast) => {
+    return (ast, file) => {
       visit(ast, 'element', (node, ancestors) => {
-        // Only interested in code elements that:
-        // * do not have `no-auto-link` class
-        // * do not have an ignored language
-        // * are not inside links
-        if (autoLinkCodeImpl.codeElements.some(elementType => is(node, elementType)) &&
-            (!node.properties.className || !node.properties.className.includes('no-auto-link')) &&
-            !autoLinkCodeImpl.ignoredLanguages.includes(node.properties.language) &&
-            ancestors.every(ancestor => !is(ancestor, 'a'))) {
-          visit(node, 'text', (node, ancestors) => {
-            // Only interested in text nodes that are not inside links
-            if (ancestors.every(ancestor => !is(ancestor, 'a'))) {
-              const parent = ancestors[ancestors.length - 1];
-              const index = parent.children.indexOf(node);
-
-              // Can we convert the whole text node into a doc link?
-              const docs = getDocFromAlias(node.value);
-              if (foundValidDoc(docs)) {
-                parent.children.splice(index, 1, createLinkNode(docs[0], node.value));
-              } else {
-                // Parse the text for words that we can convert to links
-                const nodes =
-                    textContent(node)
-                        .split(/([A-Za-z0-9_.-]+)/)
-                        .filter(word => word.length)
-                        .map((word, index, words) => {
-                          // remove docs that fail the custom filter tests
-                          const filteredDocs = autoLinkCodeImpl.customFilters.reduce(
-                              (docs, filter) => filter(docs, words, index), getDocFromAlias(word));
-                          return foundValidDoc(filteredDocs) ?
-                              // Create a link wrapping the text node.
-                              createLinkNode(filteredDocs[0], word) :
-                              // this is just text so push a new text node
-                              {type: 'text', value: word};
-                        });
-
-                // Replace the text node with the links and leftover text nodes
-                Array.prototype.splice.apply(parent.children, [index, 1].concat(nodes));
-              }
-            }
-          });
+        if (!isValidCodeElement(node, ancestors)) {
+          return;
         }
+
+        visit(node, 'text', (node, ancestors) => {
+          const isInLink = isInsideLink(ancestors);
+          if (isInLink) {
+            return;
+          }
+
+          const parent = ancestors[ancestors.length - 1];
+          const index = parent.children.indexOf(node);
+
+          // Can we convert the whole text node into a doc link?
+          const docs = getDocFromAlias(node.value);
+          if (foundValidDoc(docs, node.value, file)) {
+            parent.children.splice(index, 1, createLinkNode(docs[0], node.value));
+          } else {
+            // Parse the text for words that we can convert to links
+            const nodes = getNodes(node, file);
+            // Replace the text node with the links and leftover text nodes
+            Array.prototype.splice.apply(parent.children, [index, 1].concat(nodes));
+          }
+        });
       });
     };
   }
 
-  function foundValidDoc(docs) {
-    return docs.length === 1 && !docs[0].internal &&
-        autoLinkCodeImpl.docTypes.indexOf(docs[0].docType) !== -1;
+  function isValidCodeElement(node, ancestors) {
+    // Only interested in code elements that:
+    // * do not have `no-auto-link` class
+    // * do not have an ignored language
+    // * are not inside links
+    const isCodeElement = autoLinkCodeImpl.codeElements.some(elementType => is(node, elementType));
+    const hasNoAutoLink = node.properties.className && node.properties.className.includes('no-auto-link');
+    const isLanguageSupported = !autoLinkCodeImpl.ignoredLanguages.includes(node.properties.language);
+    const isInLink = isInsideLink(ancestors);
+    return isCodeElement && !hasNoAutoLink && isLanguageSupported && !isInLink;
+  }
+
+  function isInsideLink(ancestors) {
+    return ancestors.some(ancestor => is(ancestor, 'a'));
+  }
+
+  function getNodes(node, file) {
+    return textContent(node)
+      .split(/([A-Za-z0-9_.-]+)/)
+      .filter(word => word.length)
+      .map((word, index, words) => {
+        // remove docs that fail the custom filter tests
+        const filteredDocs = autoLinkCodeImpl.customFilters.reduce(
+            (docs, filter) => filter(docs, words, index), getDocFromAlias(word));
+
+        return foundValidDoc(filteredDocs, word, file) ?
+            // Create a link wrapping the text node.
+            createLinkNode(filteredDocs[0], word) :
+            // this is just text so push a new text node
+            {type: 'text', value: word};
+      });
+  }
+
+  /**
+   * Validates the docs to be used to generate the links. The validation ensures
+   * that the docs are not `internal` and that the `docType` is supported. The `path`
+   * can be empty when the `API` is not public.
+   *
+   * @param {Array<Object>} docs An array of objects containing the doc details
+   *
+   * @param {string} keyword The keyword the doc applies to
+   */
+  function foundValidDoc(docs, keyword, file) {
+    if (docs.length !== 1) {
+      return false;
+    }
+
+    var doc = docs[0];
+
+    const isInvalidDoc = doc.docType === 'member' && !keyword.includes('.');
+    if (isInvalidDoc) {
+      return false;
+    }
+
+    if (doc.path === '') {
+      var message = `
+      autoLinkCode: Doc path is empty for "${doc.id}" - link will not be generated for "${keyword}".
+      Please make sure if the doc should be public. If not, it should probably not be referenced in the docs.`;
+
+      file.message(message);
+      return false;
+    }
+
+    return !doc.internal && autoLinkCodeImpl.docTypes.includes(doc.docType);
   }
 
   function createLinkNode(doc, text) {

aio/tools/transforms/angular-base-package/post-processors/auto-link-code.spec.js

@@ -126,6 +126,24 @@ describe('autoLinkCode post-processor', () => {
     expect(doc.renderedContent).toEqual('<code>MyClass</code>');
   });
 
+  it('should ignore code items that match an API doc but have no path set',
+     () => {
+       aliasMap.addDoc(
+           {docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: ''});
+       const doc = {docType: 'test-doc', renderedContent: '<code>MyClass</code>'};
+       processor.$process([doc]);
+       expect(doc.renderedContent).toEqual('<code>MyClass</code>');
+     });
+
+  it('should ignore documents when the `docType` is set to `member` and the keyword doesn\'t include `.`',
+     () => {
+       aliasMap.addDoc(
+           {docType: 'member', id: 'MyEnum', aliases: ['MyEnum'], path: 'a/b/c'});
+       const doc = {docType: 'test-doc', renderedContent: '<code>MyEnum</code>'};
+       processor.$process([doc]);
+       expect(doc.renderedContent).toEqual('<code>MyEnum</code>');
+     });
+
   it('should insert anchors for individual text nodes within a code block', () => {
     aliasMap.addDoc({docType: 'class', id: 'MyClass', aliases: ['MyClass'], path: 'a/b/myclass'});
     const doc = {

aio/tools/transforms/angular-base-package/services/auto-link-filters/ignoreGenericWords.js

@@ -5,6 +5,6 @@
  */
 
 module.exports = function ignoreGenericWords() {
-  const ignoredWords = new Set(['a', 'classes', 'create', 'error', 'group', 'request', 'target', 'value']);
+  const ignoredWords = new Set(['a', 'classes', 'create', 'error', 'group', 'request', 'target', 'value', '_']);
   return (docs, words, index) => ignoredWords.has(words[index].toLowerCase()) ? [] : docs;
 };

aio/tsconfig.json

@@ -37,7 +37,6 @@
   ],
   "angularCompilerOptions": {
     "disableTypeScriptVersionCheck": true,
-    "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
     "strictTemplates": true
   }

dev-infra/BUILD.bazel

@@ -9,9 +9,10 @@ ts_library(
     module_name = "@angular/dev-infra-private",
     deps = [
         "//dev-infra/commit-message",
+        "//dev-infra/format",
         "//dev-infra/pullapprove",
         "//dev-infra/ts-circular-dependencies",
-        "//dev-infra/utils:config",
+        "//dev-infra/utils",
         "@npm//@types/node",
         "@npm//@types/yargs",
         "@npm//yargs",

dev-infra/cli.ts

@@ -10,6 +10,7 @@ import * as yargs from 'yargs';
 import {tsCircularDependenciesBuilder} from './ts-circular-dependencies/index';
 import {buildPullapproveParser} from './pullapprove/cli';
 import {buildCommitMessageParser} from './commit-message/cli';
+import {buildFormatParser} from './format/cli';
 
 yargs.scriptName('ng-dev')
     .demandCommand()
@@ -17,6 +18,7 @@ yargs.scriptName('ng-dev')
     .command('ts-circular-deps <command>', '', tsCircularDependenciesBuilder)
     .command('pullapprove <command>', '', buildPullapproveParser)
     .command('commit-message <command>', '', buildCommitMessageParser)
+    .command('format <command>', '', buildFormatParser)
     .wrap(120)
     .strict()
     .parse();

dev-infra/commit-message/BUILD.bazel

@@ -13,7 +13,7 @@ ts_library(
     module_name = "@angular/dev-infra-private/commit-message",
     visibility = ["//dev-infra:__subpackages__"],
     deps = [
-        "//dev-infra/utils:config",
+        "//dev-infra/utils",
         "@npm//@types/node",
         "@npm//@types/shelljs",
         "@npm//@types/yargs",
@@ -29,7 +29,7 @@ ts_library(
     srcs = ["validate.spec.ts"],
     deps = [
         ":commit-message",
-        "//dev-infra/utils:config",
+        "//dev-infra/utils",
         "@npm//@types/events",
         "@npm//@types/jasmine",
         "@npm//@types/node",

dev-infra/commit-message/cli.ts

@@ -14,9 +14,29 @@ export function buildCommitMessageParser(localYargs: yargs.Argv) {
   return localYargs.help()
       .strict()
       .command(
-          'pre-commit-validate', 'Validate the most recent commit message', {},
-          () => {
-            validateFile('.git/COMMIT_EDITMSG');
+          'pre-commit-validate', 'Validate the most recent commit message', {
+            'file': {
+              type: 'string',
+              conflicts: ['file-env-variable'],
+              description: 'The path of the commit message file.',
+            },
+            'file-env-variable': {
+              type: 'string',
+              conflicts: ['file'],
+              description:
+                  'The key of the environment variable for the path of the commit message file.',
+              coerce: arg => {
+                const file = process.env[arg];
+                if (!file) {
+                  throw new Error(`Provided environment variable "${arg}" was not found.`);
+                }
+                return file;
+              },
+            }
+          },
+          args => {
+            const file = args.file || args.fileEnvVariable || '.git/COMMIT_EDITMSG';
+            validateFile(file);
           })
       .command(
           'validate-range', 'Validate a range of commit messages', {

dev-infra/commit-message/validate-file.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {readFileSync} from 'fs';
-import {join} from 'path';
+import {resolve} from 'path';
 
 import {getRepoBaseDir} from '../utils/config';
 
@@ -14,7 +14,7 @@ import {validateCommitMessage} from './validate';
 
 /** Validate commit message at the provided file path. */
 export function validateFile(filePath: string) {
-  const commitMessage = readFileSync(join(getRepoBaseDir(), filePath), 'utf8');
+  const commitMessage = readFileSync(resolve(getRepoBaseDir(), filePath), 'utf8');
   if (validateCommitMessage(commitMessage)) {
     console.info('√  Valid commit message');
     return;

dev-infra/commit-message/validate-range.ts

@@ -11,6 +11,9 @@ import {parseCommitMessage, validateCommitMessage, ValidateCommitMessageOptions}
 // Whether the provided commit is a fixup commit.
 const isNonFixup = (m: string) => !parseCommitMessage(m).isFixup;
 
+// Extracts commit header (first line of commit message).
+const extractCommitHeader = (m: string) => parseCommitMessage(m).header;
+
 /** Validate all commits in a provided git commit range. */
 export function validateCommitRange(range: string) {
   // A random value is used as a string to allow for a definite split point in the git log result.
@@ -35,11 +38,18 @@ export function validateCommitRange(range: string) {
   const allCommitsInRangeValid = commits.every((m, i) => {
     const options: ValidateCommitMessageOptions = {
       disallowSquash: true,
-      nonFixupCommitHeaders: isNonFixup(m) ? undefined : commits.slice(0, i).filter(isNonFixup)
+      nonFixupCommitHeaders: isNonFixup(m) ?
+          undefined :
+          commits.slice(0, i).filter(isNonFixup).map(extractCommitHeader)
     };
     return validateCommitMessage(m, options);
   });
+
   if (allCommitsInRangeValid) {
     console.info('√  All commit messages in range valid.');
+  } else {
+    // Exit with a non-zero exit code if invalid commit messages have
+    // been discovered.
+    process.exit(1);
   }
 }

dev-infra/commit-message/validate.spec.ts

@@ -160,21 +160,12 @@ describe('validate-commit-message.js', () => {
     });
 
     describe('(squash)', () => {
-      it('should strip the `squash! ` prefix and validate the rest', () => {
-        const errorMessage = `The commit message header does not match the expected format.`;
-
-        // Valid messages.
-        expect(validateCommitMessage('squash! feat(core): add feature')).toBe(VALID);
-        expect(validateCommitMessage('squash! fix: a bug', {disallowSquash: false})).toBe(VALID);
-
-        // Invalid messages.
-        expect(validateCommitMessage('squash! fix a typo', {disallowSquash: false})).toBe(INVALID);
-        expect(lastError).toContain('squash! fix a typo');
-        expect(lastError).toContain(errorMessage);
-
-        expect(validateCommitMessage('squash! squash! fix: a bug')).toBe(INVALID);
-        expect(lastError).toContain('squash! squash! fix: a bug');
-        expect(lastError).toContain(errorMessage);
+      describe('without `disallowSquash`', () => {
+        it('should return commits as valid', () => {
+          expect(validateCommitMessage('squash! feat(core): add feature')).toBe(VALID);
+          expect(validateCommitMessage('squash! fix: a bug')).toBe(VALID);
+          expect(validateCommitMessage('squash! fix a typo')).toBe(VALID);
+        });
       });
 
       describe('with `disallowSquash`', () => {
@@ -191,21 +182,10 @@ describe('validate-commit-message.js', () => {
 
     describe('(fixup)', () => {
       describe('without `nonFixupCommitHeaders`', () => {
-        it('should strip the `fixup! ` prefix and validate the rest', () => {
-          const errorMessage = `The commit message header does not match the expected format.`;
-
-          // Valid messages.
+        it('should return commits as valid', () => {
           expect(validateCommitMessage('fixup! feat(core): add feature')).toBe(VALID);
           expect(validateCommitMessage('fixup! fix: a bug')).toBe(VALID);
-
-          // Invalid messages.
-          expect(validateCommitMessage('fixup! fix a typo')).toBe(INVALID);
-          expect(lastError).toContain('fixup! fix a typo');
-          expect(lastError).toContain(errorMessage);
-
-          expect(validateCommitMessage('fixup! fixup! fix: a bug')).toBe(INVALID);
-          expect(lastError).toContain('fixup! fixup! fix: a bug');
-          expect(lastError).toContain(errorMessage);
+          expect(validateCommitMessage('fixup! fixup! fix: a bug')).toBe(VALID);
         });
       });