release: cut the v9.1.4 release

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

PR Close #36862

.circleci/config.yml

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

.circleci/env.sh

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

.dev-infra.json

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

.pullapprove.yml

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

CHANGELOG.md

@@ -1,3 +1,36 @@
+<a name="9.1.4"></a>
+## [9.1.4](https://github.com/angular/angular/compare/9.1.3...9.1.4) (2020-04-29)
+
+
+### Bug Fixes
+
+* **core:** attempt to recover from user errors during creation ([#36381](https://github.com/angular/angular/issues/36381)) ([d743331](https://github.com/angular/angular/commit/d743331)), closes [#31221](https://github.com/angular/angular/issues/31221)
+* **core:** handle synthetic props in Directive host bindings correctly ([#35568](https://github.com/angular/angular/issues/35568)) ([0f389fa](https://github.com/angular/angular/commit/0f389fa)), closes [#35501](https://github.com/angular/angular/issues/35501)
+* **language-service:** disable update the `[@angular](https://github.com/angular)/core` module ([#36783](https://github.com/angular/angular/issues/36783)) ([d3a77ea](https://github.com/angular/angular/commit/d3a77ea))
+* **localize:** include legacy ids when describing messages ([#36761](https://github.com/angular/angular/issues/36761)) ([aa94cd5](https://github.com/angular/angular/commit/aa94cd5))
+* **ngcc:** recognize enum declarations emitted in JavaScript ([#36550](https://github.com/angular/angular/issues/36550)) ([c440165](https://github.com/angular/angular/commit/c440165)), closes [#35584](https://github.com/angular/angular/issues/35584)
+
+
+
+<a name="9.1.3"></a>
+## [9.1.3](https://github.com/angular/angular/compare/9.1.2...9.1.3) (2020-04-22)
+
+
+### Bug Fixes
+
+* **compiler:** avoid generating i18n attributes in plain form ([#36422](https://github.com/angular/angular/issues/36422)) ([08b8b51](https://github.com/angular/angular/commit/08b8b51))
+* **core:** do not use unbound attributes as inputs to structural directives ([#36441](https://github.com/angular/angular/issues/36441)) ([c0ed57d](https://github.com/angular/angular/commit/c0ed57d))
+* **core:** handle empty translations correctly ([#36499](https://github.com/angular/angular/issues/36499)) ([a5ea100](https://github.com/angular/angular/commit/a5ea100)), closes [#36476](https://github.com/angular/angular/issues/36476)
+* **core:** missing-injectable migration should not migrate `@NgModule` classes ([#36369](https://github.com/angular/angular/issues/36369)) ([0bd50e2](https://github.com/angular/angular/commit/0bd50e2)), closes [#35700](https://github.com/angular/angular/issues/35700)
+* **core:** pipes injecting viewProviders when used on a component host node ([#36512](https://github.com/angular/angular/issues/36512)) ([5ae8473](https://github.com/angular/angular/commit/5ae8473)), closes [#36146](https://github.com/angular/angular/issues/36146)
+* **core:** prevent unknown property check for AOT-compiled components ([#36072](https://github.com/angular/angular/issues/36072)) ([fe1d9ba](https://github.com/angular/angular/commit/fe1d9ba)), closes [#35945](https://github.com/angular/angular/issues/35945)
+* **core:** properly identify modules affected by overrides in TestBed ([#36649](https://github.com/angular/angular/issues/36649)) ([9724169](https://github.com/angular/angular/commit/9724169)), closes [#36619](https://github.com/angular/angular/issues/36619)
+* **language-service:** properly evaluate types in comparable expressions ([#36529](https://github.com/angular/angular/issues/36529)) ([5bab498](https://github.com/angular/angular/commit/5bab498))
+* **ngcc:** display unlocker process output in sync mode ([#36637](https://github.com/angular/angular/issues/36637)) ([da159bd](https://github.com/angular/angular/commit/da159bd)), closes [/github.com/nodejs/node/issues/3596#issuecomment-250890218](https://github.com//github.com/nodejs/node/issues/3596/issues/issuecomment-250890218)
+* **ngcc:** do not use cached file-system ([#36687](https://github.com/angular/angular/issues/36687)) ([18be33a](https://github.com/angular/angular/commit/18be33a)), closes [/github.com/angular/angular-cli/issues/16860#issuecomment-614694269](https://github.com//github.com/angular/angular-cli/issues/16860/issues/issuecomment-614694269)
+
+
+
 <a name="9.1.2"></a>
 ## [9.1.2](https://github.com/angular/angular/compare/9.1.1...9.1.2) (2020-04-15)
 

aio/content/examples/.gitignore

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

aio/content/examples/universal/server.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

aio/content/guide/accessibility.md

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

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

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

aio/content/guide/architecture.md

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

aio/content/guide/browser-support.md

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

aio/content/guide/build.md

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

aio/content/guide/deployment.md

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

aio/content/guide/deprecations.md

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

aio/content/guide/releases.md

@@ -103,9 +103,8 @@ Version | Status | Released     | Active Ends  | LTS Ends
 ------- | ------ | ------------ | ------------ | ------------
 ^9.0.0  | Active | Feb 06, 2020 | Aug 06, 2020 | Aug 06, 2021
 ^8.0.0  | LTS    | May 28, 2019 | Nov 28, 2019 | Nov 28, 2020
-^7.0.0  | LTS    | Oct 18, 2018 | Apr 18, 2019 | Apr 18, 2020
 
-Angular versions ^4.0.0, ^5.0.0 and ^6.0.0 are no longer under support.
+Angular versions ^4.0.0, ^5.0.0, ^6.0.0 and ^7.0.0 are no longer under support.
 
 {@a deprecation}
 ## Deprecation practices

aio/content/guide/testing.md

@@ -1958,7 +1958,7 @@ for the `id` to change during its lifetime.
 
 <div class="alert is-helpful">
 
-The [Router](guide/router#route-parameters) guide covers `ActivatedRoute.paramMap` in more detail.
+The [ActivatedRoute in action](guide/router#activated-route-in-action) section of the [Router](guide/router) guide covers `ActivatedRoute.paramMap` in more detail.
 
 </div>
 

aio/content/guide/universal.md

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

aio/content/marketing/contributors.json

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

aio/content/start/start-data.md

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

aio/package.json

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

aio/scripts/payload.sh

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

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

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

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

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

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

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

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

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

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

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

aio/tools/examples/shared/package.json

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

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

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

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

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

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

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

dev-infra/BUILD.bazel

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

dev-infra/cli.ts

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

dev-infra/commit-message/BUILD.bazel

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

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

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

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

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

dev-infra/commit-message/validate.ts

@@ -20,7 +20,7 @@ const SQUASH_PREFIX_RE = /^squash! /i;
 const REVERT_PREFIX_RE = /^revert:? /i;
 const TYPE_SCOPE_RE = /^(\w+)(?:\(([^)]+)\))?\:\s(.+)$/;
 const COMMIT_HEADER_RE = /^(.*)/i;
-const COMMIT_BODY_RE = /^.*\n\n(.*)/i;
+const COMMIT_BODY_RE = /^.*\n\n([\s\S]*)$/;
 
 /** Parse a full commit message into its composite parts. */
 export function parseCommitMessage(commitMsg: string) {
@@ -79,20 +79,32 @@ export function validateCommitMessage(
   const config = getAngularDevConfig<'commitMessage', CommitMessageConfig>().commitMessage;
   const commit = parseCommitMessage(commitMsg);
 
+  ////////////////////////////////////
+  // Checking revert, squash, fixup //
+  ////////////////////////////////////
+
+  // All revert commits are considered valid.
   if (commit.isRevert) {
     return true;
   }
 
-  if (commit.isSquash && options.disallowSquash) {
-    error('The commit must be manually squashed into the target commit');
-    return false;
+  // All squashes are considered valid, as the commit will be squashed into another in
+  // the git history anyway, unless the options provided to not allow squash commits.
+  if (commit.isSquash) {
+    if (options.disallowSquash) {
+      error('The commit must be manually squashed into the target commit');
+      return false;
+    }
+    return true;
   }
 
-  // If it is a fixup commit and `nonFixupCommitHeaders` is not empty, we only care to check whether
-  // there is a corresponding non-fixup commit (i.e. a commit whose header is identical to this
-  // commit's header after stripping the `fixup! ` prefix).
-  if (commit.isFixup && options.nonFixupCommitHeaders) {
-    if (!options.nonFixupCommitHeaders.includes(commit.header)) {
+  // Fixups commits are considered valid, unless nonFixupCommitHeaders are provided to check
+  // against. If `nonFixupCommitHeaders` is not empty, we check whether there is a corresponding
+  // non-fixup commit (i.e. a commit whose header is identical to this commit's header after
+  // stripping the `fixup! ` prefix), otherwise we assume this verification will happen in another
+  // check.
+  if (commit.isFixup) {
+    if (options.nonFixupCommitHeaders && !options.nonFixupCommitHeaders.includes(commit.header)) {
       error(
           'Unable to find match for fixup commit among prior commits: ' +
           (options.nonFixupCommitHeaders.map(x => `\n      ${x}`).join('') || '-'));
@@ -102,6 +114,9 @@ export function validateCommitMessage(
     return true;
   }
 
+  ////////////////////////////
+  // Checking commit header //
+  ////////////////////////////
   if (commit.header.length > config.maxLineLength) {
     error(`The commit message header is longer than ${config.maxLineLength} characters`);
     return false;
@@ -122,6 +137,10 @@ export function validateCommitMessage(
     return false;
   }
 
+  //////////////////////////
+  // Checking commit body //
+  //////////////////////////
+
   if (commit.bodyWithoutLinking.trim().length < config.minBodyLength) {
     error(`The commit message body does not meet the minimum length of ${
         config.minBodyLength} characters`);

dev-infra/format/BUILD.bazel

@@ -0,0 +1,27 @@
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
+
+ts_library(
+    name = "format",
+    srcs = [
+        "cli.ts",
+        "config.ts",
+        "format.ts",
+        "run-commands-parallel.ts",
+    ],
+    module_name = "@angular/dev-infra-private/format",
+    visibility = ["//dev-infra:__subpackages__"],
+    deps = [
+        "//dev-infra/utils",
+        "@npm//@types/cli-progress",
+        "@npm//@types/inquirer",
+        "@npm//@types/node",
+        "@npm//@types/shelljs",
+        "@npm//@types/yargs",
+        "@npm//cli-progress",
+        "@npm//inquirer",
+        "@npm//multimatch",
+        "@npm//shelljs",
+        "@npm//tslib",
+        "@npm//yargs",
+    ],
+)

dev-infra/format/cli.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import * as yargs from 'yargs';
+
+import {allChangedFilesSince, allFiles} from '../utils/repo-files';
+
+import {checkFiles, formatFiles} from './format';
+
+/** Build the parser for the format commands. */
+export function buildFormatParser(localYargs: yargs.Argv) {
+  return localYargs.help()
+      .strict()
+      .demandCommand()
+      .option('check', {
+        type: 'boolean',
+        default: process.env['CI'] ? true : false,
+        description: 'Run the formatter to check formatting rather than updating code format'
+      })
+      .command(
+          'all', 'Run the formatter on all files in the repository', {},
+          ({check}) => {
+            const executionCmd = check ? checkFiles : formatFiles;
+            executionCmd(allFiles());
+          })
+      .command(
+          'changed [shaOrRef]', 'Run the formatter on files changed since the provided sha/ref', {},
+          ({shaOrRef, check}) => {
+            const sha = shaOrRef || 'master';
+            const executionCmd = check ? checkFiles : formatFiles;
+            executionCmd(allChangedFilesSince(sha));
+          })
+      .command('files <files..>', 'Run the formatter on provided files', {}, ({check, files}) => {
+        const executionCmd = check ? checkFiles : formatFiles;
+        executionCmd(files);
+      });
+}
+
+if (require.main === module) {
+  buildFormatParser(yargs).parse();
+}

dev-infra/format/config.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export interface FormatConfig {
+  matchers: string[];
+}

dev-infra/format/format.ts

@@ -0,0 +1,130 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {prompt} from 'inquirer';
+import * as multimatch from 'multimatch';
+import {join} from 'path';
+
+import {getAngularDevConfig, getRepoBaseDir} from '../utils/config';
+
+import {FormatConfig} from './config';
+import {runInParallel} from './run-commands-parallel';
+
+/** By default, run the formatter on all javascript and typescript files. */
+const DEFAULT_MATCHERS = ['**/*.{t,j}s'];
+
+/**
+ * Format provided files in place.
+ */
+export async function formatFiles(unfilteredFiles: string[]) {
+  // Whether any files failed to format.
+  let formatFailed = false;
+  // All files which formatting should be applied to.
+  const files = filterFilesByMatchers(unfilteredFiles);
+
+  console.info(`Formatting ${files.length} file(s)`);
+
+
+  // Run the formatter to format the files in place, split across (number of available
+  // cpu threads - 1) processess. The task is done in multiple processess to speed up
+  // the overall time of the task, as running across entire repositories takes a large
+  // amount of time.
+  // As a data point for illustration, using 8 process rather than 1 cut the execution
+  // time from 276 seconds to 39 seconds for the same 2700 files
+  await runInParallel(files, `${getFormatterBinary()} -i -style=file`, (file, code, _, stderr) => {
+    if (code !== 0) {
+      formatFailed = true;
+      console.error(`Error running clang-format on: ${file}`);
+      console.error(stderr);
+      console.error();
+    }
+  });
+
+  // The process should exit as a failure if any of the files failed to format.
+  if (formatFailed) {
+    console.error(`Formatting failed, see errors above for more information.`);
+    process.exit(1);
+  }
+  console.info(`√  Formatting complete.`);
+  process.exit(0);
+}
+
+/**
+ * Check provided files for formatting correctness.
+ */
+export async function checkFiles(unfilteredFiles: string[]) {
+  // All files which formatting should be applied to.
+  const files = filterFilesByMatchers(unfilteredFiles);
+  // Files which are currently not formatted correctly.
+  const failures: string[] = [];
+
+  console.info(`Checking format of ${files.length} file(s)`);
+
+  // Run the formatter to check the format of files, split across (number of available
+  // cpu threads - 1) processess. The task is done in multiple processess to speed up
+  // the overall time of the task, as running across entire repositories takes a large
+  // amount of time.
+  // As a data point for illustration, using 8 process rather than 1 cut the execution
+  // time from 276 seconds to 39 seconds for the same 2700 files.
+  await runInParallel(files, `${getFormatterBinary()} --Werror -n -style=file`, (file, code) => {
+    // Add any files failing format checks to the list.
+    if (code !== 0) {
+      failures.push(file);
+    }
+  });
+
+  if (failures.length) {
+    // Provide output expressing which files are failing formatting.
+    console.group('\nThe following files are out of format:');
+    for (const file of failures) {
+      console.info(`  - ${file}`);
+    }
+    console.groupEnd();
+    console.info();
+
+    // If the command is run in a non-CI environment, prompt to format the files immediately.
+    let runFormatter = false;
+    if (!process.env['CI']) {
+      runFormatter = (await prompt({
+                       type: 'confirm',
+                       name: 'runFormatter',
+                       message: 'Format the files now?',
+                     })).runFormatter;
+    }
+
+    if (runFormatter) {
+      // Format the failing files as requested.
+      await formatFiles(failures);
+      process.exit(0);
+    } else {
+      // Inform user how to format files in the future.
+      console.info();
+      console.info(`To format the failing file run the following command:`);
+      console.info(`  yarn ng-dev format files ${failures.join(' ')}`);
+      process.exit(1);
+    }
+  } else {
+    console.info('√  All files correctly formatted.');
+    process.exit(0);
+  }
+}
+
+/** Get the full path of the formatter binary to execute. */
+function getFormatterBinary() {
+  return join(getRepoBaseDir(), 'node_modules/.bin/clang-format');
+}
+
+/** Filter a list of files to only contain files which are expected to be formatted. */
+function filterFilesByMatchers(allFiles: string[]) {
+  const matchers =
+      getAngularDevConfig<'format', FormatConfig>().format.matchers || DEFAULT_MATCHERS;
+  const files = multimatch(allFiles, matchers, {dot: true});
+
+  console.info(`Formatting enforced on ${files.length} of ${allFiles.length} file(s)`);
+  return files;
+}

dev-infra/format/run-commands-parallel.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Bar} from 'cli-progress';
+import {cpus} from 'os';
+import {exec} from 'shelljs';
+
+const AVAILABLE_THREADS = Math.max(cpus().length - 1, 1);
+
+type CallbackFunction = (file: string, code?: number, stdout?: string, stderr?: string) => void;
+
+/**
+ * Run the provided commands in parallel for each provided file.
+ *
+ * A promise is returned, completed when the command has completed running for each file.
+ */
+export function runInParallel(providedFiles: string[], cmd: string, callback: CallbackFunction) {
+  return new Promise<void>((resolve) => {
+    if (providedFiles.length === 0) {
+      return resolve();
+    }
+    // The progress bar instance to use for progress tracking.
+    const progressBar =
+        new Bar({format: `[{bar}] ETA: {eta}s | {value}/{total} files`, clearOnComplete: true});
+    // A local copy of the files to run the command on.
+    const files = providedFiles.slice();
+    // An array to represent the current usage state of each of the threads for parallelization.
+    const threads = new Array<boolean>(AVAILABLE_THREADS).fill(false);
+
+    // Recursively run the command on the next available file from the list using the provided
+    // thread.
+    function runCommandInThread(thread: number) {
+      // Get the next file.
+      const file = files.pop();
+      // If no file was pulled from the array, return as there are no more files to run against.
+      if (!file) {
+        return;
+      }
+
+      exec(
+          `${cmd} ${file}`,
+          {async: true, silent: true},
+          (code, stdout, stderr) => {
+            // Run the provided callback function.
+            callback(file, code, stdout, stderr);
+            // Note in the progress bar another file being completed.
+            progressBar.increment(1);
+            // If more files exist in the list, run again to work on the next file,
+            // using the same slot.
+            if (files.length) {
+              return runCommandInThread(thread);
+            }
+            // If not more files are available, mark the thread as unused.
+            threads[thread] = false;
+            // If all of the threads are false, as they are unused, mark the progress bar
+            // completed and resolve the promise.
+            if (threads.every(active => !active)) {
+              progressBar.stop();
+              resolve();
+            }
+          },
+      );
+      // Mark the thread as in use as the command execution has been started.
+      threads[thread] = true;
+    }
+
+    // Start the progress bar
+    progressBar.start(files.length, 0);
+    // Start running the command on files from the least in each available thread.
+    threads.forEach((_, idx) => runCommandInThread(idx));
+  });
+}

dev-infra/pullapprove/BUILD.bazel

@@ -4,6 +4,7 @@ ts_library(
     name = "pullapprove",
     srcs = [
         "cli.ts",
+        "condition_evaluator.ts",
         "group.ts",
         "logging.ts",
         "parse-yaml.ts",
@@ -12,7 +13,7 @@ ts_library(
     module_name = "@angular/dev-infra-private/pullapprove",
     visibility = ["//dev-infra:__subpackages__"],
     deps = [
-        "//dev-infra/utils:config",
+        "//dev-infra/utils",
         "@npm//@types/minimatch",
         "@npm//@types/node",
         "@npm//@types/shelljs",

dev-infra/pullapprove/cli.ts

@@ -10,8 +10,11 @@ import {verify} from './verify';
 
 /** Build the parser for the pullapprove commands. */
 export function buildPullapproveParser(localYargs: yargs.Argv) {
-  return localYargs.help().strict().demandCommand().command(
-      'verify', 'Verify the pullapprove config', {}, () => verify());
+  return localYargs.help()
+      .strict()
+      .option('verbose', {alias: ['v'], description: 'Enable verbose logging'})
+      .demandCommand()
+      .command('verify', 'Verify the pullapprove config', {}, ({verbose}) => verify(verbose));
 }
 
 if (require.main === module) {

dev-infra/pullapprove/condition_evaluator.ts

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {IMinimatch, Minimatch} from 'minimatch';
+
+/** Map that holds patterns and their corresponding Minimatch globs. */
+const patternCache = new Map<string, IMinimatch>();
+
+/**
+ * Context that is provided to conditions. Conditions can use various helpers
+ * that PullApprove provides. We try to mock them here. Consult the official
+ * docs for more details: https://docs.pullapprove.com/config/conditions.
+ */
+const conditionContext = {
+  'len': (value: any[]) => value.length,
+  'contains_any_globs': (files: PullApproveArray, patterns: string[]) => {
+    // Note: Do not always create globs for the same pattern again. This method
+    // could be called for each source file. Creating glob's is expensive.
+    return files.some(f => patterns.some(pattern => getOrCreateGlob(pattern).match(f)));
+  }
+};
+
+/**
+ * Converts a given condition to a function that accepts a set of files. The returned
+ * function can be called to check if the set of files matches the condition.
+ */
+export function convertConditionToFunction(expr: string): (files: string[]) => boolean {
+  // Creates a dynamic function with the specified expression. The first parameter will
+  // be `files` as that corresponds to the supported `files` variable that can be accessed
+  // in PullApprove condition expressions. The followed parameters correspond to other
+  // context variables provided by PullApprove for conditions.
+  const evaluateFn = new Function('files', ...Object.keys(conditionContext), `
+    return (${transformExpressionToJs(expr)});
+  `);
+
+  // Create a function that calls the dynamically constructed function which mimics
+  // the condition expression that is usually evaluated with Python in PullApprove.
+  return files => {
+    const result = evaluateFn(new PullApproveArray(...files), ...Object.values(conditionContext));
+    // If an array is returned, we consider the condition as active if the array is not
+    // empty. This matches PullApprove's condition evaluation that is based on Python.
+    if (Array.isArray(result)) {
+      return result.length !== 0;
+    }
+    return !!result;
+  };
+}
+
+/**
+ * Transforms a condition expression from PullApprove that is based on python
+ * so that it can be run inside JavaScript. Current transformations:
+ *   1. `not <..>` -> `!<..>`
+ */
+function transformExpressionToJs(expression: string): string {
+  return expression.replace(/not\s+/g, '!');
+}
+
+/**
+ * Superset of a native array. The superset provides methods which mimic the
+ * list data structure used in PullApprove for files in conditions.
+ */
+class PullApproveArray extends Array<string> {
+  constructor(...elements: string[]) {
+    super(...elements);
+
+    // Set the prototype explicitly because in ES5, the prototype is accidentally
+    // lost due to a limitation in down-leveling.
+    // https://github.com/Microsoft/TypeScript/wiki/FAQ#why-doesnt-extending-built-ins-like-error-array-and-map-work.
+    Object.setPrototypeOf(this, PullApproveArray.prototype);
+  }
+
+  /** Returns a new array which only includes files that match the given pattern. */
+  include(pattern: string): PullApproveArray {
+    return new PullApproveArray(...this.filter(s => getOrCreateGlob(pattern).match(s)));
+  }
+
+  /** Returns a new array which only includes files that did not match the given pattern. */
+  exclude(pattern: string): PullApproveArray {
+    return new PullApproveArray(...this.filter(s => !getOrCreateGlob(pattern).match(s)));
+  }
+}
+
+/**
+ * Gets a glob for the given pattern. The cached glob will be returned
+ * if available. Otherwise a new glob will be created and cached.
+ */
+function getOrCreateGlob(pattern: string) {
+  if (patternCache.has(pattern)) {
+    return patternCache.get(pattern)!;
+  }
+  const glob = new Minimatch(pattern, {dot: true});
+  patternCache.set(pattern, glob);
+  return glob;
+}

dev-infra/pullapprove/group.ts

@@ -5,162 +5,101 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {IMinimatch, Minimatch} from 'minimatch';
-
+import {convertConditionToFunction} from './condition_evaluator';
 import {PullApproveGroupConfig} from './parse-yaml';
 
 /** A condition for a group. */
 interface GroupCondition {
-  glob: string;
-  matcher: IMinimatch;
+  expression: string;
+  checkFn: (files: string[]) => boolean;
   matchedFiles: Set<string>;
 }
 
 /** Result of testing files against the group. */
 export interface PullApproveGroupResult {
   groupName: string;
-  matchedIncludes: GroupCondition[];
-  matchedExcludes: GroupCondition[];
+  matchedConditions: GroupCondition[];
   matchedCount: number;
-  unmatchedIncludes: GroupCondition[];
-  unmatchedExcludes: GroupCondition[];
+  unmatchedConditions: GroupCondition[];
   unmatchedCount: number;
 }
 
-// Regex Matcher for contains_any_globs conditions
-const CONTAINS_ANY_GLOBS_REGEX = /^'([^']+)',?$/;
+// Regular expression that matches conditions for the global approval.
+const GLOBAL_APPROVAL_CONDITION_REGEX = /^"global-(docs-)?approvers" not in groups.approved$/;
 
-const CONDITION_TYPES = {
-  INCLUDE_GLOBS: /^contains_any_globs/,
-  EXCLUDE_GLOBS: /^not contains_any_globs/,
-  ATTR_LENGTH: /^len\(.*\)/,
-  GLOBAL_APPROVAL: /^"global-(docs-)?approvers" not in groups.approved$/,
-};
+// Name of the PullApprove group that serves as fallback. This group should never capture
+// any conditions as it would always match specified files. This is not desired as we want
+// to figure out as part of this tool, whether there actually are unmatched files.
+const FALLBACK_GROUP_NAME = 'fallback';
 
 /** A PullApprove group to be able to test files against. */
 export class PullApproveGroup {
-  // Lines which were not able to be parsed as expected.
-  private misconfiguredLines: string[] = [];
-  // Conditions for the group for including files.
-  private includeConditions: GroupCondition[] = [];
-  // Conditions for the group for excluding files.
-  private excludeConditions: GroupCondition[] = [];
-  // Whether the group has file matchers.
-  public hasMatchers = false;
+  /** List of conditions for the group. */
+  conditions: GroupCondition[] = [];
 
-  constructor(public groupName: string, group: PullApproveGroupConfig) {
-    if (group.conditions) {
-      for (let condition of group.conditions) {
-        condition = condition.trim();
+  constructor(public groupName: string, config: PullApproveGroupConfig) {
+    this._captureConditions(config);
+  }
 
-        if (condition.match(CONDITION_TYPES.INCLUDE_GLOBS)) {
-          const [conditions, misconfiguredLines] = getLinesForContainsAnyGlobs(condition);
-          conditions.forEach(globString => this.includeConditions.push({
-            glob: globString,
-            matcher: new Minimatch(globString, {dot: true}),
-            matchedFiles: new Set<string>(),
-          }));
-          this.misconfiguredLines.push(...misconfiguredLines);
-          this.hasMatchers = true;
-        } else if (condition.match(CONDITION_TYPES.EXCLUDE_GLOBS)) {
-          const [conditions, misconfiguredLines] = getLinesForContainsAnyGlobs(condition);
-          conditions.forEach(globString => this.excludeConditions.push({
-            glob: globString,
-            matcher: new Minimatch(globString, {dot: true}),
-            matchedFiles: new Set<string>(),
-          }));
-          this.misconfiguredLines.push(...misconfiguredLines);
-          this.hasMatchers = true;
-        } else if (condition.match(CONDITION_TYPES.ATTR_LENGTH)) {
-          // Currently a noop as we do not take any action on this condition type.
-        } else if (condition.match(CONDITION_TYPES.GLOBAL_APPROVAL)) {
+  private _captureConditions(config: PullApproveGroupConfig) {
+    if (config.conditions && this.groupName !== FALLBACK_GROUP_NAME) {
+      return config.conditions.forEach(condition => {
+        const expression = condition.trim();
+
+        if (expression.match(GLOBAL_APPROVAL_CONDITION_REGEX)) {
           // Currently a noop as we don't take any action for global approval conditions.
-        } else {
-          const errMessage =
-              `Unrecognized condition found, unable to parse the following condition: \n\n` +
-              `From the [${groupName}] group:\n` +
-              ` - ${condition}` +
-              `\n\n` +
-              `Known condition regexs:\n` +
-              `${Object.entries(CONDITION_TYPES).map(([k, v]) => ` ${k} - ${v}`).join('\n')}` +
-              `\n\n`;
-          console.error(errMessage);
+          return;
+        }
+
+        try {
+          this.conditions.push({
+            expression,
+            checkFn: convertConditionToFunction(expression),
+            matchedFiles: new Set(),
+          });
+        } catch (e) {
+          console.error(`Could not parse condition in group: ${this.groupName}`);
+          console.error(` - ${expression}`);
+          console.error(`Error:`, e.message, e.stack);
           process.exit(1);
         }
-      }
+      });
     }
   }
 
-  /** Retrieve all of the lines which were not able to be parsed. */
-  getBadLines(): string[] {
-    return this.misconfiguredLines;
-  }
-
-  /** Retrieve the results for the Group, all matched and unmatched conditions. */
-  getResults(): PullApproveGroupResult {
-    const matchedIncludes = this.includeConditions.filter(c => !!c.matchedFiles.size);
-    const matchedExcludes = this.excludeConditions.filter(c => !!c.matchedFiles.size);
-    const unmatchedIncludes = this.includeConditions.filter(c => !c.matchedFiles.size);
-    const unmatchedExcludes = this.excludeConditions.filter(c => !c.matchedFiles.size);
-    const unmatchedCount = unmatchedIncludes.length + unmatchedExcludes.length;
-    const matchedCount = matchedIncludes.length + matchedExcludes.length;
-    return {
-      matchedIncludes,
-      matchedExcludes,
-      matchedCount,
-      unmatchedIncludes,
-      unmatchedExcludes,
-      unmatchedCount,
-      groupName: this.groupName,
-    };
-  }
-
   /**
    * Tests a provided file path to determine if it would be considered matched by
    * the pull approve group's conditions.
    */
-  testFile(file: string) {
-    let matched = false;
-    this.includeConditions.forEach((includeCondition: GroupCondition) => {
-      if (includeCondition.matcher.match(file)) {
-        let matchedExclude = false;
-        this.excludeConditions.forEach((excludeCondition: GroupCondition) => {
-          if (excludeCondition.matcher.match(file)) {
-            // Add file as a discovered exclude as it is negating a matched
-            // include condition.
-            excludeCondition.matchedFiles.add(file);
-            matchedExclude = true;
-          }
-        });
-        // An include condition is only considered matched if no exclude
-        // conditions are found to matched the file.
-        if (!matchedExclude) {
-          includeCondition.matchedFiles.add(file);
-          matched = true;
+  testFile(filePath: string): boolean {
+    return this.conditions.every(({matchedFiles, checkFn, expression}) => {
+      try {
+        const matchesFile = checkFn([filePath]);
+        if (matchesFile) {
+          matchedFiles.add(filePath);
         }
+        return matchesFile;
+      } catch (e) {
+        const errMessage = `Condition could not be evaluated: \n\n` +
+            `From the [${this.groupName}] group:\n` +
+            ` - ${expression}` +
+            `\n\n${e.message} ${e.stack}\n\n`;
+        console.error(errMessage);
+        process.exit(1);
       }
     });
-    return matched;
+  }
+
+  /** Retrieve the results for the Group, all matched and unmatched conditions. */
+  getResults(): PullApproveGroupResult {
+    const matchedConditions = this.conditions.filter(c => !!c.matchedFiles.size);
+    const unmatchedConditions = this.conditions.filter(c => !c.matchedFiles.size);
+    return {
+      matchedConditions,
+      matchedCount: matchedConditions.length,
+      unmatchedConditions,
+      unmatchedCount: unmatchedConditions.length,
+      groupName: this.groupName,
+    };
   }
 }
-
-/**
- * Extract all of the individual globs from a group condition,
- * providing both the valid and invalid lines.
- */
-function getLinesForContainsAnyGlobs(lines: string) {
-  const invalidLines: string[] = [];
-  const validLines = lines.split('\n')
-                         .slice(1, -1)
-                         .map((glob: string) => {
-                           const trimmedGlob = glob.trim();
-                           const match = trimmedGlob.match(CONTAINS_ANY_GLOBS_REGEX);
-                           if (!match) {
-                             invalidLines.push(trimmedGlob);
-                             return '';
-                           }
-                           return match[1];
-                         })
-                         .filter(globString => !!globString);
-  return [validLines, invalidLines];
-}

dev-infra/pullapprove/logging.ts

@@ -5,26 +5,20 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+
 import {PullApproveGroupResult} from './group';
 
 /** Create logs for each pullapprove group result. */
 export function logGroup(group: PullApproveGroupResult, matched = true) {
-  const includeConditions = matched ? group.matchedIncludes : group.unmatchedIncludes;
-  const excludeConditions = matched ? group.matchedExcludes : group.unmatchedExcludes;
+  const conditions = matched ? group.matchedConditions : group.unmatchedConditions;
   console.groupCollapsed(`[${group.groupName}]`);
-  if (includeConditions.length) {
-    console.group('includes');
-    includeConditions.forEach(
-        matcher => console.info(`${matcher.glob} - ${matcher.matchedFiles.size}`));
+  if (conditions.length) {
+    conditions.forEach(matcher => {
+      const count = matcher.matchedFiles.size;
+      console.info(`${count} ${count === 1 ? 'match' : 'matches'} - ${matcher.expression}`)
+    });
     console.groupEnd();
   }
-  if (excludeConditions.length) {
-    console.group('excludes');
-    excludeConditions.forEach(
-        matcher => console.info(`${matcher.glob} - ${matcher.matchedFiles.size}`));
-    console.groupEnd();
-  }
-  console.groupEnd();
 }
 
 /** Logs a header within a text drawn box. */
@@ -39,4 +33,4 @@ export function logHeader(...params: string[]) {
   console.info(`┌${fill(fillWidth, '─')}┐`);
   console.info(`│${fill(leftSpace, ' ')}${headerText}${fill(rightSpace, ' ')}│`);
   console.info(`└${fill(fillWidth, '─')}┘`);
-}
+}

dev-infra/pullapprove/parse-yaml.ts

@@ -8,7 +8,7 @@
 import {parse as parseYaml} from 'yaml';
 
 export interface PullApproveGroupConfig {
-  conditions?: string;
+  conditions?: string[];
   reviewers: {
     users: string[],
     teams?: string[],

dev-infra/pullapprove/verify.ts

@@ -15,11 +15,9 @@ import {PullApproveGroup} from './group';
 import {logGroup, logHeader} from './logging';
 import {parsePullApproveYaml} from './parse-yaml';
 
-export function verify() {
+export function verify(verbose = false) {
   // Exit early on shelljs errors
   set('-e');
-  // Whether to log verbosely
-  const VERBOSE_MODE = process.argv.includes('-v');
   // Full path of the angular project directory
   const PROJECT_DIR = getRepoBaseDir();
   // Change to the Angular project directory
@@ -39,24 +37,11 @@ export function verify() {
   const groups = Object.entries(pullApprove.groups).map(([groupName, group]) => {
     return new PullApproveGroup(groupName, group);
   });
-  // PullApprove groups without matchers.
-  const groupsWithoutMatchers = groups.filter(group => !group.hasMatchers);
-  // PullApprove groups with matchers.
-  const groupsWithMatchers = groups.filter(group => group.hasMatchers);
-  // All lines from group conditions which are not parsable.
-  const groupsWithBadLines = groups.filter(g => !!g.getBadLines().length);
-  // If any groups contains bad lines, log bad lines and exit failing.
-  if (groupsWithBadLines.length) {
-    logHeader('PullApprove config file parsing failure');
-    console.info(`Discovered errors in ${groupsWithBadLines.length} groups`);
-    groupsWithBadLines.forEach(group => {
-      console.info(` - [${group.groupName}]`);
-      group.getBadLines().forEach(line => console.info(`    ${line}`));
-    });
-    console.info(
-        `Correct the invalid conditions, before PullApprove verification can be completed`);
-    process.exit(1);
-  }
+  // PullApprove groups without conditions. These are skipped in the verification
+  // as those would always be active and cause zero unmatched files.
+  const groupsSkipped = groups.filter(group => !group.conditions.length);
+  // PullApprove groups with conditions.
+  const groupsWithConditions = groups.filter(group => !!group.conditions.length);
   // Files which are matched by at least one group.
   const matchedFiles: string[] = [];
   // Files which are not matched by at least one group.
@@ -64,14 +49,14 @@ export function verify() {
 
   // Test each file in the repo against each group for being matched.
   REPO_FILES.forEach((file: string) => {
-    if (groupsWithMatchers.filter(group => group.testFile(file)).length) {
+    if (groupsWithConditions.filter(group => group.testFile(file)).length) {
       matchedFiles.push(file);
     } else {
       unmatchedFiles.push(file);
     }
   });
   // Results for each group
-  const resultsByGroup = groupsWithMatchers.map(group => group.getResults());
+  const resultsByGroup = groupsWithConditions.map(group => group.getResults());
   // Whether all group condition lines match at least one file and all files
   // are matched by at least one group.
   const verificationSucceeded =
@@ -94,7 +79,7 @@ export function verify() {
    */
   logHeader('PullApprove results by file');
   console.groupCollapsed(`Matched Files (${matchedFiles.length} files)`);
-  VERBOSE_MODE && matchedFiles.forEach(file => console.info(file));
+  verbose && matchedFiles.forEach(file => console.info(file));
   console.groupEnd();
   console.groupCollapsed(`Unmatched Files (${unmatchedFiles.length} files)`);
   unmatchedFiles.forEach(file => console.info(file));
@@ -103,12 +88,12 @@ export function verify() {
    * Group by group Summary
    */
   logHeader('PullApprove results by group');
-  console.groupCollapsed(`Groups without matchers (${groupsWithoutMatchers.length} groups)`);
-  VERBOSE_MODE && groupsWithoutMatchers.forEach(group => console.info(`${group.groupName}`));
+  console.groupCollapsed(`Groups skipped (${groupsSkipped.length} groups)`);
+  verbose && groupsSkipped.forEach(group => console.info(`${group.groupName}`));
   console.groupEnd();
   const matchedGroups = resultsByGroup.filter(group => !group.unmatchedCount);
   console.groupCollapsed(`Matched conditions by Group (${matchedGroups.length} groups)`);
-  VERBOSE_MODE && matchedGroups.forEach(group => logGroup(group));
+  verbose && matchedGroups.forEach(group => logGroup(group));
   console.groupEnd();
   const unmatchedGroups = resultsByGroup.filter(group => group.unmatchedCount);
   console.groupCollapsed(`Unmatched conditions by Group (${unmatchedGroups.length} groups)`);

dev-infra/tmpl-package.json

@@ -10,8 +10,12 @@
   },
   "peerDependencies": {
     "chalk": "<from-root>",
+    "clang-format": "<from-root>",
+    "cli-progress": "<from-root>",
     "glob": "<from-root>",
+    "inquirer": "<from-root>",
     "minimatch": "<from-root>",
+    "multimatch": "<from-root>",
     "shelljs": "<from-root>",
     "typescript": "<from-root>",
     "yaml": "<from-root>",

dev-infra/ts-circular-dependencies/BUILD.bazel

@@ -6,7 +6,7 @@ ts_library(
     module_name = "@angular/dev-infra-private/ts-circular-dependencies",
     visibility = ["//dev-infra:__subpackages__"],
     deps = [
-        "//dev-infra/utils:config",
+        "//dev-infra/utils",
         "@npm//@types/glob",
         "@npm//@types/node",
         "@npm//@types/yargs",