build(packaging): increase node memory for tests (#18731)

PR Close #18731

.circleci/config.yml

@@ -41,7 +41,7 @@ jobs:
       - restore_cache:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}
 
-      - run: bazel run @build_bazel_rules_typescript_node//:bin/npm install
+      - run: bazel run @io_bazel_rules_typescript_node//:bin/npm install
       - run: bazel build ...
       - save_cache:
           key: angular-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}

.pullapprove.yml

@@ -256,8 +256,6 @@ groups:
       files:
         include:
           - "aio/*"
-        exclude:
-          - "aio/content/*"
     users:
       - petebacondarwin #primary
       - IgorMinar
@@ -278,8 +276,6 @@ groups:
       - Foxandxss
       - stephenfluin
       - wardbell
-      - petebacondarwin
-      - gkalpak
       - IgorMinar #fallback
       - mhevery #fallback
 
@@ -293,7 +289,5 @@ groups:
     users:
       - juleskremer #primary
       - stephenfluin
-      - petebacondarwin
-      - gkalpak
       - IgorMinar #fallback
       - mhevery #fallback

.travis.yml

@@ -1,12 +1,9 @@
 language: node_js
 sudo: false
-# force trusty as Google Chrome addon is not supported on Precise
-dist: trusty
 node_js:
   - '6.9.5'
 
 addons:
-  chrome: stable
 #  firefox: "38.0"
   apt:
     sources:
@@ -56,7 +53,6 @@ env:
     - CI_MODE=docs_test
     - CI_MODE=aio
     - CI_MODE=aio_e2e
-    - CI_MODE=bazel
 
 matrix:
   fast_finish: true

BUILD

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

WORKSPACE

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

aio/content/guide/architecture.md

@@ -124,7 +124,7 @@ For example, import Angular's `Component` decorator from the `@angular/core` lib
 
 <code-example path="architecture/src/app/app.component.ts" region="import" linenums="false"></code-example>
 
-You also import NgModules from Angular _libraries_ using JavaScript import statements:
+You also import NgModules_ from Angular _libraries_ using JavaScript import statements:
 
 <code-example path="architecture/src/app/mini-app.ts" region="import-browser-module" linenums="false"></code-example>
 

aio/content/guide/bootstrapping.md

@@ -1,8 +1,8 @@
 # Bootstrapping
 
 An NgModule class describes how the application parts fit together.
-Every application has at least one NgModule, the _root_ module
-that you [bootstrap](#main) to launch the application.
+Every application has at least one NgModule, the _root_ module 
+that you [bootstrap](guide/appmodule#main) to launch the application.
 You can call it anything you want. The conventional name is `AppModule`.
 
 The [setup](guide/setup) instructions produce a new project with the following minimal `AppModule`.
@@ -25,7 +25,7 @@ The `@NgModule` decorator identifies `AppModule` as an `NgModule` class.
 * **_bootstrap_** — the _root_ component that Angular creates and inserts into the `index.html` host web page.
 
 The [NgModules](guide/ngmodule) guide dives deeply into the details of NgModules.
-All you need to know at the moment is a few basics about these three properties.
+All you need to know at the moment is a few basics about these three properties.  
 
 
 {@a imports}
@@ -34,7 +34,7 @@ All you need to know at the moment is a few basics about these three properties.
 ### The _imports_ array
 
 NgModules are a way to consolidate features that belong together into discrete units.
-Many features of Angular itself are organized as NgModules.
+Many features of Angular itself are organized as NgModules. 
 HTTP services are in the `HttpModule`. The router is in the `RouterModule`.
 Eventually you may create a feature module.
 
@@ -70,7 +70,7 @@ You add `import` statements to almost every application file.
 They have nothing to do with Angular and Angular knows nothing about them.
 
 The _module's_ `imports` array appears _exclusively_ in the `@NgModule` metadata object.
-It tells Angular about specific _other_ NgModules—all of them classes decorated
+It tells Angular about specific _other_ NgModules—all of them classes decorated 
 with `@NgModule`—that the application needs to function properly.
 
 </div>
@@ -110,7 +110,7 @@ Do not put any other kind of class in `declarations`; _not_ `NgModule` classes,
 
 ### The _bootstrap_ array
 
-You launch the application by [_bootstrapping_](#main) the root `AppModule`.
+You launch the application by [_bootstrapping_](guide/bootstrapping#main) the root `AppModule`.
 Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
 and inserts each one into the browser DOM.
 
@@ -127,6 +127,13 @@ Which brings us to the _bootstrapping_ process itself.
 
 {@a main}
 
+
+<l-main-section>
+
+</l-main-section>
+
+
+
 ## Bootstrap in _main.ts_
 
 There are many ways to bootstrap an application.

aio/content/guide/browser-support.md

@@ -193,8 +193,8 @@ Angular supports most recent browsers. This includes the following specific vers
 
 
 
-Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request,
-using <a href="https://saucelabs.com/">SauceLabs</a> and
+Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request, 
+using <a href="https://saucelabs.com/">SauceLabs</a> and 
 <a href="https://www.browserstack.com">Browserstack</a>.
 
 
@@ -215,7 +215,7 @@ that implement missing features in JavaScript.
 
 
 
-A particular browser may require at least one polyfill to run _any_ Angular application.
+A particular browser may require at least one polyfill to run _any_ Angular application. 
 You may need additional polyfills for specific features.
 
 The tables below can help you determine which polyfills to load, depending on the browsers you target and the features you use.
@@ -241,7 +241,7 @@ These are the polyfills required to run an Angular application on each supported
 <table>
 
   <tr style="vertical-align: top">
-
+ 
     <th>
       Browsers (Desktop & Mobile)
     </th>
@@ -253,7 +253,7 @@ These are the polyfills required to run an Angular application on each supported
   </tr>
 
   <tr style="vertical-align: top">
-
+ 
     <td>
       Chrome, Firefox, Edge, Safari 9+
     </td>
@@ -265,7 +265,7 @@ These are the polyfills required to run an Angular application on each supported
   </tr>
 
   <tr style="vertical-align: top">
-
+ 
     <td>
       Safari 7 & 8, IE10 & 11, Android 4.1+
     </td>
@@ -279,7 +279,7 @@ These are the polyfills required to run an Angular application on each supported
   </tr>
 
   <tr style="vertical-align: top">
-
+ 
     <td>
       IE9
     </td>
@@ -309,7 +309,7 @@ Here are the features which may require additional polyfills:
 <table>
 
   <tr style="vertical-align: top">
-
+ 
     <th>
       Feature
     </th>
@@ -325,7 +325,7 @@ Here are the features which may require additional polyfills:
   </tr>
 
   <tr style="vertical-align: top">
-
+ 
     <td>
 
       [Animations](guide/animations)
@@ -363,14 +363,14 @@ Here are the features which may require additional polyfills:
   </tr>
 
   <tr style="vertical-align: top">
-
+ 
     <td>
 
        [NgClass](api/common/NgClass) on SVG elements
     </td>
 
     <td>
-
+ 
 
       [classList](guide/browser-support#classlist)
     </td>
@@ -382,17 +382,16 @@ Here are the features which may require additional polyfills:
   </tr>
 
   <tr style="vertical-align: top">
-
+ 
     <td>
-
+    
       [Http](guide/http) when sending and receiving binary data
     </td>
 
     <td>
+ 
 
-      [Typed&nbsp;Array](guide/browser-support#typedarray)<br>
-      [Blob](guide/browser-support#blob)<br>
-      [FormData](guide/browser-support#formdata)
+      [Typed&nbsp;Array](guide/browser-support#typedarray) <br>[Blob](guide/browser-support#blob)<br>[FormData](guide/browser-support#formdata)
     </td>
 
     <td>
@@ -406,7 +405,7 @@ Here are the features which may require additional polyfills:
 
 
 ### Suggested polyfills ##
-Below are the polyfills which are used to test the framework itself. They are a good starting point for an application.
+Below are the polyfills which are used to test the framework itself. They are a good starting point for an application. 
 
 
 <table>
@@ -543,5 +542,5 @@ Below are the polyfills which are used to test the framework itself. They are a
 
 
 
-\* Figures are for minified and gzipped code,
+\* Figures are for minified and gzipped code, 
 computed with the <a href="http://closure-compiler.appspot.com/home">closure compiler</a>.

aio/content/guide/change-log.md

@@ -27,12 +27,12 @@ Revised samples are more clear and cover all topics discussed.
 ## NEW: Samples re-structured with `src/` folder (2017-02-02)
 All documentation samples have been realigned with the default folder structure of the Angular CLI.
 That's a step along the road to basing the sample in the Angular CLI.
-But it's also good in its own right.
+But it's also good in its own right. 
 It helps clearly separate app code from setup and configuration files.
 
 All samples now have a `src/` folder at the project root.
-The former `app/` folder moves under `src/`.
-Read about moving your existing project to this structure in
+The former `app/` folder moves under `src/`. 
+Read about moving your existing project to this structure in 
 <a href="https://github.com/angular/quickstart#updating-to-a-newer-version-of-the-quickstart-repo" target="Migrating samples/quickstart app to the src folder">
 the QuickStart repo update instructions</a>.
 
@@ -48,8 +48,8 @@ Notably:
 The new [**Reactive Forms**](guide/reactive-forms) guide explains how and why to build a "reactive form".
 "Reactive Forms" are the code-based counterpart to the declarative "Template Driven" forms approach
 introduced in the [Forms](guide/forms) guide.
-Check it out before you decide how to add forms to your app.
-Remember also that you can use both techniques in the same app,
+Check it out before you decide how to add forms to your app. 
+Remember also that you can use both techniques in the same app, 
 choosing the approach that best fits each scenario.
 
 ## NEW: Deployment guide (2017-01-30)
@@ -65,25 +65,25 @@ Revised samples are clearer and cover all topics discussed.
 
 ## Miscellaneous (2017-01-05)
 
-* [Setup](guide/setup) guide:
-added (optional) instructions on how to remove _non-essential_ files.
+* [Setup](guide/setup) guide: 
+added (optional) instructions on how to remove _non-essential_ files. 
 * No longer consolidate RxJS operator imports in `rxjs-extensions` file; each file should import what it needs.
 * All samples prepend template/style URLs with `./` as a best practice.
 * [Style Guide](guide/styleguide): copy edits and revised rules.
 
 ## Router: more detail (2016-12-21)
 
-Added more information to the [Router](guide/router) guide
+Added more information to the [Router](guide/router) guide 
 including sections named outlets, wildcard routes, and preload strategies.
 
 ## HTTP: how to set default request headers (and other request options) (2016-12-14)
 
-Added section on how to set default request headers (and other request options) to
-HTTP guide.
+Added section on how to set default request headers (and other request options) to 
+[HTTP](guide/http#override-default-request-options) guide.
 
 ## Testing: added component test plunkers (2016-12-02)
 
-Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own: <live-example name="setup" plnkr="quickstart-specs">one</live-example> for the QuickStart seed's `AppComponent` and <live-example name="testing" plnkr="banner-specs">another</live-example> for the Testing guide's `BannerComponent`.
+Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own: <live-example name="setup" plnkr="quickstart-specs">one</live-example> for the QuickStart seed's `AppComponent` and <live-example name="testing" plnkr="banner-specs">another</live-example> for the Testing guide's `BannerComponent`. 
 Linked to these plunkers in [Testing](guide/testing#live-examples) and [Setup anatomy](guide/setup-systemjs-anatomy) guides.
 
 ## Internationalization: pluralization and _select_ (2016-11-30)
@@ -112,15 +112,15 @@ Docs and code samples updated and tested with Angular v.2.2.0.
 
 ## UPDATE: NgUpgrade Guide for the AOT friendly _upgrade/static_ module (2016-11-14)
 
-The updated [NgUpgrade Guide](guide/upgrade) guide covers the
-new AOT friendly `upgrade/static` module
+The updated [NgUpgrade Guide](guide/upgrade) guide covers the 
+new AOT friendly `upgrade/static` module 
 released in v.2.2.0, which is the recommended
 facility for migrating from AngularJS to Angular.
 The documentation for the version prior to v.2.2.0 has been removed.
 
 ## ES6  described in "TypeScript to JavaScript" (2016-11-14)
 
-The updated [TypeScript to JavaScript](guide/ts-to-js) guide
+The updated [TypeScript to JavaScript](guide/ts-to-js) guide 
 now explains how to write apps in ES6/7
 by translating the common idioms in the TypeScript documentation examples
 (and elsewhere on the web) to ES6/7 and ES5.
@@ -156,7 +156,7 @@ in the `in-memory-web-api` repo.
 The router can lazily _preload_ modules _after_ the app starts and
 _before_ the user navigates to them for improved perceived performance.
 
-New `:enter` and `:leave` aliases make animation more natural.
+New `:enter` and `:leave` aliases make animation more natural. 
 
 ## Sync with Angular v.2.1.0 (2016-10-12)
 
@@ -176,11 +176,11 @@ Docs and code samples updated and tested with Angular v.2.0.2.
 ## "Routing and Navigation" guide with the _Router Module_ (2016-10-5)
 
 The [Routing and Navigation](guide/router) guide now locates route configuration
-in a _Routing Module_.
+in a _Routing Module_. 
 The _Routing Module_ replaces the previous _routing object_ involving the `ModuleWithProviders`.
 
 All guided samples with routing use the _Routing Module_ and prose content has been updated,
-most conspicuously in the
+most conspicuously in the 
 [NgModule](guide/ngmodule) guide and [NgModule FAQ](guide/ngmodule-faq) guide.
 
 ## New "Internationalization" guide (2016-09-30)
@@ -194,7 +194,7 @@ Many samples use the `angular-in-memory-web-api` to simulate a remote server.
 This library is also useful to you during early development before you have a server to talk to.
 
 The package name was changed from "angular2-in-memory-web-api" which is still frozen-in-time on npm.
-The new "angular-in-memory-web-api" has new features.
+The new "angular-in-memory-web-api" has new features. 
 <a href="https://github.com/angular/in-memory-web-api/blob/master/README.md">Read about them on github</a>.
 
 ## "Style Guide" with _NgModules_ (2016-09-27)
@@ -215,5 +215,5 @@ modules with SystemJS as the samples currently do.
 
 ## "Lifecycle Hooks" guide simplified (2016-09-24)
 
-The [Lifecycle Hooks](guide/lifecycle-hooks) guide is shorter, simpler, and
+The [Lifecycle Hooks](guide/lifecycle-hooks) guide is shorter, simpler, and 
 draws more attention to the order in which Angular calls the hooks.

aio/content/guide/cheatsheet.md

@@ -1,4 +1,4 @@
-<h1 class="no-toc">Cheat Sheet</h1>
+# Cheat Sheet
 
 <div id="cheatsheet">
 <table class="is-full-width is-fixed-layout">
@@ -23,28 +23,28 @@
 </th>
 </tr>
 <tr>
-<td><code>@<b>NgModule</b>({ declarations: ..., imports: ...,<br>     exports: ..., providers: ..., bootstrap: ...})<br>class MyModule {}</code></td>
+<td><code>@<b>NgModule</b>({&nbsp;declarations:&nbsp;...,&nbsp;imports:&nbsp;...,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exports:&nbsp;...,&nbsp;providers:&nbsp;...,&nbsp;bootstrap:&nbsp;...})<br>class&nbsp;MyModule&nbsp;{}</code></td>
 <td><p>Defines a module that contains components, directives, pipes, and providers.</p>
 </td>
 </tr><tr>
-<td><code><b>declarations:</b> [MyRedComponent, MyBlueComponent, MyDatePipe]</code></td>
+<td><code><b>declarations:</b>&nbsp;[MyRedComponent,&nbsp;MyBlueComponent,&nbsp;MyDatePipe]</code></td>
 <td><p>List of components, directives, and pipes that belong to this module.</p>
 </td>
 </tr><tr>
-<td><code><b>imports:</b> [BrowserModule, SomeOtherModule]</code></td>
+<td><code><b>imports:</b>&nbsp;[BrowserModule,&nbsp;SomeOtherModule]</code></td>
 <td><p>List of modules to import into this module. Everything from the imported modules
 is available to <code>declarations</code> of this module.</p>
 </td>
 </tr><tr>
-<td><code><b>exports:</b> [MyRedComponent, MyDatePipe]</code></td>
+<td><code><b>exports:</b>&nbsp;[MyRedComponent,&nbsp;MyDatePipe]</code></td>
 <td><p>List of components, directives, and pipes visible to modules that import this module.</p>
 </td>
 </tr><tr>
-<td><code><b>providers:</b> [MyService, { provide: ... }]</code></td>
+<td><code><b>providers:</b>&nbsp;[MyService,&nbsp;{&nbsp;provide:&nbsp;...&nbsp;}]</code></td>
 <td><p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>
 </td>
 </tr><tr>
-<td><code><b>bootstrap:</b> [MyAppComponent]</code></td>
+<td><code><b>bootstrap:</b>&nbsp;[MyAppComponent]</code></td>
 <td><p>List of components to bootstrap when this module is bootstrapped.</p>
 </td>
 </tr>
@@ -56,61 +56,61 @@ is available to <code>declarations</code> of this module.</p>
 <th></th>
 </tr>
 <tr>
-<td><code>&lt;input <b>[value]</b>="firstName"&gt;</code></td>
+<td><code>&lt;input&nbsp;<b>[value]</b>="firstName"&gt;</code></td>
 <td><p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div <b>[attr.role]</b>="myAriaRole"&gt;</code></td>
+<td><code>&lt;div&nbsp;<b>[attr.role]</b>="myAriaRole"&gt;</code></td>
 <td><p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div <b>[class.extra-sparkle]</b>="isDelightful"&gt;</code></td>
+<td><code>&lt;div&nbsp;<b>[class.extra-sparkle]</b>="isDelightful"&gt;</code></td>
 <td><p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div <b>[style.width.px]</b>="mySize"&gt;</code></td>
+<td><code>&lt;div&nbsp;<b>[style.width.px]</b>="mySize"&gt;</code></td>
 <td><p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>
 </td>
 </tr><tr>
-<td><code>&lt;button <b>(click)</b>="readRainbow($event)"&gt;</code></td>
+<td><code>&lt;button&nbsp;<b>(click)</b>="readRainbow($event)"&gt;</code></td>
 <td><p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div title="Hello <b>{{ponyName}}</b>"&gt;</code></td>
+<td><code>&lt;div&nbsp;title="Hello&nbsp;<b>{{ponyName}}</b>"&gt;</code></td>
 <td><p>Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:
 <code>&lt;div [title]="'Hello ' + ponyName"&gt;</code></p>
 </td>
 </tr><tr>
-<td><code>&lt;p&gt;Hello <b>{{ponyName}}</b>&lt;/p&gt;</code></td>
+<td><code>&lt;p&gt;Hello&nbsp;<b>{{ponyName}}</b>&lt;/p&gt;</code></td>
 <td><p>Binds text content to an interpolated string, for example, "Hello Seabiscuit".</p>
 </td>
 </tr><tr>
-<td><code>&lt;my-cmp <b>[(title)]</b>="name"&gt;</code></td>
+<td><code>&lt;my-cmp&nbsp;<b>[(title)]</b>="name"&gt;</code></td>
 <td><p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]="name" (titleChange)="name=$event"&gt;</code></p>
 </td>
 </tr><tr>
-<td><code>&lt;video <b>#movieplayer</b> ...&gt;<br>  &lt;button <b>(click)</b>="movieplayer.play()"&gt;<br>&lt;/video&gt;</code></td>
+<td><code>&lt;video&nbsp;<b>#movieplayer</b>&nbsp;...&gt;<br>&nbsp;&nbsp;&lt;button&nbsp;<b>(click)</b>="movieplayer.play()"&gt;<br>&lt;/video&gt;</code></td>
 <td><p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>
 </td>
 </tr><tr>
-<td><code>&lt;p <b>*myUnless</b>="myExpression"&gt;...&lt;/p&gt;</code></td>
+<td><code>&lt;p&nbsp;<b>*myUnless</b>="myExpression"&gt;...&lt;/p&gt;</code></td>
 <td><p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:
 <code>&lt;ng-template [myUnless]="myExpression"&gt;&lt;p&gt;...&lt;/p&gt;&lt;/ng-template&gt;</code></p>
 </td>
 </tr><tr>
-<td><code>&lt;p&gt;Card No.: <b>{{cardNumber | myCardNumberFormatter}}</b>&lt;/p&gt;</code></td>
+<td><code>&lt;p&gt;Card&nbsp;No.:&nbsp;<b>{{cardNumber&nbsp;|&nbsp;myCardNumberFormatter}}</b>&lt;/p&gt;</code></td>
 <td><p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>
 </td>
 </tr><tr>
-<td><code>&lt;p&gt;Employer: <b>{{employer?.companyName}}</b>&lt;/p&gt;</code></td>
+<td><code>&lt;p&gt;Employer:&nbsp;<b>{{employer?.companyName}}</b>&lt;/p&gt;</code></td>
 <td><p>The safe navigation operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>
 </td>
 </tr><tr>
-<td><code>&lt;<b>svg:</b>rect x="0" y="0" width="100" height="100"/&gt;</code></td>
+<td><code>&lt;<b>svg:</b>rect&nbsp;x="0"&nbsp;y="0"&nbsp;width="100"&nbsp;height="100"/&gt;</code></td>
 <td><p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p>
 </td>
 </tr><tr>
-<td><code>&lt;<b>svg</b>&gt;<br>  &lt;rect x="0" y="0" width="100" height="100"/&gt;<br>&lt;/<b>svg</b>&gt;</code></td>
+<td><code>&lt;<b>svg</b>&gt;<br>&nbsp;&nbsp;&lt;rect&nbsp;x="0"&nbsp;y="0"&nbsp;width="100"&nbsp;height="100"/&gt;<br>&lt;/<b>svg</b>&gt;</code></td>
 <td><p>An <code>&lt;svg&gt;</code> root element is detected as an SVG element automatically, without the prefix.</p>
 </td>
 </tr>
@@ -124,19 +124,19 @@ is available to <code>declarations</code> of this module.</p>
 </th>
 </tr>
 <tr>
-<td><code>&lt;section <b>*ngIf</b>="showSection"&gt;</code></td>
+<td><code>&lt;section&nbsp;<b>*ngIf</b>="showSection"&gt;</code></td>
 <td><p>Removes or recreates a portion of the DOM tree based on the <code>showSection</code> expression.</p>
 </td>
 </tr><tr>
-<td><code>&lt;li <b>*ngFor</b>="let item of list"&gt;</code></td>
+<td><code>&lt;li&nbsp;<b>*ngFor</b>="let&nbsp;item&nbsp;of&nbsp;list"&gt;</code></td>
 <td><p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div <b>[ngSwitch]</b>="conditionExpression"&gt;<br>  &lt;ng-template <b>[<b>ngSwitchCase</b>]</b>="case1Exp"&gt;...&lt;/ng-template&gt;<br>  &lt;ng-template <b>ngSwitchCase</b>="case2LiteralString"&gt;...&lt;/ng-template&gt;<br>  &lt;ng-template <b>ngSwitchDefault</b>&gt;...&lt;/ng-template&gt;<br>&lt;/div&gt;</code></td>
+<td><code>&lt;div&nbsp;<b>[ngSwitch]</b>="conditionExpression"&gt;<br>&nbsp;&nbsp;&lt;ng-template&nbsp;<b>[<b>ngSwitchCase</b>]</b>="case1Exp"&gt;...&lt;/ng-template&gt;<br>&nbsp;&nbsp;&lt;ng-template&nbsp;<b>ngSwitchCase</b>="case2LiteralString"&gt;...&lt;/ng-template&gt;<br>&nbsp;&nbsp;&lt;ng-template&nbsp;<b>ngSwitchDefault</b>&gt;...&lt;/ng-template&gt;<br>&lt;/div&gt;</code></td>
 <td><p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p>
 </td>
 </tr><tr>
-<td><code>&lt;div <b>[ngClass]</b>="{'active': isActive, 'disabled': isDisabled}"&gt;</code></td>
+<td><code>&lt;div&nbsp;<b>[ngClass]</b>="{'active':&nbsp;isActive,&nbsp;'disabled':&nbsp;isDisabled}"&gt;</code></td>
 <td><p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.</p>
 </td>
 </tr>
@@ -150,7 +150,7 @@ is available to <code>declarations</code> of this module.</p>
 </th>
 </tr>
 <tr>
-<td><code>&lt;input <b>[(ngModel)]</b>="userName"&gt;</code></td>
+<td><code>&lt;input&nbsp;<b>[(ngModel)]</b>="userName"&gt;</code></td>
 <td><p>Provides two-way data-binding, parsing, and validation for form controls.</p>
 </td>
 </tr>
@@ -164,19 +164,19 @@ is available to <code>declarations</code> of this module.</p>
 </th>
 </tr>
 <tr>
-<td><code><b>@Component({...})</b><br>class MyComponent() {}</code></td>
+<td><code><b>@Component({...})</b><br>class&nbsp;MyComponent()&nbsp;{}</code></td>
 <td><p>Declares that a class is a component and provides metadata about the component.</p>
 </td>
 </tr><tr>
-<td><code><b>@Directive({...})</b><br>class MyDirective() {}</code></td>
+<td><code><b>@Directive({...})</b><br>class&nbsp;MyDirective()&nbsp;{}</code></td>
 <td><p>Declares that a class is a directive and provides metadata about the directive.</p>
 </td>
 </tr><tr>
-<td><code><b>@Pipe({...})</b><br>class MyPipe() {}</code></td>
+<td><code><b>@Pipe({...})</b><br>class&nbsp;MyPipe()&nbsp;{}</code></td>
 <td><p>Declares that a class is a pipe and provides metadata about the pipe.</p>
 </td>
 </tr><tr>
-<td><code><b>@Injectable()</b><br>class MyService() {}</code></td>
+<td><code><b>@Injectable()</b><br>class&nbsp;MyService()&nbsp;{}</code></td>
 <td><p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
 </p>
 </td>
@@ -191,13 +191,13 @@ is available to <code>declarations</code> of this module.</p>
 </th>
 </tr>
 <tr>
-<td><code><b>selector:</b> '.cool-button:not(a)'</code></td>
+<td><code><b>selector:</b>&nbsp;'.cool-button:not(a)'</code></td>
 <td><p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,
 <code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>
 <p>Does not support parent-child relationship selectors.</p>
 </td>
 </tr><tr>
-<td><code><b>providers:</b> [MyService, { provide: ... }]</code></td>
+<td><code><b>providers:</b>&nbsp;[MyService,&nbsp;{&nbsp;provide:&nbsp;...&nbsp;}]</code></td>
 <td><p>List of dependency injection providers for this directive and its children.</p>
 </td>
 </tr>
@@ -212,19 +212,19 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </th>
 </tr>
 <tr>
-<td><code><b>moduleId:</b> module.id</code></td>
+<td><code><b>moduleId:</b>&nbsp;module.id</code></td>
 <td><p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>
 </td>
 </tr><tr>
-<td><code><b>viewProviders:</b> [MyService, { provide: ... }]</code></td>
+<td><code><b>viewProviders:</b>&nbsp;[MyService,&nbsp;{&nbsp;provide:&nbsp;...&nbsp;}]</code></td>
 <td><p>List of dependency injection providers scoped to this component's view.</p>
 </td>
 </tr><tr>
-<td><code><b>template:</b> 'Hello {{name}}'<br><b>templateUrl:</b> 'my-component.html'</code></td>
+<td><code><b>template:</b>&nbsp;'Hello&nbsp;{{name}}'<br><b>templateUrl:</b>&nbsp;'my-component.html'</code></td>
 <td><p>Inline template or external template URL of the component's view.</p>
 </td>
 </tr><tr>
-<td><code><b>styles:</b> ['.primary {color: red}']<br><b>styleUrls:</b> ['my-component.css']</code></td>
+<td><code><b>styles:</b>&nbsp;['.primary&nbsp;{color:&nbsp;red}']<br><b>styleUrls:</b>&nbsp;['my-component.css']</code></td>
 <td><p>List of inline CSS styles or external stylesheet URLs for styling the component’s view.</p>
 </td>
 </tr>
@@ -238,36 +238,36 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </th>
 </tr>
 <tr>
-<td><code><b>@Input()</b> myProperty;</code></td>
+<td><code><b>@Input()</b>&nbsp;myProperty;</code></td>
 <td><p>Declares an input property that you can update via property binding (example:
 <code>&lt;my-cmp [myProperty]="someExpression"&gt;</code>).</p>
 </td>
 </tr><tr>
-<td><code><b>@Output()</b> myEvent = new EventEmitter();</code></td>
+<td><code><b>@Output()</b>&nbsp;myEvent&nbsp;=&nbsp;new&nbsp;EventEmitter();</code></td>
 <td><p>Declares an output property that fires events that you can subscribe to with an event binding (example: <code>&lt;my-cmp (myEvent)="doSomething()"&gt;</code>).</p>
 </td>
 </tr><tr>
-<td><code><b>@HostBinding('class.valid')</b> isValid;</code></td>
+<td><code><b>@HostBinding('class.valid')</b>&nbsp;isValid;</code></td>
 <td><p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>
 </td>
 </tr><tr>
-<td><code><b>@HostListener('click', ['$event'])</b> onClick(e) {...}</code></td>
+<td><code><b>@HostListener('click',&nbsp;['$event'])</b>&nbsp;onClick(e)&nbsp;{...}</code></td>
 <td><p>Subscribes to a host element event (<code>click</code>) with a directive/component method (<code>onClick</code>), optionally passing an argument (<code>$event</code>).</p>
 </td>
 </tr><tr>
-<td><code><b>@ContentChild(myPredicate)</b> myChildComponent;</code></td>
+<td><code><b>@ContentChild(myPredicate)</b>&nbsp;myChildComponent;</code></td>
 <td><p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>
 </td>
 </tr><tr>
-<td><code><b>@ContentChildren(myPredicate)</b> myChildComponents;</code></td>
+<td><code><b>@ContentChildren(myPredicate)</b>&nbsp;myChildComponents;</code></td>
 <td><p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>
 </td>
 </tr><tr>
-<td><code><b>@ViewChild(myPredicate)</b> myChildComponent;</code></td>
+<td><code><b>@ViewChild(myPredicate)</b>&nbsp;myChildComponent;</code></td>
 <td><p>Binds the first result of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class. Not available for directives.</p>
 </td>
 </tr><tr>
-<td><code><b>@ViewChildren(myPredicate)</b> myChildComponents;</code></td>
+<td><code><b>@ViewChildren(myPredicate)</b>&nbsp;myChildComponents;</code></td>
 <td><p>Binds the results of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class. Not available for directives.</p>
 </td>
 </tr>
@@ -281,39 +281,39 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </th>
 </tr>
 <tr>
-<td><code><b>constructor(myService: MyService, ...)</b> { ... }</code></td>
+<td><code><b>constructor(myService:&nbsp;MyService,&nbsp;...)</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
 <td><p>Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>
 </td>
 </tr><tr>
-<td><code><b>ngOnChanges(changeRecord)</b> { ... }</code></td>
+<td><code><b>ngOnChanges(changeRecord)</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
 <td><p>Called after every change to input properties and before processing content or child views.</p>
 </td>
 </tr><tr>
-<td><code><b>ngOnInit()</b> { ... }</code></td>
+<td><code><b>ngOnInit()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
 <td><p>Called after the constructor, initializing input properties, and the first call to <code>ngOnChanges</code>.</p>
 </td>
 </tr><tr>
-<td><code><b>ngDoCheck()</b> { ... }</code></td>
+<td><code><b>ngDoCheck()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
 <td><p>Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.</p>
 </td>
 </tr><tr>
-<td><code><b>ngAfterContentInit()</b> { ... }</code></td>
+<td><code><b>ngAfterContentInit()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
 <td><p>Called after <code>ngOnInit</code> when the component's or directive's content has been initialized.</p>
 </td>
 </tr><tr>
-<td><code><b>ngAfterContentChecked()</b> { ... }</code></td>
+<td><code><b>ngAfterContentChecked()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
 <td><p>Called after every check of the component's or directive's content.</p>
 </td>
 </tr><tr>
-<td><code><b>ngAfterViewInit()</b> { ... }</code></td>
+<td><code><b>ngAfterViewInit()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
 <td><p>Called after <code>ngAfterContentInit</code> when the component's view has been initialized. Applies to components only.</p>
 </td>
 </tr><tr>
-<td><code><b>ngAfterViewChecked()</b> { ... }</code></td>
+<td><code><b>ngAfterViewChecked()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
 <td><p>Called after every check of the component's view. Applies to components only.</p>
 </td>
 </tr><tr>
-<td><code><b>ngOnDestroy()</b> { ... }</code></td>
+<td><code><b>ngOnDestroy()</b>&nbsp;{&nbsp;...&nbsp;}</code></td>
 <td><p>Called once, before the instance is destroyed.</p>
 </td>
 </tr>
@@ -325,15 +325,15 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 <th></th>
 </tr>
 <tr>
-<td><code>{ <b>provide</b>: MyService, <b>useClass</b>: MyMockService }</code></td>
+<td><code>{&nbsp;<b>provide</b>:&nbsp;MyService,&nbsp;<b>useClass</b>:&nbsp;MyMockService&nbsp;}</code></td>
 <td><p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p>
 </td>
 </tr><tr>
-<td><code>{ <b>provide</b>: MyService, <b>useFactory</b>: myFactory }</code></td>
+<td><code>{&nbsp;<b>provide</b>:&nbsp;MyService,&nbsp;<b>useFactory</b>:&nbsp;myFactory&nbsp;}</code></td>
 <td><p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p>
 </td>
 </tr><tr>
-<td><code>{ <b>provide</b>: MyValue, <b>useValue</b>: 41 }</code></td>
+<td><code>{&nbsp;<b>provide</b>:&nbsp;MyValue,&nbsp;<b>useValue</b>:&nbsp;41&nbsp;}</code></td>
 <td><p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p>
 </td>
 </tr>
@@ -347,39 +347,39 @@ so the <code>@Directive</code> configuration applies to components as well</p>
 </th>
 </tr>
 <tr>
-<td><code>const routes: <b>Routes</b> = [<br>  { path: '', component: HomeComponent },<br>  { path: 'path/:routeParam', component: MyComponent },<br>  { path: 'staticPath', component: ... },<br>  { path: '**', component: ... },<br>  { path: 'oldPath', redirectTo: '/staticPath' },<br>  { path: ..., component: ..., data: { message: 'Custom' } }<br>]);<br><br>const routing = RouterModule.forRoot(routes);</code></td>
+<td><code>const&nbsp;routes:&nbsp;<b>Routes</b>&nbsp;=&nbsp;[<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;'',&nbsp;component:&nbsp;HomeComponent&nbsp;},<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;'path/:routeParam',&nbsp;component:&nbsp;MyComponent&nbsp;},<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;'staticPath',&nbsp;component:&nbsp;...&nbsp;},<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;'**',&nbsp;component:&nbsp;...&nbsp;},<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;'oldPath',&nbsp;redirectTo:&nbsp;'/staticPath'&nbsp;},<br>&nbsp;&nbsp;{&nbsp;path:&nbsp;...,&nbsp;component:&nbsp;...,&nbsp;data:&nbsp;{&nbsp;message:&nbsp;'Custom'&nbsp;}&nbsp;}<br>]);<br><br>const&nbsp;routing&nbsp;=&nbsp;RouterModule.forRoot(routes);</code></td>
 <td><p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>
 </td>
 </tr><tr>
-<td><code><br>&lt;<b>router-outlet</b>&gt;&lt;/<b>router-outlet</b>&gt;<br>&lt;<b>router-outlet</b> name="aux"&gt;&lt;/<b>router-outlet</b>&gt;<br></code></td>
+<td><code><br>&lt;<b>router-outlet</b>&gt;&lt;/<b>router-outlet</b>&gt;<br>&lt;<b>router-outlet</b>&nbsp;name="aux"&gt;&lt;/<b>router-outlet</b>&gt;<br></code></td>
 <td><p>Marks the location to load the component of the active route.</p>
 </td>
 </tr><tr>
-<td><code><br>&lt;a routerLink="/path"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path', routeParam ]"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path', { matrixParam: 'value' } ]"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path' ]" [queryParams]="{ page: 1 }"&gt;<br>&lt;a <b>[routerLink]</b>="[ '/path' ]" fragment="anchor"&gt;<br></code></td>
+<td><code><br>&lt;a&nbsp;routerLink="/path"&gt;<br>&lt;a&nbsp;<b>[routerLink]</b>="[&nbsp;'/path',&nbsp;routeParam&nbsp;]"&gt;<br>&lt;a&nbsp;<b>[routerLink]</b>="[&nbsp;'/path',&nbsp;{&nbsp;matrixParam:&nbsp;'value'&nbsp;}&nbsp;]"&gt;<br>&lt;a&nbsp;<b>[routerLink]</b>="[&nbsp;'/path'&nbsp;]"&nbsp;[queryParams]="{&nbsp;page:&nbsp;1&nbsp;}"&gt;<br>&lt;a&nbsp;<b>[routerLink]</b>="[&nbsp;'/path'&nbsp;]"&nbsp;fragment="anchor"&gt;<br></code></td>
 <td><p>Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p>
 </td>
 </tr><tr>
-<td><code>&lt;a [routerLink]="[ '/path' ]" routerLinkActive="active"&gt;</code></td>
+<td><code>&lt;a&nbsp;[routerLink]="[&nbsp;'/path'&nbsp;]"&nbsp;routerLinkActive="active"&gt;</code></td>
 <td><p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p>
 </td>
 </tr><tr>
-<td><code>class <b>CanActivate</b>Guard implements <b>CanActivate</b> {<br>    canActivate(<br>      route: ActivatedRouteSnapshot,<br>      state: RouterStateSnapshot<br>    ): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean { ... }<br>}<br><br>{ path: ..., canActivate: [<b>CanActivate</b>Guard] }</code></td>
+<td><code>class&nbsp;<b>CanActivate</b>Guard&nbsp;implements&nbsp;<b>CanActivate</b>&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;canActivate(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;route:&nbsp;ActivatedRouteSnapshot,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state:&nbsp;RouterStateSnapshot<br>&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean&nbsp;{&nbsp;...&nbsp;}<br>}<br><br>{&nbsp;path:&nbsp;...,&nbsp;canActivate:&nbsp;[<b>CanActivate</b>Guard]&nbsp;}</code></td>
 <td><p>An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
 </td>
 </tr><tr>
-<td><code>class <b>CanDeactivate</b>Guard implements <b>CanDeactivate</b>&lt;T&gt; {<br>    canDeactivate(<br>      component: T,<br>      route: ActivatedRouteSnapshot,<br>      state: RouterStateSnapshot<br>    ): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean { ... }<br>}<br><br>{ path: ..., canDeactivate: [<b>CanDeactivate</b>Guard] }</code></td>
+<td><code>class&nbsp;<b>CanDeactivate</b>Guard&nbsp;implements&nbsp;<b>CanDeactivate</b>&lt;T&gt;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;canDeactivate(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;component:&nbsp;T,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;route:&nbsp;ActivatedRouteSnapshot,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state:&nbsp;RouterStateSnapshot<br>&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean&nbsp;{&nbsp;...&nbsp;}<br>}<br><br>{&nbsp;path:&nbsp;...,&nbsp;canDeactivate:&nbsp;[<b>CanDeactivate</b>Guard]&nbsp;}</code></td>
 <td><p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
 </td>
 </tr><tr>
-<td><code>class <b>CanActivateChild</b>Guard implements <b>CanActivateChild</b> {<br>    canActivateChild(<br>      route: ActivatedRouteSnapshot,<br>      state: RouterStateSnapshot<br>    ): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean { ... }<br>}<br><br>{ path: ..., canActivateChild: [CanActivateGuard],<br>    children: ... }</code></td>
+<td><code>class&nbsp;<b>CanActivateChild</b>Guard&nbsp;implements&nbsp;<b>CanActivateChild</b>&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;canActivateChild(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;route:&nbsp;ActivatedRouteSnapshot,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state:&nbsp;RouterStateSnapshot<br>&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean&nbsp;{&nbsp;...&nbsp;}<br>}<br><br>{&nbsp;path:&nbsp;...,&nbsp;canActivateChild:&nbsp;[CanActivateGuard],<br>&nbsp;&nbsp;&nbsp;&nbsp;children:&nbsp;...&nbsp;}</code></td>
 <td><p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
 </td>
 </tr><tr>
-<td><code>class <b>Resolve</b>Guard implements <b>Resolve</b>&lt;T&gt; {<br>    resolve(<br>      route: ActivatedRouteSnapshot,<br>      state: RouterStateSnapshot<br>    ): Observable&lt;any&gt;|Promise&lt;any&gt;|any { ... }<br>}<br><br>{ path: ..., resolve: [<b>Resolve</b>Guard] }</code></td>
+<td><code>class&nbsp;<b>Resolve</b>Guard&nbsp;implements&nbsp;<b>Resolve</b>&lt;T&gt;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;resolve(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;route:&nbsp;ActivatedRouteSnapshot,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state:&nbsp;RouterStateSnapshot<br>&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;Observable&lt;any&gt;|Promise&lt;any&gt;|any&nbsp;{&nbsp;...&nbsp;}<br>}<br><br>{&nbsp;path:&nbsp;...,&nbsp;resolve:&nbsp;[<b>Resolve</b>Guard]&nbsp;}</code></td>
 <td><p>An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.</p>
 </td>
 </tr><tr>
-<td><code>class <b>CanLoad</b>Guard implements <b>CanLoad</b> {<br>    canLoad(<br>      route: Route<br>    ): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean { ... }<br>}<br><br>{ path: ..., canLoad: [<b>CanLoad</b>Guard], loadChildren: ... }</code></td>
+<td><code>class&nbsp;<b>CanLoad</b>Guard&nbsp;implements&nbsp;<b>CanLoad</b>&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;canLoad(<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;route:&nbsp;Route<br>&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean&nbsp;{&nbsp;...&nbsp;}<br>}<br><br>{&nbsp;path:&nbsp;...,&nbsp;canLoad:&nbsp;[<b>CanLoad</b>Guard],&nbsp;loadChildren:&nbsp;...&nbsp;}</code></td>
 <td><p>An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
 </td>
 </tr>

aio/content/guide/component-styles.md

@@ -119,13 +119,12 @@ if some ancestor element has the CSS class `theme-light`.
 
 
 
-### (deprecated) `/deep/`, `>>>`, and `::ng-deep`
+### /deep/
 
 Component styles normally apply only to the HTML in the component's own template. 
 
-Use the `/deep/` shadow-piercing descendant combinator to force a style down through the child
-component tree into all the child component views.
-The `/deep/` combinator works to any depth of nested components, and it applies to both the view
+Use the `/deep/` selector to force a style down through the child component tree into all the child component views.
+The `/deep/` selector works to any depth of nested components, and it applies to both the view
 children and content children of the component. 
 
 The following example targets all `<h3>` elements, from the host element down 
@@ -135,24 +134,17 @@ through this component to all of its child elements in the DOM.
 
 </code-example>
 
-The `/deep/` combinator also has the aliases `>>>`, and `::ng-deep`.
+The `/deep/` selector also has the alias `>>>`. You can use either interchangeably.
+
 
 <div class="alert is-important">
 
-Use `/deep/`, `>>>` and `::ng-deep` only with *emulated* view encapsulation.
+Use the `/deep/` and `>>>` selectors only with *emulated* view encapsulation.
 Emulated is the default and most commonly used view encapsulation. For more information, see the
 [Controlling view encapsulation](guide/component-styles#view-encapsulation) section.
 
 </div>
 
-<div class="alert is-important">
-
-The shadow-piercing descendant combinator is deprecated and [support is being removed from major browsers](https://www.chromestatus.com/features/6750456638341120) and tools.
-As such we plan to drop support in Angular (for all 3 of `/deep/`, `>>>` and `::ng-deep`).
-Until then `::ng-deep` should be preferred for a broader compatibility with the tools.
-
-</div>
-
 {@a loading-styles}
 
 ## Loading component styles

aio/content/guide/lifecycle-hooks.md

@@ -397,7 +397,8 @@ created under test or before you decide to display it.
 Constructors should do no more than set the initial local variables to simple values.
 
 An `ngOnInit()` is a good place for a component to fetch its initial data. The
-[Tour of Heroes Tutorial](tutorial/toh-pt4#oninit) guide shows how.
+[Tour of Heroes Tutorial](tutorial/toh-pt4#oninit) and [HTTP Client](guide/http#oninit)
+guides show how.
 
 
 Remember also that a directive's data-bound input properties are not set until _after construction_.

aio/content/guide/ngmodule-faq.md

@@ -615,7 +615,7 @@ Once the application begins, the app root injector is closed to new providers.
 
 Time passes and application logic triggers lazy loading of a module.
 Angular must add the lazy-loaded module's providers to an injector somewhere.
-It can't add them to the app root injector because that injector is closed to new providers.
+It can't added them to the app root injector because that injector is closed to new providers.
 So Angular creates a new child injector for the lazy-loaded module context.
 
 

aio/content/guide/npm-packages.md

@@ -163,6 +163,7 @@ without waiting for Angular updates.
 ***angular-in-memory-web-api***: An Angular-supported library that simulates a remote server's web api
 without requiring an actual server or real HTTP calls.
 Good for demos, samples, and early stage development (before you even have a server).
+Read about it in the [HTTP Client](guide/http#in-mem-web-api) page.
 
 ***bootstrap***: [Bootstrap](http://getbootstrap.com/) is a popular HTML and CSS framework for designing responsive web apps.
 Some of the samples improve their appearance with *bootstrap*.

aio/content/guide/router.md

@@ -255,11 +255,11 @@ During each navigation, the `Router` emits navigation events through the `Router
 
   <tr>
     <td>
-      <code>RouteConfigLoadEnd</code>
+      <code>RouteConfigLoadStart</code>
     </td>
     <td>
 
-      An [event](api/router/RouteConfigLoadEnd) triggered after a route has been lazy loaded.
+      An [event](api/router/RouteConfigLoadStart) triggered after a route has been lazy loaded.
 
     </td>
   </tr>

aio/content/guide/security.md

@@ -282,7 +282,36 @@ This technique is effective because all browsers implement the _same origin poli
 on which cookies are set can read the cookies from that site and set custom headers on requests to that site.
 That means only your application can read this cookie token and set the custom header. The malicious code on `evil.com` can't.
 
-Angular's `HttpClient` has built-in support for the client-side half of this technique. Read about it more in the [HttpClient guide](/guide/http).
+Angular's `http` has built-in support for the client-side half of this technique in its `XSRFStrategy`.
+The default `CookieXSRFStrategy` is turned on automatically.
+Before sending an HTTP request, the `CookieXSRFStrategy` looks for a cookie called `XSRF-TOKEN` and
+sets a header named `X-XSRF-TOKEN` with the value of that cookie.
+
+The server must do its part by setting the
+initial `XSRF-TOKEN` cookie and confirming that each subsequent state-modifying request
+includes a matching `XSRF-TOKEN` cookie and `X-XSRF-TOKEN` header.
+
+XSRF/CSRF tokens should be unique per user and session, have a large random value generated by a
+cryptographically secure random number generator, and expire in a day or two.
+
+Your server may use a different cookie or header name for this purpose.
+An Angular application can customize cookie and header names by providing its own `CookieXSRFStrategy` values.
+
+<code-example language="typescript">
+  { provide: XSRFStrategy, useValue: new CookieXSRFStrategy('myCookieName', 'My-Header-Name') }
+</code-example>
+
+
+
+Or you can implement and provide an entirely custom `XSRFStrategy`:
+
+
+<code-example language="typescript">
+  { provide: XSRFStrategy, useClass: MyXSRFStrategy }
+
+</code-example>
+
+
 
 For information about CSRF at the Open Web Application Security Project (OWASP), see
 <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29">Cross-Site Request Forgery (CSRF)</a> and
@@ -308,7 +337,7 @@ This attack is only successful if the returned JSON is executable as JavaScript.
 prevent an attack by prefixing all JSON responses to make them non-executable, by convention, using the
 well-known string `")]}',\n"`.
 
-Angular's `HttpClient` library recognizes this convention and automatically strips the string
+Angular's `Http` library recognizes this convention and automatically strips the string
 `")]}',\n"` from all responses before further parsing.
 
 For more information, see the XSSI section of this [Google web security blog

aio/content/guide/testing.md

@@ -178,7 +178,7 @@ For a discussion of the unit testing setup files, [see below](guide/testing#setu
 {@a isolated-v-testing-utilities}
 
 
-### Isolated unit tests vs. the Angular testing utilities
+### Isolated unit tests vs. the Angular testing utilites
 
 [Isolated unit tests](guide/testing#isolated-unit-tests "Unit testing without the Angular testing utilities")
 examine an instance of a class all by itself without any dependence on Angular or any injected values.

aio/content/guide/ts-to-js.md

@@ -247,10 +247,12 @@ next to the original _ES5_ version for comparison:
   </code-pane>
 </code-tabs>
 
-{@a name-constructor}
-
 <div class="callout is-helpful">
 
+  {@a name-constructor}
+
+  ###  Name the constructor
+
   A **named** constructor displays clearly in the console log
   if the component throws a runtime error.
   An **unnamed** constructor displays as an anonymous function, for   example, `class0`,

aio/content/marketing/contributors.json

@@ -573,14 +573,5 @@
    "website": "http://www.methotic.com",
    "bio": "Thierry is a senior consultant and trainer, specialized on Angular, and a Google Developer Expert.",
    "group": "GDE"
- },
-
-"gerardsans": {
-   "name": "Gerard Sans",
-   "picture": "gerardsans.jpg",
-   "twitter": "gerardsans",
-   "website": "https://medium.com/@gerard.sans",
-   "bio": "Gerard is very excited about the future of the Web and JavaScript. Always happy Computer Science Engineer and humble Google Developer Expert. He loves to share his learnings by giving talks, trainings and writing about cool technologies. He loves running AngularZone and GraphQL London, mentoring students and giving back to the community.",
-   "group": "GDE"
  }
 }

aio/content/marketing/features.html

@@ -8,7 +8,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Cross Platform</div>
-          <img src="assets/images/icons/feature-icon.svg" height="70px">
+          <img src="../assets/images/icons/feature-icon.svg" height="70px">
         </div>
         <div class="feature-row">
 
@@ -34,7 +34,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Speed and Performance</div>
-          <img src="assets/images/icons/feature-icon.svg" height="70px">
+          <img src="../assets/images/icons/feature-icon.svg" height="70px">
         </div>
         <div class="feature-row">
 
@@ -59,7 +59,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Productivity</div>
-          <img src="assets/images/icons/feature-icon.svg" height="70px">
+          <img src="../assets/images/icons/feature-icon.svg" height="70px">
         </div>
         <div class="feature-row">
 
@@ -84,7 +84,7 @@
       <div class="feature-section">
         <div class="feature-header">
           <div class="text-headline">Full Development Story</div>
-          <img src="assets/images/icons/feature-icon.svg" height="70px">
+          <img src="../assets/images/icons/feature-icon.svg" height="70px">
         </div>
         <div class="feature-row">
 

aio/content/marketing/index.html

@@ -110,7 +110,7 @@
 
     <a href="guide/quickstart">
       <div class="card">
-          <img src="assets/images/icons/code-icon.svg" height="70px">
+          <img src="../assets/images/icons/code-icon.svg" height="70px">
           <div class="card-text-container">
             <div class="text-headline">Get Started</div>
             <p>Start building your Angular application.</p>

aio/content/marketing/news.html

@@ -0,0 +1,116 @@
+<header class="hero background-sky">
+  <h1 class="hero-title no-toc">News</h1>
+  <div class="clear"></div>
+</header>
+<artice>
+  <div class="grid-fluid l-space-bottom-2">
+    <div class="c12 text-center"><h3 class="text-headline text-uppercase"> Core Team</h3></div>
+    <div class="clear"></div>
+  </div>
+  <div class="grid-fluid">
+    <div class="c6">
+      <div class="article-card">
+        <div class="date">Oct 12, 2016</div>
+        <div class="title"><a target="_blank"
+                              href="http://angularjs.blogspot.com/2016/10/angular-210-now-available.html">Angular
+          2.1.0 Now Available</a></div>
+        <p>Angular version 2.1.0 - incremental-metamorphosis - is a minor release following our
+          announced adoption of Semantic Versioning...</p>
+        <div class="author"><img src="generated/images/bios/stephenfluin.jpg">
+          <div class="posted">Posted by <b>Stephen Fluin</b></div>
+        </div>
+      </div>
+    </div>
+    <div class="c6">
+      <div class="article-card">
+        <div class="date">Oct 7, 2016</div>
+        <div class="title"><a target="_blank"
+                              href="http://angularjs.blogspot.com/2016/10/versioning-and-releasing-angular.html">Versioning
+          and Releasing Angular</a></div>
+        <p>In order for the ecosystem around Angular to thrive, developers need stability from the
+          Angular framework so that reusable components and libraries, tools and learned practices
+          don’t go obsolete unexpectedly...</p>
+        <div class="author"><img src="generated/images/bios/igor-minar.jpg">
+          <div class="posted">Posted by <b>Igor Minar</b></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="grid-fluid l-space-bottom-2 l-space-top-4">
+    <div class="c12 text-center"><h3 class="text-headline text-uppercase"> Developer Community</h3>
+    </div>
+    <div class="clear"></div>
+  </div>
+  <div class="grid-fluid">
+    <div class="c6">
+      <div class="article-card">
+        <div class="date">Oct 30, 2016</div>
+        <div class="title"><a target="_blank"
+                              href="https://www.thepolyglotdeveloper.com/2016/10/use-pre-populated-sqlite-database-nativescript-angular-2/">Use
+          A Pre-Populated SQLite Database With NativeScript And Angular 2</a></div>
+        <p>I figured it would be a good idea to demonstrate how to ship a NativeScript Angular 2
+          application with a pre-filled SQLite database rather than populating it on-the-fly....</p>
+        <div class="author"><img src="generated/images/bios/shield-bio-placeholder.png">
+          <div class="posted">Posted by <b>Nic Raboy</b></div>
+        </div>
+      </div>
+    </div>
+    <div class="c6">
+      <div class="article-card">
+        <div class="date">Oct 13, 2016</div>
+        <div class="title"><a target="_blank"
+                              href="http://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html">Two-way
+          Data Binding in Angular 2</a></div>
+        <p>If there was one feature in Angular that made us go “Wow”, then it was probably its
+          two-way data binding system. Changes in the application state have been automagically
+          reflected into the view...</p>
+        <div class="author"><img src="generated/images/bios/angular-gde-bio-placeholder.png">
+          <div class="posted">Posted by <b>Pascal Precht</b></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="grid-fluid">
+    <div class="c6">
+      <div class="article-card">
+        <div class="date">Oct 10, 2016</div>
+        <div class="title"><a target="_blank"
+                              href="http://www.creativebloq.com/how-to/build-a-material-design-app-with-angular-2">Build
+          a Material Design app with Angular 2</a></div>
+        <p>This walkthrough reveals how to create a DialogComponent and to-do app with Angular
+          Material and the Angular CLI...</p>
+        <div class="author"><img src="generated/images/bios/shield-bio-placeholder.png">
+          <div class="posted">Posted by <b>Daniel Zen</b></div>
+        </div>
+      </div>
+    </div>
+    <div class="c6">
+      <div class="article-card">
+        <div class="date">Sept 30, 2016</div>
+        <div class="title"><a target="_blank"
+                              href="http://www.simb.co/angular-cli-using-docker/?platform=hootsuite">Using
+          Angular CLI to create Angular 2 applications in Docker</a></div>
+        <p>Angular CLI is a great tool for developing Angular 2 applications. I thought it would be
+          fun to do a quick demo...</p>
+        <div class="author"><img src="generated/images/bios/shield-bio-placeholder.png">
+          <div class="posted">Posted by <b>Simeon Bateman</b></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="grid-fluid l-space-bottom-2 l-space-top-4">
+    <div class="c12 text-center"><h3 class="text-headline text-uppercase">Twitter</h3></div>
+    <div class="clear"></div>
+    <div class="grid-fluid">
+      <div class="c3"><p></p></div>
+      <div class="c6">
+        <div class="article-card">
+          <div class="title"><a href="http://twitter.com/angularjs" data-show-count="false"
+                                class="twitter-follow-button">Follow @angularjs</a></div>
+          <p><a class="twitter-timeline" data-chrome="nofooter noborders noheader"
+                href="http://twitter.com/angularjs" data-widget-id="700150278465523713"></a></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</article>

aio/content/navigation.json

@@ -17,7 +17,7 @@
       "title": "Events"
     },
     {
-      "url": "https://blog.angular.io/",
+      "url": "https://blog.angularjs.org/",
       "title": "Blog"
     }
   ],
@@ -39,7 +39,7 @@
           "title": "Events"
         },
         {
-          "url": "https://blog.angular.io/",
+          "url": "https://blog.angularjs.org/",
           "title": "Blog"
         }
       ]
@@ -252,7 +252,7 @@
 
         {
           "url": "guide/http",
-          "title": "HttpClient",
+          "title": "Server Communication",
           "tooltip": "Use HTTP to talk to a remote server."
         },
         {

aio/content/tutorial/toh-pt4.md

@@ -137,7 +137,7 @@ Create a file in the `app` folder called `hero.service.ts`.
 
 
 The naming convention for service files is the service name in lowercase followed by `.service`.
-For a multi-word service name, use lower [dash-case](guide/glossary#dash-case).
+For a multi-word service name, use lower [dash-case](guide/glossary).
 For example, the filename for `SpecialSuperHeroService` is `special-super-hero.service.ts`.
 
 </div>

aio/content/tutorial/toh-pt6.md

@@ -83,6 +83,10 @@ Added hero "Zero" to confirm that the data service can handle a hero with `id==0
   Don't worry about the details of this backend substitution; you can
   skip it when you have a real web API server.
 
+  Read more about the in-memory web API in the
+  [Appendix: Tour of Heroes in-memory web api](guide/http#in-mem-web-api)
+  section of the [HTTP Client](guide/http#in-mem-web-api) page.
+
 </div>
 
 ## Heroes and HTTP

aio/firebase.json

@@ -7,8 +7,7 @@
     "cleanUrls": true,
     "redirects": [
       // cli-quickstart.html glossary.html, quickstart.html, http.html, style-guide.html, styleguide
-      {"type": 301, "source": "/docs/ts/latest/cli-quickstart.html",             "destination": "/guide/quickstart"},
-      {"type": 301, "source": "/guide/cli-quickstart",                           "destination": "/guide/quickstart"},
+      {"type": 301, "source": "/docs/ts/latest/cli-quickstart.html",             "destination": "/guide/cli-quickstart"},
       {"type": 301, "source": "/docs/ts/latest/glossary.html",                   "destination": "/guide/glossary"},
       {"type": 301, "source": "/docs/ts/latest/quickstart.html",                 "destination": "/guide/quickstart"},
       {"type": 301, "source": "/docs/ts/latest/guide/server-communication.html", "destination": "/guide/http"},

aio/ngsw-manifest.json

@@ -19,7 +19,7 @@
   "routing": {
     "index": "/index.html",
     "routes": {
-      "^(?!/docs/ts/latest|/guide/cli-quickstart|/styleguide).*/(?!e?plnkr)[^/.]*$": {
+      "^(?!/docs/ts/latest|/styleguide).*/(?!e?plnkr)[^/.]*$": {
         "match": "regex"
       }
     }

aio/package.json

@@ -81,7 +81,7 @@
     "concurrently": "^3.4.0",
     "cross-spawn": "^5.1.0",
     "dgeni": "^0.4.7",
-    "dgeni-packages": "^0.20.0-rc.6",
+    "dgeni-packages": "^0.20.0-rc.5",
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",

aio/scripts/payload.sh

@@ -1,9 +1,11 @@
 #!/bin/bash
 
-set -eu -o pipefail
+# WARNING: FIREBASE_TOKEN should NOT be printed.
+set +x -eu -o pipefail
 
 readonly thisDir=$(cd $(dirname $0); pwd)
 readonly parentDir=$(dirname $thisDir)
+readonly TOKEN=${ANGULAR_PAYLOAD_FIREBASE_TOKEN:-}
 readonly PROJECT_NAME="angular-payload-size"
 
 source ${thisDir}/_payload-limits.sh
@@ -41,21 +43,20 @@ timestamp=$(date +%s)
 payloadData="$payloadData\"timestamp\": $timestamp, "
 
 # Add change source: application, dependencies, or 'application+dependencies'
-applicationChanged=false
-dependenciesChanged=false
-if [[ $(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir | grep -v aio/yarn.lock | grep -v content) ]]; then
-  applicationChanged=true
-fi
-if [[ $(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir/yarn.lock) ]]; then
-  dependenciesChanged=true
+yarnChanged=false
+allChangedFiles=$(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir | wc -l)
+allChangedFileNames=$(git diff --name-only $TRAVIS_COMMIT_RANGE $parentDir)
+
+if [[ $allChangedFileNames == *"yarn.lock"* ]]; then
+  yarnChanged=true
 fi
 
-if $dependenciesChanged && $applicationChanged; then
-  change='application+dependencies'
-elif $dependenciesChanged; then
+if [[ $allChangedFiles -eq 1 ]] && [[ "$yarnChanged" = true ]]; then
   # only yarn.lock changed
   change='dependencies'
-elif $applicationChanged; then
+elif [[ $allChangedFiles -gt 1 ]] && [[ "$yarnChanged" = true ]]; then
+  change='application+dependencies'
+elif [[ $allChangedFiles -gt 0 ]]; then
   change='application'
 else
   # Nothing changed in aio/
@@ -70,10 +71,7 @@ echo $payloadData
 if [[ "$TRAVIS_PULL_REQUEST" == "false" ]]; then
   readonly safeBranchName=$(echo $TRAVIS_BRANCH | sed -e 's/\./_/g')
   readonly dbPath=/payload/aio/$safeBranchName/$TRAVIS_COMMIT
-
-  # WARNING: FIREBASE_TOKEN should NOT be printed.
-  set +x
-  firebase database:update --data "$payloadData" --project $PROJECT_NAME --confirm --token "$ANGULAR_PAYLOAD_FIREBASE_TOKEN" $dbPath
+  firebase database:update --data "$payloadData" --project $PROJECT_NAME --confirm --token "$TOKEN" $dbPath
 fi
 
 if [[ $failed = true ]]; then

aio/scripts/test-pwa-score.js

@@ -19,6 +19,11 @@ const config = require('lighthouse/lighthouse-core/config/default.js');
 // Constants
 const VIEWER_URL = 'https://googlechrome.github.io/lighthouse/viewer/';
 
+// Specify the path to Chrome on Travis
+if (process.env.TRAVIS) {
+  process.env.LIGHTHOUSE_CHROMIUM_PATH = process.env.CHROME_BIN;
+}
+
 // Run
 _main(process.argv.slice(2));
 

aio/src/app/app.component.spec.ts

@@ -632,6 +632,7 @@ describe('AppComponent', () => {
         it('should initialize the search worker', inject([SearchService], (searchService: SearchService) => {
           fixture.detectChanges(); // triggers ngOnInit
           expect(searchService.initWorker).toHaveBeenCalled();
+          expect(searchService.loadIndex).toHaveBeenCalled();
         }));
       });
 

aio/src/app/app.component.ts

@@ -48,7 +48,7 @@ export class AppComponent implements OnInit {
    * the styling of individual pages.
    * You will get three classes:
    *
-   * * `page-...`: computed from the current document id (e.g. events, guide-security, tutorial-toh-pt2)
+   * * `page-...`: computed from the current document id (e.g. news, guide-security, tutorial-toh-pt2)
    * * `folder-...`: computed from the top level folder for an id (e.g. guide, tutorial, etc)
    * * `view-...`: computef from the navigation view (e.g. SideNav, TopBar, etc)
    */
@@ -111,8 +111,8 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     // Do not initialize the search on browsers that lack web worker support
     if ('Worker' in window) {
-      // Delay initialization by up to 2 seconds
-      this.searchService.initWorker('app/search/search-worker.js', 2000);
+      this.searchService.initWorker('app/search/search-worker.js');
+      this.searchService.loadIndex();
     }
 
     this.onResize(window.innerWidth);

aio/src/app/embedded/code/code-example.component.spec.ts

@@ -65,13 +65,6 @@ describe('CodeExampleComponent', () => {
     expect(actual).toBe('Great Example');
   });
 
-  it('should remove the `title` attribute after initialisation', () => {
-    TestBed.overrideComponent(HostComponent, {
-      set: {template: '<code-example title="Great Example"></code-example>'}});
-    createComponent(oneLineCode);
-    expect(codeExampleDe.nativeElement.getAttribute('title')).toEqual(null);
-  });
-
   it('should pass hideCopy to CodeComonent', () => {
     TestBed.overrideComponent(HostComponent, {
       set: {template: '<code-example hideCopy="true"></code-example>'}});

aio/src/app/embedded/code/code-example.component.ts

@@ -45,8 +45,6 @@ export class CodeExampleComponent implements OnInit {
     this.path = element.getAttribute('path') || '';
     this.region = element.getAttribute('region') || '';
     this.title = element.getAttribute('title') || '';
-    // Now remove the title attribute to prevent unwanted tooltip popups when hovering over the code.
-    element.removeAttribute('title');
 
     this.isAvoid = this.path.indexOf('.avoid.') !== -1;
     this.hideCopy = this.isAvoid || getBoolFromAttribute(element, ['hidecopy', 'hide-copy']);

aio/src/app/search/search-box/search-box.component.spec.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { SearchBoxComponent } from './search-box.component';
 import { MockSearchService } from 'testing/search.service';
@@ -36,67 +36,30 @@ describe('SearchBoxComponent', () => {
   });
 
   describe('initialisation', () => {
-    it('should get the current search query from the location service',
-          inject([LocationService], (location: MockLocationService) => fakeAsync(() => {
+    it('should get the current search query from the location service', inject([LocationService], (location: MockLocationService) => {
       location.search.and.returnValue({ search: 'initial search' });
       component.ngOnInit();
       expect(location.search).toHaveBeenCalled();
-      tick(300);
       expect(host.searchHandler).toHaveBeenCalledWith('initial search');
       expect(component.searchBox.nativeElement.value).toEqual('initial search');
-    })));
-  });
-
-  describe('onSearch', () => {
-    it('should debounce by 300ms', fakeAsync(() => {
-      component.doSearch();
-      expect(host.searchHandler).not.toHaveBeenCalled();
-      tick(300);
-      expect(host.searchHandler).toHaveBeenCalled();
-    }));
-
-    it('should pass through the value of the input box', fakeAsync(() => {
-      const input = fixture.debugElement.query(By.css('input'));
-      input.nativeElement.value = 'some query (input)';
-      component.doSearch();
-      tick(300);
-      expect(host.searchHandler).toHaveBeenCalledWith('some query (input)');
-    }));
-
-    it('should only send events if the search value has changed', fakeAsync(() => {
-      const input = fixture.debugElement.query(By.css('input'));
-
-      input.nativeElement.value = 'some query';
-      component.doSearch();
-      tick(300);
-      expect(host.searchHandler).toHaveBeenCalledTimes(1);
-
-      component.doSearch();
-      tick(300);
-      expect(host.searchHandler).toHaveBeenCalledTimes(1);
-
-      input.nativeElement.value = 'some other query';
-      component.doSearch();
-      tick(300);
-      expect(host.searchHandler).toHaveBeenCalledTimes(2);
     }));
   });
 
   describe('on input', () => {
-    it('should trigger a search', () => {
+    it('should trigger the onSearch event', () => {
       const input = fixture.debugElement.query(By.css('input'));
-      spyOn(component, 'doSearch');
+      input.nativeElement.value = 'some query (input)';
       input.triggerEventHandler('input', { });
-      expect(component.doSearch).toHaveBeenCalled();
+      expect(host.searchHandler).toHaveBeenCalledWith('some query (input)');
     });
   });
 
   describe('on keyup', () => {
-    it('should trigger a search', () => {
+    it('should trigger the onSearch event', () => {
       const input = fixture.debugElement.query(By.css('input'));
-      spyOn(component, 'doSearch');
+      input.nativeElement.value = 'some query (keyup)';
       input.triggerEventHandler('keyup', { });
-      expect(component.doSearch).toHaveBeenCalled();
+      expect(host.searchHandler).toHaveBeenCalledWith('some query (keyup)');
     });
   });
 
@@ -110,11 +73,28 @@ describe('SearchBoxComponent', () => {
   });
 
   describe('on click', () => {
-    it('should trigger a search', () => {
+    it('should trigger the search event', () => {
       const input = fixture.debugElement.query(By.css('input'));
-      spyOn(component, 'doSearch');
+      input.nativeElement.value = 'some query (click)';
       input.triggerEventHandler('click', { });
-      expect(component.doSearch).toHaveBeenCalled();
+      expect(host.searchHandler).toHaveBeenCalledWith('some query (click)');
+    });
+  });
+
+  describe('event filtering', () => {
+    it('should only send events if the search value has changed', () => {
+      const input = fixture.debugElement.query(By.css('input'));
+
+      input.nativeElement.value = 'some query';
+      input.triggerEventHandler('input', { });
+      expect(host.searchHandler).toHaveBeenCalledTimes(1);
+
+      input.triggerEventHandler('input', { });
+      expect(host.searchHandler).toHaveBeenCalledTimes(1);
+
+      input.nativeElement.value = 'some other query';
+      input.triggerEventHandler('input', { });
+      expect(host.searchHandler).toHaveBeenCalledTimes(2);
     });
   });
 

aio/src/app/search/search-box/search-box.component.ts

@@ -26,11 +26,10 @@ import 'rxjs/add/operator/distinctUntilChanged';
 })
 export class SearchBoxComponent implements OnInit {
 
-  private searchDebounce = 300;
   private searchSubject = new Subject<string>();
 
   @ViewChild('searchBox') searchBox: ElementRef;
-  @Output() onSearch = this.searchSubject.distinctUntilChanged().debounceTime(this.searchDebounce);
+  @Output() onSearch = this.searchSubject.distinctUntilChanged();
   @Output() onFocus = new EventEmitter<string>();
 
   constructor(private locationService: LocationService) { }

aio/src/app/search/search.service.spec.ts

@@ -1,62 +1,24 @@
 import { ReflectiveInjector, NgZone } from '@angular/core';
-import { fakeAsync, tick } from '@angular/core/testing';
-import { Observable } from 'rxjs/Observable';
 import { SearchService } from './search.service';
-import { WebWorkerClient } from 'app/shared/web-worker';
 
 describe('SearchService', () => {
 
   let injector: ReflectiveInjector;
-  let service: SearchService;
-  let sendMessageSpy: jasmine.Spy;
-  let mockWorker: WebWorkerClient;
 
   beforeEach(() => {
-    sendMessageSpy = jasmine.createSpy('sendMessage').and.returnValue(Observable.of({}));
-    mockWorker = { sendMessage: sendMessageSpy } as any;
-    spyOn(WebWorkerClient, 'create').and.returnValue(mockWorker);
-
     injector = ReflectiveInjector.resolveAndCreate([
         SearchService,
         { provide: NgZone, useFactory: () => new NgZone({ enableLongStackTrace: false }) }
     ]);
-    service = injector.get(SearchService);
   });
 
-  describe('initWorker', () => {
-    it('should create the worker and load the index after the specified delay', fakeAsync(() => {
-      service.initWorker('some/url', 100);
-      expect(WebWorkerClient.create).not.toHaveBeenCalled();
-      expect(mockWorker.sendMessage).not.toHaveBeenCalled();
-      tick(100);
-      expect(WebWorkerClient.create).toHaveBeenCalledWith('some/url', jasmine.any(NgZone));
-      expect(mockWorker.sendMessage).toHaveBeenCalledWith('load-index');
-    }));
+  describe('loadIndex', () => {
+    it('should send a "load-index" message to the worker');
+    it('should connect the `ready` property to the response to the "load-index" message');
   });
 
   describe('search', () => {
-    beforeEach(() => {
-      // We must initialize the service before calling search
-      service.initWorker('some/url', 100);
-    });
-
-    it('should trigger a `loadIndex` synchronously', () => {
-      service.search('some query');
-      expect(mockWorker.sendMessage).toHaveBeenCalledWith('load-index');
-    });
-
-    it('should send a "query-index" message to the worker', () => {
-      service.search('some query');
-      expect(mockWorker.sendMessage).toHaveBeenCalledWith('query-index', 'some query');
-    });
-
-    it('should push the response to the `searchResults` observable', () => {
-      const mockSearchResults = { results: ['a', 'b'] };
-      (mockWorker.sendMessage as jasmine.Spy).and.returnValue(Observable.of(mockSearchResults));
-      let searchResults: any;
-      service.searchResults.subscribe(results => searchResults = results);
-      service.search('some query');
-      expect(searchResults).toEqual(mockSearchResults);
-    });
+    it('should send a "query-index" message to the worker');
+    it('should push the response to the `searchResults` observable');
   });
 });

aio/src/app/search/search.service.ts

@@ -7,10 +7,8 @@ can be found in the LICENSE file at http://angular.io/license
 import { NgZone, Injectable, Type } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { ReplaySubject } from 'rxjs/ReplaySubject';
-import 'rxjs/add/observable/race';
-import 'rxjs/add/observable/timer';
+import 'rxjs/add/operator/publishLast';
 import 'rxjs/add/operator/concatMap';
-import 'rxjs/add/operator/publish';
 import { WebWorkerClient } from 'app/shared/web-worker';
 
 export interface SearchResults {
@@ -29,50 +27,26 @@ export interface SearchResult {
 
 @Injectable()
 export class SearchService {
-  private searchesSubject = new ReplaySubject<string>(1);
-  searchResults: Observable<SearchResults>;
+  private worker: WebWorkerClient;
+  private ready: Observable<boolean>;
+  private resultsSubject = new ReplaySubject<SearchResults>(1);
+  readonly searchResults = this.resultsSubject.asObservable();
 
   constructor(private zone: NgZone) {}
 
-  /**
-   * Initialize the search engine. We offer an `initDelay` to prevent the search initialisation from delaying the
-   * initial rendering of the web page. Triggering a search will override this delay and cause the index to be
-   * loaded immediately.
-   *
-   * @param workerUrl the url of the WebWorker script that runs the searches
-   * @param initDelay the number of milliseconds to wait before we load the WebWorker and generate the search index
-   */
-  initWorker(workerUrl: string, initDelay: number) {
-    const searchResults = Observable
-      // Wait for the initDelay or the first search
-      .race(
-        Observable.timer(initDelay),
-        this.searchesSubject.first()
-      )
-      .concatMap(() => {
-        // Create the worker and load the index
-        const worker = WebWorkerClient.create(workerUrl, this.zone);
-        return worker.sendMessage('load-index').concatMap(() =>
-          // Once the index has loaded, switch to listening to the searches coming in
-          this.searchesSubject.switchMap((query) =>
-            // Each search gets switched to a web worker message, whose results are returned via an observable
-            worker.sendMessage<SearchResults>('query-index', query)
-          )
-        );
-      }).publish();
-
-      // Connect to the observable to kick off the timer
-    searchResults.connect();
-
-    // Expose the connected observable to the rest of the world
-    this.searchResults = searchResults;
+  initWorker(workerUrl) {
+    this.worker = new WebWorkerClient(new Worker(workerUrl), this.zone);
+  }
+
+  loadIndex() {
+    const ready = this.ready = this.worker.sendMessage<boolean>('load-index').publishLast();
+    // trigger the index to be loaded immediately
+    ready.connect();
   }
 
-  /**
-   * Send a search query to the index.
-   * The results will appear on the `searchResults` observable.
-   */
   search(query: string) {
-    this.searchesSubject.next(query);
+    this.ready.concatMap(ready => {
+      return this.worker.sendMessage('query-index', query) as Observable<SearchResults>;
+    }).subscribe(results => this.resultsSubject.next(results));
   }
 }

aio/src/app/shared/web-worker.ts

@@ -16,11 +16,7 @@ export interface WebWorkerMessage {
 export class WebWorkerClient {
   private nextId = 0;
 
-  static create(workerUrl: string, zone: NgZone) {
-    return new WebWorkerClient(new Worker(workerUrl), zone);
-  }
-
-  private constructor(private worker: Worker, private zone: NgZone) {
+  constructor(private worker: Worker, private zone: NgZone) {
   }
 
   sendMessage<T>(type: string, payload?: any): Observable<T> {

aio/src/styles/1-layouts/_content-layout.scss

@@ -17,7 +17,6 @@ aio-shell.page-docs {
 
   .sidenav-content {
     min-height: 450px;
-    padding: 80px 1rem 1rem;
   }
 }
 

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

@@ -106,11 +106,7 @@ aio-code pre {
   }
 }
 
-.code-tab-group .mat-tab-label {
-  white-space: nowrap;
-}
-
-.code-tab-group .mat-tab-body-content {
+.code-tab-group div.mat-tab-body-content {
   height: auto;
   transform: none;
 }

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

@@ -60,7 +60,7 @@ table {
         background-color: $lightgray;
       }
     }
-
+      
     }
 
     th {
@@ -80,35 +80,6 @@ table {
   }
 }
 
-#cheatsheet {
-
-  table tbody td {
-    overflow: auto;
-  }
-
-  @media only screen and (max-width: 990px) {
-
-    /* Force table to not be like tables anymore */
-    table, thead, tbody, tfoot, tr, th, td {
-      display: block;
-      position: relative;
-      max-width: 100%;
-
-      code {
-        padding: 0;
-        background-color: inherit;
-      }
-    }
-
-    th {
-      border-right: none;
-    }
-
-    th, td {
-      &:not(:last-child) {
-        border-bottom: none;
-        padding-bottom: 0px;
-      }
-    }
-  }
-}
+#cheatsheet table tbody td {
+  overflow: auto;
+}

aio/tools/RELEASE.md

@@ -1,19 +0,0 @@
-# Docs releases
-
-This document explains how to update the documentation examples after an Angular release. This is only needed for major and minor versions.
-
-All the packages for the docs' examples are specified in `/aio/tools/examples/shared/package.json`
-
-**1)** So within the `shared` folder, you need to issue the following command:
-
-```
-$ yarn upgrade-interactive --tilde
-```
-
-There, select all the packages that are updated on the new Angular release.
-
-**2)** Changes to the tsconfig.json? There is one to update at `/aio/tools/examples/shared/boilerplate/src/tsconfig.json`
-
-**3)** The file `/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.js` contains the configuration for plunkers. It has some hardcoded versions that could be updated.
-
-**4)** As in step 3, more hardcoded versions at `/aio/tools/plunker-builder/translator/rules/indexHtml.js`

aio/tools/examples/shared/package.json

@@ -12,19 +12,19 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@angular/animations": "~4.3.1",
-    "@angular/common": "~4.3.1",
-    "@angular/compiler": "~4.3.1",
-    "@angular/compiler-cli": "~4.3.1",
-    "@angular/core": "~4.3.1",
-    "@angular/forms": "~4.3.1",
-    "@angular/http": "~4.3.1",
-    "@angular/platform-browser": "~4.3.1",
-    "@angular/platform-browser-dynamic": "~4.3.1",
-    "@angular/platform-server": "~4.3.1",
-    "@angular/router": "~4.3.1",
-    "@angular/tsc-wrapped": "~4.3.1",
-    "@angular/upgrade": "~4.3.1",
+    "@angular/animations": "~4.2.0",
+    "@angular/common": "~4.2.0",
+    "@angular/compiler": "~4.2.0",
+    "@angular/compiler-cli": "~4.2.0",
+    "@angular/core": "~4.2.0",
+    "@angular/forms": "~4.2.0",
+    "@angular/http": "~4.2.0",
+    "@angular/platform-browser": "~4.2.0",
+    "@angular/platform-browser-dynamic": "~4.2.0",
+    "@angular/platform-server": "~4.2.0",
+    "@angular/router": "~4.2.0",
+    "@angular/tsc-wrapped": "~4.2.0",
+    "@angular/upgrade": "~4.2.0",
     "angular-in-memory-web-api": "~0.3.2",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",