docs: changelog for 5.0.0-beta.2 release

* Adds `ChildActivationStart` and `ChildActivationEnd`
* Adds test to verify the PreActivation phase of routing

.circleci/config.yml

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

.pullapprove.yml

@@ -69,8 +69,8 @@ groups:
           - "*.lock"
           - "tools/*"
         exclude:
-          - "tools/@angular/tsc-wrapped/*"
           - "tools/public_api_guard/*"
+          - "tools/ngc-wrapped/*"
           - "aio/*"
     users:
       - IgorMinar #primary
@@ -136,8 +136,9 @@ groups:
   compiler-cli:
     conditions:
       files:
-        - "tools/@angular/tsc-wrapped/*"
+        - "packages/tsc-wrapped/*"
         - "packages/compiler-cli/*"
+        - "tools/ngc-wrapped/*"
     users:
       - alexeagle
       - chuckjaz

.travis.yml

@@ -55,7 +55,8 @@ env:
     - CI_MODE=browserstack_optional
     - CI_MODE=docs_test
     - CI_MODE=aio
-    - CI_MODE=aio_e2e
+    - CI_MODE=aio_e2e AIO_SHARD=0
+    - CI_MODE=aio_e2e AIO_SHARD=1
     - CI_MODE=bazel
 
 matrix:
@@ -63,7 +64,6 @@ matrix:
   allow_failures:
     - env: "CI_MODE=saucelabs_optional"
     - env: "CI_MODE=browserstack_optional"
-    - env: "CI_MODE=aio_e2e"
 
 before_install:
   # source the env.sh script so that the exported variables are available to other scripts later on

CHANGELOG.md

@@ -1,3 +1,59 @@
+<a name="5.0.0-beta.2"></a>
+# [5.0.0-beta.2](https://github.com/angular/angular/compare/5.0.0-beta.1...5.0.0-beta.2) (2017-08-02)
+
+
+### Bug Fixes
+
+* **compiler:** do not consider arguments when determining recursion ([e64b54b](https://github.com/angular/angular/commit/e64b54b))
+* **compiler:** fix for element needing implicit parent placed in top-level ng-container ([381471d](https://github.com/angular/angular/commit/381471d)), closes [#18314](https://github.com/angular/angular/issues/18314)
+
+
+### Features
+
+* **forms:** add options arg to abstract controls ([ebef5e6](https://github.com/angular/angular/commit/ebef5e6))
+* **router:** add events tracking activation of individual routes ([49cd851](https://github.com/angular/angular/commit/49cd851))
+
+
+
+<a name="4.3.3"></a>
+## [4.3.3](https://github.com/angular/angular/compare/4.3.2...4.3.3) (2017-08-02)
+
+
+### Bug Fixes
+
+* **compiler:** fix for element needing implicit parent placed in top-level ng-container ([f5cbc2e](https://github.com/angular/angular/commit/f5cbc2e)), closes [#18314](https://github.com/angular/angular/issues/18314)
+
+
+
+<a name="5.0.0-beta.1"></a>
+# [5.0.0-beta.1](https://github.com/angular/angular/compare/5.0.0-beta.0...5.0.0-beta.1) (2017-07-27)
+
+
+### Bug Fixes
+
+* **animations:** export BrowserModule as apart of BrowserAnimationsModule ([#18263](https://github.com/angular/angular/issues/18263)) ([fd0cc01](https://github.com/angular/angular/commit/fd0cc01))
+* **compiler:** add equiv & disp attributes to Xliff2 ICU placeholders ([#18283](https://github.com/angular/angular/issues/18283)) ([38ec05f](https://github.com/angular/angular/commit/38ec05f)), closes [#17344](https://github.com/angular/angular/issues/17344)
+* **compiler:** allow numbers for ICU message cases in lexer ([#18095](https://github.com/angular/angular/issues/18095)) ([a3a5429](https://github.com/angular/angular/commit/a3a5429)), closes [#17799](https://github.com/angular/angular/issues/17799)
+* **core:** invoke error handler outside of the Angular Zone ([#18269](https://github.com/angular/angular/issues/18269)) ([7ae7573](https://github.com/angular/angular/commit/7ae7573)), closes [#17073](https://github.com/angular/angular/issues/17073) [#7774](https://github.com/angular/angular/issues/7774)
+* **platform-server:** don't clobber parse5 properties when setting ([#18237](https://github.com/angular/angular/issues/18237)) ([a094769](https://github.com/angular/angular/commit/a094769)), closes [#17050](https://github.com/angular/angular/issues/17050)
+* **router:** child CanActivate guard should wait for parent to complete ([#18110](https://github.com/angular/angular/issues/18110)) ([086f4aa](https://github.com/angular/angular/commit/086f4aa)), closes [#15670](https://github.com/angular/angular/issues/15670)
+* **router:** should throw when lazy loaded module doesn't define any routes ([#15001](https://github.com/angular/angular/issues/15001)) ([82923a3](https://github.com/angular/angular/commit/82923a3)), closes [#14596](https://github.com/angular/angular/issues/14596)
+* **upgrade:** ensure downgraded components are created in the Angular zone ([#18209](https://github.com/angular/angular/issues/18209)) ([43c33d5](https://github.com/angular/angular/commit/43c33d5))
+* **upgrade:** throw error if trying to get injector before setting ([#18209](https://github.com/angular/angular/issues/18209)) ([d31dc7b](https://github.com/angular/angular/commit/d31dc7b))
+
+
+### Features
+
+* **compiler:** add representation of placeholders to xliff & xmb ([b3085e9](https://github.com/angular/angular/commit/b3085e9)), closes [#17345](https://github.com/angular/angular/issues/17345)
+
+
+### Performance Improvements
+
+* latest tsickle to tree shake: abstract class methods & interfaces ([#18236](https://github.com/angular/angular/issues/18236)) ([b7a6f52](https://github.com/angular/angular/commit/b7a6f52))
+* **core:** use native addEventListener for faster rendering. ([#18107](https://github.com/angular/angular/issues/18107)) ([6279e50](https://github.com/angular/angular/commit/6279e50))
+
+
+
 <a name="4.3.2"></a>
 ## [4.3.2](https://github.com/angular/angular/compare/4.3.1...4.3.2) (2017-07-26)
 
@@ -15,6 +71,35 @@
 
 
 
+<a name="5.0.0-beta.0"></a>
+# [5.0.0-beta.0](https://github.com/angular/angular/compare/4.3.0...5.0.0-beta.0) (2017-07-19)
+
+
+### Bug Fixes
+
+* **animations:** always camelcase style property names that contain auto styles ([d22f8f5](https://github.com/angular/angular/commit/d22f8f5)), closes [#17938](https://github.com/angular/angular/issues/17938)
+* **animations:** capture cancelled animation styles within grouped animations ([23146c9](https://github.com/angular/angular/commit/23146c9)), closes [#17170](https://github.com/angular/angular/issues/17170)
+* **animations:** do not crash animations if a nested component fires CD during CD ([5db6f38](https://github.com/angular/angular/commit/5db6f38)), closes [#18193](https://github.com/angular/angular/issues/18193)
+* **animations:** make sure @.disabled works in non-animation components ([5344be5](https://github.com/angular/angular/commit/5344be5))
+* **common:** send flushed body as error instead of null ([5c62e30](https://github.com/angular/angular/commit/5c62e30)), closes [#18181](https://github.com/angular/angular/issues/18181)
+* **compiler:** ensure jit external id arguments names are unique ([95635c1](https://github.com/angular/angular/commit/95635c1))
+* **compiler-cli:** don't generate empty <target/> when extracting xliff ([65c9e13](https://github.com/angular/angular/commit/65c9e13)), closes [#15754](https://github.com/angular/angular/issues/15754)
+* **platform-server:** provide XhrFactory for HttpClient ([8076482](https://github.com/angular/angular/commit/8076482))
+* **router:** canDeactivate guards should run from bottom to top ([e20cfe1](https://github.com/angular/angular/commit/e20cfe1)), closes [#15657](https://github.com/angular/angular/issues/15657)
+* **router:** should navigate to the same url when config changes ([eb6fb5f](https://github.com/angular/angular/commit/eb6fb5f)), closes [#15535](https://github.com/angular/angular/issues/15535)
+* **router:** should run resolvers for the same route concurrently ([ad3029e](https://github.com/angular/angular/commit/ad3029e)), closes [#14279](https://github.com/angular/angular/issues/14279)
+* **router:** terminal route in custom matcher ([b399cb2](https://github.com/angular/angular/commit/b399cb2))
+* **upgrade:** allow accessing AngularJS injector from downgraded module ([a5205c6](https://github.com/angular/angular/commit/a5205c6))
+
+
+### Features
+
+* **animations:** support :increment and :decrement transition aliases ([6f45519](https://github.com/angular/angular/commit/6f45519))
+* **upgrade:** propagate touched state of NgModelController ([59c23c7](https://github.com/angular/angular/commit/59c23c7))
+* **upgrade:** support lazy-loading Angular module into AngularJS app ([30e76fc](https://github.com/angular/angular/commit/30e76fc))
+
+
+
 <a name="4.3.1"></a>
 ## [4.3.1](https://github.com/angular/angular/compare/4.3.0...4.3.1) (2017-07-19)
 

aio/content/examples/.gitignore

@@ -43,13 +43,9 @@ dist/
 **/app/**/*.ajs.js
 
 # aot
-**/*.ngfactory.ts
+*/aot/**/*
-**/*.ngsummary.json
+!*/aot/bs-config.json
-**/*.ngsummary.ts
+!*/aot/index.html
-**/*.shim.ngstyle.ts
-**/*.metadata.json
-!aot/bs-config.json
-!aot/index.html
 !rollup-config.js
 
 # i18n

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

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

aio/content/examples/toh-pt6/aot/styles.css

@@ -1,116 +0,0 @@
-/* #docregion , quickstart, toh */
-/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-/* #enddocregion quickstart */
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-/* #enddocregion toh */
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* #docregion toh */
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}

aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts

@@ -9,7 +9,8 @@ describe('PhoneCat Application', function() {
 
   it('should redirect `index.html` to `index.html#!/phones', function() {
     browser.get('index.html');
-    expect(browser.getLocationAbsUrl()).toBe('/phones');
+    browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine.
+    expect(browser.getCurrentUrl()).toMatch(/\/phones$/);
   });
 
   describe('View: Phone list', function() {
@@ -65,7 +66,7 @@ describe('PhoneCat Application', function() {
 
       element.all(by.css('.phones li a')).first().click();
       browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine.
-      expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
+      expect(browser.getCurrentUrl()).toMatch(/\/phones\/nexus-s$/);
     });
 
   });

aio/content/guide/language-service.md

@@ -0,0 +1,176 @@
+# Angular Language Service
+
+The Angular Language Service is a way to get completions, errors, 
+hints, and navigation inside your Angular templates whether they 
+are external in an HTML file or embedded in annotations/decorators 
+in a string. The Angular Language Service autodetects that you are 
+opening an Angular file, reads your `tsconfig.json` file, finds all the 
+templates you have in your application, and then provides language 
+services for any templates that you open.
+
+
+## Autocompletion
+
+Autocompletion can speed up your development time by providing you with 
+contextual possibilities and hints as you type. This example shows 
+autocomplete in an interpolation. As you type it out, 
+you can hit tab to complete.
+
+<figure>
+  <img src="generated/images/guide/language-service/language-completion.gif" alt="autocompletion">
+</figure>
+
+There are also completions within 
+elements. Any elements you have as a component selector will 
+show up in the completion list.
+
+## Error checking
+
+The Angular Language Service can also forewarn you of mistakes in your code. 
+In this example, Angular doesn't know what `orders` is or where it comes from. 
+
+<figure>
+  <img src="generated/images/guide/language-service/language-error.gif" alt="error checking">
+</figure>
+
+## Navigation
+
+Navigation allows you to hover to 
+see where a component, directive, module, etc. is from and then 
+click and press F12 to go directly to its definition.
+
+<figure>
+  <img src="generated/images/guide/language-service/language-navigation.gif" alt="navigation">
+</figure>
+
+
+## Angular Language Service in your editor
+
+Angular Language Service is currently available for [Visual Studio Code](https://code.visualstudio.com/) and 
+[WebStorm](https://www.jetbrains.com/webstorm). 
+
+### Visual Studio Code
+
+In Visual Studio Code, install Angular Language Service from the store, 
+which is accessible from the bottom icon on the left menu pane. 
+You can also use the VS Quick Open (⌘+P) to search for the extension. When you've opened it, 
+enter the following command: 
+
+```sh
+ext install ng-template
+```
+
+Then click the install button to install the Angular Language Service. 
+
+
+### WebStorm
+
+In webstorm, you have to install the language service as a dev dependency. 
+When Angular sees this dev dependency, it provides the 
+language service inside of WebStorm. Webstorm then gives you 
+colorization inside the template and autocomplete in addition to the Angular Language Service.
+
+Here's the dev dependency 
+you need to have in `package.json`:
+
+```json
+
+devDependencies {
+	"@angular/language-service": "^4.0.0"
+}
+```
+
+Then in the terminal window at the root of your project, 
+install the `devDependencies` with `npm` or `yarn`: 
+
+```sh
+npm install 
+```
+*OR* 
+
+```sh
+yarn
+```
+
+*OR* 
+
+```sh
+yarn install
+```
+
+
+### Sublime Text
+
+In [Sublime Text](https://www.sublimetext.com/), you first need an extension to allow Typescript. 
+Install the latest version of typescript in a local `node_modules` directory:
+
+```sh
+npm install --save-dev typescript
+```
+
+Then install the Angular Language Service in the same location:
+```sh
+npm install --save-dev @angular/language-service
+```
+
+Starting with TypeScript 2.3, TypeScript has a language service plugin model that the language service can use. 
+
+Next, in your user preferences (`Cmd+,` or `Ctrl+,`), add:
+
+```json
+"typescript-tsdk": "<path to your folder>/node_modules/typescript/lib"
+```
+
+
+## Installing in your project
+
+You can also install Angular Language Service in your project with the 
+following `npm` command:
+
+```sh
+npm install --save-dev @angular/language-service
+```
+Additionally, add the following to the `"compilerOptions"` section of 
+your project's `tsconfig.json`.
+
+```json
+  "plugins": [
+      {"name": "@angular/language-service"}
+  ]
+```
+Note that this only provides diagnostics and completions in `.ts` 
+files. You need a custom sublime plugin (or modifications to the current plugin) 
+for completions in HTML files.
+
+
+## How the Language Service works
+
+When you use an editor with a language service, there's an 
+editor process which starts a separate language process/service 
+to which it speaks through an [RPC](https://en.wikipedia.org/wiki/Remote_procedure_call). 
+Any time you type inside of the editor, it sends information to the other process to 
+track the state of your project. When you trigger a completion list within a template, the editor process first parses the template into an HTML AST, or [abstract syntax tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree). Then the Angular compiler interprets 
+what module the template is part of, the scope you're in, and the component selector. Then it figures out where in the template AST your cursor is. When it determines the 
+context, it can then determine what the children can be.
+
+It's a little more involved if you are in an interpolation. If you have an interpolation of `{{data.---}}` inside a `div` and need the completion list after `data.---`, the compiler can't use the HTML AST to find the answer. The HTML AST can only tell the compiler that there is some text with the characters "`{{data.---}}`". That's when the template parser produces an expression AST, which resides within the template AST. The Angular Language Services then looks at `data.---` within its context and asks the TypeScript Language Service what the members of data are. TypeScript then returns the list of possibilities.
+
+
+For more in-depth information, see the 
+[Angular Language Service API](https://github.com/angular/angular/blob/master/packages/language-service/src/types.ts)
+
+
+
+
+
+
+
+
+<hr>
+
+## More on Information
+
+For more information, see [Chuck Jazdzewski's presentation](https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s) on the Angular Language 
+Service from [ng-conf](https://www.ng-conf.org/) 2017.
+
+

aio/content/guide/reactive-forms.md

@@ -1080,8 +1080,11 @@ To get access to the `FormArray` class, import it into `hero-detail.component.ts
 
 
 To _work_ with a `FormArray` you do the following:
+
 1. Define the items (`FormControls` or `FormGroups`) in the array.
+
 1. Initialize the array with items created from data in the _data model_.
+
 1. Add and remove items as the user requires.
 
 In this guide, you define a `FormArray` for `Hero.addresses` and

aio/content/guide/router.md

@@ -1830,7 +1830,7 @@ Finally, you activate the observable with `subscribe` method and (re)set the com
 
 #### _ParamMap_ API
 
-The `ParamMap` API is inspired by the [URLSearchParams interface](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParamsOPut). It provides methods
+The `ParamMap` API is inspired by the [URLSearchParams interface](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams). It provides methods
 to handle parameter access for both route parameters (`paramMap`) and query parameters (`queryParamMap`).
 
 <table>

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="generated/images/marketing/features/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="generated/images/marketing/features/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="generated/images/marketing/features/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="generated/images/marketing/features/feature-icon.svg" height="70px">
         </div>
         <div class="feature-row">
 

aio/content/marketing/index.html

@@ -1,10 +1,10 @@
-<!--FULL HEADER BLOCK-->
+<!-- FULL HEADER BLOCK -->
 <header>
 
-  <!--BACKGROUND IMAGE-->
+  <!-- BACKGROUND IMAGE -->
   <div class="background-sky hero"></div>
 
-<!--INTRO SECTION -->
+  <!-- INTRO SECTION -->
   <section id="intro">
 
     <!-- LOGO -->
@@ -12,35 +12,37 @@
       <img src="assets/images/logos/angular/angular.svg"/>
     </div>
 
-      <!-- CONTAINER     -->
+    <!-- CONTAINER -->
     <div class="homepage-container">
-      <!-- container content starts -->
-
       <div class="hero-headline no-toc">One framework.<br>Mobile &amp; desktop.</div>
       <a class="button hero-cta" href="guide/quickstart">Get Started</a>
-  </div><!-- CONTAINER END -->
+    </div>
-  </section>
 
+  </section>
 
 </header>
 
+<!-- MAIN CONTENT -->
 <article>
+
+  <h1 class="no-toc" style="display: none"></h1>
+
   <div class="home-rows">
 
-    <!--Announcement Bar-->
+    <!-- Announcement Bar -->
     <div class="homepage-container">
       <div class="announcement-bar">
-        <img src="generated/images/marketing/angular-mix.png" height="40" width="151">
+        <img src="generated/images/marketing/home/angular-mix.png" height="40" width="151">
         <p>Join us at our newest event, October 2017</p>
         <a class="button" href="https://angularmix.com/">Learn More</a>
-     </div>
+      </div>
     </div>
 
-    <!-- Group 1-->
+    <!-- Group 1 -->
     <div layout="row" layout-xs="column" class="home-row homepage-container">
       <div class="promo-img-container promo-1">
         <div>
-          <img height="222" width="340" src="assets/images/home/responsive-framework.svg" alt="responsive framework">
+          <img height="222" width="340" src="generated/images/marketing/home/responsive-framework.svg" alt="responsive framework">
         </div>
       </div>
 
@@ -53,7 +55,8 @@
       </div>
     </div>
     <hr>
-    <!-- Group 2-->
+
+    <!-- Group 2 -->
     <div layout="row" layout-xs="column" class="home-row">
       <div class="text-container">
         <div class="text-block">
@@ -65,16 +68,16 @@
 
       <div class="promo-img-container promo-2">
         <div>
-          <img height="222" width="323" src="assets/images/home/speed-performance.svg" alt="speed and performance">
+          <img height="222" width="323" src="generated/images/marketing/home/speed-performance.svg" alt="speed and performance">
         </div>
       </div>
     </div>
     <hr>
 
-    <!-- Group 3-->
+    <!-- Group 3 -->
     <div layout="row" layout-xs="column" class="home-row">
       <div class="promo-img-container promo-3">
-        <div><img src="assets/images/home/joyful-development.png" alt="IDE example"></div>
+        <div><img src="generated/images/marketing/home/joyful-development.svg" alt="IDE example"></div>
       </div>
 
       <div class="text-container">
@@ -88,9 +91,8 @@
     </div>
     <hr>
 
-    <!-- Group 4-->
+    <!-- Group 4 -->
     <div layout="row" layout-xs="column" class="home-row">
-
       <div class="text-container">
         <div class="text-block l-pad-top-2">
           <div class="text-headline">Loved by Millions</div>
@@ -100,25 +102,24 @@
 
       <div class="promo-img-container promo-4">
         <div>
-          <img src="assets/images/home/loved-by-millions.png" alt="angular on the map" width="455" height="228">
+          <img src="generated/images/marketing/home/loved-by-millions.svg" alt="angular on the map" width="455" height="228">
         </div>
       </div>
     </div>
 
-  <!-- CTA CARDS -->
+    <!-- CTA CARDS -->
-  <div layout="row" layout-xs="column" class="home-row">
+    <div layout="row" layout-xs="column" class="home-row">
-
+      <a href="guide/quickstart">
-    <a href="guide/quickstart">
+        <div class="card">
-      <div class="card">
+          <img src="generated/images/marketing/home/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>
           </div>
-      </div>
+        </div>
-    </a>
+      </a>
-  </div>
+    </div>
 
-  </div> <!-- end of home rows -->
+  </div><!-- end of home rows -->
 
 </article>

aio/content/navigation.json

@@ -282,6 +282,11 @@
           "title": "Internationalization (i18n)",
           "tooltip": "Translate the app's template text into multiple languages."
         },
+        {
+          "url": "guide/language-service",
+          "title": "Language Service",
+          "tooltip": "Use Angular Language Service to speed up dev time."
+        },
         {
           "url": "guide/security",
           "title": "Security",

aio/ngsw-manifest.json

@@ -10,8 +10,8 @@
   },
   "static.ignore": [
     "\\.js\\.map$",
-    "^/assets/images/.*/unused/",
+    "^(?:/|\\\\)assets(?:/|\\\\)images(?:/|\\\\).*(?:/|\\\\)_unused(?:/|\\\\)",
-    "^/generated/(?:docs/(?!api/api-list\\.json).*|images|live-examples|zips)/"
+    "^(?:/|\\\\)generated(?:/|\\\\)(?:docs(?:/|\\\\)(?!api(?:/|\\\\)api-list\\.json).*|images(?:/|\\\\)(?!marketing(?:/|\\\\)).*|live-examples|zips)(?:/|\\\\)"
   ],
   "static.versioned": [
     "\\.[0-9a-z]{20}\\."

aio/package.json

@@ -33,8 +33,9 @@
     "docs-test": "node tools/transforms/test.js",
     "serve-and-sync": "concurrently --kill-others \"yarn docs-watch\" \"yarn start\"",
     "~~update-webdriver": "webdriver-manager update --standalone false --gecko false",
-    "boilerplate:add": "node ./tools/examples/add-example-boilerplate add",
+    "boilerplate:add": "node ./tools/examples/example-boilerplate add",
-    "boilerplate:remove": "node ./tools/examples/add-example-boilerplate remove",
+    "boilerplate:remove": "node ./tools/examples/example-boilerplate remove",
+    "boilerplate:test": "node tools/examples/test.js",
     "generate-plunkers": "node ./tools/plunker-builder/generatePlunkers",
     "generate-zips": "node ./tools/example-zipper/generateZips",
     "sw-manifest": "ngu-sw-manifest --dist dist --in ngsw-manifest.json --out dist/ngsw-manifest.json",
@@ -48,17 +49,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.4",
+    "@angular/animations": "^4.3.1",
-    "@angular/common": "^4.2.4",
+    "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/compiler": "^4.2.4",
+    "@angular/common": "^4.3.1",
-    "@angular/core": "^4.2.4",
+    "@angular/compiler": "^4.3.1",
-    "@angular/forms": "^4.2.4",
+    "@angular/core": "^4.3.1",
-    "@angular/http": "^4.2.4",
+    "@angular/forms": "^4.3.1",
-    "@angular/material": "^2.0.0-beta.7",
+    "@angular/http": "^4.3.1",
-    "@angular/platform-browser": "^4.2.4",
+    "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser-dynamic": "^4.2.4",
+    "@angular/platform-browser": "^4.3.1",
-    "@angular/platform-server": "^4.2.4",
+    "@angular/platform-browser-dynamic": "^4.3.1",
-    "@angular/router": "^4.2.4",
+    "@angular/platform-server": "^4.3.1",
+    "@angular/router": "^4.3.1",
     "@angular/service-worker": "^1.0.0-beta.16",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
@@ -72,7 +74,7 @@
   },
   "devDependencies": {
     "@angular/cli": "angular/cli-builds#webpack-next",
-    "@angular/compiler-cli": "^4.2.4",
+    "@angular/compiler-cli": "^4.3.1",
     "@types/jasmine": "^2.5.52",
     "@types/node": "~6.0.60",
     "archiver": "^1.3.0",
@@ -81,7 +83,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",
     "entities": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-plugin-jasmine": "^2.2.0",

aio/src/app/app.component.ts

@@ -76,8 +76,8 @@ export class AppComponent implements OnInit {
 
   get homeImageUrl() {
     return this.isSideBySide ?
-      'assets/images/logos/standard/logo-nav@2x.png' :
+      'assets/images/logos/angular/logo-nav@2x.png' :
-      'assets/images/logos/standard/shield-large.svg';
+      'assets/images/logos/angular/shield-large.svg';
   }
   get isOpened() { return this.isSideBySide && this.isSideNavDoc; }
   get mode() { return this.isSideBySide ? 'side' : 'over'; }

aio/tools/examples/add-example-boilerplate.js

@@ -1,148 +0,0 @@
-const fs = fsExtra = require('fs-extra');
-const globby = require('globby');
-const path = require('path');
-const Q = require("q");
-const shelljs = require('shelljs');
-
-const EXAMPLES_PATH = path.join(__dirname, '/../../content/examples');
-const SHARED_PATH = path.join(__dirname, '/shared');
-const BOILERPLATE_PATH = path.join(SHARED_PATH, 'boilerplate');
-const EXAMPLES_TESTING_PATH = path.join(EXAMPLES_PATH, 'testing');
-
-const files = {
-  exampleBoilerplate: [
-    'src/styles.css',
-    'src/systemjs-angular-loader.js',
-    'src/systemjs.config.js',
-    'src/tsconfig.json',
-    'bs-config.json',
-    'bs-config.e2e.json',
-    'package.json',
-    'tslint.json'
-  ],
-  exampleUnitTestingBoilerplate: [
-    'src/browser-test-shim.js',
-    'karma-test-shim.js',
-    'karma.conf.js'
-  ],
-  exampleConfigFilename: 'example-config.json'
-};
-
-// requires admin access because it adds symlinks
-function add() {
-  const realPath = path.join(SHARED_PATH, '/node_modules');
-  const nodeModulesPaths = getNodeModulesPaths(EXAMPLES_PATH);
-
-  // we install the examples modules first
-  installNodeModules();
-
-  nodeModulesPaths.map((linkPath) => {
-    fs.ensureSymlinkSync(realPath, linkPath);
-  });
-
-  return copyExampleBoilerplate();
-}
-
-function copyExampleBoilerplate() {
-  console.log('Copying example boilerplate files');
-  const examplePaths = getExamplePaths(EXAMPLES_PATH);
-  // Make boilerplate files read-only to avoid that they be edited by mistake.
-  const destFileMode = '444';
-  let foo = copyFiles(files.exampleBoilerplate, BOILERPLATE_PATH, examplePaths, destFileMode)
-    // copy the unit test boilerplate
-    .then(() => {
-      const unittestPaths = getUnitTestingPaths(EXAMPLES_PATH);
-      return copyFiles(files.exampleUnitTestingBoilerplate, EXAMPLES_TESTING_PATH, unittestPaths, destFileMode);
-    })
-    .catch((err) => {
-      console.error(err);
-      throw err;
-    });
-}
-
-// Copies fileNames into destPaths, setting the mode of the
-// files at the destination as optional_destFileMode if given.
-// returns a promise
-function copyFiles(fileNames, originPath, destPaths, optional_destFileMode) {
-  const copy = Q.denodeify(fsExtra.copy);
-  const chmod = Q.denodeify(fsExtra.chmod);
-  let copyPromises = [];
-  destPaths.map((destPath) => {
-    fileNames.forEach((fileName) => {
-      const originName = path.join(originPath, fileName);
-      const destName = path.join(destPath, fileName);
-      let p = copy(originName, destName, { clobber: true});
-      if(optional_destFileMode !== undefined) {
-        p = p.then(() => {
-          return chmod(destName, optional_destFileMode);
-        });
-      }
-      copyPromises.push(p);
-    });
-  });
-
-  return Q.all(copyPromises);
-}
-
-function getExamplePaths(basePath, includeBase) {
-  // includeBase defaults to false
-  return getPaths(basePath, files.exampleConfigFilename, includeBase);
-}
-
-function getFilenames(basePath, filename, includeBase) {
-  let includePatterns = [path.join(basePath, "**/" + filename)];
-  if (!includeBase) {
-    // ignore (skip) the top level version.
-    includePatterns.push("!" + path.join(basePath, "/" + filename));
-  }
-  // ignore (skip) the files in BOILERPLATE_PATH.
-  includePatterns.push("!" + path.join(BOILERPLATE_PATH, "/" + filename));
-  const nmPattern = path.join(basePath, "**/node_modules/**");
-  return globby.sync(includePatterns, {ignore: [nmPattern]});
-}
-
-function getNodeModulesPaths(basePath) {
-  return getExamplePaths(basePath).map((examplePath) => {
-    return path.join(examplePath, "/node_modules");
-  });
-}
-
-function getPaths(basePath, filename, includeBase) {
-  const filenames = getFilenames(basePath, filename, includeBase);
-  return filenames.map((fileName) => {
-    return path.dirname(fileName);
-  });
-}
-
-function getUnitTestingPaths(basePath) {
-  const examples = getPaths(basePath, files.exampleConfigFilename, true);
-  return examples.filter((example) => {
-    const exampleConfig = fs.readJsonSync(`${example}/${files.exampleConfigFilename}`, {throws: false});
-    return exampleConfig && !!exampleConfig.unittesting;
-  });
-}
-
-function installNodeModules() {
-  shelljs.exec('yarn', {cwd: SHARED_PATH});
-}
-
-function remove() {
-  shelljs.exec('git clean -xdf', {cwd: EXAMPLES_PATH});
-}
-
-module.exports = {
-  add: add,
-  remove: remove
-};
-
-// being executed from shell script
-switch (process.argv[2]) {
-  case 'add':
-    add();
-    break;
-  case 'remove':
-    remove();
-    break;
-  default:
-    console.error(`There is no function with the name: ${process.argv}`);
-}

aio/tools/examples/example-boilerplate.js

@@ -0,0 +1,140 @@
+const fs = require('fs-extra');
+const glob = require('glob');
+const path = require('canonical-path');
+const shelljs = require('shelljs');
+const yargs = require('yargs');
+
+const SHARED_PATH = path.resolve(__dirname, 'shared');
+const SHARED_NODE_MODULES_PATH = path.resolve(SHARED_PATH, 'node_modules');
+const BOILERPLATE_BASE_PATH = path.resolve(SHARED_PATH, 'boilerplate');
+const EXAMPLES_BASE_PATH = path.resolve(__dirname, '../../content/examples');
+const TESTING_BASE_PATH = path.resolve(EXAMPLES_BASE_PATH, 'testing');
+
+const BOILERPLATE_SRC_PATHS = [
+  'src/styles.css',
+  'src/systemjs-angular-loader.js',
+  'src/systemjs.config.js',
+  'src/tsconfig.json',
+  'bs-config.json',
+  'bs-config.e2e.json',
+  'package.json',
+  'tslint.json'
+];
+
+const BOILERPLATE_TEST_PATHS = [
+  'src/browser-test-shim.js',
+  'karma-test-shim.js',
+  'karma.conf.js'
+];
+
+const ANGULAR_DIST_PATH = path.resolve(__dirname, '../../../dist');
+const ANGULAR_PACKAGES_PATH = path.resolve(ANGULAR_DIST_PATH, 'packages-dist');
+const ANGULAR_PACKAGES = [
+  'animations',
+  'common',
+  'compiler',
+  'compiler-cli',
+  'core',
+  'forms',
+  'http',
+  'platform-browser',
+  'platform-browser-dynamic',
+  'platform-server',
+  'router',
+  'upgrade',
+];
+const ANGULAR_TOOLS_PACKAGES_PATH = path.resolve(ANGULAR_DIST_PATH, 'tools', '@angular');
+const ANGULAR_TOOLS_PACKAGES = [
+  'tsc-wrapped'
+];
+
+const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
+
+class ExampleBoilerPlate {
+  /**
+   * Add boilerplate files to all the examples
+   *
+   * @param useLocal if true then overwrite the Angular library files with locally built ones
+   */
+  add(useLocal) {
+    // first install the shared node_modules
+    this.installNodeModules(SHARED_PATH);
+
+    // Replace the Angular packages with those from the dist folder, if necessary
+    if (useLocal) {
+      ANGULAR_PACKAGES.forEach(packageName => this.overridePackage(ANGULAR_PACKAGES_PATH, packageName));
+      ANGULAR_TOOLS_PACKAGES.forEach(packageName => this.overridePackage(ANGULAR_TOOLS_PACKAGES_PATH, packageName));
+    }
+
+    // Get all the examples folders, indicated by those that contain a `example-config.json` file
+    const exampleFolders = this.getFoldersContaining(EXAMPLES_BASE_PATH, EXAMPLE_CONFIG_FILENAME, 'node_modules');
+    exampleFolders.forEach(exampleFolder => {
+
+      // Link the node modules - requires admin access (on Windows) because it adds symlinks
+      const destinationNodeModules = path.resolve(exampleFolder, 'node_modules');
+      fs.ensureSymlinkSync(SHARED_NODE_MODULES_PATH, destinationNodeModules);
+
+      // Copy the boilerplate source files
+      BOILERPLATE_SRC_PATHS.forEach(filePath => this.copyFile(BOILERPLATE_BASE_PATH, exampleFolder, filePath));
+
+      // Copy the boilerplate test files (if the example is configured to do unit testing)
+      const exampleConfig = this.loadJsonFile(path.resolve(exampleFolder, EXAMPLE_CONFIG_FILENAME));
+      if (exampleConfig.unittesting) {
+        BOILERPLATE_TEST_PATHS.forEach(filePath => this.copyFile(TESTING_BASE_PATH, exampleFolder, filePath));
+      }
+    });
+  }
+
+  /**
+   * Remove all the boilerplate files from all the examples
+   */
+  remove() {
+    shelljs.exec('git clean -xdfq', {cwd: EXAMPLES_BASE_PATH});
+  }
+
+  main() {
+    yargs
+      .usage('$0 <cmd> [args]')
+      .command('add [--local]', 'add the boilerplate to each example',
+              { local: { describe: 'Use the locally built Angular libraries, rather than ones from  npm.' } },
+              argv => this.add(argv.local))
+      .command('remove', 'remove the boilerplate from each example', () => this.remove())
+      .demandCommand(1, 'Please supply a command from the list above')
+      .argv;
+  }
+
+  installNodeModules(basePath) {
+    shelljs.exec('yarn', {cwd: basePath});
+  }
+
+  overridePackage(basePath, packageName) {
+    const sourceFolder = path.resolve(basePath, packageName);
+    const destinationFolder = path.resolve(SHARED_NODE_MODULES_PATH, '@angular', packageName);
+    shelljs.rm('-rf', destinationFolder);
+    fs.ensureSymlinkSync(sourceFolder, destinationFolder);
+  }
+
+  getFoldersContaining(basePath, filename, ignore) {
+    const pattern = path.resolve(basePath, '**', filename);
+    const ignorePattern = path.resolve(basePath, '**', ignore, '**');
+    return glob.sync(pattern, { ignore: [ignorePattern] }).map(file => path.dirname(file));
+  }
+
+  copyFile(sourceFolder, destinationFolder, filePath) {
+    const sourcePath = path.resolve(sourceFolder, filePath);
+    const destinationPath = path.resolve(destinationFolder, filePath);
+    fs.copySync(sourcePath, destinationPath, { overwrite: true });
+    fs.chmodSync(destinationPath, 444);
+  }
+
+  loadJsonFile(filePath) {
+    return fs.readJsonSync(filePath, {throws: false}) || {};
+  }
+}
+
+module.exports = new ExampleBoilerPlate();
+
+// If this file was run directly then run the main function,
+if (require.main === module) {
+  module.exports.main();
+}

aio/tools/examples/example-boilerplate.spec.js

@@ -0,0 +1,143 @@
+const exampleBoilerPlate = require('./example-boilerplate');
+const shelljs = require('shelljs');
+const fs = require('fs-extra');
+const glob = require('glob');
+const path = require('canonical-path');
+
+describe('example-boilerplate tool', () => {
+  describe('add', () => {
+    const numberOfBoilerPlateFiles = 8;
+    const numberOfBoilerPlateTestFiles = 3;
+    const exampleFolders = ['a/b', 'c/d'];
+
+    beforeEach(() => {
+      spyOn(exampleBoilerPlate, 'installNodeModules');
+      spyOn(exampleBoilerPlate, 'overridePackage');
+      spyOn(exampleBoilerPlate, 'getFoldersContaining').and.returnValue(exampleFolders);
+      spyOn(fs, 'ensureSymlinkSync');
+      spyOn(exampleBoilerPlate, 'copyFile');
+      spyOn(exampleBoilerPlate, 'loadJsonFile').and.returnValue({});
+    });
+
+    it('should install the node modules', () => {
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.installNodeModules).toHaveBeenCalledWith(path.resolve(__dirname, 'shared'));
+    });
+
+    it('should override the Angular node_modules with the locally built Angular packages if `useLocal` is true', () => {
+      const numberOfAngularPackages = 12;
+      const numberOfAngularToolsPackages = 1;
+      exampleBoilerPlate.add(true);
+      expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledTimes(numberOfAngularPackages + numberOfAngularToolsPackages);
+      // for example
+      expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/packages-dist'), 'core');
+      expect(exampleBoilerPlate.overridePackage).toHaveBeenCalledWith(path.resolve(__dirname, '../../../dist/tools/@angular'), 'tsc-wrapped');
+    });
+
+    it('should process all the example folders', () => {
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.getFoldersContaining).toHaveBeenCalledWith(path.resolve(__dirname, '../../content/examples'), 'example-config.json', 'node_modules');
+    });
+
+    it('should symlink the node_modules', () => {
+      exampleBoilerPlate.add();
+      expect(fs.ensureSymlinkSync).toHaveBeenCalledTimes(exampleFolders.length);
+      expect(fs.ensureSymlinkSync).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/node_modules'), path.resolve('a/b/node_modules'));
+      expect(fs.ensureSymlinkSync).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/node_modules'), path.resolve('c/d/node_modules'));
+    });
+
+    it('should copy all the source boilerplate files', () => {
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(numberOfBoilerPlateFiles * exampleFolders.length);
+      // for example
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate'), 'a/b', 'package.json');
+    });
+
+    it('should try to load the example config file', () => {
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.loadJsonFile).toHaveBeenCalledTimes(exampleFolders.length);
+      expect(exampleBoilerPlate.loadJsonFile).toHaveBeenCalledWith(path.resolve('a/b/example-config.json'));
+      expect(exampleBoilerPlate.loadJsonFile).toHaveBeenCalledWith(path.resolve('c/d/example-config.json'));
+    });
+
+    it('should copy all the test boilerplate files if unit testing is configured', () => {
+      // configure unit testing for example a/b and not c/d
+      exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { unittesting: true } : {});
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes((numberOfBoilerPlateFiles * 2) + numberOfBoilerPlateTestFiles);
+      // for example
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, '../../content/examples/testing'), 'a/b', 'karma.conf.js');
+      expect(exampleBoilerPlate.copyFile).not.toHaveBeenCalledWith(path.resolve(__dirname, '../../content/examples/testing'), 'c/d', 'karma.conf.js');
+    });
+  });
+
+  describe('remove', () => {
+    it('should run `git clean`', () => {
+      spyOn(shelljs, 'exec');
+      exampleBoilerPlate.remove();
+      expect(shelljs.exec).toHaveBeenCalledWith('git clean -xdfq', {cwd: path.resolve(__dirname, '../../content/examples') });
+    });
+  });
+
+  describe('installNodeModules', () => {
+    it('should run `yarn` in the base path', () => {
+      spyOn(shelljs, 'exec');
+      exampleBoilerPlate.installNodeModules('some/base/path');
+      expect(shelljs.exec).toHaveBeenCalledWith('yarn', { cwd: 'some/base/path' });
+    });
+  });
+
+  describe('overridePackage', () => {
+    beforeEach(() => {
+      spyOn(shelljs, 'rm');
+      spyOn(fs, 'ensureSymlinkSync');
+    });
+
+    it('should remove the original package from the shared node_modules folder', () => {
+      exampleBoilerPlate.overridePackage('base/path', 'somePackage');
+      expect(shelljs.rm).toHaveBeenCalledWith('-rf', path.resolve(__dirname, 'shared/node_modules/@angular/somePackage'));
+    });
+
+    it('should symlink the source folder to the shared node_modules folder', () => {
+      exampleBoilerPlate.overridePackage('base/path', 'somePackage');
+      expect(fs.ensureSymlinkSync).toHaveBeenCalledWith(path.resolve('base/path/somePackage'), path.resolve(__dirname, 'shared/node_modules/@angular/somePackage'));
+    });
+  });
+
+  describe('getFoldersContaining', () => {
+    it('should use glob.sync', () => {
+      spyOn(glob, 'sync').and.returnValue(['a/b/config.json', 'c/d/config.json']);
+      const result = exampleBoilerPlate.getFoldersContaining('base/path', 'config.json', 'node_modules');
+      expect(glob.sync).toHaveBeenCalledWith(path.resolve('base/path/**/config.json'), { ignore: [path.resolve('base/path/**/node_modules/**')] });
+      expect(result).toEqual(['a/b', 'c/d']);
+    });
+  });
+
+  describe('copyFile', () => {
+    it('should use copySync and chmodSync', () => {
+      spyOn(fs, 'copySync');
+      spyOn(fs, 'chmodSync');
+      exampleBoilerPlate.copyFile('source/folder', 'destination/folder', 'some/file/path');
+      expect(fs.copySync).toHaveBeenCalledWith(
+        path.resolve('source/folder/some/file/path'),
+        path.resolve('destination/folder/some/file/path'),
+        { overwrite: true });
+      expect(fs.chmodSync).toHaveBeenCalledWith(path.resolve('destination/folder/some/file/path'), 444);
+    });
+  });
+
+  describe('loadJsonFile', () => {
+    it('should use fs.readJsonSync', () => {
+      spyOn(fs, 'readJsonSync').and.returnValue({ some: 'value' });
+      const result = exampleBoilerPlate.loadJsonFile('some/file');
+      expect(fs.readJsonSync).toHaveBeenCalledWith('some/file', {throws: false});
+      expect(result).toEqual({ some: 'value' });
+    });
+
+    it('should return an empty object if readJsonSync fails', () => {
+      spyOn(fs, 'readJsonSync').and.returnValue(null);
+      const result = exampleBoilerPlate.loadJsonFile('some/file');
+      expect(result).toEqual({});
+    });
+  });
+});

aio/tools/examples/run-example-e2e.js

@@ -22,15 +22,24 @@ const IGNORED_EXAMPLES = [
  *   --filter to filter/select _example app subdir names
  *    e.g. --filter=foo  // all example apps with 'foo' in their folder names.
  *
- *    --setup run yarn install, copy boilerplate and update webdriver
+ *  --setup run yarn install, copy boilerplate and update webdriver
  *    e.g. --setup
+ *
+ *  --local to use the locally built Angular packages, rather than versions from npm
+ *    Must be used in conjunction with --setup as this is when the packages are copied.
+ *    e.g. --setup --local
+ *
+ *  --shard to shard the specs into groups to allow you to run them in parallel
+ *    e.g. --shard=0/2 // the even specs: 0, 2, 4, etc
+ *    e.g. --shard=1/2 // the odd specs: 1, 3, 5, etc
+ *    e.g. --shard=1/3 // the second of every three specs: 1, 4, 7, etc
  */
 function runE2e() {
   let promise = Promise.resolve();
   if (argv.setup) {
     // Run setup.
     console.log('runE2e: copy boilerplate');
-    const spawnInfo = spawnExt('yarn', ['boilerplate:add'], { cwd: AIO_PATH });
+    const spawnInfo = spawnExt('yarn', ['boilerplate:add', argv.local ? '-- --local': ''], { cwd: AIO_PATH });
     promise = spawnInfo.promise
       .then(() => {
         console.log('runE2e: update webdriver');
@@ -41,7 +50,7 @@ function runE2e() {
   const outputFile = path.join(AIO_PATH, './protractor-results.txt');
 
   return promise
-    .then(() => findAndRunE2eTests(argv.filter, outputFile))
+    .then(() => findAndRunE2eTests(argv.filter, outputFile, argv.shard))
     .then((status) => {
       reportStatus(status, outputFile);
       if (status.failed.length > 0) {
@@ -55,7 +64,12 @@ function runE2e() {
 
 // Finds all of the *e2e-spec.tests under the examples folder along with the corresponding apps
 // that they should run under. Then run each app/spec collection sequentially.
-function findAndRunE2eTests(filter, outputFile) {
+function findAndRunE2eTests(filter, outputFile, shard) {
+
+  const shardParts = shard ? shard.split('/') : [0,1];
+  const shardModulo = parseInt(shardParts[0], 10);
+  const shardDivider = parseInt(shardParts[1], 10);
+
   // create an output file with header.
   const startTime = new Date().getTime();
   let header = `Doc Sample Protractor Results on ${new Date().toLocaleString()}\n`;
@@ -65,7 +79,9 @@ function findAndRunE2eTests(filter, outputFile) {
   // Run the tests sequentially.
   const status = { passed: [], failed: [] };
   return getE2eSpecPaths(EXAMPLES_PATH, filter)
-    .then(e2eSpecPaths => e2eSpecPaths.reduce((promise, specPath) => {
+    .then(e2eSpecPaths => e2eSpecPaths
+      .filter((paths, index) => index % shardDivider === shardModulo)
+      .reduce((promise, specPath) => {
       return promise.then(() => {
         const examplePath = path.dirname(specPath);
         return runE2eTests(examplePath, outputFile).then((ok) => {

aio/tools/examples/test.js

@@ -0,0 +1,17 @@
+/*
+ * Use this script to run the tests for the doc generation
+ * We cannot use the Jasmine CLI directly because it doesn't seem to
+ * understand the glob and only runs one spec file.
+ *
+ * Equally we cannot use a jasmine.json config file because it doesn't
+ * allow us to set the projectBaseDir, which means that you have to run
+ * jasmine CLI from this directory.
+ *
+ * Using a file like this gives us full control and keeps the package.json
+ * file clean and simple.
+ */
+
+const Jasmine = require('jasmine');
+const jasmine = new Jasmine({ projectBaseDir: __dirname });
+jasmine.loadConfig({ spec_files: ['*.spec.js'] });
+jasmine.execute();

aio/tools/transforms/angular-base-package/post-processors/h1-checker.js

@@ -34,5 +34,5 @@ function getText(h1) {
     (node.properties.ariaHidden === 'true' || node.properties['aria-hidden'] === 'true')
   ));
 
-  return toString(cleaned);
+  return cleaned ? toString(cleaned) : '';
-}
+}