docs(upgrade): Use NgUpgrade static

.gitignore

@@ -22,6 +22,7 @@ public/docs/xref-*.*
 _zip-output
 www*
 npm-debug*.log*
+**/debug.log
 *.plnkr.html
 plnkr.html
 *.eplnkr.html

.travis.yml

@@ -10,7 +10,7 @@ env:
     - DBUS_SESSION_BUS_ADDRESS=/dev/null
     - DISPLAY=:99.0
     - CHROME_BIN=chromium-browser
-    - LATEST_RELEASE=2.1.1
+    - LATEST_RELEASE=2.2.0
     - TASK_FLAGS="--dgeni-log=warn"
   matrix:
     - TASK=lint

gulpfile.js

@@ -247,15 +247,16 @@ function findAndRunE2eTests(filter, outputFile) {
    e2eSpecPaths.forEach(function(specPath) {
     // get all of the examples under each dir where a pcFilename is found
     localExamplePaths = getExamplePaths(specPath, true);
-    // Filter by language
-    localExamplePaths = localExamplePaths.filter(function (fn) {
-      return fn.match('/'+lang+'$') != null;
-    });
+    // Filter by example name
     if (filter) {
       localExamplePaths = localExamplePaths.filter(function (fn) {
         return fn.match(filter) != null;
       })
     }
+    // Filter by language, also supports variations like js-es6
+    localExamplePaths = localExamplePaths.filter(function (fn) {
+      return fn.match('/'+lang+'(?:-[^/]*)?$') != null;
+    });
     localExamplePaths.forEach(function(examplePath) {
       examplePaths.push(examplePath);
     })
@@ -754,7 +755,7 @@ gulp.task('check-deploy', ['firebase-use-proj-check', 'build-docs'], () => {
   }).then(function(shouldDeploy) {
     if (shouldDeploy) {
       gutil.log('deploying...');
-      return execPromise(`firebase deploy -p ${WWW}`);
+      return execPromise('firebase deploy');
     } else {
       return ['Not deploying'];
     }
@@ -1270,7 +1271,7 @@ function apiExamplesWatch(postShredAction) {
 }
 
 function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
-  var watchPattern = focus ? '**/{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
+  var watchPattern = focus ? '{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
   var includePattern = path.join(shredOptions.examplesDir, watchPattern);
   // removed this version because gulp.watch has the same glob issue that dgeni has.
   // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');

harp.json

@@ -29,7 +29,7 @@
         "picture": "/resources/images/bios/naomi.jpg",
         "twitter": "naomitraveller",
         "website": "http://google.com/+NaomiBlack",
-        "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She leads Angular Material and AngularDart, and acts as webmaster for angular.io. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
+        "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She leads Angular's global programs (including localization), supports Angular's internal Google users, and acts as webmaster for angular.io and angular.cn. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
         "type": "Lead"
       },
 
@@ -38,7 +38,7 @@
         "picture": "/resources/images/bios/brad-green.jpg",
         "twitter": "bradlygreen",
         "website": "https://plus.google.com/+BradGreen",
-        "bio": "Brad Green works at Google as an engineering director.  Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad lives in Mountain View, CA with his wife and two children.",
+        "bio": "Brad Green works at Google as an engineering director. Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad enjoys throwing dinner parties with his wife Heather and putting on plays with his children.",
         "type": "Lead"
       },
 
@@ -47,7 +47,7 @@
         "picture": "/resources/images/bios/juleskremer.jpg",
         "twitter": "jules_kremer",
         "website": "https://plus.google.com/+JulesKremer",
-        "bio": "Jules is a TPM on the Angular team.  When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.",
+        "bio": "Jules is Head of Angular Developer Relations at Google.  When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.",
         "type": "Lead"
       },
 

public/_includes/_footer.jade

@@ -20,7 +20,7 @@ div(class="main-footer" data-swiftype-index="false")
         // TODO: (ericjim) make a libraries page to showcase all angular libraries
         //li <a href="/libraries.html">Libraries</a>
         li <a href="/about/">About</a>
-        li <a href="/resources/">Books & Training</a>
+        li <a href="/resources/#Education">Books & Training</a>
         li <a href="/resources/">Tools & Libraries</a>
         li <a href="/resources/">Community</a>
         li <a href="/presskit.html">Press Kit</a>

public/docs/_examples/.gitignore

@@ -11,10 +11,12 @@ wallaby.js
 
 _test-output
 **/ts/**/*.js
+**/js-es6*/**/*.js
 **/ts-snippets/**/*.js
 *.d.ts
 
 !**/*e2e-spec.js
 !systemjs.config.1.js
+!**/systemjs.config.extras.js
 !_boilerplate/*
 _boilerplate/a2docs.css

public/docs/_examples/_boilerplate/package.json

@@ -18,6 +18,7 @@
     "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
     "build:cli": "ng build",
     "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "build:babel": "babel app -d app --extensions \".es6\" --source-maps",
     "copy-dist-files": "node ./copy-dist-files.js",
     "i18n": "ng-xi18n"
   },

public/docs/_examples/_boilerplate/systemjs.config.js

@@ -23,6 +23,7 @@
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // other libraries
       'rxjs':                      'npm:rxjs',

public/docs/_examples/_boilerplate/systemjs.config.web.build.js

@@ -50,6 +50,7 @@
       '@angular/router': 'ng:router-builds/master/bundles/router.umd.js',
       '@angular/forms': 'ng:forms-builds/master/bundles/forms.umd.js',
       '@angular/upgrade': 'ng:upgrade-builds/master/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // angular testing umd bundles (overwrite the shim mappings)
       '@angular/core/testing': 'ng:core-builds/master/bundles/core-testing.umd.js',

public/docs/_examples/_boilerplate/systemjs.config.web.js

@@ -47,6 +47,7 @@
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // other libraries
       'rxjs':                      'npm:rxjs',

public/docs/_examples/cb-ts-to-js/e2e-spec.ts

@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
@@ -9,7 +9,7 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should display the basic component example', function () {
-    testTag('hero-view', 'Hero: Windstorm');
+    testTag('hero-view', 'Hero Detail: Windstorm');
   });
 
   it('should display the component example with lifecycle methods', function () {
@@ -36,7 +36,7 @@ describe('TypeScript to Javascript tests', function () {
 
   it('should support component with inputs and outputs', function () {
     let app = element(by.css('hero-io'));
-    let confirmComponent = app.element(by.css('my-confirm'));
+    let confirmComponent = app.element(by.css('app-confirm'));
 
     confirmComponent.element(by.buttonText('OK')).click();
     expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
@@ -46,11 +46,11 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should support host bindings and host listeners', function() {
-    let app = element(by.css('heroes-bindings'));
+    let app = element(by.css('hero-host'));
     let h1 = app.element(by.css('h1'));
 
     expect(app.getAttribute('class')).toBe('heading');
-    expect(app.getAttribute('title')).toBe('Tooltip content');
+    expect(app.getAttribute('title')).toContain('Tooltip');
 
     h1.click();
     expect(h1.getAttribute('class')).toBe('active');
@@ -61,12 +61,12 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should support content and view queries', function() {
-    let app = element(by.css('heroes-queries'));
-    let windstorm = app.element(by.css('a-hero:first-child'));
+    let app = element(by.css('hero-queries'));
+    let windstorm = app.element(by.css('view-child:first-child'));
 
-    app.element(by.buttonText('Activate')).click();
+    app.element(by.css('button')).click();
     expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
-    expect(windstorm.element(by.css('active-label')).getText()).toBe('Active');
+    expect(windstorm.element(by.css('content-child')).getText()).toBe('Active');
   });
 
   function testTag(selector: string, expectedText: string) {

public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "angular2"
+  ]
+}

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: 'app.component.html',
+  styles: [
+    // See hero-di-inject-additional.component
+    'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
+    '.heading {font-style: italic}'
+  ]
+})
+export class AppComponent {
+  title = 'ES6 JavaScript with Decorators';
+}

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html

@@ -0,0 +1,31 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Decorators</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<hero-host-meta></hero-host-meta>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6

@@ -0,0 +1,55 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroHostMetaComponent } from './hero-host-meta.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    ConfirmComponent,
+    HeroComponent,
+    HeroDIComponent,
+    HeroDIInjectComponent,
+    HeroDIInjectAdditionalComponent,
+    HeroHostComponent, HeroHostMetaComponent,
+    HeroIOComponent,
+    HeroLifecycleComponent,
+    HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+    HeroTitleComponent
+  ],
+  providers: [
+    DataService,
+    { provide: 'heroName', useValue: 'Windstorm' }
+  ],
+  bootstrap: [ AppComponent ],
+
+  // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+})
+export class AppModule { }
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion
+@Component({
+  moduleId: module.id,
+  selector: 'app-confirm',
+  templateUrl: 'confirm.component.html'
+})
+export class ConfirmComponent {
+  @Input() okMsg = '';
+  @Input('cancelMsg') notOkMsg = '';
+  @Output() ok = new EventEmitter();
+  @Output('cancel') notOk = new EventEmitter();
+
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+// #enddocregion

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html

@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class DataService {
+  constructor() { }
+
+  getHeroName() {
+    return 'Windstorm';
+  }
+}

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-di-inject-additional',
+  template: `<hero-title title="Tour of Heroes"></hero-title>`
+})
+export class HeroComponent { }

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6

@@ -0,0 +1,13 @@
+import { Component, Inject } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-di-inject',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  constructor(@Inject('heroName') name) {
+    this.name = name;
+  }
+}
+// #enddocregion

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6

@@ -0,0 +1,15 @@
+import { Component }   from '@angular/core';
+import { DataService } from './data.service';
+
+// #docregion
+@Component({
+  selector: 'hero-di',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  name = '';
+  constructor(dataService: DataService) {
+    this.name = dataService.getHeroName();
+  }
+}
+// #enddocregion