release: cut the 4.4.2 release

The id was leftover from previous iterations of ngUpgrade and is
no longer needed. Moreover, setting it can clash with CSS usage of id.

Fixes #18446

PR Close #19182

.circleci/config.yml

@@ -1,18 +1,31 @@
-defaults: &defaults
+# Configuration file for https://circleci.com/gh/angular/angular
+
+# Note: YAML anchors allow an object to be re-used, reducing duplication.
+# The ampersand declares an alias for an object, then later the `<<: *name`
+# syntax dereferences it.
+# See http://blog.daemonl.com/2016/02/yaml.html
+# To validate changes, use an online parser, eg.
+# http://yaml-online-parser.appspot.com/
+
+# Settings common to each job
+anchor_1: &job_defaults
   working_directory: ~/ng
   docker:
     - image: angular/ngcontainer
 
+# After checkout, rebase on top of master.
+# Similar to travis behavior, but not quite the same.
+# See https://discuss.circleci.com/t/1662
+anchor_2: &post_checkout
+  post: git pull --ff-only origin "refs/pull/${CI_PULL_REQUEST//*pull\//}/merge"
+
 version: 2
 jobs:
   lint:
-    <<: *defaults
+    <<: *job_defaults
     steps:
       - checkout:
-          # After checkout, rebase on top of master.
-          # Similar to travis behavior, but not quite the same.
-          # See https://discuss.circleci.com/t/1662
-          post: git pull --ff-only origin "refs/pull/${CI_PULL_REQUEST//*pull\//}/merge"
+          <<: *post_checkout
       - restore_cache:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
 
@@ -21,13 +34,14 @@ jobs:
       - run: ./node_modules/.bin/gulp lint
 
   build:
-    <<: *defaults
+    <<: *job_defaults
     steps:
-      - checkout
+      - checkout:
+          <<: *post_checkout
       - restore_cache:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
 
-      - run: bazel run @io_bazel_rules_typescript_node//:bin/npm install
+      - run: bazel run @build_bazel_rules_typescript_node//:bin/npm install
       - run: bazel build ...
       - save_cache:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}

.github/ISSUE_TEMPLATE.md

@@ -1,14 +1,14 @@
 <!--
 PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.
 
-ISSUES MISSING IMPORTANT INFORMATION MIGHT BE CLOSED WITHOUT INVESTIGATION.
+ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
 -->
 
-## I'm submitting a ...
+## I'm submitting a...
 <!-- Check one of the following options with "x" -->
 <pre><code>
-[ ] Regression (behavior that used to work and stopped working in a new release)
-[ ] Bug report <!-- Please search github for a similar issue or PR before submitting -->
+[ ] Regression (a behavior that used to work and stopped working in a new release)
+[ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
 [ ] Feature request
 [ ] Documentation issue or request
 [ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
@@ -32,7 +32,7 @@ https://plnkr.co or similar (you can use this template as a starting point: http
 <!-- Describe the motivation or the concrete use case. -->
 
 
-## Please tell us about your environment
+## Environment
 
 <pre><code>
 Angular version: X.Y.Z
@@ -49,8 +49,8 @@ Browser:
 - [ ] Edge version XX
  
 For Tooling issues:
-- Node version: XX <!-- use `node --version` -->
-- Platform: <!-- Mac, Linux, Windows -->
+- Node version: XX  <!-- run `node --version` -->
+- Platform:  <!-- Mac, Linux, Windows -->
 
 Others:
 <!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,5 +1,5 @@
 ## PR Checklist
-Does please check if your PR fulfills the following requirements:
+Please check if your PR fulfills the following requirements:
 
 - [ ] The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
 - [ ] Tests for the changes have been added (for bug fixes / features)

.gitignore

@@ -2,6 +2,7 @@
 
 /dist/
 bazel-*
+e2e_test.*
 node_modules
 bower_components
 

.pullapprove.yml

@@ -8,9 +8,11 @@
 # alexeagle - Alex Eagle
 # alxhub - Alex Rickabaugh
 # chuckjaz - Chuck Jazdzewski
+# Foxandxss - Jesús Rodríguez
 # gkalpak - George Kalpakas
 # IgorMinar - Igor Minar
 # jasonaden - Jason Aden
+# juleskremer - Jules Kremer
 # kara - Kara Erickson
 # matsko - Matias Niemelä
 # mhevery - Misko Hevery
@@ -18,10 +20,11 @@
 # pkozlowski-opensource - Pawel Kozlowski
 # robwormald - Rob Wormald
 # tbosch - Tobias Bosch
+# tinayuangao - Tina Gao
 # vicb - Victor Berchet
 # vikerman - Vikram Subramanian
 # wardbell - Ward Bell
-# tinayuangao - Tina Gao
+
 
 version: 2
 
@@ -93,6 +96,7 @@ groups:
         - "packages/core/*"
     users:
       - tbosch #primary
+      - chuckjaz
       - mhevery
       - vicb
       - IgorMinar #fallback
@@ -104,6 +108,7 @@ groups:
         - "packages/platform-browser/animations/*"
     users:
       - matsko #primary
+      - chuckjaz #fallback
       - mhevery #fallback
       - IgorMinar #fallback
 
@@ -249,10 +254,46 @@ groups:
   angular.io:
     conditions:
       files:
-        - "aio/*"
+        include:
+          - "aio/*"
+        exclude:
+          - "aio/content/*"
     users:
-      - IgorMinar #primary
-      - petebacondarwin #secondary
+      - petebacondarwin #primary
+      - IgorMinar
       - gkalpak
-      - wardbell
+      - mhevery #fallback
+
+  angular.io-guide-and-tutorial:
+    conditions:
+      files:
+        include:
+          - "aio/content/*"
+        exclude:
+          - "aio/content/marketing/*"
+          - "aio/content/navigation.json"
+          - "aio/content/license.md"
+    users:
+      - juleskremer #primary
+      - Foxandxss
+      - stephenfluin
+      - wardbell
+      - petebacondarwin
+      - gkalpak
+      - IgorMinar #fallback
+      - mhevery #fallback
+
+  angular.io-marketing:
+    conditions:
+      files:
+        include:
+          - "aio/content/marketing/*"
+          - "aio/content/navigation.json"
+          - "aio/content/license.md"
+    users:
+      - juleskremer #primary
+      - stephenfluin
+      - petebacondarwin
+      - gkalpak
+      - IgorMinar #fallback
       - mhevery #fallback

.travis.yml

@@ -1,9 +1,12 @@
 language: node_js
 sudo: false
+# force trusty as Google Chrome addon is not supported on Precise
+dist: trusty
 node_js:
   - '6.9.5'
 
 addons:
+  chrome: stable
 #  firefox: "38.0"
   apt:
     sources:
@@ -50,16 +53,17 @@ env:
     - CI_MODE=browserstack_required
     - CI_MODE=saucelabs_optional
     - CI_MODE=browserstack_optional
-    - CI_MODE=docs_test
+    - CI_MODE=aio_tools_test
     - CI_MODE=aio
-    - CI_MODE=aio_e2e
+    - CI_MODE=aio_e2e AIO_SHARD=0
+    - CI_MODE=aio_e2e AIO_SHARD=1
+    - CI_MODE=bazel
 
 matrix:
   fast_finish: true
   allow_failures:
     - env: "CI_MODE=saucelabs_optional"
     - env: "CI_MODE=browserstack_optional"
-    - env: "CI_MODE=aio_e2e"
 
 before_install:
   # source the env.sh script so that the exported variables are available to other scripts later on
@@ -76,5 +80,4 @@ script:
   - ./scripts/ci/angular.sh
   # all the scripts under this line will not quickly abort in case ${TRAVIS_TEST_RESULT} is 1 (job failure)
   - ./scripts/ci/cleanup.sh
-  # Disabled so we can debug Travis build failures on Master seeming to coming from printing logs
-  # - ./scripts/ci/print-logs.sh
+  - ./scripts/ci/print-logs.sh

BUILD.bazel

@@ -11,8 +11,15 @@ filegroup(
         # This won't scale in the general case.
         # TODO(alexeagle): figure out what to do
         "node_modules/typescript/**",
-        "node_modules/zone.js/**/*.d.ts",
+        "node_modules/zone.js/**",
         "node_modules/rxjs/**/*.d.ts",
+        "node_modules/rxjs/**/*.js",
         "node_modules/@types/**/*.d.ts",
+        "node_modules/tsickle/**",
+        "node_modules/hammerjs/**/*.d.ts",
+        "node_modules/protobufjs/**",
+        "node_modules/bytebuffer/**",
+        "node_modules/reflect-metadata/**",
+        "node_modules/minimist/**/*.js",
     ]),
 )

CONTRIBUTING.md

@@ -17,7 +17,7 @@ Help us keep Angular open and inclusive. Please read and follow our [Code of Con
 
 ## <a name="question"></a> Got a Question or Problem?
 
-Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [Stack Overflow](https://stackoverflow.com/questions/tagged/angular) where the questions should be tagged with tag `angular`.
+Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [Stack Overflow](https://stackoverflow.com/questions/tagged/angular) where the questions should be tagged with tag `angular`.
 
 Stack Overflow is a much better place to ask questions since:
 
@@ -25,7 +25,7 @@ Stack Overflow is a much better place to ask questions since:
 - questions and answers stay available for public viewing so your question / answer might help someone else
 - Stack Overflow's voting system assures that the best answers are prominently visible.
 
-To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to Stack Overflow.
+To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Overflow.
 
 If you would like to chat about the question in real-time, you can reach out via [our gitter channel][gitter].
 
@@ -206,6 +206,7 @@ The scope should be the name of the npm package affected (as perceived by person
 
 The following is the list of supported scopes:
 
+* **animations**
 * **common**
 * **compiler**
 * **compiler-cli**

README.md

@@ -3,22 +3,21 @@
 [![Join the chat at https://gitter.im/angular/angular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular/angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Issue Stats](http://issuestats.com/github/angular/angular/badge/pr?style=flat)](http://issuestats.com/github/angular/angular)
 [![Issue Stats](http://issuestats.com/github/angular/angular/badge/issue?style=flat)](http://issuestats.com/github/angular/angular)
-[![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://badge.fury.io/js/%40angular%2Fcore)
+[![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://www.npmjs.com/@angular/core)
+
 
 [![Sauce Test Status](https://saucelabs.com/browser-matrix/angular2-ci.svg)](https://saucelabs.com/u/angular2-ci)
+
 *Safari (7+), iOS (7+), Edge (14) and IE mobile (11) are tested on [BrowserStack][browserstack].*
 
-Angular
-=========
-
-Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript (JS) and other languages.
+# Angular
 
+Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages.
 
 ## Quickstart
 
 [Get started in 5 minutes][quickstart].
 
-
 ## Want to help?
 
 Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our

WORKSPACE

@@ -1,11 +1,17 @@
 load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 
 git_repository(
-   name = "io_bazel_rules_typescript",
+   name = "build_bazel_rules_typescript",
    remote = "https://github.com/bazelbuild/rules_typescript.git",
-   commit = "3a8404d",
+   tag = "0.0.5",
 )
 
-load("@io_bazel_rules_typescript//:defs.bzl", "node_repositories")
+load("@build_bazel_rules_typescript//:defs.bzl", "node_repositories")
 
 node_repositories(package_json = "//:package.json")
+
+git_repository(
+    name = "build_bazel_rules_angular",
+    remote = "https://github.com/bazelbuild/rules_angular.git",
+    tag = "0.0.1",
+)

aio/.angular-cli.json

@@ -31,8 +31,9 @@
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
-        "stage": "environments/environment.stage.ts",
-        "prod": "environments/environment.prod.ts"
+        "next": "environments/environment.next.ts",
+        "stable": "environments/environment.stable.ts",
+        "archive": "environments/environment.archive.ts"
       }
     }
   ],

aio/README.md

@@ -16,6 +16,7 @@ Here are the most important tasks you might need to use:
 * `yarn setup` - Install all the dependencies, boilerplate, plunkers, zips and runs dgeni on the docs.
 
 * `yarn start` - run a development web server that watches the files; then builds the doc-viewer and reloads the page, as necessary.
+* `yarn serve-and-sync` - run both the `docs-watch` and `start` in the same console.
 * `yarn lint` - check that the doc-viewer code follows our style rules.
 * `yarn test` - watch all the source files, for the doc-viewer, and run all the unit tests when any change.
 * `yarn e2e` - run all the e2e tests for the doc-viewer.
@@ -25,11 +26,16 @@ Here are the most important tasks you might need to use:
 * `yarn docs-lint` - check that the doc gen code follows our style rules.
 * `yarn docs-test` - run the unit tests for the doc generation code.
 
-* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally.
+* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally. Add the option `-- --local` to use your local version of Angular contained in the "dist" folder.
 * `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`.
 * `yarn generate-plunkers` - generate the plunker files that are used by the `live-example` tags in the docs.
 * `yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs.
 
+* `yarn example-e2e` - run all e2e tests for examples
+  - `yarn example-e2e -- --setup` - force webdriver update & other setup, then run tests
+  - `yarn example-e2e -- --filter=foo` - limit e2e tests to those containing the word "foo"
+  - `yarn example-e2e -- --setup --local` - run e2e tests with the local version of Angular contained in the "dist" folder
+
 * `yarn build-ie-polyfills` - generates a js file of polyfills that can be loaded in Internet Explorer.
 
 ## Using ServiceWorker locally

aio/aio-builds-setup/dockerbuild/nginx/aio-builds.conf

@@ -88,6 +88,21 @@ server {
     resolver 127.0.0.1;
   }
 
+  # Notify about PR changes
+  location "~^/pr-updated/?$" {
+    if ($request_method != "POST") {
+      add_header Allow "POST";
+      return 405;
+    }
+
+    proxy_pass_request_headers on;
+    proxy_redirect             off;
+    proxy_method               POST;
+    proxy_pass                 http://{{$AIO_UPLOAD_HOSTNAME}}:{{$AIO_UPLOAD_PORT}}$request_uri;
+
+    resolver 127.0.0.1;
+  }
+
   # Everything else
   location / {
     return 404;

aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/build-creator.ts

@@ -18,49 +18,22 @@ export class BuildCreator extends EventEmitter {
   }
 
   // Methods - Public
-  public changePrVisibility(pr: string, makePublic: boolean): Promise<void> {
-    const {oldPrDir, newPrDir} = this.getCandidatePrDirs(pr, makePublic);
-
-    return Promise.
-      all([this.exists(oldPrDir), this.exists(newPrDir)]).
-      then(([oldPrDirExisted, newPrDirExisted]) => {
-        if (!oldPrDirExisted) {
-          throw new UploadError(404, `Request to move non-existing directory '${oldPrDir}' to '${newPrDir}'.`);
-        } else if (newPrDirExisted) {
-          throw new UploadError(409, `Request to move '${oldPrDir}' to existing directory '${newPrDir}'.`);
-        }
-
-        return Promise.resolve().
-          then(() => shell.mv(oldPrDir, newPrDir)).
-          then(() => this.listShasByDate(newPrDir)).
-          then(shas => this.emit(ChangedPrVisibilityEvent.type, new ChangedPrVisibilityEvent(+pr, shas, makePublic))).
-          then(() => undefined);
-      }).
-      catch(err => {
-        if (!(err instanceof UploadError)) {
-          err = new UploadError(500, `Error while making PR ${pr} ${makePublic ? 'public' : 'hidden'}.\n${err}`);
-        }
-
-        throw err;
-      });
-  }
-
   public create(pr: string, sha: string, archivePath: string, isPublic: boolean): Promise<void> {
     // Use only part of the SHA for more readable URLs.
     sha = sha.substr(0, SHORT_SHA_LEN);
 
-    const {oldPrDir: otherVisPrDir, newPrDir: prDir} = this.getCandidatePrDirs(pr, isPublic);
+    const {newPrDir: prDir} = this.getCandidatePrDirs(pr, isPublic);
     const shaDir = path.join(prDir, sha);
     let dirToRemoveOnError: string;
 
     return Promise.resolve().
-      then(() => this.exists(otherVisPrDir)).
       // If the same PR exists with different visibility, update the visibility first.
-      then(otherVisPrDirExisted => (otherVisPrDirExisted && this.changePrVisibility(pr, isPublic)) as any).
+      then(() => this.updatePrVisibility(pr, isPublic)).
       then(() => Promise.all([this.exists(prDir), this.exists(shaDir)])).
       then(([prDirExisted, shaDirExisted]) => {
         if (shaDirExisted) {
-          throw new UploadError(409, `Request to overwrite existing directory: ${shaDir}`);
+          const publicOrNot = isPublic ? 'public' : 'non-public';
+          throw new UploadError(409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
         }
 
         dirToRemoveOnError = prDirExisted ? shaDir : prDir;
@@ -84,6 +57,36 @@ export class BuildCreator extends EventEmitter {
       });
   }
 
+  public updatePrVisibility(pr: string, makePublic: boolean): Promise<boolean> {
+    const {oldPrDir: otherVisPrDir, newPrDir: targetVisPrDir} = this.getCandidatePrDirs(pr, makePublic);
+
+    return Promise.
+      all([this.exists(otherVisPrDir), this.exists(targetVisPrDir)]).
+      then(([otherVisPrDirExisted, targetVisPrDirExisted]) => {
+        if (!otherVisPrDirExisted) {
+          // No visibility change: Either the visibility is up-to-date or the PR does not exist.
+          return false;
+        } else if (targetVisPrDirExisted) {
+          // Error: Directories for both visibilities exist.
+          throw new UploadError(409, `Request to move '${otherVisPrDir}' to existing directory '${targetVisPrDir}'.`);
+        }
+
+        // Visibility change: Moving `otherVisPrDir` to `targetVisPrDir`.
+        return Promise.resolve().
+          then(() => shell.mv(otherVisPrDir, targetVisPrDir)).
+          then(() => this.listShasByDate(targetVisPrDir)).
+          then(shas => this.emit(ChangedPrVisibilityEvent.type, new ChangedPrVisibilityEvent(+pr, shas, makePublic))).
+          then(() => true);
+      }).
+      catch(err => {
+        if (!(err instanceof UploadError)) {
+          err = new UploadError(500, `Error while making PR ${pr} ${makePublic ? 'public' : 'hidden'}.\n${err}`);
+        }
+
+        throw err;
+      });
+  }
+
   // Methods - Protected
   protected exists(fileOrDir: string): Promise<boolean> {
     return new Promise(resolve => fs.access(fileOrDir, err => resolve(!err)));

aio/aio-builds-setup/dockerbuild/scripts-js/lib/upload-server/upload-server-factory.ts

@@ -1,4 +1,5 @@
 // Imports
+import * as bodyParser from 'body-parser';
 import * as express from 'express';
 import * as http from 'http';
 import {GithubPullRequests} from '../common/github-pull-requests';
@@ -84,6 +85,7 @@ class UploadServerFactory {
 
   protected createMiddleware(buildVerifier: BuildVerifier, buildCreator: BuildCreator): express.Express {
     const middleware = express();
+    const jsonParser = bodyParser.json();
 
     middleware.get(/^\/create-build\/([1-9][0-9]*)\/([0-9a-f]{40})\/?$/, (req, res) => {
       const pr = req.params[0];
@@ -96,8 +98,8 @@ class UploadServerFactory {
       } else if (!archive) {
         this.throwRequestError(400, `Missing or empty '${X_FILE_HEADER}' header`, req);
       } else {
-        buildVerifier.
-          verify(+pr, authHeader).
+        Promise.resolve().
+          then(() => buildVerifier.verify(+pr, authHeader)).
           then(verStatus => verStatus === BUILD_VERIFICATION_STATUS.verifiedAndTrusted).
           then(isPublic => buildCreator.create(pr, sha, archive, isPublic).
             then(() => res.sendStatus(isPublic ? 201 : 202))).
@@ -105,8 +107,23 @@ class UploadServerFactory {
       }
     });
     middleware.get(/^\/health-check\/?$/, (_req, res) => res.sendStatus(200));
-    middleware.get('*', req => this.throwRequestError(404, 'Unknown resource', req));
-    middleware.all('*', req => this.throwRequestError(405, 'Unsupported method', req));
+    middleware.post(/^\/pr-updated\/?$/, jsonParser, (req, res) => {
+      const {action, number: prNo}: {action?: string, number?: number} = req.body;
+      const visMayHaveChanged = !action || (action === 'labeled') || (action === 'unlabeled');
+
+      if (!visMayHaveChanged) {
+        res.sendStatus(200);
+      } else if (!prNo) {
+        this.throwRequestError(400, `Missing or empty 'number' field`, req);
+      } else {
+        Promise.resolve().
+          then(() => buildVerifier.getPrIsTrusted(prNo)).
+          then(isPublic => buildCreator.updatePrVisibility(String(prNo), isPublic)).
+          then(() => res.sendStatus(200)).
+          catch(err => this.respondWithError(res, err));
+      }
+    });
+    middleware.all('*', req => this.throwRequestError(404, 'Unknown resource', req));
     middleware.use((err: any, _req: any, res: express.Response, _next: any) => this.respondWithError(res, err));
 
     return middleware;
@@ -125,7 +142,10 @@ class UploadServerFactory {
   }
 
   protected throwRequestError(status: number, error: string, req: express.Request) {
-    throw new UploadError(status, `${error} in request: ${req.method} ${req.originalUrl}`);
+    const message = `${error} in request: ${req.method} ${req.originalUrl}` +
+                    (!req.body ? '' : ` ${JSON.stringify(req.body)}`);
+
+    throw new UploadError(status, message);
   }
 }
 

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/constants.ts

@@ -0,0 +1,16 @@
+// Using the values below, we can fake the response of the corresponding methods in tests. This is
+// necessary, because the test upload-server will be running as a separate node process, so we will
+// not have direct access to the code (e.g. for mocking).
+// (See also 'lib/verify-setup/start-test-upload-server.ts'.)
+
+/* tslint:disable: variable-name */
+
+// Special values to be used as `authHeader` in `BuildVerifier#verify()`.
+export const BV_verify_error = 'FAKE_VERIFICATION_ERROR';
+export const BV_verify_verifiedNotTrusted = 'FAKE_VERIFIED_NOT_TRUSTED';
+
+// Special values to be used as `pr` in `BuildVerifier#getPrIsTrusted()`.
+export const BV_getPrIsTrusted_error = 32203;
+export const BV_getPrIsTrusted_notTrusted = 72457;
+
+/* tslint:enable: variable-name */

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/nginx.e2e.ts

@@ -317,6 +317,51 @@ describe(`nginx`, () => {
     });
 
 
+    describe(`${host}/pr-updated`, () => {
+      const url = `${scheme}://${host}/pr-updated`;
+
+
+      it('should disallow non-POST requests', done => {
+        Promise.all([
+          h.runCmd(`curl -iLX GET ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
+          h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
+          h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
+          h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse([405, 'Not Allowed'])),
+        ]).then(done);
+      });
+
+
+      it('should pass requests through to the upload server', done => {
+        const cmdPrefix = `curl -iLX POST --header "Content-Type: application/json"`;
+
+        const cmd1 = `${cmdPrefix} ${url}`;
+        const cmd2 = `${cmdPrefix} --data '{"number":${pr}}' ${url}`;
+        const cmd3 = `${cmdPrefix} --data '{"number":${pr},"action":"foo"}' ${url}`;
+
+        Promise.all([
+          h.runCmd(cmd1).then(h.verifyResponse(400, /Missing or empty 'number' field/)),
+          h.runCmd(cmd2).then(h.verifyResponse(200)),
+          h.runCmd(cmd3).then(h.verifyResponse(200)),
+        ]).then(done);
+      });
+
+
+      it('should respond with 404 for unknown paths', done => {
+        const cmdPrefix = `curl -iLX POST ${scheme}://${host}`;
+
+        Promise.all([
+          h.runCmd(`${cmdPrefix}/foo/pr-updated`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/foo-pr-updated`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/foonpr-updated`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/pr-updated/foo`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/pr-updated-foo`).then(h.verifyResponse(404)),
+          h.runCmd(`${cmdPrefix}/pr-updatednfoo`).then(h.verifyResponse(404)),
+        ]).then(done);
+      });
+
+    });
+
+
     describe(`${host}/*`, () => {
 
       it('should respond with 404 for unknown URLs (even if the resource exists)', done => {

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/server-integration.e2e.ts

@@ -1,5 +1,6 @@
 // Imports
 import * as path from 'path';
+import * as c from './constants';
 import {helper as h} from './helper';
 
 // Tests
@@ -14,12 +15,14 @@ h.runForAllSupportedSchemes((scheme, port) => describe(`integration (on ${scheme
   const getFile = (pr: string, sha: string, file: string) =>
     h.runCmd(`curl -iL ${scheme}://pr${pr}-${h.getShordSha(sha)}.${host}/${file}`);
   const uploadBuild = (pr: string, sha: string, archive: string, authHeader = 'Token FOO') => {
-    // Using `FAKE_VERIFICATION_ERROR` or `FAKE_VERIFIED_NOT_TRUSTED` as `authHeader`,
-    // we can fake the response of the overwritten `BuildVerifier.verify()` method.
-    // (See 'lib/upload-server/index-test.ts'.)
     const curlPost = `curl -iLX POST --header "Authorization: ${authHeader}"`;
     return h.runCmd(`${curlPost} --data-binary "@${archive}" ${scheme}://${host}/create-build/${pr}/${sha}`);
   };
+  const prUpdated = (pr: number, action?: string) => {
+    const url = `${scheme}://${host}/pr-updated`;
+    const payloadStr = JSON.stringify({number: pr, action});
+    return h.runCmd(`curl -iLX POST --header "Content-Type: application/json" --data '${payloadStr}' ${url}`);
+  };
 
   beforeEach(() => jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000);
   afterEach(() => {
@@ -29,7 +32,7 @@ h.runForAllSupportedSchemes((scheme, port) => describe(`integration (on ${scheme
   });
 
 
-  describe('for a new PR', () => {
+  describe('for a new/non-existing PR', () => {
 
     it('should be able to upload and serve a public build', done => {
       const regexPrefix9 = `^PR: uploaded\\/${pr9} \\| SHA: ${sha9} \\| File:`;
@@ -54,7 +57,7 @@ h.runForAllSupportedSchemes((scheme, port) => describe(`integration (on ${scheme
 
       h.createDummyArchive(pr9, sha9, archivePath);
 
-      uploadBuild(pr9, sha9, archivePath, 'FAKE_VERIFIED_NOT_TRUSTED').
+      uploadBuild(pr9, sha9, archivePath, c.BV_verify_verifiedNotTrusted).
         then(() => Promise.all([
           getFile(pr9, sha9, 'index.html').then(h.verifyResponse(404)),
           getFile(pr9, sha9, 'foo/bar.js').then(h.verifyResponse(404)),
@@ -74,7 +77,7 @@ h.runForAllSupportedSchemes((scheme, port) => describe(`integration (on ${scheme
 
       h.createDummyArchive(pr9, sha9, archivePath);
 
-      uploadBuild(pr9, sha9, archivePath, 'FAKE_VERIFICATION_ERROR').
+      uploadBuild(pr9, sha9, archivePath, c.BV_verify_error).
         then(h.verifyResponse(403, errorRegex9)).
         then(() => {
           expect(h.buildExists(pr9)).toBe(false);
@@ -83,6 +86,18 @@ h.runForAllSupportedSchemes((scheme, port) => describe(`integration (on ${scheme
         then(done);
     });
 
+
+    it('should be able to notify that a PR has been updated (and do nothing)', done => {
+      prUpdated(+pr9).
+        then(h.verifyResponse(200)).
+        then(() => {
+          // The PR should still not exist.
+          expect(h.buildExists(pr9, '', false)).toBe(false);
+          expect(h.buildExists(pr9, '', true)).toBe(false);
+        }).
+        then(done);
+    });
+
   });
 
 
@@ -123,7 +138,7 @@ h.runForAllSupportedSchemes((scheme, port) => describe(`integration (on ${scheme
       h.createDummyBuild(pr9, sha0, false);
       h.createDummyArchive(pr9, sha9, archivePath);
 
-      uploadBuild(pr9, sha9, archivePath, 'FAKE_VERIFIED_NOT_TRUSTED').
+      uploadBuild(pr9, sha9, archivePath, c.BV_verify_verifiedNotTrusted).
         then(() => Promise.all([
           getFile(pr9, sha0, 'index.html').then(h.verifyResponse(404)),
           getFile(pr9, sha0, 'foo/bar.js').then(h.verifyResponse(404)),
@@ -148,7 +163,7 @@ h.runForAllSupportedSchemes((scheme, port) => describe(`integration (on ${scheme
       h.createDummyBuild(pr9, sha0);
       h.createDummyArchive(pr9, sha9, archivePath);
 
-      uploadBuild(pr9, sha9, archivePath, 'FAKE_VERIFICATION_ERROR').
+      uploadBuild(pr9, sha9, archivePath, c.BV_verify_error).
         then(h.verifyResponse(403, errorRegex9)).
         then(() => {
           expect(h.buildExists(pr9)).toBe(true);
@@ -186,7 +201,7 @@ h.runForAllSupportedSchemes((scheme, port) => describe(`integration (on ${scheme
       h.createDummyBuild(pr9, sha9, false);
       h.createDummyArchive(pr9, sha9, archivePath);
 
-      uploadBuild(pr9, sha9, archivePath, 'FAKE_VERIFIED_NOT_TRUSTED').
+      uploadBuild(pr9, sha9, archivePath, c.BV_verify_verifiedNotTrusted).
         then(h.verifyResponse(409)).
         then(() => {
           expect(h.readBuildFile(pr9, sha9, 'index.html', false)).toMatch(idxContentRegex9);
@@ -195,6 +210,110 @@ h.runForAllSupportedSchemes((scheme, port) => describe(`integration (on ${scheme
         then(done);
     });
 
+
+    it('should be able to request re-checking visibility (if outdated)', done => {
+      const publicPr = pr9;
+      const hiddenPr = String(c.BV_getPrIsTrusted_notTrusted);
+
+      h.createDummyBuild(publicPr, sha9, false);
+      h.createDummyBuild(hiddenPr, sha9, true);
+
+      // PR visibilities are outdated (i.e. the opposte of what the should).
+      expect(h.buildExists(publicPr, '', false)).toBe(true);
+      expect(h.buildExists(publicPr, '', true)).toBe(false);
+      expect(h.buildExists(hiddenPr, '', false)).toBe(false);
+      expect(h.buildExists(hiddenPr, '', true)).toBe(true);
+
+      Promise.
+        all([
+          prUpdated(+publicPr).then(h.verifyResponse(200)),
+          prUpdated(+hiddenPr).then(h.verifyResponse(200)),
+        ]).
+        then(() => {
+          // PR visibilities should have been updated.
+          expect(h.buildExists(publicPr, '', false)).toBe(false);
+          expect(h.buildExists(publicPr, '', true)).toBe(true);
+          expect(h.buildExists(hiddenPr, '', false)).toBe(true);
+          expect(h.buildExists(hiddenPr, '', true)).toBe(false);
+        }).
+        then(() => {
+          h.deletePrDir(publicPr, true);
+          h.deletePrDir(hiddenPr, false);
+        }).
+        then(done);
+    });
+
+
+    it('should be able to request re-checking visibility (if up-to-date)', done => {
+      const publicPr = pr9;
+      const hiddenPr = String(c.BV_getPrIsTrusted_notTrusted);
+
+      h.createDummyBuild(publicPr, sha9, true);
+      h.createDummyBuild(hiddenPr, sha9, false);
+
+      // PR visibilities are already up-to-date.
+      expect(h.buildExists(publicPr, '', false)).toBe(false);
+      expect(h.buildExists(publicPr, '', true)).toBe(true);
+      expect(h.buildExists(hiddenPr, '', false)).toBe(true);
+      expect(h.buildExists(hiddenPr, '', true)).toBe(false);
+
+      Promise.
+        all([
+          prUpdated(+publicPr).then(h.verifyResponse(200)),
+          prUpdated(+hiddenPr).then(h.verifyResponse(200)),
+        ]).
+        then(() => {
+          // PR visibilities are still up-to-date.
+          expect(h.buildExists(publicPr, '', false)).toBe(false);
+          expect(h.buildExists(publicPr, '', true)).toBe(true);
+          expect(h.buildExists(hiddenPr, '', false)).toBe(true);
+          expect(h.buildExists(hiddenPr, '', true)).toBe(false);
+        }).
+        then(done);
+    });
+
+
+    it('should reject a request if re-checking visibility fails', done => {
+      const errorPr = String(c.BV_getPrIsTrusted_error);
+
+      h.createDummyBuild(errorPr, sha9, true);
+
+      expect(h.buildExists(errorPr, '', false)).toBe(false);
+      expect(h.buildExists(errorPr, '', true)).toBe(true);
+
+      prUpdated(+errorPr).
+        then(h.verifyResponse(500, /Test/)).
+        then(() => {
+          // PR visibility should not have been updated.
+          expect(h.buildExists(errorPr, '', false)).toBe(false);
+          expect(h.buildExists(errorPr, '', true)).toBe(true);
+        }).
+        then(done);
+    });
+
+
+    it('should reject a request if updating visibility fails', done => {
+      // One way to cause an error is to have both a public and a hidden directory for the same PR.
+      h.createDummyBuild(pr9, sha9, false);
+      h.createDummyBuild(pr9, sha9, true);
+
+      const hiddenPrDir = h.getPrDir(pr9, false);
+      const publicPrDir = h.getPrDir(pr9, true);
+      const bodyRegex = new RegExp(`Request to move '${hiddenPrDir}' to existing directory '${publicPrDir}'`);
+
+      expect(h.buildExists(pr9, '', false)).toBe(true);
+      expect(h.buildExists(pr9, '', true)).toBe(true);
+
+      prUpdated(+pr9).
+        then(h.verifyResponse(409, bodyRegex)).
+        then(() => {
+          // PR visibility should not have been updated.
+          expect(h.buildExists(pr9, '', false)).toBe(true);
+          expect(h.buildExists(pr9, '', true)).toBe(true);
+        }).
+        then(done);
+    });
+
   });
 
 }));

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/start-test-upload-server.ts

@@ -1,17 +1,31 @@
 // Imports
 import {GithubPullRequests} from '../common/github-pull-requests';
-import {BUILD_VERIFICATION_STATUS, BuildVerifier} from './build-verifier';
-import {UploadError} from './upload-error';
+import {BUILD_VERIFICATION_STATUS, BuildVerifier} from '../upload-server/build-verifier';
+import {UploadError} from '../upload-server/upload-error';
+import * as c from './constants';
 
 // Run
 // TODO(gkalpak): Add e2e tests to cover these interactions as well.
 GithubPullRequests.prototype.addComment = () => Promise.resolve();
+BuildVerifier.prototype.getPrIsTrusted = (pr: number) => {
+  switch (pr) {
+    case c.BV_getPrIsTrusted_error:
+      // For e2e tests, fake an error.
+      return Promise.reject('Test');
+    case c.BV_getPrIsTrusted_notTrusted:
+      // For e2e tests, fake an untrusted PR (`false`).
+      return Promise.resolve(false);
+    default:
+      // For e2e tests, default to trusted PRs (`true`).
+      return Promise.resolve(true);
+  }
+};
 BuildVerifier.prototype.verify = (expectedPr: number, authHeader: string) => {
   switch (authHeader) {
-    case 'FAKE_VERIFICATION_ERROR':
+    case c.BV_verify_error:
       // For e2e tests, fake a verification error.
       return Promise.reject(new UploadError(403, `Error while verifying upload for PR ${expectedPr}: Test`));
-    case 'FAKE_VERIFIED_NOT_TRUSTED':
+    case c.BV_verify_verifiedNotTrusted:
       // For e2e tests, fake a `verifiedNotTrusted` verification status.
       return Promise.resolve(BUILD_VERIFICATION_STATUS.verifiedNotTrusted);
     default:
@@ -21,4 +35,4 @@ BuildVerifier.prototype.verify = (expectedPr: number, authHeader: string) => {
 };
 
 // tslint:disable-next-line: no-var-requires
-require('./index');
+require('../upload-server/index');

aio/aio-builds-setup/dockerbuild/scripts-js/lib/verify-setup/upload-server.e2e.ts

@@ -1,6 +1,7 @@
 // Imports
 import * as fs from 'fs';
 import * as path from 'path';
+import * as c from './constants';
 import {CmdResult, helper as h} from './helper';
 
 // Tests
@@ -25,13 +26,13 @@ describe('upload-server (on HTTP)', () => {
 
     it('should disallow non-GET requests', done => {
       const url = `http://${host}/create-build/${pr}/${sha9}`;
-      const bodyRegex = /^Unsupported method/;
+      const bodyRegex = /^Unknown resource/;
 
       Promise.all([
-        h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX POST ${url}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse(405, bodyRegex)),
+        h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX POST ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse(404, bodyRegex)),
       ]).then(done);
     });
 
@@ -63,7 +64,7 @@ describe('upload-server (on HTTP)', () => {
 
 
     it('should reject requests for which the PR verification fails', done => {
-      const headers = `--header "Authorization: FAKE_VERIFICATION_ERROR" ${xFileHeader}`;
+      const headers = `--header "Authorization: ${c.BV_verify_error}" ${xFileHeader}`;
       const url = `http://${host}/create-build/${pr}/${sha9}`;
       const bodyRegex = new RegExp(`Error while verifying upload for PR ${pr}: Test`);
 
@@ -107,8 +108,9 @@ describe('upload-server (on HTTP)', () => {
 
     [true, false].forEach(isPublic => describe(`(for ${isPublic ? 'public' : 'hidden'} builds)`, () => {
       const authorizationHeader2 = isPublic ?
-        authorizationHeader : '--header "Authorization: FAKE_VERIFIED_NOT_TRUSTED"';
+        authorizationHeader : `--header "Authorization: ${c.BV_verify_verifiedNotTrusted}"`;
       const cmdPrefix = curl('', `${authorizationHeader2} ${xFileHeader}`);
+      const overwriteRe = RegExp(`^Request to overwrite existing ${isPublic ? 'public' : 'non-public'} directory`);
 
 
       it('should not overwrite existing builds', done => {
@@ -119,7 +121,7 @@ describe('upload-server (on HTTP)', () => {
         expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
 
         h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9}`).
-          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+          then(h.verifyResponse(409, overwriteRe)).
           then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
           then(done);
       });
@@ -140,7 +142,7 @@ describe('upload-server (on HTTP)', () => {
         expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content');
 
         h.runCmd(`${cmdPrefix} http://${host}/create-build/${pr}/${sha9Almost}`).
-          then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+          then(h.verifyResponse(409, overwriteRe)).
           then(() => expect(h.readBuildFile(pr, sha9, 'index.html', isPublic)).toBe('My content')).
           then(done);
       });
@@ -309,7 +311,7 @@ describe('upload-server (on HTTP)', () => {
           expect(h.buildExists(pr, sha0, isPublic)).toBe(false);
 
           uploadBuild(sha0).
-            then(h.verifyResponse(409, /^Request to overwrite existing directory/)).
+            then(h.verifyResponse(409, overwriteRe)).
             then(() => {
               checkPrVisibility(isPublic);
               expect(h.readBuildFile(pr, sha0, 'index.html', isPublic)).toContain(pr);
@@ -373,27 +375,194 @@ describe('upload-server (on HTTP)', () => {
   });
 
 
+  describe(`${host}/pr-updated`, () => {
+    const url = `http://${host}/pr-updated`;
+
+    // Helpers
+    const curl = (payload?: {number: number, action?: string}) => {
+      const payloadStr = payload && JSON.stringify(payload) || '';
+      return `curl -iLX POST --header "Content-Type: application/json" --data '${payloadStr}' ${url}`;
+    };
+
+
+    it('should disallow non-POST requests', done => {
+      const bodyRegex = /^Unknown resource in request/;
+
+      Promise.all([
+        h.runCmd(`curl -iLX GET ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX PUT ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX PATCH ${url}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX DELETE ${url}`).then(h.verifyResponse(404, bodyRegex)),
+      ]).then(done);
+    });
+
+
+    it('should respond with 400 for requests without a payload', done => {
+      const bodyRegex = /^Missing or empty 'number' field in request/;
+
+      h.runCmd(curl()).
+        then(h.verifyResponse(400, bodyRegex)).
+        then(done);
+    });
+
+
+    it('should respond with 400 for requests without a \'number\' field', done => {
+      const bodyRegex = /^Missing or empty 'number' field in request/;
+
+      Promise.all([
+        h.runCmd(curl({} as any)).then(h.verifyResponse(400, bodyRegex)),
+        h.runCmd(curl({number: null} as any)).then(h.verifyResponse(400, bodyRegex)),
+      ]).then(done);
+    });
+
+
+    it('should reject requests for which checking the PR visibility fails', done => {
+      h.runCmd(curl({number: c.BV_getPrIsTrusted_error})).
+        then(h.verifyResponse(500, /Test/)).
+        then(done);
+    });
+
+
+    it('should respond with 404 for unknown paths', done => {
+      const mockPayload = JSON.stringify({number: +pr});
+      const cmdPrefix = `curl -iLX POST --data "${mockPayload}" http://${host}`;
+
+      Promise.all([
+        h.runCmd(`${cmdPrefix}/foo/pr-updated`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/foo-pr-updated`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/foonpr-updated`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/pr-updated/foo`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/pr-updated-foo`).then(h.verifyResponse(404)),
+        h.runCmd(`${cmdPrefix}/pr-updatednfoo`).then(h.verifyResponse(404)),
+      ]).then(done);
+    });
+
+
+    it('should do nothing if PR\'s visibility is already up-to-date', done => {
+      const publicPr = pr;
+      const hiddenPr = String(c.BV_getPrIsTrusted_notTrusted);
+      const checkVisibilities = () => {
+        // Public build is already public.
+        expect(h.buildExists(publicPr, '', false)).toBe(false);
+        expect(h.buildExists(publicPr, '', true)).toBe(true);
+        // Hidden build is already hidden.
+        expect(h.buildExists(hiddenPr, '', false)).toBe(true);
+        expect(h.buildExists(hiddenPr, '', true)).toBe(false);
+      };
+
+      h.createDummyBuild(publicPr, sha9, true);
+      h.createDummyBuild(hiddenPr, sha9, false);
+      checkVisibilities();
+
+      Promise.
+        all([
+          h.runCmd(curl({number: +publicPr, action: 'foo'})).then(h.verifyResponse(200)),
+          h.runCmd(curl({number: +hiddenPr, action: 'foo'})).then(h.verifyResponse(200)),
+        ]).
+        // Visibilities should not have changed, because the specified action could not have triggered a change.
+        then(checkVisibilities).
+        then(done);
+    });
+
+
+    it('should do nothing if \'action\' implies no visibility change', done => {
+      const publicPr = pr;
+      const hiddenPr = String(c.BV_getPrIsTrusted_notTrusted);
+      const checkVisibilities = () => {
+        // Public build is hidden atm.
+        expect(h.buildExists(publicPr, '', false)).toBe(true);
+        expect(h.buildExists(publicPr, '', true)).toBe(false);
+        // Hidden build is public atm.
+        expect(h.buildExists(hiddenPr, '', false)).toBe(false);
+        expect(h.buildExists(hiddenPr, '', true)).toBe(true);
+      };
+
+      h.createDummyBuild(publicPr, sha9, false);
+      h.createDummyBuild(hiddenPr, sha9, true);
+      checkVisibilities();
+
+      Promise.
+        all([
+          h.runCmd(curl({number: +publicPr, action: 'foo'})).then(h.verifyResponse(200)),
+          h.runCmd(curl({number: +hiddenPr, action: 'foo'})).then(h.verifyResponse(200)),
+        ]).
+        // Visibilities should not have changed, because the specified action could not have triggered a change.
+        then(checkVisibilities).
+        then(done);
+    });
+
+
+    describe('when the visiblity has changed', () => {
+      const publicPr = pr;
+      const hiddenPr = String(c.BV_getPrIsTrusted_notTrusted);
+
+      beforeEach(() => {
+        // Create initial PR builds with opposite visibilities as the ones that will be reported:
+        // - The now public PR was previously hidden.
+        // - The now hidden PR was previously public.
+        h.createDummyBuild(publicPr, sha9, false);
+        h.createDummyBuild(hiddenPr, sha9, true);
+
+        expect(h.buildExists(publicPr, '', false)).toBe(true);
+        expect(h.buildExists(publicPr, '', true)).toBe(false);
+        expect(h.buildExists(hiddenPr, '', false)).toBe(false);
+        expect(h.buildExists(hiddenPr, '', true)).toBe(true);
+      });
+      afterEach(() => {
+        // Expect PRs' visibility to have been updated:
+        // - The public PR should be actually public (previously it was hidden).
+        // - The hidden PR should be actually hidden (previously it was public).
+        expect(h.buildExists(publicPr, '', false)).toBe(false);
+        expect(h.buildExists(publicPr, '', true)).toBe(true);
+        expect(h.buildExists(hiddenPr, '', false)).toBe(true);
+        expect(h.buildExists(hiddenPr, '', true)).toBe(false);
+
+        h.deletePrDir(publicPr, true);
+        h.deletePrDir(hiddenPr, false);
+      });
+
+
+      it('should update the PR\'s visibility (action: undefined)', done => {
+        Promise.all([
+          h.runCmd(curl({number: +publicPr})).then(h.verifyResponse(200)),
+          h.runCmd(curl({number: +hiddenPr})).then(h.verifyResponse(200)),
+        ]).then(done);
+      });
+
+
+      it('should update the PR\'s visibility (action: labeled)', done => {
+        Promise.all([
+          h.runCmd(curl({number: +publicPr, action: 'labeled'})).then(h.verifyResponse(200)),
+          h.runCmd(curl({number: +hiddenPr, action: 'labeled'})).then(h.verifyResponse(200)),
+        ]).then(done);
+      });
+
+
+      it('should update the PR\'s visibility (action: unlabeled)', done => {
+        Promise.all([
+          h.runCmd(curl({number: +publicPr, action: 'unlabeled'})).then(h.verifyResponse(200)),
+          h.runCmd(curl({number: +hiddenPr, action: 'unlabeled'})).then(h.verifyResponse(200)),
+        ]).then(done);
+      });
+
+    });
+
+  });
+
+
   describe(`${host}/*`, () => {
 
-    it('should respond with 404 for GET requests to unknown URLs', done => {
+    it('should respond with 404 for requests to unknown URLs', done => {
       const bodyRegex = /^Unknown resource/;
 
       Promise.all([
         h.runCmd(`curl -iL http://${host}/index.html`).then(h.verifyResponse(404, bodyRegex)),
         h.runCmd(`curl -iL http://${host}/`).then(h.verifyResponse(404, bodyRegex)),
         h.runCmd(`curl -iL http://${host}`).then(h.verifyResponse(404, bodyRegex)),
-      ]).then(done);
-    });
-
-
-    it('should respond with 405 for non-GET requests to any URL', done => {
-      const bodyRegex = /^Unsupported method/;
-
-      Promise.all([
-        h.runCmd(`curl -iLX PUT http://${host}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX POST http://${host}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX PATCH http://${host}`).then(h.verifyResponse(405, bodyRegex)),
-        h.runCmd(`curl -iLX DELETE http://${host}`).then(h.verifyResponse(405, bodyRegex)),
+        h.runCmd(`curl -iLX PUT http://${host}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX POST http://${host}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX PATCH http://${host}`).then(h.verifyResponse(404, bodyRegex)),
+        h.runCmd(`curl -iLX DELETE http://${host}`).then(h.verifyResponse(404, bodyRegex)),
       ]).then(done);
     });
 

aio/aio-builds-setup/dockerbuild/scripts-js/package.json

@@ -20,12 +20,14 @@
     "test-watch": "nodemon --exec \"yarn ~~test-only\" --watch dist"
   },
   "dependencies": {
+    "body-parser": "^1.17.2",
     "express": "^4.14.1",
     "jasmine": "^2.5.3",
     "jsonwebtoken": "^7.3.0",
     "shelljs": "^0.7.6"
   },
   "devDependencies": {
+    "@types/body-parser": "^1.16.4",
     "@types/express": "^4.0.35",
     "@types/jasmine": "^2.5.43",
     "@types/jsonwebtoken": "^7.2.0",

aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/build-creator.spec.ts

@@ -43,178 +43,25 @@ describe('BuildCreator', () => {
   });
 
 
-  describe('changePrVisibility()', () => {
-    let bcEmitSpy: jasmine.Spy;
-    let bcExistsSpy: jasmine.Spy;
-    let bcListShasByDate: jasmine.Spy;
-    let shellMvSpy: jasmine.Spy;
-
-    beforeEach(() => {
-      bcEmitSpy = spyOn(bc, 'emit');
-      bcExistsSpy = spyOn(bc as any, 'exists');
-      bcListShasByDate = spyOn(bc as any, 'listShasByDate');
-      shellMvSpy = spyOn(shell, 'mv');
-
-      bcExistsSpy.and.returnValues(Promise.resolve(true), Promise.resolve(false));
-      bcListShasByDate.and.returnValue([]);
-    });
-
-
-    it('should return a promise', done => {
-      const promise = bc.changePrVisibility(pr, true);
-      promise.then(done);   // Do not complete the test (and release the spies) synchronously
-                            // to avoid running the actual `extractArchive()`.
-
-      expect(promise).toEqual(jasmine.any(Promise));
-    });
-
-
-    [true, false].forEach(makePublic => {
-      const oldPrDir = makePublic ? hiddenPrDir : publicPrDir;
-      const newPrDir = makePublic ? publicPrDir : hiddenPrDir;
-
-
-      it('should rename the directory', done => {
-        bc.changePrVisibility(pr, makePublic).
-          then(() => expect(shellMvSpy).toHaveBeenCalledWith(oldPrDir, newPrDir)).
-          then(done);
-      });
-
-
-      it('should emit a ChangedPrVisibilityEvent on success', done => {
-        let emitted = false;
-
-        bcEmitSpy.and.callFake((type: string, evt: ChangedPrVisibilityEvent) => {
-          expect(type).toBe(ChangedPrVisibilityEvent.type);
-          expect(evt).toEqual(jasmine.any(ChangedPrVisibilityEvent));
-          expect(evt.pr).toBe(+pr);
-          expect(evt.shas).toEqual(jasmine.any(Array));
-          expect(evt.isPublic).toBe(makePublic);
-
-          emitted = true;
-        });
-
-        bc.changePrVisibility(pr, makePublic).
-          then(() => expect(emitted).toBe(true)).
-          then(done);
-      });
-
-
-      it('should include all shas in the emitted event', done => {
-        const shas = ['foo', 'bar', 'baz'];
-        let emitted = false;
-
-        bcListShasByDate.and.returnValue(Promise.resolve(shas));
-        bcEmitSpy.and.callFake((type: string, evt: ChangedPrVisibilityEvent) => {
-          expect(bcListShasByDate).toHaveBeenCalledWith(newPrDir);
-
-          expect(type).toBe(ChangedPrVisibilityEvent.type);
-          expect(evt).toEqual(jasmine.any(ChangedPrVisibilityEvent));
-          expect(evt.pr).toBe(+pr);
-          expect(evt.shas).toBe(shas);
-          expect(evt.isPublic).toBe(makePublic);
-
-          emitted = true;
-        });
-
-        bc.changePrVisibility(pr, makePublic).
-          then(() => expect(emitted).toBe(true)).
-          then(done);
-      });
-
-
-      describe('on error', () => {
-
-        it('should abort and skip further operations if the old directory does not exist', done => {
-          bcExistsSpy.and.callFake((dir: string) => dir !== oldPrDir);
-          bc.changePrVisibility(pr, makePublic).catch(err => {
-            expectToBeUploadError(err, 404, `Request to move non-existing directory '${oldPrDir}' to '${newPrDir}'.`);
-            expect(shellMvSpy).not.toHaveBeenCalled();
-            expect(bcListShasByDate).not.toHaveBeenCalled();
-            expect(bcEmitSpy).not.toHaveBeenCalled();
-            done();
-          });
-        });
-
-
-        it('should abort and skip further operations if the new directory does already exist', done => {
-          bcExistsSpy.and.returnValue(true);
-          bc.changePrVisibility(pr, makePublic).catch(err => {
-            expectToBeUploadError(err, 409, `Request to move '${oldPrDir}' to existing directory '${newPrDir}'.`);
-            expect(shellMvSpy).not.toHaveBeenCalled();
-            expect(bcListShasByDate).not.toHaveBeenCalled();
-            expect(bcEmitSpy).not.toHaveBeenCalled();
-            done();
-          });
-        });
-
-
-        it('should abort and skip further operations if it fails to rename the directory', done => {
-          shellMvSpy.and.throwError('');
-          bc.changePrVisibility(pr, makePublic).catch(() => {
-            expect(shellMvSpy).toHaveBeenCalled();
-            expect(bcListShasByDate).not.toHaveBeenCalled();
-            expect(bcEmitSpy).not.toHaveBeenCalled();
-            done();
-          });
-        });
-
-
-        it('should abort and skip further operations if it fails to list the SHAs', done => {
-          bcListShasByDate.and.throwError('');
-          bc.changePrVisibility(pr, makePublic).catch(() => {
-            expect(shellMvSpy).toHaveBeenCalled();
-            expect(bcListShasByDate).toHaveBeenCalled();
-            expect(bcEmitSpy).not.toHaveBeenCalled();
-            done();
-          });
-        });
-
-
-        it('should reject with an UploadError', done => {
-          shellMvSpy.and.callFake(() => { throw 'Test'; });
-          bc.changePrVisibility(pr, makePublic).catch(err => {
-            expectToBeUploadError(err, 500, `Error while making PR ${pr} ${makePublic ? 'public' : 'hidden'}.\nTest`);
-            done();
-          });
-        });
-
-
-        it('should pass UploadError instances unmodified', done => {
-          shellMvSpy.and.callFake(() => { throw new UploadError(543, 'Test'); });
-          bc.changePrVisibility(pr, makePublic).catch(err => {
-            expectToBeUploadError(err, 543, 'Test');
-            done();
-          });
-        });
-
-      });
-
-    });
-
-  });
-
-
   describe('create()', () => {
-    let bcChangePrVisibilitySpy: jasmine.Spy;
     let bcEmitSpy: jasmine.Spy;
     let bcExistsSpy: jasmine.Spy;
     let bcExtractArchiveSpy: jasmine.Spy;
+    let bcUpdatePrVisibilitySpy: jasmine.Spy;
     let shellMkdirSpy: jasmine.Spy;
     let shellRmSpy: jasmine.Spy;
 
     beforeEach(() => {
-      bcChangePrVisibilitySpy = spyOn(bc, 'changePrVisibility');
       bcEmitSpy = spyOn(bc, 'emit');
       bcExistsSpy = spyOn(bc as any, 'exists');
       bcExtractArchiveSpy = spyOn(bc as any, 'extractArchive');
+      bcUpdatePrVisibilitySpy = spyOn(bc, 'updatePrVisibility');
       shellMkdirSpy = spyOn(shell, 'mkdir');
       shellRmSpy = spyOn(shell, 'rm');
     });
 
 
     [true, false].forEach(isPublic => {
-      const otherVisPrDir = isPublic ? hiddenPrDir : publicPrDir;
       const prDir = isPublic ? publicPrDir : hiddenPrDir;
       const shaDir = isPublic ? publicShaDir : hiddenShaDir;
 
@@ -228,20 +75,12 @@ describe('BuildCreator', () => {
       });
 
 
-      it('should not update the PR\'s visibility first if not necessary', done => {
-        bc.create(pr, sha, archive, isPublic).
-          then(() => expect(bcChangePrVisibilitySpy).not.toHaveBeenCalled()).
-          then(done);
-      });
-
-
       it('should update the PR\'s visibility first if necessary', done => {
-        bcChangePrVisibilitySpy.and.callFake(() => expect(shellMkdirSpy).not.toHaveBeenCalled());
-        bcExistsSpy.and.callFake((dir: string) => dir === otherVisPrDir);
+        bcUpdatePrVisibilitySpy.and.callFake(() => expect(shellMkdirSpy).not.toHaveBeenCalled());
 
         bc.create(pr, sha, archive, isPublic).
           then(() => {
-            expect(bcChangePrVisibilitySpy).toHaveBeenCalledWith(pr, isPublic);
+            expect(bcUpdatePrVisibilitySpy).toHaveBeenCalledWith(pr, isPublic);
             expect(shellMkdirSpy).toHaveBeenCalled();
           }).
           then(done);
@@ -286,7 +125,6 @@ describe('BuildCreator', () => {
 
         beforeEach(() => {
           existsValues = {
-            [otherVisPrDir]: false,
             [prDir]: false,
             [shaDir]: false,
           };
@@ -297,14 +135,12 @@ describe('BuildCreator', () => {
 
         it('should abort and skip further operations if changing the PR\'s visibility fails', done => {
           const mockError = new UploadError(543, 'Test');
-
-          existsValues[otherVisPrDir] = true;
-          bcChangePrVisibilitySpy.and.returnValue(Promise.reject(mockError));
+          bcUpdatePrVisibilitySpy.and.returnValue(Promise.reject(mockError));
 
           bc.create(pr, sha, archive, isPublic).catch(err => {
             expect(err).toBe(mockError);
 
-            expect(bcExistsSpy).toHaveBeenCalledTimes(1);
+            expect(bcExistsSpy).not.toHaveBeenCalled();
             expect(shellMkdirSpy).not.toHaveBeenCalled();
             expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
             expect(bcEmitSpy).not.toHaveBeenCalled();
@@ -317,7 +153,8 @@ describe('BuildCreator', () => {
         it('should abort and skip further operations if the build does already exist', done => {
           existsValues[shaDir] = true;
           bc.create(pr, sha, archive, isPublic).catch(err => {
-            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
+            const publicOrNot = isPublic ? 'public' : 'non-public';
+            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
             expect(shellMkdirSpy).not.toHaveBeenCalled();
             expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
             expect(bcEmitSpy).not.toHaveBeenCalled();
@@ -327,11 +164,14 @@ describe('BuildCreator', () => {
 
 
         it('should detect existing build directory after visibility change', done => {
-          existsValues[otherVisPrDir] = true;
-          bcChangePrVisibilitySpy.and.callFake(() => existsValues[prDir] = existsValues[shaDir] = true);
+          bcUpdatePrVisibilitySpy.and.callFake(() => existsValues[prDir] = existsValues[shaDir] = true);
+
+          expect(bcExistsSpy(prDir)).toBe(false);
+          expect(bcExistsSpy(shaDir)).toBe(false);
 
           bc.create(pr, sha, archive, isPublic).catch(err => {
-            expectToBeUploadError(err, 409, `Request to overwrite existing directory: ${shaDir}`);
+            const publicOrNot = isPublic ? 'public' : 'non-public';
+            expectToBeUploadError(err, 409, `Request to overwrite existing ${publicOrNot} directory: ${shaDir}`);
             expect(shellMkdirSpy).not.toHaveBeenCalled();
             expect(bcExtractArchiveSpy).not.toHaveBeenCalled();
             expect(bcEmitSpy).not.toHaveBeenCalled();
@@ -406,6 +246,190 @@ describe('BuildCreator', () => {
   });
 
 
+  describe('updatePrVisibility()', () => {
+    let bcEmitSpy: jasmine.Spy;
+    let bcExistsSpy: jasmine.Spy;
+    let bcListShasByDate: jasmine.Spy;
+    let shellMvSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      bcEmitSpy = spyOn(bc, 'emit');
+      bcExistsSpy = spyOn(bc as any, 'exists');
+      bcListShasByDate = spyOn(bc as any, 'listShasByDate');
+      shellMvSpy = spyOn(shell, 'mv');
+
+      bcExistsSpy.and.returnValues(Promise.resolve(true), Promise.resolve(false));
+      bcListShasByDate.and.returnValue([]);
+    });
+
+
+    it('should return a promise', done => {
+      const promise = bc.updatePrVisibility(pr, true);
+      promise.then(done);   // Do not complete the test (and release the spies) synchronously
+                            // to avoid running the actual `extractArchive()`.
+
+      expect(promise).toEqual(jasmine.any(Promise));
+    });
+
+
+    [true, false].forEach(makePublic => {
+      const oldPrDir = makePublic ? hiddenPrDir : publicPrDir;
+      const newPrDir = makePublic ? publicPrDir : hiddenPrDir;
+
+
+      it('should rename the directory', done => {
+        bc.updatePrVisibility(pr, makePublic).
+          then(() => expect(shellMvSpy).toHaveBeenCalledWith(oldPrDir, newPrDir)).
+          then(done);
+      });
+
+
+      describe('when the visibility is updated', () => {
+
+        it('should resolve to true', done => {
+          bc.updatePrVisibility(pr, makePublic).
+            then(result => expect(result).toBe(true)).
+            then(done);
+        });
+
+
+        it('should rename the directory', done => {
+          bc.updatePrVisibility(pr, makePublic).
+            then(() => expect(shellMvSpy).toHaveBeenCalledWith(oldPrDir, newPrDir)).
+            then(done);
+        });
+
+
+        it('should emit a ChangedPrVisibilityEvent on success', done => {
+          let emitted = false;
+
+          bcEmitSpy.and.callFake((type: string, evt: ChangedPrVisibilityEvent) => {
+            expect(type).toBe(ChangedPrVisibilityEvent.type);
+            expect(evt).toEqual(jasmine.any(ChangedPrVisibilityEvent));
+            expect(evt.pr).toBe(+pr);
+            expect(evt.shas).toEqual(jasmine.any(Array));
+            expect(evt.isPublic).toBe(makePublic);
+
+            emitted = true;
+          });
+
+          bc.updatePrVisibility(pr, makePublic).
+            then(() => expect(emitted).toBe(true)).
+            then(done);
+        });
+
+
+        it('should include all shas in the emitted event', done => {
+          const shas = ['foo', 'bar', 'baz'];
+          let emitted = false;
+
+          bcListShasByDate.and.returnValue(Promise.resolve(shas));
+          bcEmitSpy.and.callFake((type: string, evt: ChangedPrVisibilityEvent) => {
+            expect(bcListShasByDate).toHaveBeenCalledWith(newPrDir);
+
+            expect(type).toBe(ChangedPrVisibilityEvent.type);
+            expect(evt).toEqual(jasmine.any(ChangedPrVisibilityEvent));
+            expect(evt.pr).toBe(+pr);
+            expect(evt.shas).toBe(shas);
+            expect(evt.isPublic).toBe(makePublic);
+
+            emitted = true;
+          });
+
+          bc.updatePrVisibility(pr, makePublic).
+            then(() => expect(emitted).toBe(true)).
+            then(done);
+        });
+
+      });
+
+
+      it('should do nothing if the visibility is already up-to-date', done => {
+        bcExistsSpy.and.callFake((dir: string) => dir === newPrDir);
+        bc.updatePrVisibility(pr, makePublic).
+          then(result => {
+            expect(result).toBe(false);
+            expect(shellMvSpy).not.toHaveBeenCalled();
+            expect(bcListShasByDate).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+          }).
+          then(done);
+      });
+
+
+      it('should do nothing if the PR directory does not exist', done => {
+        bcExistsSpy.and.returnValue(false);
+        bc.updatePrVisibility(pr, makePublic).
+          then(result => {
+            expect(result).toBe(false);
+            expect(shellMvSpy).not.toHaveBeenCalled();
+            expect(bcListShasByDate).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+          }).
+          then(done);
+      });
+
+
+      describe('on error', () => {
+
+        it('should abort and skip further operations if both directories exist', done => {
+          bcExistsSpy.and.returnValue(true);
+          bc.updatePrVisibility(pr, makePublic).catch(err => {
+            expectToBeUploadError(err, 409, `Request to move '${oldPrDir}' to existing directory '${newPrDir}'.`);
+            expect(shellMvSpy).not.toHaveBeenCalled();
+            expect(bcListShasByDate).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+            done();
+          });
+        });
+
+
+        it('should abort and skip further operations if it fails to rename the directory', done => {
+          shellMvSpy.and.throwError('');
+          bc.updatePrVisibility(pr, makePublic).catch(() => {
+            expect(shellMvSpy).toHaveBeenCalled();
+            expect(bcListShasByDate).not.toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+            done();
+          });
+        });
+
+
+        it('should abort and skip further operations if it fails to list the SHAs', done => {
+          bcListShasByDate.and.throwError('');
+          bc.updatePrVisibility(pr, makePublic).catch(() => {
+            expect(shellMvSpy).toHaveBeenCalled();
+            expect(bcListShasByDate).toHaveBeenCalled();
+            expect(bcEmitSpy).not.toHaveBeenCalled();
+            done();
+          });
+        });
+
+
+        it('should reject with an UploadError', done => {
+          shellMvSpy.and.callFake(() => { throw 'Test'; });
+          bc.updatePrVisibility(pr, makePublic).catch(err => {
+            expectToBeUploadError(err, 500, `Error while making PR ${pr} ${makePublic ? 'public' : 'hidden'}.\nTest`);
+            done();
+          });
+        });
+
+
+        it('should pass UploadError instances unmodified', done => {
+          shellMvSpy.and.callFake(() => { throw new UploadError(543, 'Test'); });
+          bc.updatePrVisibility(pr, makePublic).catch(err => {
+            expectToBeUploadError(err, 543, 'Test');
+            done();
+          });
+        });
+
+      });
+
+    });
+
+  });
+
+
   // Protected methods
 
   describe('exists()', () => {

aio/aio-builds-setup/dockerbuild/scripts-js/test/upload-server/upload-server-factory.spec.ts

@@ -258,12 +258,12 @@ describe('uploadServerFactory', () => {
       });
 
 
-      it('should respond with 405 for non-GET requests', done => {
+      it('should respond with 404 for non-GET requests', done => {
         verifyRequests([
-          agent.put(`/create-build/${pr}/${sha}`).expect(405),
-          agent.post(`/create-build/${pr}/${sha}`).expect(405),
-          agent.patch(`/create-build/${pr}/${sha}`).expect(405),
-          agent.delete(`/create-build/${pr}/${sha}`).expect(405),
+          agent.put(`/create-build/${pr}/${sha}`).expect(404),
+          agent.post(`/create-build/${pr}/${sha}`).expect(404),
+          agent.patch(`/create-build/${pr}/${sha}`).expect(404),
+          agent.delete(`/create-build/${pr}/${sha}`).expect(404),
         ], done);
       });
 
@@ -418,12 +418,12 @@ describe('uploadServerFactory', () => {
       });
 
 
-      it('should respond with 405 for non-GET requests', done => {
+      it('should respond with 404 for non-GET requests', done => {
         verifyRequests([
-          agent.put('/health-check').expect(405),
-          agent.post('/health-check').expect(405),
-          agent.patch('/health-check').expect(405),
-          agent.delete('/health-check').expect(405),
+          agent.put('/health-check').expect(404),
+          agent.post('/health-check').expect(404),
+          agent.patch('/health-check').expect(404),
+          agent.delete('/health-check').expect(404),
         ], done);
       });
 
@@ -442,11 +442,141 @@ describe('uploadServerFactory', () => {
     });
 
 
-    describe('GET *', () => {
+    describe('POST /pr-updated', () => {
+      const pr = '9';
+      const url = '/pr-updated';
+      let bvGetPrIsTrustedSpy: jasmine.Spy;
+      let bcUpdatePrVisibilitySpy: jasmine.Spy;
+
+      // Helpers
+      const createRequest = (num: number, action?: string) =>
+        agent.post(url).send({number: num, action});
+
+      beforeEach(() => {
+        bvGetPrIsTrustedSpy = spyOn(buildVerifier, 'getPrIsTrusted');
+        bcUpdatePrVisibilitySpy = spyOn(buildCreator, 'updatePrVisibility');
+      });
+
+
+      it('should respond with 404 for non-POST requests', done => {
+        verifyRequests([
+          agent.get(url).expect(404),
+          agent.put(url).expect(404),
+          agent.patch(url).expect(404),
+          agent.delete(url).expect(404),
+        ], done);
+      });
+
+
+      it('should respond with 400 for requests without a payload', done => {
+        const responseBody = `Missing or empty 'number' field in request: POST ${url} {}`;
+
+        const request1 = agent.post(url);
+        const request2 = agent.post(url).send();
+
+        verifyRequests([
+          request1.expect(400, responseBody),
+          request2.expect(400, responseBody),
+        ], done);
+      });
+
+
+      it('should respond with 400 for requests without a \'number\' field', done => {
+        const responseBodyPrefix = `Missing or empty 'number' field in request: POST ${url}`;
+
+        const request1 = agent.post(url).send({});
+        const request2 = agent.post(url).send({number: null});
+
+        verifyRequests([
+          request1.expect(400, `${responseBodyPrefix} {}`),
+          request2.expect(400, `${responseBodyPrefix} {"number":null}`),
+        ], done);
+      });
+
+
+      it('should call \'BuildVerifier#gtPrIsTrusted()\' with the correct arguments', done => {
+        const req = createRequest(+pr);
+
+        promisifyRequest(req).
+          then(() => expect(bvGetPrIsTrustedSpy).toHaveBeenCalledWith(9)).
+          then(done, done.fail);
+      });
+
+
+      it('should propagate errors from BuildVerifier', done => {
+        bvGetPrIsTrustedSpy.and.callFake(() => Promise.reject('Test'));
+
+        const req = createRequest(+pr).expect(500, 'Test');
+
+        promisifyRequest(req).
+          then(() => {
+            expect(bvGetPrIsTrustedSpy).toHaveBeenCalledWith(9);
+            expect(bcUpdatePrVisibilitySpy).not.toHaveBeenCalled();
+          }).
+          then(done, done.fail);
+      });
+
+
+      it('should call \'BuildCreator#updatePrVisibility()\' with the correct arguments', done => {
+        bvGetPrIsTrustedSpy.and.callFake((pr2: number) => Promise.resolve(pr2 === 42));
+
+        const req1 = createRequest(24);
+        const req2 = createRequest(42);
+
+        Promise.all([
+          promisifyRequest(req1).then(() => expect(bcUpdatePrVisibilitySpy).toHaveBeenCalledWith('24', false)),
+          promisifyRequest(req2).then(() => expect(bcUpdatePrVisibilitySpy).toHaveBeenCalledWith('42', true)),
+        ]).then(done, done.fail);
+      });
+
+
+      it('should propagate errors from BuildCreator', done => {
+        bcUpdatePrVisibilitySpy.and.callFake(() => Promise.reject('Test'));
+
+        const req = createRequest(+pr).expect(500, 'Test');
+        verifyRequests([req], done);
+      });
+
+
+      describe('on success', () => {
+
+        it('should respond with 200 (action: undefined)', done => {
+          bvGetPrIsTrustedSpy.and.returnValues(Promise.resolve(true), Promise.resolve(false));
+
+          const reqs = [4, 2].map(num => createRequest(num).expect(200, http.STATUS_CODES[200]));
+          verifyRequests(reqs, done);
+        });
+
+
+        it('should respond with 200 (action: labeled)', done => {
+          bvGetPrIsTrustedSpy.and.returnValues(Promise.resolve(true), Promise.resolve(false));
+
+          const reqs = [4, 2].map(num => createRequest(num, 'labeled').expect(200, http.STATUS_CODES[200]));
+          verifyRequests(reqs, done);
+        });
+
+
+        it('should respond with 200 (action: unlabeled)', done => {
+          bvGetPrIsTrustedSpy.and.returnValues(Promise.resolve(true), Promise.resolve(false));
+
+          const reqs = [4, 2].map(num => createRequest(num, 'unlabeled').expect(200, http.STATUS_CODES[200]));
+          verifyRequests(reqs, done);
+        });
+
+
+        it('should respond with 200 (and do nothing) if \'action\' implies no visibility change', done => {
+          const promises = ['foo', 'notlabeled'].
+            map(action => createRequest(+pr, action).expect(200, http.STATUS_CODES[200])).
+            map(promisifyRequest);
+
+          Promise.all(promises).
+            then(() => {
+              expect(bvGetPrIsTrustedSpy).not.toHaveBeenCalled();
+              expect(bcUpdatePrVisibilitySpy).not.toHaveBeenCalled();
+            }).
+            then(done, done.fail);
+        });
 
-      it('should respond with 404', done => {
-        const responseBody = 'Unknown resource in request: GET /some/url';
-        verifyRequests([agent.get('/some/url').expect(404, responseBody)], done);
       });
 
     });
@@ -454,14 +584,15 @@ describe('uploadServerFactory', () => {
 
     describe('ALL *', () => {
 
-      it('should respond with 405', done => {
-        const responseFor = (method: string) => `Unsupported method in request: ${method.toUpperCase()} /some/url`;
+      it('should respond with 404', done => {
+        const responseFor = (method: string) => `Unknown resource in request: ${method.toUpperCase()} /some/url`;
 
         verifyRequests([
-          agent.put('/some/url').expect(405, responseFor('put')),
-          agent.post('/some/url').expect(405, responseFor('post')),
-          agent.patch('/some/url').expect(405, responseFor('patch')),
-          agent.delete('/some/url').expect(405, responseFor('delete')),
+          agent.get('/some/url').expect(404, responseFor('get')),
+          agent.put('/some/url').expect(404, responseFor('put')),
+          agent.post('/some/url').expect(404, responseFor('post')),
+          agent.patch('/some/url').expect(404, responseFor('patch')),
+          agent.delete('/some/url').expect(404, responseFor('delete')),
         ], done);
       });
 

aio/aio-builds-setup/dockerbuild/scripts-js/tslint.json

@@ -6,7 +6,7 @@
     "interface-name": [true, "never-prefix"],
     "max-classes-per-file": [true, 4],
     "no-consecutive-blank-lines": [true, 2],
-    "no-console": false,
+    "no-console": [false],
     "no-namespace": [true, "allow-declarations"],
     "no-string-literal": false,
     "quotemark": [true, "single"],

aio/aio-builds-setup/dockerbuild/scripts-js/yarn.lock

@@ -2,13 +2,20 @@
 # yarn lockfile v1
 
 
+"@types/body-parser@^1.16.4":
+  version "1.16.4"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.16.4.tgz#96f3660e6f88a677fee7250f5a5e6d6bda3c76bb"
+  dependencies:
+    "@types/express" "*"
+    "@types/node" "*"
+
 "@types/express-serve-static-core@*":
   version "4.0.48"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.0.48.tgz#b4fa06b0fce282e582b4535ff7fac85cc90173e9"
   dependencies:
     "@types/node" "*"
 
-"@types/express@^4.0.35":
+"@types/express@*", "@types/express@^4.0.35":
   version "4.0.36"
   resolved "https://registry.yarnpkg.com/@types/express/-/express-4.0.36.tgz#14eb47de7ecb10319f0a2fb1cf971aa8680758c2"
   dependencies:
@@ -236,6 +243,21 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
+body-parser@^1.17.2:
+  version "1.17.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.17.2.tgz#f8892abc8f9e627d42aedafbca66bf5ab99104ee"
+  dependencies:
+    bytes "2.4.0"
+    content-type "~1.0.2"
+    debug "2.6.7"
+    depd "~1.1.0"
+    http-errors "~1.6.1"
+    iconv-lite "0.4.15"
+    on-finished "~2.3.0"
+    qs "6.4.0"
+    raw-body "~2.2.0"
+    type-is "~1.6.15"
+
 boom@2.x.x:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
@@ -273,6 +295,10 @@ buffer-equal-constant-time@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
 
+bytes@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
+
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
@@ -1158,6 +1184,10 @@ http-signature@~1.1.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
+iconv-lite@0.4.15:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+
 ignore-by-default@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
@@ -1958,6 +1988,14 @@ range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
 
+raw-body@~2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.2.0.tgz#994976cf6a5096a41162840492f0bdc5d6e7fb96"
+  dependencies:
+    bytes "2.4.0"
+    iconv-lite "0.4.15"
+    unpipe "1.0.0"
+
 rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
@@ -2477,7 +2515,7 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
-unpipe@~1.0.0:
+unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
 

aio/aio-builds-setup/dockerbuild/scripts-sh/upload-server-test.sh

@@ -21,7 +21,7 @@ appName=aio-upload-server-test
 if [[ "$1" == "stop" ]]; then
   pm2 delete $appName
 else
-  pm2 start $AIO_SCRIPTS_JS_DIR/dist/lib/upload-server/index-test.js \
+  pm2 start $AIO_SCRIPTS_JS_DIR/dist/lib/verify-setup/start-test-upload-server.js \
     --log /var/log/aio/upload-server-test.log \
     --name $appName \
     --no-autorestart \

aio/aio-builds-setup/docs/misc--integrate-with-ci.md

@@ -3,10 +3,9 @@
 
 TODO (gkalpak): Add docs. Mention:
 - Travis' JWT addon (+ limitations).
-  Relevant files: `.travis.yml`
+  Relevant files: `.travis.yml`, `scripts/ci/env.sh`
 - Testing on CI.
-  Relevant files: `ci/test-aio.sh`, `aio/aio-builds-setup/scripts/test.sh`
-- Preverifying on CI.
-  Relevant files: `ci/deploy.sh`, `aio/aio-builds-setup/scripts/travis-preverify-pr.sh`
+  Relevant files: `scripts/ci/test-aio.sh`, `aio/aio-builds-setup/scripts/test.sh`
 - Deploying from CI.
-  Relevant files: `ci/deploy.sh`, `aio/scripts/deploy-preview.sh`
+  Relevant files: `scripts/ci/deploy.sh`, `aio/scripts/deploy-preview.sh`,
+                  `aio/scripts/deploy-to-firebase.sh`

aio/aio-builds-setup/docs/overview--general.md

@@ -80,13 +80,31 @@ More info on the possible HTTP status codes and their meaning can be found
 [here](overview--http-status-codes.md).
 
 
+### Updating PR visibility
+- nginx receives a natification that a PR has been updated and passes it through to the
+  upload-server. This could, for example, be sent by a GitHub webhook every time a PR's labels
+  change.
+  E.g.: `ngbuilds.io/pr-updated` (payload: `{"number":<PR>,"action":"labeled"}`)
+- The request contains the PR number (as `number`) and optionally the action that triggered the
+  request (as `action`) in the payload.
+- The upload-server verifies the payload and determines whether the `action` (if specified) could
+  have led to PR visibility changes. Only requests that omit the `action` field altogether or
+  specify an action that can affect visibility are further processed.
+  (Currently, the only actions that are considered capable of affecting visibility are `labeled` and
+  `unlabeled`.)
+- The upload-server re-checks and if necessary updates the PR's visibility.
+
+More info on the possible HTTP status codes and their meaning can be found
+[here](overview--http-status-codes.md).
+
+
 ### Serving build artifacts
 - nginx receives a request for an uploaded resource on a subdomain corresponding to the PR and SHA.
   E.g.: `pr<PR>-<SHA>.ngbuilds.io/path/to/resource`
 - nginx maps the subdomain to the correct sub-directory and serves the resource.
   E.g.: `/<PR>/<SHA>/path/to/resource`
 
-Again, more info on the possible HTTP status codes and their meaning can be found
+More info on the possible HTTP status codes and their meaning can be found
 [here](overview--http-status-codes.md).
 
 

aio/aio-builds-setup/docs/overview--http-status-codes.md

@@ -42,19 +42,38 @@ with a bried explanation of what they mean:
 - **403 (Forbidden)**:
   Unable to verify build (e.g. invalid JWT token, or unable to talk to 3rd-party APIs, etc).
 
-- **404 (Not Found)**:
-  Tried to change PR visibility but the source directory did not exist.
-  (Currently, this can only happen as a rare race condition during build deployment.)
+- **405 (Method Not Allowed)**:
+  Request method other than POST.
+
+- **409 (Conflict)**:
+  Request to overwrite existing (public or non-public) directory (e.g. deploy existing build or
+  change PR visibility when the destination directory does already exist).
+
+- **413 (Payload Too Large)**:
+  Payload larger than size specified in `AIO_UPLOAD_MAX_SIZE`.
+
+
+## `https://ngbuilds.io/health-check`
+
+- **200 (OK)**:
+  The server is healthy (i.e. up and running and processing requests).
+
+
+## `https://ngbuilds.io/pr-updated`
+
+- **200 (OK)**:
+  Request processed successfully. Processing may or may not have resulted in further actions.
+
+- **400 (Bad Request)**:
+  No payload or no `number` field in payload.
 
 - **405 (Method Not Allowed)**:
   Request method other than POST.
 
 - **409 (Conflict)**:
-  Request to overwrite existing directory (e.g. deploy existing build or change PR visibility when
-  the destination directory does already exist).
-
-- **413 (Payload Too Large)**:
-  Payload larger than size specified in `AIO_UPLOAD_MAX_SIZE`.
+  Request to overwrite existing (public or non-public) directory (i.e. directories for both
+  visibilities exist).
+  (Normally, this should not happen.)
 
 
 ## `https://*.ngbuilds.io/*`

aio/aio-builds-setup/docs/overview--scripts-and-commands.md

@@ -16,13 +16,6 @@ available:
   Can be used for running the tests for `<aio-builds-setup-dir>/dockerbuild/scripts-js/`. This is
   useful for CI integration. See [here](misc--integrate-with-ci.md) for more info.
 
-- `travis-preverify-pr.sh`:
-  Can be used for "pre-verifying" a PR before uploading the artifacts to the server. It checks
-  whether the author of the PR is a member of one of the specified GitHub teams (therefore allowed
-  to upload build artifacts) or the PR has the specified "trusted PR" label (meaning it has been
-  manually verified by a trusted member). This is useful for CI integration.
-  See [here](misc--integrate-with-ci.md) for more info.
-
 - `update-preview-server.sh`:
   Can be used for updating the docker container (and image) based on the latest changes checked out
   from a git repository. See [here](vm-setup--update-docker-container.md) for more info.

aio/aio-builds-setup/docs/overview--security-model.md

@@ -96,7 +96,7 @@ This section describes how each of the aforementioned sub-tasks is accomplished:
 
 5. **Deploy the artifacts to the corresponding PR's directory.**
 
-   With the preceeding steps, we have verified that the uploaded artifacts have been uploaded by
+   With the preceding steps, we have verified that the uploaded artifacts have been uploaded by
    Travis. Additionally, we have determined whether the PR can be trusted to have its previews
    publicly accessible or whether further verification is necessary. The artifacts will be stored to
    the PR's directory, but will not be publicly accessible unless the PR has been verified.

aio/aio-builds-setup/scripts/travis-preverify-pr.sh

@@ -1,26 +0,0 @@
-#!/bin/bash
-set -eux -o pipefail
-
-# Set up env
-source "`dirname $0`/_env.sh"
-
-# Build `scripts-js/`
-(
-  cd "$SCRIPTS_JS_DIR"
-  yarn install
-  yarn build
-)
-
-# Preverify PR
-AIO_GITHUB_ORGANIZATION="angular" \
-AIO_GITHUB_TEAM_SLUGS="angular-core,aio-contributors" \
-AIO_GITHUB_TOKEN=$(echo ${GITHUB_TEAM_MEMBERSHIP_CHECK_KEY} | rev) \
-AIO_REPO_SLUG=$TRAVIS_REPO_SLUG \
-AIO_TRUSTED_PR_LABEL="aio: preview" \
-AIO_PREVERIFY_PR=$TRAVIS_PULL_REQUEST \
-node "$SCRIPTS_JS_DIR/dist/lib/upload-server/index-preverify-pr"
-
-# Exit codes:
-# - 0: The PR can be automatically trusted (i.e. author belongs to trusted team or PR has the "trusted PR" label).
-# - 1: An error occurred.
-# - 2: The PR cannot be automatically trusted.

aio/content/examples/.gitignore

@@ -43,13 +43,9 @@ dist/
 **/app/**/*.ajs.js
 
 # aot
-**/*.ngfactory.ts
-**/*.ngsummary.json
-**/*.ngsummary.ts
-**/*.shim.ngstyle.ts
-**/*.metadata.json
-!aot/bs-config.json
-!aot/index.html
+*/aot/**/*
+!*/aot/bs-config.json
+!*/aot/index.html
 !rollup-config.js
 
 # i18n
@@ -59,10 +55,6 @@ dist/
 !testing/src/browser-test-shim.js
 !testing/karma*.js
 
-# TS to JS
-!ts-to-js/js*/**/*.js
-ts-to-js/js*/**/system*.js
-
 # webpack
 !webpack/**/config/*.js
 !webpack/**/*webpack*.js

aio/content/examples/ajs-quick-reference/src/app/app.component.html

@@ -14,13 +14,13 @@
 <h1>Example Snippets</h1>
 
 <!-- #docregion ngClass -->
-<div [ngClass]="{active: isActive}">
+<div [ngClass]="{'active': isActive}">
 <!-- #enddocregion ngClass -->
   [ngClass] active
 </div>
 <!-- #docregion ngClass -->
-<div [ngClass]="{active: isActive,
-                 shazam: isImportant}">
+<div [ngClass]="{'active': isActive,
+                 'shazam': isImportant}">
 <!-- #enddocregion ngClass -->
   [ngClass] active and boldly important
 </div>
@@ -57,7 +57,7 @@
 
 <p></p>
 <!-- #docregion ngStyle -->
-<div [ngStyle]="{color: colorPreference}">
+<div [ngStyle]="{'color': colorPreference}">
 <!-- #enddocregion ngStyle -->
   color preference #1
 </div>

aio/content/examples/architecture/src/app/backend.service.ts

@@ -6,7 +6,7 @@ import { Hero } from './hero';
 const HEROES = [
         new Hero('Windstorm', 'Weather mastery'),
         new Hero('Mr. Nice', 'Killing them with kindness'),
-        new Hero('Magneta', 'Manipulates metalic objects')
+        new Hero('Magneta', 'Manipulates metallic objects')
       ];
 
 @Injectable()

aio/content/examples/cli-quickstart/e2e-spec.ts

@@ -9,6 +9,6 @@ describe('cli-quickstart App', () => {
 
   it('should display message saying app works', () => {
     let pageTitle = element(by.css('app-root h1')).getText();
-    expect(pageTitle).toEqual('My First Angular App');
+    expect(pageTitle).toEqual('Welcome to My First Angular App!!');
   });
 });

aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts

@@ -9,6 +9,6 @@ describe('my-app App', function() {
 
   it('should display message saying app works', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('app works!');
+    expect(page.getParagraphText()).toEqual('Welcome to app!!');
   });
 });

aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json

@@ -1,18 +1,12 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [
-      "es2016"
-    ],
-    "outDir": "../dist/out-tsc-e2e",
+    "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es6",
-    "types":[
+    "target": "es5",
+    "types": [
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }

aio/content/examples/cli-quickstart/src/app/app.component.html

@@ -1,3 +1,20 @@
-<h1>
-  {{title}}
-</h1>
+<!--The content below is only a placeholder and can be replaced.-->
+<div style="text-align:center">
+  <h1>
+    Welcome to {{title}}!!
+  </h1>
+  <img width="300" alt="Angular logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
+</div>
+<h2>Here are some links to help you start: </h2>
+<ul>
+  <li>
+    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
+  </li>
+</ul>
+

aio/content/examples/cli-quickstart/src/app/app.component.spec.ts

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

aio/content/examples/cli-quickstart/src/app/app.module.ts

@@ -1,7 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
 
@@ -10,9 +8,7 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule,
-    FormsModule,
-    HttpModule
+    BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]

aio/content/examples/cli-quickstart/src/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>MyApp</title>
@@ -9,6 +9,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root>Loading...</app-root>
+  <app-root></app-root>
 </body>
 </html>

aio/content/examples/cli-quickstart/src/polyfills.ts

@@ -31,21 +31,21 @@
 // import 'core-js/es6/array';
 // import 'core-js/es6/regexp';
 // import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
 // import 'core-js/es6/set';
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following to support `@angular/animation`. */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
 /** Evergreen browsers require these. **/
 import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
 
 
-/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+/**
+ * Required to support Web Animations `@angular/animation`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 
@@ -66,3 +66,7 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
  */
 // import 'intl';  // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';

aio/content/examples/cli-quickstart/src/tsconfig.app.json

@@ -1,16 +1,7 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [
-      "es2016",
-      "dom"
-    ],
     "outDir": "../out-tsc/app",
-    "target": "es5",
     "module": "es2015",
     "baseUrl": "",
     "types": []

aio/content/examples/cli-quickstart/src/tsconfig.spec.json

@@ -1,16 +1,9 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [
-      "es2016"
-    ],
     "outDir": "../out-tsc/spec",
     "module": "commonjs",
-    "target": "es6",
+    "target": "es5",
     "baseUrl": "",
     "types": [
       "jasmine",
@@ -21,6 +14,7 @@
     "test.ts"
   ],
   "include": [
-    "**/*.spec.ts"
+    "**/*.spec.ts",
+    "**/*.d.ts"
   ]
 }

aio/content/examples/cli-quickstart/src/typings.d.ts

@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}

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

@@ -2,13 +2,19 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
     "lib": [
-      "es2016"
+      "es2016",
+      "dom"
     ]
   }
 }

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

@@ -39,7 +39,7 @@ if (!/e2e/.test(location.search)) {
   directives.push(CountdownLocalVarParentComponent);
   directives.push(CountdownViewChildParentComponent);
 } else {
-  // In e2e test use CUSTOM_ELEMENTS_SCHEMA to supress unknown element errors
+  // In e2e test use CUSTOM_ELEMENTS_SCHEMA to suppress unknown element errors
   schemas.push(CUSTOM_ELEMENTS_SCHEMA);
 }
 

aio/content/examples/form-validation/e2e-spec.ts

@@ -9,30 +9,20 @@ describe('Form Validation Tests', function () {
     browser.get('');
   });
 
-  describe('Hero Form 1', () => {
+  describe('Template-driven form', () => {
     beforeAll(() => {
-      getPage('hero-form-template1');
+      getPage('hero-form-template');
     });
 
-    tests();
+    tests('Template-Driven Form');
   });
 
-  describe('Hero Form 2', () => {
+  describe('Reactive form', () => {
     beforeAll(() => {
-      getPage('hero-form-template2');
+      getPage('hero-form-reactive');
     });
 
-    tests();
-    bobTests();
-  });
-
-  describe('Hero Form 3 (Reactive)', () => {
-    beforeAll(() => {
-      getPage('hero-form-reactive3');
-      makeNameTooLong();
-    });
-
-    tests();
+    tests('Reactive Form');
     bobTests();
   });
 });
@@ -48,6 +38,7 @@ let page: {
   nameInput: ElementFinder,
   alterEgoInput: ElementFinder,
   powerSelect: ElementFinder,
+  powerOption: ElementFinder,
   errorMessages: ElementArrayFinder,
   heroFormButtons: ElementArrayFinder,
   heroSubmitted: ElementFinder
@@ -64,19 +55,21 @@ function getPage(sectionTag: string) {
     nameInput: section.element(by.css('#name')),
     alterEgoInput: section.element(by.css('#alterEgo')),
     powerSelect: section.element(by.css('#power')),
+    powerOption: section.element(by.css('#power option')),
     errorMessages: section.all(by.css('div.alert')),
     heroFormButtons: buttons,
-    heroSubmitted: section.element(by.css('hero-submitted > div'))
+    heroSubmitted: section.element(by.css('.submitted-message'))
   };
 }
 
-function tests() {
+function tests(title: string) {
+
   it('should display correct title', function () {
-    expect(page.title.getText()).toContain('Hero Form');
+    expect(page.title.getText()).toContain(title);
   });
 
   it('should not display submitted message before submit', function () {
-    expect(page.heroSubmitted.isElementPresent(by.css('h2'))).toBe(false);
+    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false);
   });
 
   it('should have form buttons', function () {
@@ -130,11 +123,11 @@ function tests() {
 
   it('should hide form after submit', function () {
     page.heroFormButtons.get(0).click();
-    expect(page.title.isDisplayed()).toBe(false);
+    expect(page.heroFormButtons.get(0).isDisplayed()).toBe(false);
   });
 
   it('submitted form should be displayed', function () {
-    expect(page.heroSubmitted.isElementPresent(by.css('h2'))).toBe(true);
+    expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true);
   });
 
   it('submitted form should have new hero name', function () {
@@ -142,9 +135,9 @@ function tests() {
   });
 
   it('clicking edit button should reveal form again', function () {
-    const editBtn = page.heroSubmitted.element(by.css('button'));
-    editBtn.click();
-    expect(page.heroSubmitted.isElementPresent(by.css('h2')))
+    const newFormBtn = page.heroSubmitted.element(by.css('button'));
+    newFormBtn.click();
+    expect(page.heroSubmitted.isElementPresent(by.css('p')))
       .toBe(false, 'submitted hidden again');
     expect(page.title.isDisplayed()).toBe(true, 'can see form title');
   });
@@ -159,9 +152,13 @@ function expectFormIsInvalid() {
 }
 
 function bobTests() {
-  const emsg = 'Someone named "Bob" cannot be a hero.';
+  const emsg = 'Name cannot be Bob.';
 
   it('should produce "no bob" error after setting name to "Bobby"', function () {
+    // Re-populate select element
+    page.powerSelect.click();
+    page.powerOption.click();
+
     page.nameInput.clear();
     page.nameInput.sendKeys('Bobby');
     expectFormIsInvalid();
@@ -174,8 +171,3 @@ function bobTests() {
     expectFormIsValid();
   });
 }
-
-function makeNameTooLong() {
-  // make the first name invalid
-  page.nameInput.sendKeys('ThisHeroNameHasWayWayTooManyLetters');
-}

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

@@ -3,10 +3,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-app',
-  template: `<hero-form-template1></hero-form-template1>
+  template: `<hero-form-template></hero-form-template>
              <hr>
-             <hero-form-template2></hero-form-template2>
-             <hr>
-             <hero-form-reactive3></hero-form-reactive3>`
+             <hero-form-reactive></hero-form-reactive>`
 })
 export class AppComponent { }

aio/content/examples/form-validation/src/app/app.module.ts

@@ -1,18 +1,26 @@
 // #docregion
 import { NgModule }      from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent }           from './app.component';
-import { HeroFormTemplateModule } from './template/hero-form-template.module';
-import { HeroFormReactiveModule } from './reactive/hero-form-reactive.module';
+import { HeroFormTemplateComponent } from './template/hero-form-template.component';
+import { HeroFormReactiveComponent } from './reactive/hero-form-reactive.component';
+import { ForbiddenValidatorDirective } from './shared/forbidden-name.directive';
+
 
 @NgModule({
   imports: [
     BrowserModule,
-    HeroFormTemplateModule,
-    HeroFormReactiveModule
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroFormTemplateComponent,
+    HeroFormReactiveComponent,
+    ForbiddenValidatorDirective
   ],
-  declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

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

@@ -1,26 +1,38 @@
  <!-- #docregion -->
 <div class="container">
-  <div [hidden]="submitted">
-    <h1>Hero Form 3 (Reactive)</h1>
-    <!-- #docregion form-tag-->
-    <form [formGroup]="heroForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
-    <!-- #enddocregion form-tag-->
-      <div class="form-group">
-        <!-- #docregion name-with-error-msg -->
-        <label for="name">Name</label>
 
-        <input type="text" id="name" class="form-control"
+  <h1>Reactive Form</h1>
+
+  <form [formGroup]="heroForm" #formDir="ngForm">
+
+    <div [hidden]="formDir.submitted">
+
+      <div class="form-group">
+
+        <label for="name">Name</label>
+        <!-- #docregion name-with-error-msg -->
+        <input id="name" class="form-control"
                formControlName="name" required >
 
-        <div *ngIf="formErrors.name" class="alert alert-danger">
-          {{ formErrors.name }}
+        <div *ngIf="name.invalid && (name.dirty || name.touched)"
+             class="alert alert-danger">
+
+          <div *ngIf="name.errors.required">
+            Name is required.
+          </div>
+          <div *ngIf="name.errors.minlength">
+            Name must be at least 4 characters long.
+          </div>
+          <div *ngIf="name.errors.forbiddenName">
+            Name cannot be Bob.
+          </div>
         </div>
         <!-- #enddocregion name-with-error-msg -->
       </div>
 
       <div class="form-group">
         <label for="alterEgo">Alter Ego</label>
-        <input type="text" id="alterEgo" class="form-control"
+        <input id="alterEgo" class="form-control"
             formControlName="alterEgo"  >
       </div>
 
@@ -31,17 +43,20 @@
           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
 
-        <div *ngIf="formErrors.power" class="alert alert-danger">
-          {{ formErrors.power }}
+        <div *ngIf="power.invalid && power.touched" class="alert alert-danger">
+          <div *ngIf="power.errors.required">Power is required.</div>
         </div>
       </div>
 
       <button type="submit" class="btn btn-default"
-             [disabled]="!heroForm.valid">Submit</button>
+             [disabled]="heroForm.invalid">Submit</button>
       <button type="button" class="btn btn-default"
-             (click)="addHero()">New Hero</button>
-    </form>
-  </div>
+             (click)="formDir.resetForm({})">Reset</button>
+    </div>
+  </form>
 
-  <hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
+  <div class="submitted-message" *ngIf="formDir.submitted">
+    <p>You've submitted your hero, {{ heroForm.value.name }}!</p>
+    <button (click)="formDir.resetForm({})">Add new hero</button>
+  </div>
 </div>

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

@@ -2,115 +2,39 @@
 // #docplaster
 // #docregion
 import { Component, OnInit }                  from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-
-import { Hero }                   from '../shared/hero';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
 
 @Component({
-  selector: 'hero-form-reactive3',
+  selector: 'hero-form-reactive',
   templateUrl: './hero-form-reactive.component.html'
 })
 export class HeroFormReactiveComponent implements OnInit {
 
   powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
 
-  hero = new Hero(18, 'Dr. WhatIsHisName', this.powers[0], 'Dr. What');
+  hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
 
-  submitted = false;
-
-  // #docregion on-submit
-  onSubmit() {
-    this.submitted = true;
-    this.hero = this.heroForm.value;
-  }
-  // #enddocregion on-submit
-// #enddocregion
-
-  // Reset the form with a new hero AND restore 'pristine' class state
-  // by toggling 'active' flag which causes the form
-  // to be removed/re-added in a tick via NgIf
-  // TODO: Workaround until NgForm has a reset method (#6822)
-  active = true;
-// #docregion class
-  // #docregion add-hero
-  addHero() {
-    this.hero = new Hero(42, '', '');
-    this.buildForm();
-  // #enddocregion add-hero
-// #enddocregion class
-
-    this.active = false;
-    setTimeout(() => this.active = true, 0);
-// #docregion
-  // #docregion add-hero
-  }
-  // #enddocregion add-hero
-
-  // #docregion form-builder
   heroForm: FormGroup;
-  constructor(private fb: FormBuilder) { }
 
+  // #docregion form-group
   ngOnInit(): void {
-    this.buildForm();
-  }
-
-  buildForm(): void {
-    this.heroForm = this.fb.group({
-      // #docregion name-validators
-      'name': [this.hero.name, [
-          Validators.required,
-          Validators.minLength(4),
-          Validators.maxLength(24),
-          forbiddenNameValidator(/bob/i)
-        ]
-      ],
-      // #enddocregion name-validators
-      'alterEgo': [this.hero.alterEgo],
-      'power':    [this.hero.power, Validators.required]
+    // #docregion custom-validator
+    this.heroForm = new FormGroup({
+      'name': new FormControl(this.hero.name, [
+        Validators.required,
+        Validators.minLength(4),
+        forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
+      ]),
+      'alterEgo': new FormControl(this.hero.alterEgo),
+      'power': new FormControl(this.hero.power, Validators.required)
     });
-
-    this.heroForm.valueChanges
-      .subscribe(data => this.onValueChanged(data));
-
-    this.onValueChanged(); // (re)set validation messages now
+    // #enddocregion custom-validator
   }
 
-  // #enddocregion form-builder
+  get name() { return this.heroForm.get('name'); }
 
-  onValueChanged(data?: any) {
-    if (!this.heroForm) { return; }
-    const form = this.heroForm;
-
-    for (const field in this.formErrors) {
-      // clear previous error message (if any)
-      this.formErrors[field] = '';
-      const control = form.get(field);
-
-      if (control && control.dirty && !control.valid) {
-        const messages = this.validationMessages[field];
-        for (const key in control.errors) {
-          this.formErrors[field] += messages[key] + ' ';
-        }
-      }
-    }
-  }
-
-  formErrors = {
-    'name': '',
-    'power': ''
-  };
-
-  validationMessages = {
-    'name': {
-      'required':      'Name is required.',
-      'minlength':     'Name must be at least 4 characters long.',
-      'maxlength':     'Name cannot be more than 24 characters long.',
-      'forbiddenName': 'Someone named "Bob" cannot be a hero.'
-    },
-    'power': {
-      'required': 'Power is required.'
-    }
-  };
+  get power() { return this.heroForm.get('power'); }
+  // #enddocregion form-group
 }
 // #enddocregion

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

@@ -1,13 +0,0 @@
-// #docregion
-import { NgModule }            from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-
-import { SharedModule }              from '../shared/shared.module';
-import { HeroFormReactiveComponent } from './hero-form-reactive.component';
-
-@NgModule({
-  imports:      [ SharedModule, ReactiveFormsModule ],
-  declarations: [ HeroFormReactiveComponent ],
-  exports:      [ HeroFormReactiveComponent ]
-})
-export class HeroFormReactiveModule { }

aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts

@@ -6,9 +6,8 @@ import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } fr
 /** A hero's name can't match the given regular expression */
 export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
   return (control: AbstractControl): {[key: string]: any} => {
-    const name = control.value;
-    const no = nameRe.test(name);
-    return no ? {'forbiddenName': {name}} : null;
+    const forbidden = nameRe.test(control.value);
+    return forbidden ? {'forbiddenName': {value: control.value}} : null;
   };
 }
 // #enddocregion custom-validator
@@ -20,23 +19,12 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
   providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
   // #enddocregion directive-providers
 })
-export class ForbiddenValidatorDirective implements Validator, OnChanges {
+export class ForbiddenValidatorDirective implements Validator {
   @Input() forbiddenName: string;
-  private valFn = Validators.nullValidator;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    const change = changes['forbiddenName'];
-    if (change) {
-      const val: string | RegExp = change.currentValue;
-      const re = val instanceof RegExp ? val : new RegExp(val, 'i');
-      this.valFn = forbiddenNameValidator(re);
-    } else {
-      this.valFn = Validators.nullValidator;
-    }
-  }
 
   validate(control: AbstractControl): {[key: string]: any} {
-    return this.valFn(control);
+    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
+                              : null;
   }
 }
 // #enddocregion directive

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

@@ -1,9 +0,0 @@
-// #docregion
-export class Hero {
-  constructor(
-    public id: number,
-    public name: string,
-    public power: string,
-    public alterEgo?: string
-  ) {  }
-}

aio/content/examples/form-validation/src/app/shared/shared.module.ts

@@ -1,14 +0,0 @@
-// #docregion
-import { NgModule }     from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { ForbiddenValidatorDirective } from './forbidden-name.directive';
-import { SubmittedComponent }          from './submitted.component';
-
-@NgModule({
-  imports:      [ CommonModule],
-  declarations: [ ForbiddenValidatorDirective, SubmittedComponent ],
-  exports:      [ ForbiddenValidatorDirective, SubmittedComponent,
-                  CommonModule ]
-})
-export class SharedModule { }

aio/content/examples/form-validation/src/app/shared/submitted.component.ts

@@ -1,32 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { Hero } from './hero';
-
-@Component({
-  selector: 'hero-submitted',
-  template: `
-  <div *ngIf="submitted">
-    <h2>You submitted the following:</h2>
-    <div class="row">
-      <div class="col-xs-3">Name</div>
-      <div class="col-xs-9  pull-left">{{ hero.name }}</div>
-    </div>
-    <div class="row">
-      <div class="col-xs-3">Alter Ego</div>
-      <div class="col-xs-9 pull-left">{{ hero.alterEgo }}</div>
-    </div>
-    <div class="row">
-      <div class="col-xs-3">Power</div>
-      <div class="col-xs-9 pull-left">{{ hero.power }}</div>
-    </div>
-    <br>
-    <button class="btn btn-default" (click)="onClick()">Edit</button>
-  </div>`
-})
-export class SubmittedComponent {
-  @Input()  hero: Hero;
-  @Input()  submitted = false;
-  @Output() submittedChange = new EventEmitter<boolean>();
-  onClick() { this.submittedChange.emit(false); }
-}

aio/content/examples/form-validation/src/app/template/hero-form-template.component.html

@@ -0,0 +1,66 @@
+ <!-- #docregion -->
+<div class="container">
+
+  <h1>Template-Driven Form</h1>
+  <!-- #docregion form-tag-->
+  <form #heroForm="ngForm">
+  <!-- #enddocregion form-tag-->
+    <div [hidden]="heroForm.submitted">
+
+      <div class="form-group">
+        <label for="name">Name</label>
+        <!-- #docregion name-with-error-msg -->
+        <!-- #docregion name-input -->
+        <input id="name" name="name" class="form-control"
+               required minlength="4" forbiddenName="bob"
+               [(ngModel)]="hero.name" #name="ngModel" >
+        <!-- #enddocregion name-input -->
+
+        <div *ngIf="name.invalid && (name.dirty || name.touched)"
+             class="alert alert-danger">
+
+          <div *ngIf="name.errors.required">
+            Name is required.
+          </div>
+          <div *ngIf="name.errors.minlength">
+            Name must be at least 4 characters long.
+          </div>
+          <div *ngIf="name.errors.forbiddenName">
+            Name cannot be Bob.
+          </div>
+
+        </div>
+        <!-- #enddocregion name-with-error-msg -->
+      </div>
+
+      <div class="form-group">
+        <label for="alterEgo">Alter Ego</label>
+        <input id="alterEgo" class="form-control"
+               name="alterEgo" [(ngModel)]="hero.alterEgo" >
+      </div>
+
+      <div class="form-group">
+        <label for="power">Hero Power</label>
+        <select id="power" name="power" class="form-control"
+                required [(ngModel)]="hero.power" #power="ngModel" >
+          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
+        </select>
+
+        <div *ngIf="power.errors && power.touched" class="alert alert-danger">
+          <div *ngIf="power.errors.required">Power is required.</div>
+        </div>
+      </div>
+
+      <button type="submit" class="btn btn-default"
+              [disabled]="heroForm.invalid">Submit</button>
+      <button type="button" class="btn btn-default"
+              (click)="heroForm.resetForm({})">Reset</button>
+    </div>
+
+    <div class="submitted-message" *ngIf="heroForm.submitted">
+      <p>You've submitted your hero, {{ heroForm.value.name }}!</p>
+      <button (click)="heroForm.resetForm({})">Add new hero</button>
+    </div>
+  </form>
+
+</div>

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

@@ -0,0 +1,16 @@
+/* tslint:disable: member-ordering */
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-form-template',
+  templateUrl: './hero-form-template.component.html'
+})
+export class HeroFormTemplateComponent {
+
+  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
+
+  hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
+
+}

aio/content/examples/form-validation/src/app/template/hero-form-template.module.ts

@@ -1,14 +0,0 @@
-// #docregion
-import { NgModule }     from '@angular/core';
-import { FormsModule }  from '@angular/forms';
-
-import { SharedModule }               from '../shared/shared.module';
-import { HeroFormTemplate1Component } from './hero-form-template1.component';
-import { HeroFormTemplate2Component } from './hero-form-template2.component';
-
-@NgModule({
-  imports:      [ SharedModule, FormsModule ],
-  declarations: [ HeroFormTemplate1Component, HeroFormTemplate2Component ],
-  exports:      [ HeroFormTemplate1Component, HeroFormTemplate2Component ]
-})
-export class HeroFormTemplateModule { }

aio/content/examples/form-validation/src/app/template/hero-form-template1.component.html

@@ -1,61 +0,0 @@
- <!-- #docregion -->
-<div class="container">
-  <div [hidden]="submitted">
-    <h1>Hero Form 1 (Template)</h1>
-    <!-- #docregion form-tag-->
-    <form #heroForm="ngForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
-    <!-- #enddocregion form-tag-->
-      <div class="form-group">
-        <!-- #docregion name-with-error-msg -->
-        <label for="name">Name</label>
-
-        <input type="text" id="name" class="form-control"
-               required minlength="4" maxlength="24"
-               name="name" [(ngModel)]="hero.name"
-               #name="ngModel" >
-
-        <div *ngIf="name.errors && (name.dirty || name.touched)"
-             class="alert alert-danger">
-            <div [hidden]="!name.errors.required">
-              Name is required
-            </div>
-            <div [hidden]="!name.errors.minlength">
-              Name must be at least 4 characters long.
-            </div>
-            <div [hidden]="!name.errors.maxlength">
-              Name cannot be more than 24 characters long.
-            </div>
-        </div>
-        <!-- #enddocregion name-with-error-msg -->
-      </div>
-
-      <div class="form-group">
-        <label for="alterEgo">Alter Ego</label>
-        <input type="text" id="alterEgo" class="form-control"
-               name="alterEgo"
-               [(ngModel)]="hero.alterEgo" >
-      </div>
-
-      <div class="form-group">
-        <label for="power">Hero Power</label>
-        <select id="power" class="form-control"
-                name="power"
-                [(ngModel)]="hero.power" required
-                #power="ngModel" >
-          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
-        </select>
-
-        <div *ngIf="power.errors && power.touched" class="alert alert-danger">
-          <div [hidden]="!power.errors.required">Power is required</div>
-        </div>
-      </div>
-
-      <button type="submit" class="btn btn-default"
-             [disabled]="!heroForm.form.valid">Submit</button>
-      <button type="button" class="btn btn-default"
-             (click)="addHero()">New Hero</button>
-    </form>
-  </div>
-
-  <hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
-</div>

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

@@ -1,47 +0,0 @@
-/* tslint:disable: member-ordering */
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-
-import { Hero }      from '../shared/hero';
-
-@Component({
-  selector: 'hero-form-template1',
-  templateUrl: './hero-form-template1.component.html'
-})
-// #docregion class
-export class HeroFormTemplate1Component {
-
-  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
-
-  hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What');
-
-  submitted = false;
-
-  onSubmit() {
-    this.submitted = true;
-  }
-// #enddocregion class
-// #enddocregion
-  // Reset the form with a new hero AND restore 'pristine' class state
-  // by toggling 'active' flag which causes the form
-  // to be removed/re-added in a tick via NgIf
-  // TODO: Workaround until NgForm has a reset method (#6822)
-  active = true;
-// #docregion
-// #docregion class
-
-  addHero() {
-    this.hero = new Hero(42, '', '');
-// #enddocregion class
-// #enddocregion
-
-    this.active = false;
-    setTimeout(() => this.active = true, 0);
-// #docregion
-// #docregion class
-  }
-}
-// #enddocregion class
-// #enddocregion

aio/content/examples/form-validation/src/app/template/hero-form-template2.component.html

@@ -1,52 +0,0 @@
- <!-- #docregion -->
-<div class="container">
-  <div [hidden]="submitted">
-    <h1>Hero Form 2 (Template & Messages)</h1>
-    <!-- #docregion form-tag-->
-    <form #heroForm="ngForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
-    <!-- #enddocregion form-tag-->
-      <div class="form-group">
-        <!-- #docregion name-with-error-msg -->
-        <label for="name">Name</label>
-
-        <!-- #docregion name-input -->
-        <input type="text" id="name" class="form-control"
-               required minlength="4" maxlength="24" forbiddenName="bob"
-               name="name" [(ngModel)]="hero.name" >
-        <!-- #enddocregion name-input -->
-
-        <div *ngIf="formErrors.name" class="alert alert-danger">
-          {{ formErrors.name }}
-        </div>
-        <!-- #enddocregion name-with-error-msg -->
-      </div>
-
-      <div class="form-group">
-        <label for="alterEgo">Alter Ego</label>
-        <input type="text" id="alterEgo" class="form-control"
-               name="alterEgo"
-               [(ngModel)]="hero.alterEgo" >
-      </div>
-
-      <div class="form-group">
-        <label for="power">Hero Power</label>
-        <select id="power" class="form-control"
-                name="power"
-                [(ngModel)]="hero.power" required >
-          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
-        </select>
-
-        <div *ngIf="formErrors.power" class="alert alert-danger">
-          {{ formErrors.power }}
-        </div>
-      </div>
-
-      <button type="submit" class="btn btn-default"
-             [disabled]="!heroForm.form.valid">Submit</button>
-      <button type="button" class="btn btn-default"
-             (click)="addHero()">New Hero</button>
-    </form>
-  </div>
-
-  <hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
-</div>

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

@@ -1,99 +0,0 @@
-/* tslint:disable: member-ordering forin */
-// #docplaster
-// #docregion
-import { Component, AfterViewChecked, ViewChild } from '@angular/core';
-import { NgForm } from '@angular/forms';
-
-import { Hero }      from '../shared/hero';
-
-@Component({
-  selector: 'hero-form-template2',
-  templateUrl: './hero-form-template2.component.html'
-})
-export class HeroFormTemplate2Component implements AfterViewChecked {
-
-  powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
-
-  hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What');
-
-  submitted = false;
-
-  onSubmit() {
-    this.submitted = true;
-  }
-// #enddocregion
-
-  // Reset the form with a new hero AND restore 'pristine' class state
-  // by toggling 'active' flag which causes the form
-  // to be removed/re-added in a tick via NgIf
-  // TODO: Workaround until NgForm has a reset method (#6822)
-  active = true;
-// #docregion
-
-  addHero() {
-    this.hero = new Hero(42, '', '');
-// #enddocregion
-
-    this.active = false;
-    setTimeout(() => this.active = true, 0);
-// #docregion
-  }
-
-  // #docregion view-child
-  heroForm: NgForm;
-  @ViewChild('heroForm') currentForm: NgForm;
-
-  ngAfterViewChecked() {
-    this.formChanged();
-  }
-
-  formChanged() {
-    if (this.currentForm === this.heroForm) { return; }
-    this.heroForm = this.currentForm;
-    if (this.heroForm) {
-      this.heroForm.valueChanges
-        .subscribe(data => this.onValueChanged(data));
-    }
-  }
-  // #enddocregion view-child
-
-  // #docregion handler
-  onValueChanged(data?: any) {
-    if (!this.heroForm) { return; }
-    const form = this.heroForm.form;
-
-    for (const field in this.formErrors) {
-      // clear previous error message (if any)
-      this.formErrors[field] = '';
-      const control = form.get(field);
-
-      if (control && control.dirty && !control.valid) {
-        const messages = this.validationMessages[field];
-        for (const key in control.errors) {
-          this.formErrors[field] += messages[key] + ' ';
-        }
-      }
-    }
-  }
-
-  formErrors = {
-    'name': '',
-    'power': ''
-  };
-  // #enddocregion handler
-
-  // #docregion messages
-  validationMessages = {
-    'name': {
-      'required':      'Name is required.',
-      'minlength':     'Name must be at least 4 characters long.',
-      'maxlength':     'Name cannot be more than 24 characters long.',
-      'forbiddenName': 'Someone named "Bob" cannot be a hero.'
-    },
-    'power': {
-      'required': 'Power is required.'
-    }
-  };
-  // #enddocregion messages
-}
-// #enddocregion

aio/content/examples/form-validation/src/forms.css

@@ -1,3 +1,4 @@
+
 .ng-valid[required], .ng-valid.required  {
   border-left: 5px solid #42A948; /* green */
 }

aio/content/examples/hierarchical-dependency-injection/plnkr.json

@@ -1,5 +1,5 @@
 {
-  "description": "Hierachical Dependency Injection",
+  "description": "Hierarchical Dependency Injection",
   "basePath": "src/",
   "files":[
     "!**/*.d.ts",

aio/content/examples/i18n/src/app/app.component.ts

@@ -9,7 +9,7 @@ export class AppComponent {
   wolves = 0;
   gender = 'f';
   fly = true;
-  logo = 'https://angular.io/resources/images/logos/angular/angular.png';
+  logo = 'https://angular.io/assets/images/logos/angular/angular.png';
   count = 3;
   heroes: string[] = ['Magneta', 'Celeritas', 'Dynama'];
   inc(i: number) {

aio/content/examples/ngmodule/src/app/title.component.ts

@@ -12,7 +12,7 @@ import { UserService } from './user.service';
 })
 export class TitleComponent {
   @Input() subtitle = '';
-  title = 'Angular Modules';
+  title = 'NgModules';
 // #enddocregion v1
   user = '';
 

aio/content/examples/pipes/e2e-spec.ts

@@ -85,7 +85,7 @@ describe('Pipes', function () {
       return resetEle.click();
     })
     .then(function() {
-       expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore orginal flying heroes');
+       expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes');
     });
   });
 

aio/content/examples/pipes/src/app/exponential-strength.pipe.ts

@@ -6,7 +6,7 @@ import { Pipe, PipeTransform } from '@angular/core';
  * Usage:
  *   value | exponentialStrength:exponent
  * Example:
- *   {{ 2 |  exponentialStrength:10}}
+ *   {{ 2 | exponentialStrength:10 }}
  *   formats to: 1024
 */
 @Pipe({name: 'exponentialStrength'})

aio/content/examples/reactive-forms/src/app/app.module.ts

@@ -16,7 +16,7 @@ import { HeroService }         from './hero.service'; //  <-- #1 import service
 @NgModule({
   imports: [
     BrowserModule,
-    ReactiveFormsModule // <-- #2 add to Angular module imports
+    ReactiveFormsModule // <-- #2 add to @NgModule imports
   ],
   declarations: [
     AppComponent,

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

@@ -12,13 +12,13 @@ describe('Router', () => {
   beforeAll(() => browser.get(''));
 
   function getPageStruct() {
-    const hrefEles = element.all(by.css('my-app a'));
+    const hrefEles = element.all(by.css('my-app > nav a'));
     const crisisDetail = element.all(by.css('my-app > ng-component > ng-component > ng-component > div')).first();
     const heroDetail = element(by.css('my-app > ng-component > div'));
 
     return {
       hrefs: hrefEles,
-      activeHref: element(by.css('my-app a.active')),
+      activeHref: element(by.css('my-app > nav a.active')),
 
       crisisHref: hrefEles.get(0),
       crisisList: element.all(by.css('my-app > ng-component > ng-component li')),

aio/content/examples/router/src/app.css

@@ -15,6 +15,10 @@
   height: 1.6em;
   border-radius: 4px;
 }
+.items li a {
+  display: block;
+  text-decoration: none;
+}
 .items li:hover {
   color: #607D8B;
   background-color: #DDD;

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

@@ -28,7 +28,7 @@ const appRoutes: Routes = [
     data: { preload: true }
   },
   // #enddocregion preload-v2
-  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
+  { path: '',   redirectTo: '/superheroes', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];
 

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

@@ -0,0 +1,23 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  // #docregion template
+  template: `
+    <h1 class="title">Angular Router</h1>
+    <nav>
+      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
+      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+      <a routerLink="/admin" routerLinkActive="active">Admin</a>
+      <a routerLink="/login" routerLinkActive="active">Login</a>
+      <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
+    </nav>
+    <router-outlet></router-outlet>
+    <router-outlet name="popup"></router-outlet>
+  `
+  // #enddocregion template
+})
+export class AppComponent {
+}

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

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
     <h1 class="title">Angular Router</h1>
     <nav>
       <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
-      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+      <a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
       <a routerLink="/admin" routerLinkActive="active">Admin</a>
       <a routerLink="/login" routerLinkActive="active">Login</a>
       <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>

aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts

@@ -1,5 +1,6 @@
 // #docregion
 import { Injectable }           from '@angular/core';
+import { Observable }           from 'rxjs/Observable';
 import { CanDeactivate,
          ActivatedRouteSnapshot,
          RouterStateSnapshot }  from '@angular/router';
@@ -13,7 +14,7 @@ export class CanDeactivateGuard implements CanDeactivate<CrisisDetailComponent>
     component: CrisisDetailComponent,
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
-  ): Promise<boolean> | boolean {
+  ): Observable<boolean> | boolean {
     // Get the Crisis Center ID
     console.log(route.paramMap.get('id'));
 
@@ -25,7 +26,7 @@ export class CanDeactivateGuard implements CanDeactivate<CrisisDetailComponent>
       return true;
     }
     // Otherwise ask the user with the dialog service and return its
-    // promise which resolves to true or false when the user decides
+    // observable which resolves to true or false when the user decides
     return component.dialogService.confirm('Discard changes?');
   }
 }

aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts

@@ -1,18 +1,21 @@
 // #docregion
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
 import { Injectable }             from '@angular/core';
+import { Observable }             from 'rxjs/Observable';
 import { Router, Resolve, RouterStateSnapshot,
          ActivatedRouteSnapshot } from '@angular/router';
 
-import { Crisis, CrisisService } from './crisis.service';
+import { Crisis, CrisisService }  from './crisis.service';
 
 @Injectable()
 export class CrisisDetailResolver implements Resolve<Crisis> {
   constructor(private cs: CrisisService, private router: Router) {}
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> {
     let id = route.paramMap.get('id');
 
-    return this.cs.getCrisis(id).then(crisis => {
+    return this.cs.getCrisis(id).take(1).map(crisis => {
       if (crisis) {
         return crisis;
       } else { // id not found

aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts

@@ -1,8 +1,9 @@
 // #docplaster
 // #docregion
 import 'rxjs/add/operator/switchMap';
-import { Component, OnInit, HostBinding } from '@angular/core';
+import { Component, OnInit, HostBinding }   from '@angular/core';
 import { ActivatedRoute, Router, ParamMap } from '@angular/router';
+import { Observable }                       from 'rxjs/Observable';
 
 import { slideInDownAnimation }   from '../animations';
 import { Crisis, CrisisService }  from './crisis.service';
@@ -45,7 +46,8 @@ export class CrisisDetailComponent implements OnInit {
   // #docregion ngOnInit
   ngOnInit() {
     this.route.paramMap
-      .switchMap((params: ParamMap) => this.service.getCrisis(params.get('id')))
+      .switchMap((params: ParamMap) =>
+        this.service.getCrisis(params.get('id')))
       .subscribe((crisis: Crisis) => {
         if (crisis) {
           this.editName = crisis.name;
@@ -66,13 +68,13 @@ export class CrisisDetailComponent implements OnInit {
     this.gotoCrises();
   }
 
-  canDeactivate(): Promise<boolean> | boolean {
+  canDeactivate(): Observable<boolean> | boolean {
     // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
     if (!this.crisis || this.crisis.name === this.editName) {
       return true;
     }
     // Otherwise ask the user with the dialog service and return its
-    // promise which resolves to true or false when the user decides
+    // observable which resolves to true or false when the user decides
     return this.dialogService.confirm('Discard changes?');
   }
 

aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts

@@ -2,6 +2,7 @@
 // #docregion
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
 
 import { slideInDownAnimation }   from '../animations';
 import { Crisis }         from './crisis.service';
@@ -62,13 +63,13 @@ export class CrisisDetailComponent implements OnInit {
   // #enddocregion cancel-save
 
   // #docregion canDeactivate
-  canDeactivate(): Promise<boolean> | boolean {
+  canDeactivate(): Observable<boolean> | boolean {
     // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
     if (!this.crisis || this.crisis.name === this.editName) {
       return true;
     }
     // Otherwise ask the user with the dialog service and return its
-    // promise which resolves to true or false when the user decides
+    // observable which resolves to true or false when the user decides
     return this.dialogService.confirm('Discard changes?');
   }
   // #enddocregion canDeactivate

aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts

@@ -1,7 +1,7 @@
-import 'rxjs/add/operator/do';
+
 import 'rxjs/add/operator/switchMap';
-import { Component, OnInit }              from '@angular/core';
-import { ActivatedRoute, Router, ParamMap } from '@angular/router';
+import { Component, OnInit }        from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
 import { Observable }            from 'rxjs/Observable';
@@ -10,35 +10,34 @@ import { Observable }            from 'rxjs/Observable';
   // #docregion relative-navigation-router-link
   template: `
     <ul class="items">
-      <li *ngFor="let crisis of crises | async">
-        <a [routerLink]="[crisis.id]"
-           [class.selected]="isSelected(crisis)">
-          <span class="badge">{{ crisis.id }}</span>
-          {{ crisis.name }}
+      <li *ngFor="let crisis of crises$ | async"
+        [class.selected]="crisis.id === selectedId">
+        <a [routerLink]="[crisis.id]">
+          <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
         </a>
       </li>
-    </ul>`
+    </ul>
+
+    <router-outlet></router-outlet>
+    `
   // #enddocregion relative-navigation-router-link
 })
 export class CrisisListComponent implements OnInit {
-  crises: Observable<Crisis[]>;
+  crises$: Observable<Crisis[]>;
   selectedId: number;
 
+
   constructor(
     private service: CrisisService,
-    private route: ActivatedRoute,
-    private router: Router
+    private route: ActivatedRoute
   ) {}
 
+
   ngOnInit() {
-    this.crises = this.route.paramMap
+    this.crises$ = this.route.paramMap
       .switchMap((params: ParamMap) => {
         this.selectedId = +params.get('id');
         return this.service.getCrises();
       });
   }
-
-  isSelected(crisis: Crisis) {
-    return crisis.id === this.selectedId;
-  }
 }

aio/content/examples/router/src/app/crisis-center/crisis-list.component.ts

@@ -1,20 +1,19 @@
 // #docregion
 import 'rxjs/add/operator/switchMap';
-import { Component, OnInit }      from '@angular/core';
-import { ActivatedRoute, Router, ParamMap } from '@angular/router';
-
-import { Observable }            from 'rxjs/Observable';
+import { Component, OnInit }        from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
+import { Observable }            from 'rxjs/Observable';
 
 @Component({
   template: `
     <ul class="items">
-      <li *ngFor="let crisis of crises | async"
-        (click)="onSelect(crisis)"
-        [class.selected]="isSelected(crisis)">
-          <span class="badge">{{ crisis.id }}</span>
-          {{ crisis.name }}
+      <li *ngFor="let crisis of crises$ | async"
+        [class.selected]="crisis.id === selectedId">
+        <a [routerLink]="[crisis.id]">
+          <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
+        </a>
       </li>
     </ul>
 
@@ -22,35 +21,21 @@ import { Crisis, CrisisService } from './crisis.service';
   `
 })
 export class CrisisListComponent implements OnInit {
-  crises: Observable<Crisis[]>;
+  crises$: Observable<Crisis[]>;
   selectedId: number;
 
   // #docregion ctor
   constructor(
     private service: CrisisService,
-    private route: ActivatedRoute,
-    private router: Router
+    private route: ActivatedRoute
   ) {}
   // #enddocregion ctor
 
-  isSelected(crisis: Crisis) {
-    return crisis.id === this.selectedId;
-  }
-
   ngOnInit() {
-    this.crises = this.route.paramMap
+    this.crises$ = this.route.paramMap
       .switchMap((params: ParamMap) => {
         this.selectedId = +params.get('id');
         return this.service.getCrises();
       });
   }
-
-  // #docregion onSelect
-  onSelect(crisis: Crisis) {
-    this.selectedId = crisis.id;
-
-    // Navigate with relative link
-    this.router.navigate([crisis.id], { relativeTo: this.route });
-  }
-  // #enddocregion onSelect
 }

aio/content/examples/router/src/app/crisis-center/crisis.service.ts

@@ -1,5 +1,9 @@
 // #docplaster
 // #docregion , mock-crises
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/map';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
 export class Crisis {
   constructor(public id: number, public name: string) { }
 }
@@ -12,20 +16,18 @@ const CRISES = [
 ];
 // #enddocregion mock-crises
 
-let crisesPromise = Promise.resolve(CRISES);
-
 import { Injectable } from '@angular/core';
 
 @Injectable()
 export class CrisisService {
-
   static nextCrisisId = 100;
+  private crises$: BehaviorSubject<Crisis[]> = new BehaviorSubject<Crisis[]>(CRISES);
 
-  getCrises() { return crisesPromise; }
+  getCrises() { return this.crises$; }
 
   getCrisis(id: number | string) {
-    return crisesPromise
-      .then(crises => crises.find(crisis => crisis.id === +id));
+    return this.getCrises()
+      .map(crises => crises.find(crisis => crisis.id === +id));
   }
 
   // #enddocregion
@@ -33,7 +35,8 @@ export class CrisisService {
     name = name.trim();
     if (name) {
       let crisis = new Crisis(CrisisService.nextCrisisId++, name);
-      crisesPromise.then(crises => crises.push(crisis));
+      CRISES.push(crisis);
+      this.crises$.next(CRISES);
     }
   }
   // #docregion

aio/content/examples/router/src/app/dialog.service.ts

@@ -1,5 +1,8 @@
 // #docregion
+import 'rxjs/add/observable/of';
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
 /**
  * Async modal dialog service
  * DialogService makes this app easier to test by faking this service.
@@ -9,11 +12,11 @@ import { Injectable } from '@angular/core';
 export class DialogService {
   /**
    * Ask user to confirm an action. `message` explains the action and choices.
-   * Returns promise resolving to `true`=confirm or `false`=cancel
+   * Returns observable resolving to `true`=confirm or `false`=cancel
    */
-  confirm(message?: string) {
-    return new Promise<boolean>(resolve => {
-      return resolve(window.confirm(message || 'Is it OK?'));
-    });
+  confirm(message?: string): Observable<boolean> {
+    const confirmation = window.confirm(message || 'Is it OK?');
+
+    return Observable.of(confirmation);
   };
 }

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

@@ -4,6 +4,7 @@
 import 'rxjs/add/operator/switchMap';
 // #enddocregion rxjs-operator-import
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
 // #docregion imports
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 // #enddocregion imports
@@ -13,7 +14,7 @@ import { Hero, HeroService } from './hero.service';
 @Component({
   template: `
   <h2>HEROES</h2>
-  <div *ngIf="hero">
+  <div *ngIf="hero$ | async as hero">
     <h3>"{{ hero.name }}"</h3>
     <div>
       <label>Id: </label>{{ hero.id }}</div>
@@ -28,7 +29,7 @@ import { Hero, HeroService } from './hero.service';
   `
 })
 export class HeroDetailComponent implements OnInit  {
-  hero: Hero;
+  hero$: Observable<Hero>;
 
   // #docregion ctor
   constructor(
@@ -40,10 +41,9 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.paramMap
+    this.hero$ = this.route.paramMap
       .switchMap((params: ParamMap) =>
-        this.service.getHero(params.get('id')))
-      .subscribe((hero: Hero) => this.hero = hero);
+        this.service.getHero(params.get('id')));
   }
   // #enddocregion ngOnInit
 

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

@@ -2,13 +2,14 @@
 // #docregion
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Observable }             from 'rxjs/Observable';
 
 import { Hero, HeroService } from './hero.service';
 
 @Component({
   template: `
   <h2>HEROES</h2>
-  <div *ngIf="hero">
+  <div *ngIf="hero$ | async as hero">
     <h3>"{{ hero.name }}"</h3>
     <div>
       <label>Id: </label>{{ hero.id }}</div>
@@ -23,7 +24,7 @@ import { Hero, HeroService } from './hero.service';
   `
 })
 export class HeroDetailComponent implements OnInit  {
-  hero: Hero;
+  hero$: Observable<Hero>;
 
   constructor(
     private route: ActivatedRoute,
@@ -35,8 +36,7 @@ export class HeroDetailComponent implements OnInit  {
   ngOnInit() {
     let id = this.route.snapshot.paramMap.get('id');
 
-    this.service.getHero(id)
-      .then((hero: Hero) => this.hero = hero);
+    this.hero$ = this.service.getHero(id);
   }
   // #enddocregion snapshot
 

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

@@ -4,6 +4,7 @@
 import 'rxjs/add/operator/switchMap';
 // #enddocregion rxjs-operator-import
 import { Component, OnInit, HostBinding } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 
 import { slideInDownAnimation } from '../animations';
@@ -13,7 +14,7 @@ import { Hero, HeroService }  from './hero.service';
 @Component({
   template: `
   <h2>HEROES</h2>
-  <div *ngIf="hero">
+  <div *ngIf="hero$ | async as hero">
     <h3>"{{ hero.name }}"</h3>
     <div>
       <label>Id: </label>{{ hero.id }}</div>
@@ -22,7 +23,7 @@ import { Hero, HeroService }  from './hero.service';
       <input [(ngModel)]="hero.name" placeholder="name"/>
     </div>
     <p>
-      <button (click)="gotoHeroes()">Back</button>
+      <button (click)="gotoHeroes(hero)">Back</button>
     </p>
   </div>
   `,
@@ -35,7 +36,7 @@ export class HeroDetailComponent implements OnInit {
   @HostBinding('style.position')  position = 'absolute';
 // #enddocregion host-bindings
 
-  hero: Hero;
+  hero$: Observable<Hero>;
 
   // #docregion ctor
   constructor(
@@ -47,16 +48,15 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.paramMap
+    this.hero$ = this.route.paramMap
       .switchMap((params: ParamMap) =>
-        this.service.getHero(params.get('id')))
-      .subscribe((hero: Hero) => this.hero = hero);
+        this.service.getHero(params.get('id')));
   }
   // #enddocregion ngOnInit
 
   // #docregion gotoHeroes
-  gotoHeroes() {
-    let heroId = this.hero ? this.hero.id : null;
+  gotoHeroes(hero: Hero) {
+    let heroId = hero ? hero.id : null;
     // Pass along the hero id if available
     // so that the HeroList component can select that hero.
     // Include a junk 'foo' property for fun.

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

@@ -3,6 +3,7 @@
 // TODO SOMEDAY: Feature Componetized like HeroCenter
 import { Component, OnInit }   from '@angular/core';
 import { Router }              from '@angular/router';
+import { Observable }          from 'rxjs/Observable';
 
 import { Hero, HeroService }   from './hero.service';
 
@@ -11,9 +12,12 @@ import { Hero, HeroService }   from './hero.service';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="let hero of heroes | async"
-        (click)="onSelect(hero)">
-        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
+      <li *ngFor="let hero of heroes$ | async">
+        // #docregion nav-to-detail
+        <a [routerLink]="['/hero', hero.id]">
+          <span class="badge">{{ hero.id }}</span>{{ hero.name }}
+        </a>
+        // #enddocregion nav-to-detail
       </li>
     </ul>
 
@@ -22,7 +26,7 @@ import { Hero, HeroService }   from './hero.service';
   // #enddocregion template
 })
 export class HeroListComponent implements OnInit {
-  heroes: Promise<Hero[]>;
+  heroes$: Observable<Hero[]>;
 
   // #docregion ctor
   constructor(
@@ -32,16 +36,8 @@ export class HeroListComponent implements OnInit {
   // #enddocregion ctor
 
   ngOnInit() {
-    this.heroes = this.service.getHeroes();
+    this.heroes$ = this.service.getHeroes();
   }
-
-  // #docregion select
-  onSelect(hero: Hero) {
-    // #docregion nav-to-detail
-    this.router.navigate(['/hero', hero.id]);
-    // #enddocregion nav-to-detail
-  }
-  // #enddocregion select
 }
 // #enddocregion
 

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

@@ -7,7 +7,7 @@ import { Observable } from 'rxjs/Observable';
 // #enddocregion rxjs-imports
 import { Component, OnInit } from '@angular/core';
 // #docregion import-router
-import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, ParamMap } from '@angular/router';
 // #enddocregion import-router
 
 import { Hero, HeroService }  from './hero.service';
@@ -17,10 +17,11 @@ import { Hero, HeroService }  from './hero.service';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="let hero of heroes | async"
-        [class.selected]="isSelected(hero)"
-        (click)="onSelect(hero)">
-        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
+      <li *ngFor="let hero of heroes$ | async"
+        [class.selected]="hero.id === selectedId">
+        <a [routerLink]="['/hero', hero.id]">
+          <span class="badge">{{ hero.id }}</span>{{ hero.name }}
+        </a>
       </li>
     </ul>
 
@@ -30,18 +31,17 @@ import { Hero, HeroService }  from './hero.service';
 })
 // #docregion ctor
 export class HeroListComponent implements OnInit {
-  heroes: Observable<Hero[]>;
+  heroes$: Observable<Hero[]>;
 
   private selectedId: number;
 
   constructor(
     private service: HeroService,
-    private route: ActivatedRoute,
-    private router: Router
+    private route: ActivatedRoute
   ) {}
 
   ngOnInit() {
-    this.heroes = this.route.paramMap
+    this.heroes$ = this.route.paramMap
       .switchMap((params: ParamMap) => {
         // (+) before `params.get()` turns the string into a number
         this.selectedId = +params.get('id');
@@ -49,16 +49,6 @@ export class HeroListComponent implements OnInit {
       });
   }
   // #enddocregion ctor
-
-  // #docregion isSelected
-  isSelected(hero: Hero) { return hero.id === this.selectedId; }
-  // #enddocregion isSelected
-
-  // #docregion select
-  onSelect(hero: Hero) {
-    this.router.navigate(['/hero', hero.id]);
-  }
-  // #enddocregion select
 // #docregion ctor
 }
 // #enddocregion

aio/content/examples/router/src/app/heroes/hero.service.ts

@@ -1,11 +1,14 @@
 // #docregion
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/map';
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
 
 export class Hero {
   constructor(public id: number, public name: string) { }
 }
 
-let HEROES = [
+const HEROES = [
   new Hero(11, 'Mr. Nice'),
   new Hero(12, 'Narco'),
   new Hero(13, 'Bombasto'),
@@ -14,15 +17,13 @@ let HEROES = [
   new Hero(16, 'RubberMan')
 ];
 
-let heroesPromise = Promise.resolve(HEROES);
-
 @Injectable()
 export class HeroService {
-  getHeroes() { return heroesPromise; }
+  getHeroes() { return Observable.of(HEROES); }
 
   getHero(id: number | string) {
-    return heroesPromise
+    return this.getHeroes()
       // (+) before `id` turns the string into a number
-      .then(heroes => heroes.find(hero => hero.id === +id));
+      .map(heroes => heroes.find(hero => hero.id === +id));
   }
 }

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

@@ -0,0 +1,24 @@
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { HeroListComponent }    from './hero-list.component';
+import { HeroDetailComponent }  from './hero-detail.component';
+
+const heroesRoutes: Routes = [
+  { path: 'heroes',  component: HeroListComponent },
+// #docregion hero-detail-route
+  { path: 'hero/:id', component: HeroDetailComponent }
+// #enddocregion hero-detail-route
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(heroesRoutes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class HeroRoutingModule { }
+// #enddocregion

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

@@ -6,10 +6,10 @@ import { HeroListComponent }    from './hero-list.component';
 import { HeroDetailComponent }  from './hero-detail.component';
 
 const heroesRoutes: Routes = [
-  { path: 'heroes',  component: HeroListComponent },
-// #docregion hero-detail-route
-  { path: 'hero/:id', component: HeroDetailComponent }
-// #enddocregion hero-detail-route
+  { path: 'heroes', redirectTo: '/superheroes' },
+  { path: 'hero/:id', redirectTo: '/superhero/:id' },
+  { path: 'superheroes',  component: HeroListComponent },
+  { path: 'superhero/:id', component: HeroDetailComponent }
 ];
 
 @NgModule({

aio/content/examples/structural-directives/src/app/app.component.html

@@ -213,10 +213,10 @@
 <h2 id="myUnless">UnlessDirective</h2>
 <p>
   The condition is currently
-  <span [ngClass]="{ a: !condition, b: condition, unless: true }">{{condition}}</span>.
+  <span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true }">{{condition}}</span>.
   <button
     (click)="condition = !condition"
-    [ngClass] = "{ a: condition, b: !condition }" >
+    [ngClass] = "{ 'a': condition, 'b': !condition }" >
     Toggle condition to {{condition ? 'false' : 'true'}}
   </button>
 </p>

aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts

@@ -4,7 +4,7 @@ import { Directive } from '@angular/core';
 @Directive({
   selector: '[tohValidator2]',
   host: {
-    'attr.role': 'button',
+    '[attr.role]': 'role',
     '(mouseenter)': 'onMouseEnter()'
   }
 })

aio/content/examples/template-syntax/src/app/app.component.html

@@ -161,7 +161,7 @@
   <!-- #docregion property-binding-syntax-1 -->
   <img [src]="heroImageUrl">
   <hero-detail [hero]="currentHero"></hero-detail>
-  <div [ngClass]="{special: isSpecial}"></div>
+  <div [ngClass]="{'special': isSpecial}"></div>
   <!-- #enddocregion property-binding-syntax-1 -->
 </div>
 <br><br>
@@ -496,7 +496,7 @@ bindon-ngModel
 <div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
 
 <div class="bad curly special">Bad curly special</div>
-<div [ngClass]="{bad:false, curly:true, special:true}">Curly special</div>
+<div [ngClass]="{'bad':false, 'curly':true, 'special':true}">Curly special</div>
 
 <a class="to-toc" href="#toc">top</a>
 

aio/content/examples/template-syntax/src/app/app.component.ts

@@ -140,9 +140,9 @@ export class AppComponent implements AfterViewInit, OnInit {
   setCurrentClasses() {
     // CSS classes: added/removed per current state of component properties
     this.currentClasses =  {
-      saveable: this.canSave,
-      modified: !this.isUnchanged,
-      special:  this.isSpecial
+      'saveable': this.canSave,
+      'modified': !this.isUnchanged,
+      'special':  this.isSpecial
     };
   }
   // #enddocregion setClasses

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

@@ -35,7 +35,7 @@ export class HeroDetailComponent {
   @Input() prefix = '';
 
   // #docregion deleteRequest
-  // This component make a request but it can't actually delete a hero.
+  // This component makes a request but it can't actually delete a hero.
   deleteRequest = new EventEmitter<Hero>();
 
   delete() {

aio/content/examples/testing/karma-test-shim.js

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