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

Author: wardbell

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
-    // contains a e2e-spec file.
+    // copy certain files from _examples/_protractor dir to each subdir that contains an 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() {
-  return copyExampleBoilerplate()
-    .then(function() {
-      return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log });
-    });
+gulp.task('build-plunkers', ['_copy-example-boilerplate'], 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;
@@ -143,7 +144,7 @@ function Reporter(options) {
   };
 
   this.specStarted = function(spec) {
-    
+
   };
 
   this.specDone = function(spec) {

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('Getting Started E2E Tests', function() {
+describe('Documentation StyleGuide 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');
-    });
-
-    it('should display: '+ expectedMsg, function() {
-      expect(element(by.id('output')).getText()).toEqual(expectedMsg);
-    });
-  }
-  // #enddocregion
-
-  describe('Getting Started in JavaScript', function() {
-    sharedTests('gettingstarted/js/');
+  beforeEach(function () {
+    browser.get('');
   });
 
-  describe('Getting Started in TypeScript', function() {
-    sharedTests('gettingstarted/ts/');
+  it('should display: ' + expectedMsg, function() {
+    expect(element(by.id('output')).getText()).toEqual(expectedMsg);
   });
-
 });

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 = [
-  new ng.ComponentAnnotation({
-    selector: 'my-app'
-  }),
-  new ng.ViewAnnotation({
+app.AppComponent.annotations = [
+  new ng.core.Component({
+    selector: 'my-app',
     template: '<h1 id="output">My First Angular 2 App</h1>'
   })
 ];
 // #enddocregion
-})();
+})(window.app || (window.app = {}));

public/docs/_examples/styleguide/js/example-config.json

@@ -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>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
+    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
+    <script src="node_modules/@angular/core/core.umd.js"></script>
+    <script src="node_modules/@angular/common/common.umd.js"></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/js/index.html

@@ -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.js

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

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

@@ -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)