chore: fix gulp serve-and-sync tasks and many broken example links

The serve-and-sync tasks wait for `_copy-example-boilerplate` to finish
Differentiates app compile, spec compile, and test failures
StyleGuide (for documentators) up-to-date

gulpfile.js

@@ -231,19 +231,33 @@ function runE2eTsTests(appDir, outputFile) {
 }
 
 function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
+  var specFilename = path.resolve(`${appDir}/../e2e-spec.ts`);
   return prepPromise
     .catch(function(){
-      var emsg = `AppDir failed during compile: ${appDir}\n\n`;
+      var emsg = `Application at ${appDir} failed to transpile.\n\n`;
       gutil.log(emsg);
       fs.appendFileSync(outputFile, emsg);
       return Promise.reject(emsg);
     })
     .then(function (data) {
+      var transpileError = false;
+
       // start protractor
-      var specFilename = path.resolve(`${appDir}/../e2e-spec.ts`);
+
       var spawnInfo = spawnExt('npm', [ 'run', 'protractor', '--', 'protractor.config.js',
         `--specs=${specFilename}`, '--params.appDir=' + appDir, '--params.outputFile=' + outputFile], { cwd: EXAMPLES_PROTRACTOR_PATH });
-      return spawnInfo.promise;
+
+      spawnInfo.proc.stderr.on('data', function (data) {
+        transpileError = transpileError || /npm ERR! Exit status 100/.test(data.toString());
+      });
+      return spawnInfo.promise.catch(function(err) {
+        if (transpileError) {
+        var emsg = `${specFilename} failed to transpile.\n\n`;
+        gutil.log(emsg);
+        fs.appendFileSync(outputFile, emsg);
+        }
+        return Promise.reject(emsg);
+      });
     })
     .then(
        function() { return finish(true);},
@@ -373,7 +387,6 @@ gulp.task('_copy-example-boilerplate', copyExampleBoilerplate);
 // copies boilerplate files to locations
 // where an example app is found
 // also copies certain web files (e.g., styles.css) to ~/_examples/**/dart/**/web
-// also copies protractor.config.js file
 function copyExampleBoilerplate() {
   gutil.log('Copying example boilerplate files');
   var sourceFiles = _exampleBoilerplateFiles.map(function(fn) {
@@ -390,8 +403,7 @@ function copyExampleBoilerplate() {
     .then(function() {
       return copyFiles(dartWebSourceFiles, dartExampleWebPaths);
     })
-    // copy files from _examples/_protractor dir to each subdir that
+    // copy certain files from _examples/_protractor dir to each subdir that contains an e2e-spec file.
-    // contains a e2e-spec file.
     .then(function() {
       var protractorSourceFiles =
         _exampleProtractorBoilerplateFiles
@@ -474,11 +486,8 @@ gulp.task('build-js-api-docs', ['_shred-api-examples'], function() {
   return buildApiDocs('js');
 });
 
-gulp.task('build-plunkers', function() {
+gulp.task('build-plunkers', ['_copy-example-boilerplate'], function() {
-  return copyExampleBoilerplate()
-    .then(function() {
   return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log });
-    });
 });
 
 gulp.task('build-dart-cheatsheet', [], function() {
@@ -586,11 +595,11 @@ gulp.task('_harp-compile', function() {
   });
 });
 
-gulp.task('_shred-devguide-examples', ['_shred-clean-devguide'], function() {
+gulp.task('_shred-devguide-examples', ['_shred-clean-devguide', '_copy-example-boilerplate'], function() {
   return docShredder.shred( _devguideShredOptions);
 });
 
-gulp.task('_shred-devguide-shared-jade', ['_shred-clean-devguide-shared-jade'],  function() {
+gulp.task('_shred-devguide-shared-jade', ['_shred-clean-devguide-shared-jade', '_copy-example-boilerplate'],  function() {
   return docShredder.shred( _devguideShredJadeOptions);
 });
 

public/docs/_examples/_protractor/protractor.config.js

@@ -118,6 +118,7 @@ function sendKeys(element, str) {
   // better to create a resolved promise here but ... don't know how with protractor;
   }
 
+// See http://jasmine.github.io/2.1/custom_reporter.html
 function Reporter(options) {
   var _defaultOutputFile = path.resolve(process.cwd(), "../../../../", 'protractor-results.txt');
   options.outputFile = options.outputFile || _defaultOutputFile;

public/docs/_examples/style-guide/ts/06-03/app/shared/index.ts

@@ -1 +1 @@
-export * from './validate.directive';
+export * from './validator.directive';

public/docs/_examples/styleguide/e2e-spec.ts

@@ -1,28 +1,13 @@
 /// <reference path="../_protractor/e2e.d.ts" />
-/*global browser, element, by */
+describe('Documentation StyleGuide E2E Tests', function() {
-describe('Getting Started E2E Tests', function() {
 
-  // #docregion shared
   let expectedMsg = 'My First Angular 2 App';
 
-  // tests shared across languages
-  function sharedTests(basePath: string) {
   beforeEach(function () {
-      browser.get(basePath + 'index.html');
+    browser.get('');
   });
 
-    it('should display: '+ expectedMsg, function() {
+  it('should display: ' + expectedMsg, function() {
     expect(element(by.id('output')).getText()).toEqual(expectedMsg);
   });
-  }
-  // #enddocregion
-
-  describe('Getting Started in JavaScript', function() {
-    sharedTests('gettingstarted/js/');
-  });
-
-  describe('Getting Started in TypeScript', function() {
-    sharedTests('gettingstarted/ts/');
-  });
-
 });

public/docs/_examples/styleguide/js/app.js

@@ -1,9 +1,10 @@
-(function() {
+(function(app) {
+
 // #docregion
 // #docregion class-w-annotations
-var AppComponent = ng
+app.AppComponent =
     // #docregion component
-    .Component({
+    ng.core.Component({
       selector: 'my-app',
     // #enddocregion
     // #docregion view
@@ -19,26 +20,24 @@ var AppComponent = ng
 
 // #docregion bootstrap
 document.addEventListener('DOMContentLoaded', function() {
-  ng.bootstrap(AppComponent);
+  ng.platformBrowserDynamic.bootstrap(app.AppComponent);
 });
 // #enddocregion
 // #enddocregion
 
-})();
+})(window.app || (window.app = {}));
 
 /* Non DSL Approach */
-(function() {
+(function(app) {
 
 // #docregion no-dsl
-function  AppComponent () {}
+app.AppComponent = function  AppComponent () {}
 
-AppComponent.annotations = [
+app.AppComponent.annotations = [
-  new ng.ComponentAnnotation({
+  new ng.core.Component({
-    selector: 'my-app'
+    selector: 'my-app',
-  }),
-  new ng.ViewAnnotation({
     template: '<h1 id="output">My First Angular 2 App</h1>'
   })
 ];
 // #enddocregion
-})();
+})(window.app || (window.app = {}));

public/docs/_examples/styleguide/js/index.html

@@ -1,25 +1,27 @@
 <!-- #docregion -->
-<!DOCTYPE html>
 <html>
+  <head>
     <title>Documentation Style</title>
-    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfill(s) for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
 
-    <script src="systemjs.config.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
-    <script>
+    <script src="node_modules/@angular/core/core.umd.js"></script>
-      System.import('app').catch(function(err){ console.error(err); });
+    <script src="node_modules/@angular/common/common.umd.js"></script>
-    </script>
+    <script src="node_modules/@angular/compiler/compiler.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>
+
+    <script src='app.js'></script>
   </head>
 
   <body>
     <my-app>foo2</my-app>
   </body>
+
 </html>

public/docs/_examples/styleguide/ts/app.js

@@ -1,46 +0,0 @@
-System.register(['@angular/angular2'], function(exports_1, context_1) {
-    "use strict";
-    var __moduleName = context_1 && context_1.id;
-    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    var __metadata = (this && this.__metadata) || function (k, v) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-    };
-    var angular2_1;
-    var AppComponent;
-    return {
-        setters:[
-            function (angular2_1_1) {
-                angular2_1 = angular2_1_1;
-            }],
-        execute: function() {
-            // #enddocregion
-            // #docregion class-w-annotations
-            AppComponent = (function () {
-                function AppComponent() {
-                }
-                AppComponent = __decorate([
-                    angular2_1.Component({
-                        selector: 'my-app'
-                    }),
-                    angular2_1.View({
-                        template: '<h1 id="output">My First Angular 2 App</h1>'
-                    }), 
-                    __metadata('design:paramtypes', [])
-                ], AppComponent);
-                return AppComponent;
-            }());
-            // #enddocregion
-            // #enddocregion
-            // #docregion bootstrap
-            angular2_1.bootstrap(AppComponent);
-        }
-    }
-});
-// #enddocregion
-// #enddocregion 
-//# sourceMappingURL=app.js.map

public/docs/_examples/styleguide/ts/app.ts

@@ -1,21 +0,0 @@
-// #docregion
-// #docregion import
-import { Component } from '@angular/core';
-import { bootstrap } from '@angular/platform-browser-dynamic';
-
-// #enddocregion
-
-// #docregion class-w-annotations
-@Component({
-  selector: 'my-app',
-  template: '<h1 id="output">My First Angular 2 App</h1>'
-})
-// #docregion class
-class AppComponent { }
-// #enddocregion
-// #enddocregion
-
-// #docregion bootstrap
-bootstrap(AppComponent);
-// #enddocregion
-// #enddocregion

public/docs/_examples/styleguide/ts/app/app.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+@Component({
+  selector: 'my-app',
+  template: '<h1 id="output">My First Angular 2 App</h1>'
+})
+export class AppComponent { }
+

public/docs/_examples/styleguide/ts/app/main.ts

@@ -0,0 +1,5 @@
+import { bootstrap }    from '@angular/platform-browser-dynamic';
+
+import { AppComponent } from './app.component';
+
+bootstrap(AppComponent);

public/docs/_examples/styleguide/ts/dummy.spec.js

@@ -1,9 +0,0 @@
-describe("Jasmine sample test", function () {
-
-	it("1+1 should be 2", function () {
-
-		var result = 1 + 1;
-
-		expect(result).toBe(2);
-	});
-});

public/docs/ts/latest/cookbook/component-communication.jade

@@ -60,7 +60,7 @@ figure.image-display
   
   E2E test that all children were instantiated and displayed as expected:
   
-+makeExample('cb-component-communication/e2e-spec.js', 'parent-to-child')
++makeExample('cb-component-communication/e2e-spec.ts', 'parent-to-child')
 
 :marked
   [Back to top](#top)
@@ -90,7 +90,7 @@ figure.image-display
 
   E2E tests of input property setter with empty and non-empty names:
   
-+makeExample('cb-component-communication/e2e-spec.js', 'parent-to-child-setter')
++makeExample('cb-component-communication/e2e-spec.ts', 'parent-to-child-setter')
 
 :marked
   [Back to top](#top)
@@ -128,7 +128,7 @@ figure.image-display
   Test that ***both*** input properties are set initially and that button clicks trigger 
   the expected `ngOnChanges` calls and values:
   
-+makeExample('cb-component-communication/e2e-spec.js', 'parent-to-child-onchanges')
++makeExample('cb-component-communication/e2e-spec.ts', 'parent-to-child-onchanges')
 
 :marked
   [Back to top](#top)
@@ -167,7 +167,7 @@ figure.image-display
   
   Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters:
   
-+makeExample('cb-component-communication/e2e-spec.js', 'child-to-parent')
++makeExample('cb-component-communication/e2e-spec.ts', 'child-to-parent')
 
 :marked
   [Back to top](#top)
@@ -217,7 +217,7 @@ a(id="countdown-tests")
   match the seconds displayed in the child's status message.
   Test also that clicking the *Stop* button pauses the countdown timer:
   
-+makeExample('cb-component-communication/e2e-spec.js', 'countdown-timer-tests')
++makeExample('cb-component-communication/e2e-spec.ts', 'countdown-timer-tests')
 
 :marked
   [Back to top](#top)
@@ -327,7 +327,7 @@ figure.image-display
   Tests click buttons of both the parent `MissionControlComponent` and the `AstronautComponent` children
   and verify that the *History* meets expectations:
   
-+makeExample('cb-component-communication/e2e-spec.js', 'bidirectional-service')
++makeExample('cb-component-communication/e2e-spec.ts', 'bidirectional-service')
 
 :marked
   [Back to top](#top)

public/docs/ts/latest/guide/style-guide.jade

@@ -1721,10 +1721,10 @@ a(href="#toc") Back to top
   :marked
     **Why?** The metadata declaration attached to the directive is shorter and thus more readable.
 
-+makeExample('style-guide/ts/06-03/app/shared/validate.directive.avoid.ts', 'example', 'app/shared/validate.directive.ts')(avoid=1)
++makeExample('style-guide/ts/06-03/app/shared/validator.directive.avoid.ts', 'example', 'app/shared/validator.directive.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/06-03/app/shared/validate.directive.ts', 'example', 'app/shared/validate.directive.ts')
++makeExample('style-guide/ts/06-03/app/shared/validator.directive.ts', 'example', 'app/shared/validator.directive.ts')
 :marked
 
 a(href="#toc") Back to top

public/docs/ts/latest/guide/upgrade.jade

@@ -1564,12 +1564,12 @@ code-example(format="").
   that use WebDriver's generic URL APIs instead. The first of these is
   the redirection spec:
 
-+makeExample('upgrade-phonecat-3-final/e2e-spec.js', 'redirect', 'e2e-tests/scenarios.js')
++makeExample('upgrade-phonecat-3-final/e2e-spec.ts', 'redirect', 'e2e-tests/scenarios.ts')
 
 :marked
   And the second is the phone links spec:
 
-+makeExample('upgrade-phonecat-3-final/e2e-spec.js', 'links', 'e2e-tests/scenarios.js')
++makeExample('upgrade-phonecat-3-final/e2e-spec.ts', 'links', 'e2e-tests/scenarios.ts')