chore(playground): clang-format

gulpfile.js

@@ -12,7 +12,7 @@ const os = require('os');
 
 const srcsToFmt =
     ['tools/**/*.ts', 'modules/@angular/**/*.ts', '!tools/public_api_guard/**/*.d.ts',
-    'modules/benchpress/**/*.ts'];
+    'modules/benchpress/**/*.ts', 'modules/playground/**/*.ts'];
 
 gulp.task('format:enforce', () => {
   const format = require('gulp-clang-format');

modules/playground/e2e_test/hash_routing/hash_location_spec.ts

@@ -43,9 +43,9 @@ describe('hash routing example app', function() {
     element(by.css('#goodbye-link-blank')).click();
     expect(browser.driver.getCurrentUrl()).not.toContain('#/bye');
     browser.getAllWindowHandles().then(function(windows) {
-      browser.switchTo()
+      browser.switchTo().window(windows[1]).then(function() {
-          .window(windows[1])
+        expect(browser.driver.getCurrentUrl()).toContain('#/bye');
-          .then(function() { expect(browser.driver.getCurrentUrl()).toContain("#/bye"); });
+      });
     });
   });
 });

modules/playground/e2e_test/hello_world/hello_world_spec.ts

@@ -32,11 +32,14 @@ describe('hello world', function() {
 });
 
 function getComponentText(selector: any /** TODO #9100 */, innerSelector: any /** TODO #9100 */) {
-  return browser.executeScript('return document.querySelector("' + selector + '").querySelector("' +
+  return browser.executeScript(
-                               innerSelector + '").textContent');
+      'return document.querySelector("' + selector + '").querySelector("' + innerSelector +
+      '").textContent');
 }
 
-function clickComponentButton(selector: any /** TODO #9100 */, innerSelector: any /** TODO #9100 */) {
+function clickComponentButton(
-  return browser.executeScript('return document.querySelector("' + selector + '").querySelector("' +
+    selector: any /** TODO #9100 */, innerSelector: any /** TODO #9100 */) {
-                               innerSelector + '").click()');
+  return browser.executeScript(
+      'return document.querySelector("' + selector + '").querySelector("' + innerSelector +
+      '").click()');
 }

modules/playground/e2e_test/http/http_spec.ts

@@ -23,6 +23,7 @@ describe('http', function() {
 });
 
 function getComponentText(selector: any /** TODO #9100 */, innerSelector: any /** TODO #9100 */) {
-  return browser.executeScript('return document.querySelector("' + selector + '").querySelector("' +
+  return browser.executeScript(
-                               innerSelector + '").textContent.trim()');
+      'return document.querySelector("' + selector + '").querySelector("' + innerSelector +
+      '").textContent.trim()');
 }

modules/playground/e2e_test/jsonp/jsonp_spec.ts

@@ -23,6 +23,7 @@ describe('jsonp', function() {
 });
 
 function getComponentText(selector: any /** TODO #9100 */, innerSelector: any /** TODO #9100 */) {
-  return browser.executeScript('return document.querySelector("' + selector + '").querySelector("' +
+  return browser.executeScript(
-                               innerSelector + '").textContent.trim()');
+      'return document.querySelector("' + selector + '").querySelector("' + innerSelector +
+      '").textContent.trim()');
 }

modules/playground/e2e_test/routing_deprecated/routing_deprecated_spec.ts

@@ -70,8 +70,8 @@ describe('deprecated routing inbox-app', () => {
       waitForElement('#item-10');
       element(by.css('#item-10')).click();
       waitForElement('#record-id');
-      var recordId = element(by.css("#record-id"));
+      var recordId = element(by.css('#record-id'));
-      browser.wait(protractor.until.elementTextIs(recordId, "ID: 10"), 5000);
+      browser.wait(protractor.until.elementTextIs(recordId, 'ID: 10'), 5000);
       expect(recordId.getText()).toEqual('ID: 10');
     });
 
@@ -93,7 +93,7 @@ describe('deprecated routing inbox-app', () => {
          element(by.css('.sort-button')).click();
          expect(browser.getCurrentUrl()).toMatch(/\/#\?sort=date$/);
          waitForElement('.inbox-item-record');
-         expect(element(by.css(".inbox-item-record > a")).getAttribute("id")).toEqual("item-137");
+         expect(element(by.css('.inbox-item-record > a')).getAttribute('id')).toEqual('item-137');
        });
   })
 });

modules/playground/e2e_test/sourcemap/sourcemap_spec.ts

@@ -38,19 +38,19 @@ describe('sourcemaps', function() {
 
 
       const content =
-          fs.readFileSync('dist/all/playground/src/sourcemap/index.js').toString("utf8");
+          fs.readFileSync('dist/all/playground/src/sourcemap/index.js').toString('utf8');
-      const marker = "//# sourceMappingURL=data:application/json;base64,";
+      const marker = '//# sourceMappingURL=data:application/json;base64,';
       const index = content.indexOf(marker);
       const sourceMapData =
-          new Buffer(content.substring(index + marker.length), 'base64').toString("utf8");
+          new Buffer(content.substring(index + marker.length), 'base64').toString('utf8');
 
       var decoder = new sourceMap.SourceMapConsumer(JSON.parse(sourceMapData));
 
       var originalPosition = decoder.originalPositionFor({line: errorLine, column: errorColumn});
 
-      var sourceCodeLines =
+      var sourceCodeLines = fs.readFileSync('modules/playground/src/sourcemap/index.ts', {
-          fs.readFileSync('modules/playground/src/sourcemap/index.ts', {encoding: 'UTF-8'})
+                                encoding: 'UTF-8'
-              .split('\n');
+                              }).split('\n');
       expect(sourceCodeLines[originalPosition.line - 1])
           .toMatch(/throw new BaseException\(\'Sourcemap test\'\)/);
     });

modules/playground/e2e_test/upgrade/upgrade_spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {verifyNoBrowserErrors} from "e2e_util/e2e_util";
+import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 
 // TODO(i): reenable once we are using a version of protractor containing the
 // change in https://github.com/angular/protractor/pull/3403

modules/playground/e2e_test/web_workers/input/input_spec.ts

@@ -56,16 +56,17 @@ describe('WebWorkers Input', function() {
   });
 
   function waitForBootstrap() {
-    browser
+    browser.wait(protractor.until.elementLocated(by.css(selector + ' h2')), 5000)
-      .wait(protractor.until.elementLocated(by.css(selector + ' h2')), 5000)
+        .then(
-      .then(_ => {
+            _ => {
-        let elem = element(by.css(selector + ' h2'));
+              let elem = element(by.css(selector + ' h2'));
-        browser.wait(protractor.until.elementTextIs(elem, 'Input App'), 5000);
+              browser.wait(protractor.until.elementTextIs(elem, 'Input App'), 5000);
-      }, _ => {
+            },
-        // jasmine will timeout if this gets called too many times
+            _ => {
-        console.log('>> unexpected timeout -> browser.refresh()');
+              // jasmine will timeout if this gets called too many times
-        browser.refresh();
+              console.log('>> unexpected timeout -> browser.refresh()');
-        waitForBootstrap();
+              browser.refresh();
-      });
+              waitForBootstrap();
+            });
   }
 });

modules/playground/e2e_test/web_workers/kitchen_sink/kitchen_sink_spec.ts

@@ -13,7 +13,7 @@ describe('WebWorkers Kitchen Sink', function() {
     verifyNoBrowserErrors();
     browser.ignoreSynchronization = false;
   });
-  var selector = "hello-app .greeting";
+  var selector = 'hello-app .greeting';
   var URL = 'all/playground/src/web_workers/kitchen_sink/index.html';
 
   it('should greet', () => {
@@ -24,7 +24,7 @@ describe('WebWorkers Kitchen Sink', function() {
     browser.wait(protractor.until.elementLocated(by.css(selector)), 15000);
     var elem = element(by.css(selector));
     browser.wait(protractor.until.elementTextIs(elem, 'hello world!'), 5000);
-    expect(elem.getText()).toEqual("hello world!");
+    expect(elem.getText()).toEqual('hello world!');
 
   });
 
@@ -37,21 +37,21 @@ describe('WebWorkers Kitchen Sink', function() {
     browser.wait(protractor.until.elementLocated(by.css(changeButtonSelector)), 15000);
     element(by.css(changeButtonSelector)).click();
     var elem = element(by.css(selector));
-    browser.wait(protractor.until.elementTextIs(elem, "howdy world!"), 5000);
+    browser.wait(protractor.until.elementTextIs(elem, 'howdy world!'), 5000);
-    expect(elem.getText()).toEqual("howdy world!");
+    expect(elem.getText()).toEqual('howdy world!');
   });
 
-  it("should display correct key names", () => {
+  it('should display correct key names', () => {
     // This test can't wait for Angular 2 as Testability is not available when using WebWorker
     browser.ignoreSynchronization = true;
     browser.get(URL);
-    browser.wait(protractor.until.elementLocated(by.css(".sample-area")), 15000);
+    browser.wait(protractor.until.elementLocated(by.css('.sample-area')), 15000);
 
-    var area = element.all(by.css(".sample-area")).first();
+    var area = element.all(by.css('.sample-area')).first();
     expect(area.getText()).toEqual('(none)');
 
     area.sendKeys('u');
-    browser.wait(protractor.until.elementTextIs(area, "U"), 5000);
+    browser.wait(protractor.until.elementTextIs(area, 'U'), 5000);
-    expect(area.getText()).toEqual("U");
+    expect(area.getText()).toEqual('U');
   });
 });

modules/playground/e2e_test/web_workers/message_broker/message_broker_spec.ts

@@ -10,37 +10,37 @@ import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 
 var URL = 'all/playground/src/web_workers/message_broker/index.html';
 
-describe("MessageBroker", function() {
+describe('MessageBroker', function() {
 
   afterEach(() => {
     verifyNoBrowserErrors();
     browser.ignoreSynchronization = false;
   });
 
-  it("should bootstrap", () => {
+  it('should bootstrap', () => {
     // This test can't wait for Angular 2 as Testability is not available when using WebWorker
     browser.ignoreSynchronization = true;
     browser.get(URL);
     waitForBootstrap();
-    expect(element(by.css("app h1")).getText()).toEqual("WebWorker MessageBroker Test");
+    expect(element(by.css('app h1')).getText()).toEqual('WebWorker MessageBroker Test');
   });
 
-  it("should echo messages", () => {
+  it('should echo messages', () => {
-    const VALUE = "Hi There";
+    const VALUE = 'Hi There';
     // This test can't wait for Angular 2 as Testability is not available when using WebWorker
     browser.ignoreSynchronization = true;
     browser.get(URL);
     waitForBootstrap();
 
-    var input = element.all(by.css("#echo_input")).first();
+    var input = element.all(by.css('#echo_input')).first();
     input.sendKeys(VALUE);
-    element(by.css("#send_echo")).click();
+    element(by.css('#send_echo')).click();
-    var area = element(by.css("#echo_result"));
+    var area = element(by.css('#echo_result'));
     browser.wait(protractor.until.elementTextIs(area, VALUE), 5000);
     expect(area.getText()).toEqual(VALUE);
   });
 });
 
 function waitForBootstrap(): void {
-  browser.wait(protractor.until.elementLocated(by.css("app h1")), 15000);
+  browser.wait(protractor.until.elementLocated(by.css('app h1')), 15000);
 }

modules/playground/e2e_test/web_workers/router/router_spec.ts

@@ -8,7 +8,7 @@
 
 import {verifyNoBrowserErrors} from 'e2e_util/e2e_util';
 
-describe("WebWorker Router", () => {
+describe('WebWorker Router', () => {
   beforeEach(() => {
     // This test can't wait for Angular 2 as Testability is not available when using WebWorker
     browser.ignoreSynchronization = true;
@@ -20,43 +20,43 @@ describe("WebWorker Router", () => {
     browser.ignoreSynchronization = false;
   });
 
-  let contentSelector = "app main h1";
+  let contentSelector = 'app main h1';
-  let navSelector = "app nav ul";
+  let navSelector = 'app nav ul';
   var baseUrl = 'all/playground/src/web_workers/router/index.html';
 
-  it("should route on click", () => {
+  it('should route on click', () => {
     browser.get(baseUrl);
 
     waitForElement(contentSelector);
     var content = element(by.css(contentSelector));
-    expect(content.getText()).toEqual("Start");
+    expect(content.getText()).toEqual('Start');
 
-    let aboutBtn = element(by.css(navSelector + " .about"));
+    let aboutBtn = element(by.css(navSelector + ' .about'));
     aboutBtn.click();
     waitForUrl(/\/about/);
     waitForElement(contentSelector);
-    waitForElementText(contentSelector, "About");
+    waitForElementText(contentSelector, 'About');
     content = element(by.css(contentSelector));
-    expect(content.getText()).toEqual("About");
+    expect(content.getText()).toEqual('About');
     expect(browser.getCurrentUrl()).toMatch(/\/about/);
 
-    let contactBtn = element(by.css(navSelector + " .contact"));
+    let contactBtn = element(by.css(navSelector + ' .contact'));
     contactBtn.click();
     waitForUrl(/\/contact/);
     waitForElement(contentSelector);
-    waitForElementText(contentSelector, "Contact");
+    waitForElementText(contentSelector, 'Contact');
     content = element(by.css(contentSelector));
-    expect(content.getText()).toEqual("Contact");
+    expect(content.getText()).toEqual('Contact');
     expect(browser.getCurrentUrl()).toMatch(/\/contact/);
   });
 
-  it("should load the correct route from the URL", () => {
+  it('should load the correct route from the URL', () => {
-    browser.get(baseUrl + "#/about");
+    browser.get(baseUrl + '#/about');
 
     waitForElement(contentSelector);
-    waitForElementText(contentSelector, "About");
+    waitForElementText(contentSelector, 'About');
     let content = element(by.css(contentSelector));
-    expect(content.getText()).toEqual("About");
+    expect(content.getText()).toEqual('About');
   });
 
   function waitForElement(selector: string): void {

modules/playground/e2e_test/web_workers/todo/todo_spec.ts

@@ -22,11 +22,11 @@ describe('WebWorkers Todo', function() {
     browser.get(URL);
 
     waitForBootstrap();
-    expect(element(by.css("#todoapp header")).getText()).toEqual("todos");
+    expect(element(by.css('#todoapp header')).getText()).toEqual('todos');
   });
 
 });
 
 function waitForBootstrap(): void {
-  browser.wait(protractor.until.elementLocated(by.css("todo-app #todoapp")), 15000);
+  browser.wait(protractor.until.elementLocated(by.css('todo-app #todoapp')), 15000);
 }

modules/playground/src/animate/app/animate-app.ts

@@ -6,21 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
+import {Component, animate, group, keyframes, sequence, state, style, transition, trigger} from '@angular/core';
-  Component,
-  trigger,
-  state,
-  transition,
-  keyframes,
-  group,
-  animate,
-  style,
-  sequence
-} from '@angular/core';
 
 @Component({
   host: {
-    '[@backgroundAnimation]': "bgStatus"
+    '[@backgroundAnimation]': 'bgStatus'
   },
   selector: 'animate-app',
   styleUrls: ['css/animate-app.css'],
@@ -39,31 +29,31 @@ import {
     </div>
   `,
   animations: [
-    trigger("backgroundAnimation", [
+    trigger('backgroundAnimation', [
-      state("focus", style({ "background-color":"white" })),
+      state('focus', style({ 'background-color':'white' })),
-      state("blur", style({ "background-color":"grey" })),
+      state('blur', style({ 'background-color':'grey' })),
-      transition("* => *", [
+      transition('* => *', [
         animate(500)
       ])
     ]),
-    trigger("boxAnimation", [
+    trigger('boxAnimation', [
-      state("*", style({ "height": "*", "background-color": "#dddddd", "color":"black" })),
+      state('*', style({ 'height': '*', 'background-color': '#dddddd', 'color':'black' })),
-      state("void, hidden", style({ "height": 0, "opacity": 0 })),
+      state('void, hidden', style({ 'height': 0, 'opacity': 0 })),
-      state("start", style({ "background-color": "red", "height": "*" })),
+      state('start', style({ 'background-color': 'red', 'height': '*' })),
-      state("active", style({ "background-color": "orange", "color": "white", "font-size":"100px" })),
+      state('active', style({ 'background-color': 'orange', 'color': 'white', 'font-size':'100px' })),
 
-      transition("active <=> start", [
+      transition('active <=> start', [
-        animate(500, style({ "transform": "scale(2)" })),
+        animate(500, style({ 'transform': 'scale(2)' })),
         animate(500)
       ]),
 
-      transition("* => *", [
+      transition('* => *', [
-        animate(1000, style({ "opacity": 1, "height": 300 })),
+        animate(1000, style({ 'opacity': 1, 'height': 300 })),
-        animate(1000, style({ "background-color": "blue" })),
+        animate(1000, style({ 'background-color': 'blue' })),
         animate(1000, keyframes([
-          style({ "background-color": "blue", "color": "black", "offset": 0.2 }),
+          style({ 'background-color': 'blue', 'color': 'black', 'offset': 0.2 }),
-          style({ "background-color": "brown", "color": "black", "offset": 0.5 }),
+          style({ 'background-color': 'brown', 'color': 'black', 'offset': 0.5 }),
-          style({ "background-color": "black", "color": "white", "offset": 1 })
+          style({ 'background-color': 'black', 'color': 'white', 'offset': 1 })
         ])),
         animate(2000)
       ])
@@ -84,7 +74,7 @@ export class AnimateApp {
   }
 
   reorderAndRemove() {
-    this.items = this.items.sort((a: any,b: any) => Math.random() - 0.5);
+    this.items = this.items.sort((a: any, b: any) => Math.random() - 0.5);
     this.items.splice(Math.floor(Math.random() * this.items.length), 1);
     this.items.splice(Math.floor(Math.random() * this.items.length), 1);
     this.items[Math.floor(Math.random() * this.items.length)] = 99;
@@ -96,12 +86,7 @@ export class AnimateApp {
     if (s == 'void') {
       this.items = [];
     } else {
-      this.items = [
+      this.items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
-        1,2,3,4,5,
-        6,7,8,9,10,
-        11,12,13,14,15,
-        16,17,18,19,20
-      ];
     }
   }
 }

modules/playground/src/animate/index.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {AnimateApp} from './app/animate-app';
 import {bootstrap} from '@angular/platform-browser-dynamic';
 
+import {AnimateApp} from './app/animate-app';
+
 export function main() {
   bootstrap(AnimateApp);
 }

modules/playground/src/async/index.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
-import {Component} from '@angular/core';
 import {NgIf} from '@angular/common';
+import {Component} from '@angular/core';
 import {TimerWrapper} from '@angular/core/src/facade/async';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 
 @Component({
   selector: 'async-app',

modules/playground/src/bootstrap.ts

@@ -29,11 +29,14 @@ declare var System: any;
           '@angular/core': '/packages-dist/core/bundles/core.umd.js',
           '@angular/common': '/packages-dist/common/bundles/common.umd.js',
           '@angular/compiler': '/packages-dist/compiler/bundles/compiler.umd.js',
-          '@angular/platform-browser': '/packages-dist/platform-browser/bundles/platform-browser.umd.js',
+          '@angular/platform-browser':
-          '@angular/platform-browser-dynamic': '/packages-dist/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
+              '/packages-dist/platform-browser/bundles/platform-browser.umd.js',
+          '@angular/platform-browser-dynamic':
+              '/packages-dist/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
           '@angular/http': '/packages-dist/http/bundles/http.umd.js',
           '@angular/upgrade': '/packages-dist/upgrade/bundles/upgrade.umd.js',
-          '@angular/router-deprecated': '/packages-dist/router-deprecated/bundles/router-deprecated.umd.js',
+          '@angular/router-deprecated':
+              '/packages-dist/router-deprecated/bundles/router-deprecated.umd.js',
           '@angular/router': '/packages-dist/router/bundles/router.umd.js',
           '@angular/core/src/facade': '/all/@angular/core/src/facade',
           'rxjs': location.pathname.replace(/\w+\.html$/i, '') + 'rxjs'
@@ -45,12 +48,12 @@ declare var System: any;
       });
     } else {
       console.warn(
-          "Not using the Angular bundles. Don't use this configuration for e2e/performance tests!");
+          'Not using the Angular bundles. Don\'t use this configuration for e2e/performance tests!');
 
       System.config({
         map: {'index': 'index.js', '@angular': '/all/@angular'},
         packages: {
-          'app': { defaultExtension: 'js' },
+          'app': {defaultExtension: 'js'},
           '@angular/core': {main: 'index.js', defaultExtension: 'js'},
           '@angular/compiler': {main: 'index.js', defaultExtension: 'js'},
           '@angular/router': {main: 'index.js', defaultExtension: 'js'},
@@ -66,7 +69,9 @@ declare var System: any;
 
 
     // BOOTSTRAP the app!
-    System.import('index').then(function(m: any /** TODO #9100 */) { m.main(); }, console.error.bind(console));
+    System.import('index').then(function(m: any /** TODO #9100 */) {
+      m.main();
+    }, console.error.bind(console));
   }
 
 

modules/playground/src/gestures/index.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 
 @Component({selector: 'gestures-app', templateUrl: 'template.html'})
 class GesturesCmp {
@@ -15,7 +15,9 @@ class GesturesCmp {
   pinchScale: number = 1;
   rotateAngle: number = 0;
 
-  onSwipe(event: any /** TODO #9100 */): void { this.swipeDirection = event.deltaX > 0 ? 'right' : 'left'; }
+  onSwipe(event: any /** TODO #9100 */): void {
+    this.swipeDirection = event.deltaX > 0 ? 'right' : 'left';
+  }
 
   onPinch(event: any /** TODO #9100 */): void { this.pinchScale = event.scale; }
 

modules/playground/src/hash_routing/index.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {HashLocationStrategy, LocationStrategy} from '@angular/common';
 import {Component} from '@angular/core';
 import {bootstrap} from '@angular/platform-browser-dynamic';
-import {RouteConfig, Route, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
+import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Route, RouteConfig} from '@angular/router-deprecated';
-import {HashLocationStrategy, LocationStrategy} from '@angular/common';
 
 
 @Component({selector: 'hello-cmp', template: `hello`})
@@ -46,6 +46,6 @@ class AppCmp {
 
 
 export function main() {
-  bootstrap(AppCmp,
+  bootstrap(
-            [ROUTER_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy}]);
+      AppCmp, [ROUTER_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy}]);
 }

modules/playground/src/hello_world/index.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Component, Directive, ElementRef, Injectable, Renderer} from '@angular/core';
 import {bootstrap} from '@angular/platform-browser-dynamic';
-import {Renderer, ElementRef, Component, Directive, Injectable} from '@angular/core';
 
 export function main() {
   // Bootstrapping only requires specifying a root component.

modules/playground/src/http/app/http_comp.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import 'rxjs/add/operator/map';
+
 import {Component} from '@angular/core';
 import {Http, Response} from '@angular/http';
-import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'http-app',

modules/playground/src/http/index.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HTTP_PROVIDERS} from '@angular/http';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+
 import {HttpCmp} from './app/http_comp';
 
 export function main() {

modules/playground/src/jsonp/index.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
 import {JSONP_PROVIDERS} from '@angular/http';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+
 import {JsonpCmp} from './app/jsonp_comp';
 
 export function main() {

modules/playground/src/key_events/index.ts

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 // TODO: remove deep import by reimplementing the event name serialization
-import {KeyEventsPlugin} from "@angular/platform-browser/src/dom/events/key_events";
+import {KeyEventsPlugin} from '@angular/platform-browser/src/dom/events/key_events';
 
 @Component({
   selector: 'key-events-app',

modules/playground/src/model_driven_forms/index.ts

@@ -6,20 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {ControlGroup, FORM_DIRECTIVES, FormBuilder, NgFor, NgFormModel, NgIf, Validators} from '@angular/common';
-import {
-  FORM_DIRECTIVES,
-  ControlGroup,
-  Validators,
-  NgFormModel,
-  FormBuilder,
-  NgIf,
-  NgFor
-} from '@angular/common';
-import {Component, Directive, Host} from '@angular/core';
-
-import {print, isPresent} from '@angular/core/src/facade/lang';
 import {AbstractControl} from '@angular/common';
+import {Component, Directive, Host} from '@angular/core';
+import {isPresent, print} from '@angular/core/src/facade/lang';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+
 
 /**
  * Custom validator.
@@ -28,7 +20,7 @@ function creditCardValidator(c: AbstractControl): {[key: string]: boolean} {
   if (isPresent(c.value) && /^\d{16}$/.test(c.value)) {
     return null;
   } else {
-    return {"invalidCreditCard": true};
+    return {'invalidCreditCard': true};
   }
 }
 
@@ -148,19 +140,19 @@ class ModelDrivenForms {
 
   constructor(fb: FormBuilder) {
     this.form = fb.group({
-      "firstName": ["", Validators.required],
+      'firstName': ['', Validators.required],
-      "middleName": [""],
+      'middleName': [''],
-      "lastName": ["", Validators.required],
+      'lastName': ['', Validators.required],
-      "country": ["Canada", Validators.required],
+      'country': ['Canada', Validators.required],
-      "creditCard": ["", Validators.compose([Validators.required, creditCardValidator])],
+      'creditCard': ['', Validators.compose([Validators.required, creditCardValidator])],
-      "amount": [0, Validators.required],
+      'amount': [0, Validators.required],
-      "email": ["", Validators.required],
+      'email': ['', Validators.required],
-      "comments": [""]
+      'comments': ['']
     });
   }
 
   onSubmit(): void {
-    print("Submitting:");
+    print('Submitting:');
     print(this.form.value);
   }
 }

modules/playground/src/order_management/index.ts

@@ -6,17 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {FORM_DIRECTIVES, NgFor, NgIf} from '@angular/common';
-import {
+import {Component, EventEmitter, Injectable, Input, Output} from '@angular/core';
-  Component,
-  EventEmitter,
-  Injectable,
-  Input,
-  Output
-} from '@angular/core';
-import {NgIf, NgFor, FORM_DIRECTIVES} from '@angular/common';
-
 import {ListWrapper} from '@angular/core/src/facade/collection';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 
 /**
  * You can find the Angular 1 implementation of this example here:
@@ -26,15 +19,17 @@ import {ListWrapper} from '@angular/core/src/facade/collection';
 // ---- model
 
 class OrderItem {
-  constructor(public orderItemId: number, public orderId: number, public productName: string,
+  constructor(
-              public qty: number, public unitPrice: number) {}
+      public orderItemId: number, public orderId: number, public productName: string,
+      public qty: number, public unitPrice: number) {}
 
   get total(): number { return this.qty * this.unitPrice; }
 }
 
 class Order {
-  constructor(public orderId: number, public customerName: string, public limit: number,
+  constructor(
-              private _dataService: DataService) {}
+      public orderId: number, public customerName: string, public limit: number,
+      private _dataService: DataService) {}
 
   get items(): OrderItem[] { return this._dataService.itemsFor(this); }
   get total(): number { return this.items.map(i => i.total).reduce((a, b) => a + b, 0); }
@@ -53,17 +48,16 @@ class DataService {
 
   constructor() {
     this.orders = [
-      new Order(_nextId++, "J. Coltrane", 100, this),
+      new Order(_nextId++, 'J. Coltrane', 100, this), new Order(_nextId++, 'B. Evans', 200, this)
-      new Order(_nextId++, "B. Evans", 200, this)
     ];
 
     this.orderItems = [
-      new OrderItem(_nextId++, this.orders[0].orderId, "Bread", 5, 1),
+      new OrderItem(_nextId++, this.orders[0].orderId, 'Bread', 5, 1),
-      new OrderItem(_nextId++, this.orders[0].orderId, "Brie", 5, 2),
+      new OrderItem(_nextId++, this.orders[0].orderId, 'Brie', 5, 2),
-      new OrderItem(_nextId++, this.orders[0].orderId, "IPA", 5, 3),
+      new OrderItem(_nextId++, this.orders[0].orderId, 'IPA', 5, 3),
 
-      new OrderItem(_nextId++, this.orders[1].orderId, "Mozzarella", 5, 2),
+      new OrderItem(_nextId++, this.orders[1].orderId, 'Mozzarella', 5, 2),
-      new OrderItem(_nextId++, this.orders[1].orderId, "Wine", 5, 3)
+      new OrderItem(_nextId++, this.orders[1].orderId, 'Wine', 5, 3)
     ];
   }
 
@@ -72,7 +66,7 @@ class DataService {
   }
 
   addItemForOrder(order: Order): void {
-    this.orderItems.push(new OrderItem(_nextId++, order.orderId, "", 0, 0));
+    this.orderItems.push(new OrderItem(_nextId++, order.orderId, '', 0, 0));
   }
 
   deleteItem(item: OrderItem): void { ListWrapper.remove(this.orderItems, item); }

modules/playground/src/person_management/index.ts

@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {FORM_DIRECTIVES, NgFor, NgIf} from '@angular/common';
 import {Component, Injectable} from '@angular/core';
-import {NgIf, NgFor, FORM_DIRECTIVES} from '@angular/common';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 
 /**
  * You can find the Angular 1 implementation of this example here:
@@ -50,16 +50,11 @@ class DataService {
 
   constructor() {
     this.persons = [
-      new Person('Victor', 'Savkin', 1930),
+      new Person('Victor', 'Savkin', 1930), new Person('Igor', 'Minar', 1920),
-      new Person('Igor', 'Minar', 1920),
+      new Person('John', 'Papa', 1910), new Person('Nancy', 'Duarte', 1910),
-      new Person('John', 'Papa', 1910),
+      new Person('Jack', 'Papa', 1910), new Person('Jill', 'Papa', 1910),
-      new Person('Nancy', 'Duarte', 1910),
+      new Person('Ward', 'Bell', 1910), new Person('Robert', 'Bell', 1910),
-      new Person('Jack', 'Papa', 1910),
+      new Person('Tracy', 'Ward', 1910), new Person('Dan', 'Wahlin', 1910)
-      new Person('Jill', 'Papa', 1910),
-      new Person('Ward', 'Bell', 1910),
-      new Person('Robert', 'Bell', 1910),
-      new Person('Tracy', 'Ward', 1910),
-      new Person('Dan', 'Wahlin', 1910)
     ];
 
     this.persons[0].friends = [0, 1, 2, 6, 9].map(_ => this.persons[_]);

modules/playground/src/relative_assets/index.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+
 import {MyCmp} from './app/my_cmp';
 
 export function main() {

modules/playground/src/routing/app/inbox-app.ts

@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Injectable} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
-import * as db from './data';
 import {Location} from '@angular/common';
-import {PromiseWrapper, PromiseCompleter} from '@angular/core/src/facade/async';
+import {Component, Injectable} from '@angular/core';
-import {isPresent, DateWrapper} from '@angular/core/src/facade/lang';
+import {PromiseCompleter, PromiseWrapper} from '@angular/core/src/facade/async';
+import {DateWrapper, isPresent} from '@angular/core/src/facade/lang';
+import {ActivatedRoute, Router} from '@angular/router';
+
+import * as db from './data';
 
 export class InboxRecord {
   id: string = '';
@@ -72,8 +73,8 @@ export class DbService {
   }
 
   emails(): Promise<any[]> {
-    return this.getData().then((data: any[]): any[] =>
+    return this.getData().then(
-                                   data.filter(record => !isPresent(record['draft'])));
+        (data: any[]): any[] => data.filter(record => !isPresent(record['draft'])));
   }
 
   email(id: any /** TODO #9100 */): Promise<any> {
@@ -97,18 +98,19 @@ export class InboxCmp {
   constructor(public router: Router, db: DbService, route: ActivatedRoute) {
     route.params.forEach(p => {
       const sortType = p['sort'];
-      const sortEmailsByDate = isPresent(sortType) && sortType == "date";
+      const sortEmailsByDate = isPresent(sortType) && sortType == 'date';
 
       PromiseWrapper.then(db.emails(), (emails: any[]) => {
         this.ready = true;
         this.items = emails.map(data => new InboxRecord(data));
 
         if (sortEmailsByDate) {
-          this.items.sort((a: InboxRecord, b: InboxRecord) =>
+          this.items.sort(
-            DateWrapper.toMillis(DateWrapper.fromISOString(a.date)) <
+              (a: InboxRecord, b: InboxRecord) =>
-            DateWrapper.toMillis(DateWrapper.fromISOString(b.date)) ?
+                  DateWrapper.toMillis(DateWrapper.fromISOString(a.date)) <
-              -1 :
+                      DateWrapper.toMillis(DateWrapper.fromISOString(b.date)) ?
-              1);
+                  -1 :
+                  1);
         }
       });
     });
@@ -130,14 +132,10 @@ export class DraftsCmp {
 }
 
 export const ROUTER_CONFIG = [
-  {path: '', terminal: true, redirectTo: 'inbox'},
+  {path: '', terminal: true, redirectTo: 'inbox'}, {path: 'inbox', component: InboxCmp},
-  {path: 'inbox', component: InboxCmp},
+  {path: 'drafts', component: DraftsCmp}, {path: 'detail', loadChildren: 'app/inbox-detail.js'}
-  {path: 'drafts', component: DraftsCmp},
-  {path: 'detail', loadChildren: 'app/inbox-detail.js' }
 ];
 
-@Component({
+@Component({selector: 'inbox-app', templateUrl: 'app/inbox-app.html'})
-  selector: 'inbox-app',
+export class InboxApp {
-  templateUrl: 'app/inbox-app.html'
+}
-})
-export class InboxApp {}

modules/playground/src/routing/app/inbox-detail.ts

@@ -7,20 +7,19 @@
  */
 
 import {Component, NgModule} from '@angular/core';
-import {ActivatedRoute, RouterModule} from '@angular/router';
 import {PromiseWrapper} from '@angular/core/src/facade/async';
-import {InboxRecord, DbService} from './inbox-app';
+import {ActivatedRoute, RouterModule} from '@angular/router';
 
-@Component(
+import {DbService, InboxRecord} from './inbox-app';
-    {selector: 'inbox-detail', templateUrl: 'app/inbox-detail.html'})
+
+@Component({selector: 'inbox-detail', templateUrl: 'app/inbox-detail.html'})
 export class InboxDetailCmp {
   private record: InboxRecord = new InboxRecord();
   private ready: boolean = false;
 
   constructor(db: DbService, route: ActivatedRoute) {
-    route.params.forEach(p => {
+    route.params.forEach(
-      PromiseWrapper.then(db.email(p['id']), (data) => { this.record.setData(data); });
+        p => { PromiseWrapper.then(db.email(p['id']), (data) => { this.record.setData(data); }); });
-    });
   }
 }
 
@@ -28,4 +27,5 @@ export class InboxDetailCmp {
   declarations: [InboxDetailCmp],
   imports: [RouterModule.forChild([{path: ':id', component: InboxDetailCmp}])]
 })
-export default class InboxDetailModule {}
+export default class InboxDetailModule {
+}

modules/playground/src/routing/index.ts

@@ -6,16 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InboxApp, InboxCmp, DraftsCmp, DbService, ROUTER_CONFIG} from './app/inbox-app';
-import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HashLocationStrategy, LocationStrategy} from '@angular/common';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {RouterModule} from '@angular/router';
 
+import {DbService, DraftsCmp, InboxApp, InboxCmp, ROUTER_CONFIG} from './app/inbox-app';
+
 export function main() {
   bootstrap(InboxApp, {
-    providers: [
+    providers: [DbService],
-      DbService
-    ],
     declarations: [InboxCmp, DraftsCmp],
     imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true})]
   });

modules/playground/src/routing_deprecated/app/inbox-app.ts

@@ -6,19 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Injectable} from '@angular/core';
-import {
-  RouterLink,
-  RouteConfig,
-  Router,
-  Route,
-  RouterOutlet,
-  RouteParams
-} from '@angular/router-deprecated';
-import * as db from './data';
 import {Location} from '@angular/common';
-import {PromiseWrapper, PromiseCompleter} from '@angular/core/src/facade/async';
+import {Component, Injectable} from '@angular/core';
-import {isPresent, DateWrapper} from '@angular/core/src/facade/lang';
+import {PromiseCompleter, PromiseWrapper} from '@angular/core/src/facade/async';
+import {DateWrapper, isPresent} from '@angular/core/src/facade/lang';
+import {Route, RouteConfig, RouteParams, Router, RouterLink, RouterOutlet} from '@angular/router-deprecated';
+
+import * as db from './data';
 
 class InboxRecord {
   id: string = '';
@@ -79,8 +73,8 @@ class DbService {
   }
 
   emails(): Promise<any[]> {
-    return this.getData().then((data: any[]): any[] =>
+    return this.getData().then(
-                                   data.filter(record => !isPresent(record['draft'])));
+        (data: any[]): any[] => data.filter(record => !isPresent(record['draft'])));
   }
 
   email(id: any /** TODO #9100 */): Promise<any> {
@@ -115,18 +109,19 @@ class InboxCmp {
 
   constructor(public router: Router, db: DbService, params: RouteParams) {
     var sortType = params.get('sort');
-    var sortEmailsByDate = isPresent(sortType) && sortType == "date";
+    var sortEmailsByDate = isPresent(sortType) && sortType == 'date';
 
     PromiseWrapper.then(db.emails(), (emails: any[]) => {
       this.ready = true;
       this.items = emails.map(data => new InboxRecord(data));
 
       if (sortEmailsByDate) {
-        this.items.sort((a: InboxRecord, b: InboxRecord) =>
+        this.items.sort(
-                            DateWrapper.toMillis(DateWrapper.fromISOString(a.date)) <
+            (a: InboxRecord, b: InboxRecord) =>
-                                    DateWrapper.toMillis(DateWrapper.fromISOString(b.date)) ?
+                DateWrapper.toMillis(DateWrapper.fromISOString(a.date)) <
-                                -1 :
+                    DateWrapper.toMillis(DateWrapper.fromISOString(b.date)) ?
-                                1);
+                -1 :
+                1);
       }
     });
   }

modules/playground/src/routing_deprecated/index.ts

@@ -6,12 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InboxApp} from './app/inbox-app';
-import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HashLocationStrategy, LocationStrategy} from '@angular/common';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
 
+import {InboxApp} from './app/inbox-app';
+
 export function main() {
-  bootstrap(InboxApp,
+  bootstrap(
-            [ROUTER_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy}]);
+      InboxApp, [ROUTER_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy}]);
 }

modules/playground/src/sourcemap/index.ts

@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Component} from '@angular/core';
 import {BaseException} from '@angular/core/src/facade/exceptions';
 import {bootstrap} from '@angular/platform-browser-dynamic';
-import {Component} from '@angular/core';
 
 @Component({
   selector: 'error-app',

modules/playground/src/svg/index.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 
 @Component({selector: '[svg-group]', template: `<svg:text x="20" y="20">Hello</svg:text>`})
 class SvgGroup {

modules/playground/src/template_driven_forms/index.ts

@@ -6,20 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {ControlGroup, FORM_DIRECTIVES, NG_VALIDATORS, NgControl, NgFor, NgForm, NgIf, Validators} from '@angular/common';
 import {Component, Directive, Host} from '@angular/core';
-import {
+import {isPresent, print} from '@angular/core/src/facade/lang';
-  ControlGroup,
+import {bootstrap} from '@angular/platform-browser-dynamic';
-  NgIf,
-  NgFor,
-  NG_VALIDATORS,
-  FORM_DIRECTIVES,
-  NgControl,
-  Validators,
-  NgForm
-} from '@angular/common';
 
-import {print, isPresent} from '@angular/core/src/facade/lang';
 
 /**
  * A domain model we are binding the form controls to.
@@ -28,7 +19,7 @@ class CheckoutModel {
   firstName: string;
   middleName: string;
   lastName: string;
-  country: string = "Canada";
+  country: string = 'Canada';
 
   creditCard: string;
   amount: number;
@@ -43,11 +34,11 @@ function creditCardValidator(c: any /** TODO #9100 */): {[key: string]: boolean}
   if (isPresent(c.value) && /^\d{16}$/.test(c.value)) {
     return null;
   } else {
-    return {"invalidCreditCard": true};
+    return {'invalidCreditCard': true};
   }
 }
 
-const creditCardValidatorBinding =  {
+const creditCardValidatorBinding = {
   provide: NG_VALIDATORS,
   useValue: creditCardValidator,
   multi: true
@@ -171,7 +162,7 @@ class TemplateDrivenForms {
   countries = ['US', 'Canada'];
 
   onSubmit(): void {
-    print("Submitting:");
+    print('Submitting:');
     print(this.model);
   }
 }

modules/playground/src/todo/index.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
-import {Component} from '@angular/core';
 import {NgFor} from '@angular/common';
+import {Component} from '@angular/core';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+
 import {Store, Todo, TodoFactory} from './app/TodoStore';
 
 @Component({

modules/playground/src/upgrade/index.ts

@@ -6,14 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {UpgradeAdapter} from '@angular/upgrade';
 
 declare var angular: any;
 
 
-var styles = [
+var styles = [`
-  `
     .border {
       border: solid 2px DodgerBlue;
     }
@@ -25,8 +24,7 @@ var styles = [
     .content {
       padding: 1em;
     }
-  `
+  `];
-];
 
 var adapter: UpgradeAdapter = new UpgradeAdapter();
 

modules/playground/src/web_workers/images/b64.d.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-declare module "B64" {
+declare module 'B64' {
   export function fromByteArray(arr: Uint8Array): string;
   export function toByteArray(str: string): Uint8Array;
 }

modules/playground/src/web_workers/images/background_index.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ImageDemo} from './index_common';
 import {bootstrapWorkerApp} from '@angular/platform-browser-dynamic';
 
+import {ImageDemo} from './index_common';
+
 export function main() {
   bootstrapWorkerApp(ImageDemo);
 }

modules/playground/src/web_workers/images/bitmap.d.ts

@@ -12,5 +12,5 @@ declare class Bitmap {
   subsample(n: number): void;
   dataURL(): string;
 
-  pixel:[any];
+  pixel: [any];
 }

modules/playground/src/web_workers/images/index.ts

@@ -9,5 +9,5 @@
 import {bootstrapWorkerUi} from '@angular/platform-browser-dynamic';
 
 export function main() {
-  bootstrapWorkerUi("loader.js");
+  bootstrapWorkerUi('loader.js');
 }

modules/playground/src/web_workers/images/index_common.ts

@@ -7,10 +7,11 @@
  */
 
 import {Component} from '@angular/core';
-import {EventListener} from '@angular/core/src/facade/browser';
 import {TimerWrapper} from '@angular/core/src/facade/async';
-import {BitmapService} from './services/bitmap';
+import {EventListener} from '@angular/core/src/facade/browser';
+
 import {FileReader, Uint8ArrayWrapper} from './file_api';
+import {BitmapService} from './services/bitmap';
 
 
 @Component({selector: 'image-demo', viewProviders: [BitmapService], templateUrl: 'image_demo.html'})
@@ -23,7 +24,7 @@ export class ImageDemo {
   uploadFiles(files: any /** TODO #9100 */) {
     for (var i = 0; i < files.length; i++) {
       var reader = new FileReader();
-      reader.addEventListener("load", this.handleReaderLoad(reader));
+      reader.addEventListener('load', this.handleReaderLoad(reader));
       reader.readAsArrayBuffer(files[i]);
     }
   }

modules/playground/src/web_workers/images/services/bitmap.ts

@@ -12,10 +12,7 @@ declare var base64js: any /** TODO #9100 */;
 
 // Temporary fix for Typescript issue #4220 (https://github.com/Microsoft/TypeScript/issues/4220)
 // var _ImageData: (width: number, height: number) => void = <any>postMessage;
-var _ImageData: {
+var _ImageData: {prototype: ImageData, new (width: number, height: number): ImageData;} = ImageData;
-  prototype: ImageData, new (width: number, height: number): ImageData;
-}
-= ImageData;
 
 // This class is based on the Bitmap examples at:
 // http://www.i-programmer.info/projects/36-web/6234-reading-a-bmp-file-in-javascript.html
@@ -71,7 +68,7 @@ export class BitmapService {
     return imageData;
   }
 
-  private _swap(data: Uint8Array | Uint8ClampedArray | number[], index1: number, index2: number) {
+  private _swap(data: Uint8Array|Uint8ClampedArray|number[], index1: number, index2: number) {
     var temp = data[index1];
     data[index1] = data[index2];
     data[index2] = temp;
@@ -83,22 +80,22 @@ export class BitmapService {
     var numFileBytes = this._getLittleEndianHex(imageData.width * imageData.height);
     var w = this._getLittleEndianHex(imageData.width);
     var h = this._getLittleEndianHex(imageData.height);
-    return 'BM' +                // Signature
+    return 'BM' +             // Signature
-           numFileBytes +        // size of the file (bytes)*
+        numFileBytes +        // size of the file (bytes)*
-           '\x00\x00' +          // reserved
+        '\x00\x00' +          // reserved
-           '\x00\x00' +          // reserved
+        '\x00\x00' +          // reserved
-           '\x36\x00\x00\x00' +  // offset of where BMP data lives (54 bytes)
+        '\x36\x00\x00\x00' +  // offset of where BMP data lives (54 bytes)
-           '\x28\x00\x00\x00' +  // number of remaining bytes in header from here (40 bytes)
+        '\x28\x00\x00\x00' +  // number of remaining bytes in header from here (40 bytes)
-           w +                   // the width of the bitmap in pixels*
+        w +                   // the width of the bitmap in pixels*
-           h +                   // the height of the bitmap in pixels*
+        h +                   // the height of the bitmap in pixels*
-           '\x01\x00' +          // the number of color planes (1)
+        '\x01\x00' +          // the number of color planes (1)
-           '\x20\x00' +          // 32 bits / pixel
+        '\x20\x00' +          // 32 bits / pixel
-           '\x00\x00\x00\x00' +  // No compression (0)
+        '\x00\x00\x00\x00' +  // No compression (0)
-           '\x00\x00\x00\x00' +  // size of the BMP data (bytes)*
+        '\x00\x00\x00\x00' +  // size of the BMP data (bytes)*
-           '\x13\x0B\x00\x00' +  // 2835 pixels/meter - horizontal resolution
+        '\x13\x0B\x00\x00' +  // 2835 pixels/meter - horizontal resolution
-           '\x13\x0B\x00\x00' +  // 2835 pixels/meter - the vertical resolution
+        '\x13\x0B\x00\x00' +  // 2835 pixels/meter - the vertical resolution
-           '\x00\x00\x00\x00' +  // Number of colors in the palette (keep 0 for 32-bit)
+        '\x00\x00\x00\x00' +  // Number of colors in the palette (keep 0 for 32-bit)
-           '\x00\x00\x00\x00';   // 0 important colors (means all colors are important)
+        '\x00\x00\x00\x00';   // 0 important colors (means all colors are important)
   }
 
   private _BMPToImageData(bmp: BitmapFile): ImageData {
@@ -172,18 +169,10 @@ export class BitmapService {
 
 interface BitmapFile {
   fileHeader: {
-    bfType: number;
+    bfType: number; bfSize: number; bfReserved1: number; bfReserved2: number; bfOffBits: number;
-    bfSize: number;
-    bfReserved1: number;
-    bfReserved2: number;
-    bfOffBits: number;
   };
   infoHeader: {
-    biSize: number;
+    biSize: number; biWidth: number; biHeight: number; biPlanes: number; biBitCount: number;
-    biWidth: number;
-    biHeight: number;
-    biPlanes: number;
-    biBitCount: number;
     biCompression: number;
     biSizeImage: number;
     biXPelsPerMeter: number;

modules/playground/src/web_workers/input/background_index.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InputCmp} from './index_common';
 import {bootstrapWorkerApp} from '@angular/platform-browser-dynamic';
 
+import {InputCmp} from './index_common';
+
 export function main() {
   bootstrapWorkerApp(InputCmp);
 }

modules/playground/src/web_workers/input/index.ts

@@ -9,5 +9,5 @@
 import {bootstrapWorkerUi} from '@angular/platform-browser-dynamic';
 
 export function main() {
-  bootstrapWorkerUi("loader.js");
+  bootstrapWorkerUi('loader.js');
 }

modules/playground/src/web_workers/input/index_common.ts

@@ -23,8 +23,8 @@ import {Component} from '@angular/core';
   `
 })
 export class InputCmp {
-  inputVal = "";
+  inputVal = '';
-  textareaVal = "";
+  textareaVal = '';
 
   inputChanged(e: any /** TODO #9100 */) { this.inputVal = e.target.value; }
 

modules/playground/src/web_workers/kitchen_sink/background_index.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {HelloCmp} from './index_common';
 import {bootstrapWorkerApp} from '@angular/platform-browser-dynamic';
 
+import {HelloCmp} from './index_common';
+
 export function main() {
   bootstrapWorkerApp(HelloCmp);
 }

modules/playground/src/web_workers/kitchen_sink/index.ts

@@ -9,5 +9,5 @@
 import {bootstrapWorkerUi} from '@angular/platform-browser-dynamic';
 
 export function main() {
-  bootstrapWorkerUi("loader.js");
+  bootstrapWorkerUi('loader.js');
 }

modules/playground/src/web_workers/kitchen_sink/index_common.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Renderer, ElementRef, Component, Directive, Injectable} from '@angular/core';
+import {Component, Directive, ElementRef, Injectable, Renderer} from '@angular/core';
 import {StringWrapper} from '@angular/core/src/facade/lang';
 
+
 // A service available to the Injector, used by the HelloCmp component.
 @Injectable()
 export class GreetingService {
@@ -60,5 +61,7 @@ export class HelloCmp {
 
   changeGreeting(): void { this.greeting = 'howdy'; }
 
-  onKeyDown(event: any /** TODO #9100 */): void { this.lastKey = StringWrapper.fromCharCode(event.keyCode); }
+  onKeyDown(event: any /** TODO #9100 */): void {
+    this.lastKey = StringWrapper.fromCharCode(event.keyCode);
+  }
 }

modules/playground/src/web_workers/message_broker/index.ts

@@ -7,35 +7,33 @@
  */
 
 import {PlatformRef} from '@angular/core';
-import {UiArguments, FnArg, PRIMITIVE, ClientMessageBrokerFactory} from '@angular/platform-browser';
+import {ClientMessageBrokerFactory, FnArg, PRIMITIVE, UiArguments} from '@angular/platform-browser';
-import {bootstrapWorkerUi} from "@angular/platform-browser-dynamic";
+import {bootstrapWorkerUi} from '@angular/platform-browser-dynamic';
 
-const ECHO_CHANNEL = "ECHO";
+const ECHO_CHANNEL = 'ECHO';
 
 export function main() {
-  bootstrapWorkerUi("loader.js").then(afterBootstrap);
+  bootstrapWorkerUi('loader.js').then(afterBootstrap);
 }
 
 function afterBootstrap(ref: PlatformRef) {
   let brokerFactory: ClientMessageBrokerFactory = ref.injector.get(ClientMessageBrokerFactory);
   var broker = brokerFactory.createMessageBroker(ECHO_CHANNEL, false);
 
-  document.getElementById("send_echo")
+  document.getElementById('send_echo').addEventListener('click', (e) => {
-      .addEventListener("click", (e) => {
+    var val = (<HTMLInputElement>document.getElementById('echo_input')).value;
-        var val = (<HTMLInputElement>document.getElementById("echo_input")).value;
+    // TODO(jteplitz602): Replace default constructors with real constructors
-        // TODO(jteplitz602): Replace default constructors with real constructors
+    // once they're in the .d.ts file (#3926)
-        // once they're in the .d.ts file (#3926)
+    var args = new UiArguments('echo');
-        var args = new UiArguments("echo");
+    args.method = 'echo';
-        args.method = "echo";
+    var fnArg = new FnArg(val, PRIMITIVE);
-        var fnArg = new FnArg(val, PRIMITIVE);
+    fnArg.value = val;
-        fnArg.value = val;
+    fnArg.type = PRIMITIVE;
-        fnArg.type = PRIMITIVE;
+    args.args = [fnArg];
-        args.args = [fnArg];
 
-        broker.runOnService(args, PRIMITIVE)
+    broker.runOnService(args, PRIMITIVE).then((echo_result: string) => {
-            .then((echo_result: string) => {
+      document.getElementById('echo_result').innerHTML =
-              document.getElementById("echo_result").innerHTML =
+          `<span class='response'>${echo_result}</span>`;
-                  `<span class='response'>${echo_result}</span>`;
+    });
-            });
+  });
-      });
 }

modules/playground/src/web_workers/message_broker/index_common.ts

@@ -6,17 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {PromiseWrapper} from '@angular/core/src/facade/async';
 import {Component} from '@angular/core';
-import {ServiceMessageBrokerFactory, PRIMITIVE} from '@angular/platform-browser';
+import {PromiseWrapper} from '@angular/core/src/facade/async';
+import {PRIMITIVE, ServiceMessageBrokerFactory} from '@angular/platform-browser';
 
-const ECHO_CHANNEL = "ECHO";
+const ECHO_CHANNEL = 'ECHO';
 
-@Component({selector: 'app', template: "<h1>WebWorker MessageBroker Test</h1>"})
+@Component({selector: 'app', template: '<h1>WebWorker MessageBroker Test</h1>'})
 export class App {
   constructor(private _serviceBrokerFactory: ServiceMessageBrokerFactory) {
     var broker = _serviceBrokerFactory.createMessageBroker(ECHO_CHANNEL, false);
-    broker.registerMethod("echo", [PRIMITIVE], this._echo, PRIMITIVE);
+    broker.registerMethod('echo', [PRIMITIVE], this._echo, PRIMITIVE);
   }
 
   private _echo(val: string) {

modules/playground/src/web_workers/router/index.ts

@@ -7,8 +7,8 @@
  */
 
 import {WORKER_UI_LOCATION_PROVIDERS} from '@angular/platform-browser';
-import {bootstrapWorkerUi} from "@angular/platform-browser-dynamic";
+import {bootstrapWorkerUi} from '@angular/platform-browser-dynamic';
 
 export function main() {
-  bootstrapWorkerUi("loader.js", WORKER_UI_LOCATION_PROVIDERS);
+  bootstrapWorkerUi('loader.js', WORKER_UI_LOCATION_PROVIDERS);
 }

modules/playground/src/web_workers/router/index_common.ts

@@ -6,21 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {HashLocationStrategy, LocationStrategy} from '@angular/common';
 import {Component, NgModule} from '@angular/core';
-import {Start} from './components/start';
+import {WORKER_APP_LOCATION_PROVIDERS, WorkerAppModule} from '@angular/platform-browser';
+import {Router, RouterModule, provideRoutes} from '@angular/router';
+
 import {About} from './components/about';
 import {Contact} from './components/contact';
-import {Router, RouterModule, provideRoutes} from '@angular/router';
+import {Start} from './components/start';
-import {WorkerAppModule, WORKER_APP_LOCATION_PROVIDERS} from '@angular/platform-browser';
-import {HashLocationStrategy, LocationStrategy} from '@angular/common';
 
 @Component({selector: 'app', templateUrl: 'app.html'})
 export class App {
 }
 
 export const ROUTES = [
-  {path: '', component: Start},
+  {path: '', component: Start}, {path: 'contact', component: Contact},
-  {path: 'contact', component: Contact},
   {path: 'about', component: About}
 ];
 

modules/playground/src/web_workers/todo/background_index.ts

@@ -6,9 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {TodoApp} from './index_common';
 import {bootstrapWorkerApp} from '@angular/platform-browser-dynamic';
 
+import {TodoApp} from './index_common';
+
 export function main() {
   bootstrapWorkerApp(TodoApp);
 }

modules/playground/src/web_workers/todo/index.ts

@@ -9,5 +9,5 @@
 import {bootstrapWorkerUi} from '@angular/platform-browser-dynamic';
 
 export function main() {
-  bootstrapWorkerUi("loader.js");
+  bootstrapWorkerUi('loader.js');
 }

modules/playground/src/web_workers/todo/index_common.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {FORM_DIRECTIVES, NgFor} from '@angular/common';
 import {Component} from '@angular/core';
-import {NgFor, FORM_DIRECTIVES} from '@angular/common';
+
 import {Store, Todo, TodoFactory} from './services/TodoStore';
 
 @Component({
@@ -27,7 +28,7 @@ export class TodoApp {
 
   enterTodo(): void {
     this.addTodo(this.inputValue);
-    this.inputValue = "";
+    this.inputValue = '';
   }
 
   doneEditing($event: any /** TODO #9100 */, todo: Todo): void {

modules/playground/src/zippy_component/index.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+
 import {Zippy} from './app/zippy';
 
 @Component({