build: adding basic e2e testing infrastructure

.travis.yml

@@ -38,8 +38,7 @@ env:
     # Order: a slower build first, so that we don't occupy an idle travis worker waiting for others to complete.
    - CI_MODE=js
    - CI_MODE=lint
-#   - CI_MODE=dart
-   - CI_MODE=build_only
+   - CI_MODE=e2e
    - CI_MODE=saucelabs_required
    - CI_MODE=browserstack_required
 

build.sh

@@ -8,6 +8,25 @@ cd `dirname $0`
 TSCONFIG=./modules/tsconfig.json
 echo "====== (all)COMPILING: \$(npm bin)/ng2tc -p ${TSCONFIG} ====="
 rm -rf ./dist/all/
+mkdir ./dist/all/
+
+# prepare all files for e2e tests
+cp -r ./modules/playground ./dist/all/
+cp -r ./modules/playground/favicon.ico ./dist/
+#rsync -aP ./modules/playground/* ./dist/all/playground/
+mkdir ./dist/all/playground/vendor
+cd ./dist/all/playground/vendor
+ln -s ../../../../node_modules/es6-shim/es6-shim.js .
+ln -s ../../../../node_modules/zone.js/dist/zone.js .
+ln -s ../../../../node_modules/zone.js/dist/long-stack-trace-zone.js .
+ln -s ../../../../node_modules/systemjs/dist/system.src.js .
+ln -s ../../../../node_modules/base64-js/lib/b64.js .
+ln -s ../../../../node_modules/reflect-metadata/Reflect.js .
+ln -s ../../../../node_modules/rxjs/bundles/Rx.js .
+ln -s ../../../../node_modules/angular/angular.js .
+cd -
+
+# compile ts code
 $(npm bin)/ng2tc -p ${TSCONFIG}
 
 

modules/playground/e2e_test/async/async_spec.ts

@@ -1,7 +1,7 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('async', () => {
-  var URL = 'playground/src/async/index.html';
+  var URL = 'all/playground/src/async/index.html';
 
   beforeEach(() => browser.get(URL));
 

modules/playground/e2e_test/hash_routing/hash_location_spec.ts

@@ -1,4 +1,4 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 function waitForElement(selector) {
   var EC = (<any>protractor).ExpectedConditions;
@@ -9,7 +9,7 @@ function waitForElement(selector) {
 describe('hash routing example app', function() {
   afterEach(verifyNoBrowserErrors);
 
-  var URL = 'playground/src/hash_routing/index.html';
+  var URL = 'all/playground/src/hash_routing/index.html';
 
   it('should navigate between routes', function() {
     browser.get(URL + '#/bye');
@@ -28,7 +28,7 @@ describe('hash routing example app', function() {
 
 
   it('should open in new window if target is _blank', () => {
-    var URL = 'playground/src/hash_routing/index.html';
+    var URL = 'all/playground/src/hash_routing/index.html';
     browser.get(URL + '#/');
     waitForElement('hello-cmp');
 

modules/playground/e2e_test/hello_world/hello_world_spec.ts

@@ -1,11 +1,11 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('hello world', function() {
 
   afterEach(verifyNoBrowserErrors);
 
   describe('hello world app', function() {
-    var URL = 'playground/src/hello_world/index.html';
+    var URL = 'all/playground/src/hello_world/index.html';
 
     it('should greet', function() {
       browser.get(URL);

modules/playground/e2e_test/http/http_spec.ts

@@ -1,11 +1,11 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('http', function() {
 
   afterEach(verifyNoBrowserErrors);
 
   describe('fetching', function() {
-    var URL = 'playground/src/http/index.html';
+    var URL = 'all/playground/src/http/index.html';
 
     it('should fetch and display people', function() {
       browser.get(URL);

modules/playground/e2e_test/jsonp/jsonp_spec.ts

@@ -1,11 +1,11 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('jsonp', function() {
 
   afterEach(verifyNoBrowserErrors);
 
   describe('fetching', function() {
-    var URL = 'playground/src/jsonp/index.html';
+    var URL = 'all/playground/src/jsonp/index.html';
 
     it('should fetch and display people', function() {
       browser.get(URL);

modules/playground/e2e_test/key_events/key_events_spec.ts

@@ -2,7 +2,7 @@ import {verifyNoBrowserErrors} from '@angular/platform-browser/testing/e2e_util'
 
 describe('key_events', function() {
 
-  var URL = 'playground/src/key_events/index.html';
+  var URL = 'all/playground/src/key_events/index.html?bundles=false';
 
   afterEach(verifyNoBrowserErrors);
   beforeEach(() => { browser.get(URL); });

modules/playground/e2e_test/model_driven_forms/model_driven_forms_spec.ts

@@ -1,10 +1,10 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('Model-Driven Forms', function() {
 
   afterEach(verifyNoBrowserErrors);
 
-  var URL = 'playground/src/model_driven_forms/index.html';
+  var URL = 'all/playground/src/model_driven_forms/index.html';
 
   it('should display errors', function() {
     browser.get(URL);

modules/playground/e2e_test/order_management/order_management_spec.ts

@@ -1,7 +1,7 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('Order Management CRUD', function() {
-  var URL = 'playground/src/order_management/index.html';
+  var URL = 'all/playground/src/order_management/index.html';
 
   it('should work', function() {
     browser.get(URL);

modules/playground/e2e_test/person_management/person_management_spec.ts

@@ -1,7 +1,7 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('Person Management CRUD', function() {
-  var URL = 'playground/src/person_management/index.html';
+  var URL = 'all/playground/src/person_management/index.html';
 
   it('should work', function() {
     browser.get(URL);

modules/playground/e2e_test/relative_assets/assets_spec.ts

@@ -1,4 +1,4 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 function waitForElement(selector) {
   var EC = (<any>protractor).ExpectedConditions;
@@ -10,7 +10,7 @@ describe('relative assets relative-app', () => {
 
   afterEach(verifyNoBrowserErrors);
 
-  var URL = 'playground/src/relative_assets/';
+  var URL = 'all/playground/src/relative_assets/';
 
   it('should load in the templateUrl relative to the my-cmp component', () => {
     browser.get(URL);

modules/playground/e2e_test/routing/routing_spec.ts

@@ -1,4 +1,4 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 function waitForElement(selector) {
   var EC = (<any>protractor).ExpectedConditions;
@@ -11,7 +11,7 @@ describe('routing inbox-app', () => {
   afterEach(verifyNoBrowserErrors);
 
   describe('index view', () => {
-    var URL = 'playground/src/routing/';
+    var URL = 'all/playground/src/routing/';
 
     it('should list out the current collection of items', () => {
       browser.get(URL);
@@ -31,7 +31,7 @@ describe('routing inbox-app', () => {
 
 
   describe('drafts view', () => {
-    var URL = 'playground/src/routing/#/drafts';
+    var URL = 'all/playground/src/routing/#/drafts';
 
     it('should navigate to the drafts view when the drafts link is clicked', () => {
       browser.get(URL);
@@ -55,7 +55,7 @@ describe('routing inbox-app', () => {
 
 
   describe('detail view', () => {
-    var URL = 'playground/src/routing/';
+    var URL = 'all/playground/src/routing/';
 
     it('should navigate to the detail view when an email is clicked', () => {
       browser.get(URL);

modules/playground/e2e_test/sourcemap/sourcemap_spec.ts

@@ -1,10 +1,10 @@
-import * as testUtil from '@angular/testing/src/e2e_util';
+import * as testUtil from '@angular/platform-browser/testing_e2e';
 
 var fs = require('fs');
 var sourceMap = require('source-map');
 
 describe('sourcemaps', function() {
-  var URL = 'playground/src/sourcemap/index.html';
+  var URL = 'all/playground/src/sourcemap/index.html';
 
   it('should map sources', function() {
     browser.get(URL);
@@ -30,7 +30,7 @@ describe('sourcemaps', function() {
 
 
       const content =
-          fs.readFileSync('dist/js/dev/es5/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 index = content.indexOf(marker);
       const sourceMapData =

modules/playground/e2e_test/svg/svg_spec.ts

@@ -1,8 +1,8 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('SVG', function() {
 
-  var URL = 'playground/src/svg/index.html';
+  var URL = 'all/playground/src/svg/index.html';
 
   afterEach(verifyNoBrowserErrors);
   beforeEach(() => { browser.get(URL); });

modules/playground/e2e_test/template_driven_forms/template_driven_forms_spec.ts

@@ -1,10 +1,10 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('Template-Driven Forms', function() {
 
   afterEach(verifyNoBrowserErrors);
 
-  var URL = 'playground/src/template_driven_forms/index.html';
+  var URL = 'all/playground/src/template_driven_forms/index.html';
 
   it('should display errors', function() {
     browser.get(URL);

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

@@ -1,4 +1,4 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('WebWorkers Input', function() {
   afterEach(() => {
@@ -6,7 +6,7 @@ describe('WebWorkers Input', function() {
     browser.ignoreSynchronization = false;
   });
   const selector = 'input-app';
-  const URL = 'playground/src/web_workers/input/index.html';
+  const URL = 'all/playground/src/web_workers/input/index.html';
   const VALUE = 'test val';
 
   it('should bootstrap', () => {

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

@@ -1,4 +1,4 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('WebWorkers Kitchen Sink', function() {
   afterEach(() => {
@@ -6,7 +6,7 @@ describe('WebWorkers Kitchen Sink', function() {
     browser.ignoreSynchronization = false;
   });
   var selector = "hello-app .greeting";
-  var URL = "playground/src/web_workers/kitchen_sink/index.html";
+  var URL = 'all/playground/src/web_workers/kitchen_sink/index.html';
 
   it('should greet', () => {
     // This test can't wait for Angular 2 as Testability is not available when using WebWorker

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

@@ -1,7 +1,6 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
-import {PromiseWrapper} from '@angular/facade';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
-var URL = 'playground/src/web_workers/message_broker/index.html';
+var URL = 'all/playground/src/web_workers/message_broker/index.html';
 
 describe("MessageBroker", function() {
 

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

@@ -1,4 +1,4 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe("WebWorker Router", () => {
   beforeEach(() => {
@@ -14,7 +14,7 @@ describe("WebWorker Router", () => {
 
   let contentSelector = "app main h1";
   let navSelector = "app nav ul";
-  var baseUrl = "playground/src/web_workers/router/index.html";
+  var baseUrl = 'all/playground/src/web_workers/router/index.html';
 
   it("should route on click", () => {
     browser.get(baseUrl);

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

@@ -1,4 +1,4 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('WebWorkers Todo', function() {
   afterEach(() => {
@@ -6,7 +6,7 @@ describe('WebWorkers Todo', function() {
     browser.ignoreSynchronization = false;
   });
 
-  var URL = "playground/src/web_workers/todo/index.html";
+  var URL = 'all/playground/src/web_workers/todo/index.html';
 
   it('should bootstrap', () => {
     // This test can't wait for Angular 2 as Testability is not available when using WebWorker

modules/playground/e2e_test/zippy_component/zippy_spec.ts

@@ -1,11 +1,11 @@
-import {verifyNoBrowserErrors} from '@angular/testing/src/e2e_util';
+import {verifyNoBrowserErrors} from '@angular/platform-browser/testing_e2e';
 
 describe('Zippy Component', function() {
 
   afterEach(verifyNoBrowserErrors);
 
   describe('zippy', function() {
-    var URL = 'playground/src/zippy_component/index.html';
+    var URL = 'all/playground/src/zippy_component/index.html';
 
     beforeEach(function() { browser.get(URL); });
 

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

@@ -1,4 +1,4 @@
-import {Component, Injectable} from 'angular2/core';
+import {Component, Injectable} from '@angular/core';
 import {
   Routes,
   Route,
@@ -11,10 +11,10 @@ import {
   UrlTree
 } from 'angular2/alt_router';
 import * as db from './data';
-import {Location} from 'angular2/platform/common';
-import {PromiseWrapper} from 'angular2/src/facade/async';
-import {isPresent, DateWrapper} from 'angular2/src/facade/lang';
-import {PromiseCompleter} from 'angular2/src/facade/promise';
+import {Location} from '@angular/common';
+import {PromiseWrapper} from '@angular/core/src/facade/async';
+import {isPresent, DateWrapper} from '@angular/core/src/facade/lang';
+import {PromiseCompleter} from '@angular/core/src/facade/promise';
 
 class InboxRecord {
   id: string = '';
@@ -93,7 +93,7 @@ class DbService {
 }
 
 @Component(
-    {selector: 'inbox-detail', directives: ROUTER_DIRECTIVES, templateUrl: 'inbox-detail.html'})
+    {selector: 'inbox-detail', directives: ROUTER_DIRECTIVES, templateUrl: 'app/inbox-detail.html'})
 class InboxDetailCmp implements OnActivate {
   record: InboxRecord = new InboxRecord();
   ready: boolean = false;
@@ -107,7 +107,7 @@ class InboxDetailCmp implements OnActivate {
   }
 }
 
-@Component({selector: 'inbox', templateUrl: 'inbox.html', directives: ROUTER_DIRECTIVES})
+@Component({selector: 'inbox', templateUrl: 'app/inbox.html', directives: ROUTER_DIRECTIVES})
 class InboxCmp implements OnActivate {
   items: InboxRecord[] = [];
   ready: boolean = false;
@@ -135,7 +135,7 @@ class InboxCmp implements OnActivate {
 }
 
 
-@Component({selector: 'drafts', templateUrl: 'drafts.html', directives: ROUTER_DIRECTIVES})
+@Component({selector: 'drafts', templateUrl: 'app/drafts.html', directives: ROUTER_DIRECTIVES})
 class DraftsCmp {
   items: InboxRecord[] = [];
   ready: boolean = false;
@@ -151,7 +151,7 @@ class DraftsCmp {
 @Component({
   selector: 'inbox-app',
   providers: [DbService, ROUTER_PROVIDERS],
-  templateUrl: 'inbox-app.html',
+  templateUrl: 'app/inbox-app.html',
   directives: ROUTER_DIRECTIVES,
 })
 @Routes([

modules/playground/src/alt_routing/index.html

@@ -3,12 +3,12 @@
   <title>Routing Example</title>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/css/gumby.css" />
   <link rel="stylesheet" type="text/css" href="./css/app.css" />
-  <base href="/playground/src/alt_routing/">
+  <base href="/all/playground/src/alt_routing/">
 <body>
   <inbox-app>
     Loading...
   </inbox-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/alt_routing/index.ts

@@ -1,8 +1,8 @@
-import {InboxApp} from './inbox-app';
-import {provide} from 'angular2/core';
-import {bootstrap} from 'angular2/platform/browser';
-import {HashLocationStrategy, LocationStrategy} from 'angular2/platform/common';
-import {ROUTER_PROVIDERS} from 'angular2/router';
+import {InboxApp} from './app/inbox-app';
+import {provide} from '@angular/core';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {HashLocationStrategy, LocationStrategy} from '@angular/common';
+import {ROUTER_PROVIDERS} from '@angular/router';
 
 export function main() {
   bootstrap(InboxApp,

modules/playground/src/animate/index.html

@@ -4,6 +4,6 @@
   <link rel="stylesheet" type="text/css" href="./css/app.css" />
 <body>
   <animate-app>Loading...</animate-app>
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/animate/index.ts

@@ -1,5 +1,5 @@
-import {AnimateApp} from './animate-app';
-import {bootstrap} from '@angular/platform-browser';
+import {AnimateApp} from './app/animate-app';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 
 export function main() {
   bootstrap(AnimateApp);

modules/playground/src/async/index.html

@@ -9,6 +9,6 @@
     Loading...
   </async-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/async/index.ts

@@ -1,7 +1,7 @@
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
 import {NgIf} from '@angular/common';
-import {TimerWrapper} from '@angular/facade';
+import {TimerWrapper} from '@angular/core/src/facade/async';
 
 @Component({
   selector: 'async-app',

modules/playground/src/bootstrap.ts

@@ -0,0 +1,95 @@
+declare var System: any;
+
+
+(function(global) {
+
+  writeScriptTag('/all/playground/vendor/es6-shim.js');
+  writeScriptTag('/all/playground/vendor/zone.js');
+  writeScriptTag('/all/playground/vendor/long-stack-trace-zone.js');
+  writeScriptTag('/all/playground/vendor/system.src.js');
+  writeScriptTag('/all/playground/vendor/Reflect.js');
+  writeScriptTag('/all/playground/vendor/Rx.js', 'playgroundBootstrap()');
+  global.playgroundBootstrap = playgroundBootstrap;
+
+
+
+  ////////
+  function playgroundBootstrap() {
+    // check query param
+    var useBundles = location.search.indexOf('bundles=false') == -1;
+    if (useBundles) {
+      System.config({
+        map: {
+          'index': 'index.js',
+          '@angular/core': '/packages-dist/core/core.umd.js',
+          '@angular/common': '/packages-dist/common/common.umd.js',
+          '@angular/compiler': '/packages-dist/compiler/compiler.umd.js',
+          '@angular/platform-browser': '/packages-dist/platform-browser/platform-browser.umd.js',
+          '@angular/platform-browser-dynamic': '/packages-dist/platform-browser-dynamic/platform-browser-dynamic.umd.js',
+          '@angular/http': '/packages-dist/http/http.umd.js',
+          '@angular/upgrade': '/packages-dist/upgrade/upgrade.umd.js',
+          '@angular/router': '/packages-dist/router/router.umd.js',
+          '@angular/core/src/facade': '/all/@angular/core/src/facade',
+          'rxjs': location.pathname.replace(/index\.html$/, '') + 'rxjs'
+        },
+        packages: {
+          'app': {
+            defaultExtension: 'js'
+          },
+          '@angular/core/src/facade': {
+            defaultExtension: 'js'
+          }
+        }
+      });
+    } else {
+      console.warn("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': {
+          //   main: 'index.js',
+          //   defaultExtension: 'js'
+          // },
+          '@angular/core': {
+            main: 'index.js',
+            defaultExtension: 'js'
+          },
+          '@angular/compiler': {
+            main: 'index.js',
+            defaultExtension: 'js'
+          },
+          '@angular/common': {
+            main: 'index.js',
+            defaultExtension: 'js'
+          },
+          '@angular/platform-browser': {
+            main: 'index.js',
+            defaultExtension: 'js'
+          },
+          '@angular/platform-browser-dynamic': {
+            main: 'index.js',
+            defaultExtension: 'js'
+          }
+          // 'rxjs': {
+          //   defaultExtension: 'js'
+          // }
+        }
+      });
+    }
+
+
+    // BOOTSTRAP the app!
+    System.import('index').then(function (m) {
+      m.main();
+    }, console.error.bind(console));
+  }
+
+
+  function writeScriptTag(scriptUrl, onload?) {
+    document.write(`<script src="${scriptUrl}" onload="${onload}"></script>`);
+  }
+}(window));

modules/playground/src/gestures/index.ts

@@ -1,4 +1,4 @@
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
 
 @Component({selector: 'gestures-app', templateUrl: 'template.html'})

modules/playground/src/hash_routing/index.html

@@ -1,12 +1,12 @@
 <!doctype html>
 <html>
 <title>Routing Example</title>
-<base href="/playground/src/hash_routing/">
+<base href="/all/playground/src/hash_routing/">
 <body>
   <example-app>
     Loading...
   </example-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/hash_routing/index.ts

@@ -1,5 +1,5 @@
 import {Component, provide} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {RouteConfig, Route, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router';
 import {HashLocationStrategy, LocationStrategy} from '@angular/common';
 

modules/playground/src/hello_world/index.html

@@ -1,11 +1,11 @@
 <!doctype html>
 <html>
   <title>Hello Angular 2.0</title>
-<body>
+  <body>
   <hello-app>
     Loading...
   </hello-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/hello_world/index.ts

@@ -1,4 +1,4 @@
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Renderer, ElementRef, Component, Directive, Injectable} from '@angular/core';
 
 export function main() {

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

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Http, Response} from '@angular/http/http';
+import {Http, Response} from '@angular/http';
 import 'rxjs/add/operator/map';
 
 @Component({

modules/playground/src/http/index.html

@@ -6,6 +6,6 @@
     Loading...
   </http-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/http/index.ts

@@ -1,6 +1,6 @@
-import {bootstrap} from '@angular/platform-browser';
-import {HTTP_PROVIDERS} from '@angular/http/http';
-import {HttpCmp} from './http_comp';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {HTTP_PROVIDERS} from '@angular/http';
+import {HttpCmp} from './app/http_comp';
 
 export function main() {
   bootstrap(HttpCmp, [HTTP_PROVIDERS]);

modules/playground/src/jsonp/app/jsonp_comp.ts

@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
-import {Jsonp, Response} from '@angular/http/http';
-import {ObservableWrapper} from '@angular/facade';
+import {Jsonp} from '@angular/http';
 
 @Component({
   selector: 'jsonp-app',

modules/playground/src/jsonp/index.html

@@ -6,6 +6,6 @@
     Loading...
   </jsonp-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/jsonp/index.ts

@@ -1,6 +1,6 @@
-import {bootstrap} from '@angular/platform-browser';
-import {JSONP_PROVIDERS} from '@angular/http/http';
-import {JsonpCmp} from './jsonp_comp';
+import {bootstrap} from '@angular/platform-browser-dynamic';
+import {JSONP_PROVIDERS} from '@angular/http';
+import {JsonpCmp} from './app/jsonp_comp';
 
 export function main() {
   bootstrap(JsonpCmp, [JSONP_PROVIDERS]);

modules/playground/src/key_events/index.html

@@ -21,6 +21,6 @@
     Loading...
   </key-events-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/key_events/index.ts

@@ -1,4 +1,4 @@
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
 import {KeyEventsPlugin} from '@angular/platform-browser/src/dom/events/key_events';
 

modules/playground/src/model_driven_forms/index.html

@@ -14,6 +14,6 @@
     Loading...
   </model-driven-forms>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/model_driven_forms/index.ts

@@ -1,8 +1,7 @@
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {
   FORM_DIRECTIVES,
   ControlGroup,
-  NgControl,
   Validators,
   NgFormModel,
   FormBuilder,
@@ -11,7 +10,7 @@ import {
 } from '@angular/common';
 import {Component, Directive, Host} from '@angular/core';
 
-import {RegExpWrapper, print, isPresent} from '@angular/facade';
+import {RegExpWrapper, print, isPresent} from '@angular/core/src/facade/lang';
 import {AbstractControl} from '@angular/common';
 
 /**

modules/playground/src/order_management/index.html

@@ -14,6 +14,6 @@
     Loading...
   </order-management-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/order_management/index.ts

@@ -1,4 +1,4 @@
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {
   Component,
   Directive,
@@ -12,7 +12,7 @@ import {
 } from '@angular/core';
 import {NgIf, NgFor, FORM_DIRECTIVES} from '@angular/common';
 
-import {ListWrapper} from '@angular/facade';
+import {ListWrapper} from '@angular/core/src/facade/collection';
 
 /**
  * You can find the Angular 1 implementation of this example here:

modules/playground/src/person_management/index.html

@@ -14,6 +14,6 @@
     Loading...
   </person-management-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/relative_assets/index.html

@@ -6,6 +6,6 @@
     Loading...
   </relative-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/relative_assets/index.ts

@@ -1,7 +1,7 @@
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 
 import {Renderer, ElementRef, Component, Directive, Injectable} from '@angular/core';
-import {MyCmp} from './my_cmp/my_cmp';
+import {MyCmp} from './app/my_cmp';
 
 export function main() {
   bootstrap(RelativeApp);

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

@@ -2,9 +2,8 @@ import {Component, Injectable} from '@angular/core';
 import {RouterLink, RouteConfig, Router, Route, RouterOutlet, RouteParams} from '@angular/router';
 import * as db from './data';
 import {Location} from '@angular/common';
-import {PromiseWrapper} from '@angular/facade';
-import {isPresent, DateWrapper} from '@angular/facade';
-import {PromiseCompleter} from '@angular/facade';
+import {PromiseWrapper, PromiseCompleter} from '@angular/core/src/facade/async';
+import {isPresent, DateWrapper} from '@angular/core/src/facade/lang';
 
 class InboxRecord {
   id: string = '';
@@ -82,7 +81,7 @@ class DbService {
   }
 }
 
-@Component({selector: 'inbox-detail', directives: [RouterLink], templateUrl: 'inbox-detail.html'})
+@Component({selector: 'inbox-detail', directives: [RouterLink], templateUrl: 'app/inbox-detail.html'})
 class InboxDetailCmp {
   record: InboxRecord = new InboxRecord();
   ready: boolean = false;
@@ -93,7 +92,7 @@ class InboxDetailCmp {
   }
 }
 
-@Component({selector: 'inbox', templateUrl: 'inbox.html', directives: [RouterLink]})
+@Component({selector: 'inbox', templateUrl: 'app/inbox.html', directives: [RouterLink]})
 class InboxCmp {
   items: InboxRecord[] = [];
   ready: boolean = false;
@@ -118,7 +117,7 @@ class InboxCmp {
 }
 
 
-@Component({selector: 'drafts', templateUrl: 'drafts.html', directives: [RouterLink]})
+@Component({selector: 'drafts', templateUrl: 'app/drafts.html', directives: [RouterLink]})
 class DraftsCmp {
   items: InboxRecord[] = [];
   ready: boolean = false;
@@ -134,7 +133,7 @@ class DraftsCmp {
 @Component({
   selector: 'inbox-app',
   viewProviders: [DbService],
-  templateUrl: 'inbox-app.html',
+  templateUrl: 'app/inbox-app.html',
   directives: [RouterOutlet, RouterLink]
 })
 @RouteConfig([

modules/playground/src/routing/index.html

@@ -3,12 +3,12 @@
   <title>Routing Example</title>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/css/gumby.css" />
   <link rel="stylesheet" type="text/css" href="./css/app.css" />
-  <base href="/playground/src/routing/">
+  <base href="/all/playground/src/routing/">
 <body>
   <inbox-app>
     Loading...
   </inbox-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/routing/index.ts

@@ -1,6 +1,6 @@
-import {InboxApp} from './inbox-app';
+import {InboxApp} from './app/inbox-app';
 import {provide} from '@angular/core';
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HashLocationStrategy, LocationStrategy} from '@angular/common';
 import {ROUTER_PROVIDERS} from '@angular/router';
 

modules/playground/src/sourcemap/index.html

@@ -11,6 +11,6 @@
   via source maps!
   </p>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/sourcemap/index.ts

@@ -1,5 +1,5 @@
-import {BaseException, WrappedException} from '@angular/facade';
-import {bootstrap} from '@angular/platform-browser';
+import {BaseException} from '@angular/core/src/facade/exceptions';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
 
 @Component({

modules/playground/src/svg/index.html

@@ -5,6 +5,6 @@
   <svg-app>
     Loading...
   </svg-app>
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/svg/index.ts

@@ -1,4 +1,4 @@
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
 
 @Component({selector: '[svg-group]', template: `<svg:text x="20" y="20">Hello</svg:text>`})

modules/playground/src/template_driven_forms/index.html

@@ -14,6 +14,6 @@
     Loading...
   </template-driven-forms>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/template_driven_forms/index.ts

@@ -1,5 +1,5 @@
 import {bootstrap} from '@angular/platform-browser-dynamic';
-import {Component, Directive, Host, forwardRef, Provider} from '@angular/core';
+import {Component, Directive, Host} from '@angular/core';
 import {
   ControlGroup,
   NgIf,
@@ -11,7 +11,7 @@ import {
   NgForm
 } from '@angular/common';
 
-import {RegExpWrapper, print, isPresent} from '@angular/facade';
+import {RegExpWrapper, print, isPresent} from '@angular/core/src/facade/lang';
 
 /**
  * A domain model we are binding the form controls to.

modules/playground/src/todo/app/TodoStore.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {ListWrapper, Predicate} from '@angular/facade';
+import {ListWrapper, Predicate} from '@angular/core/src/facade/collection';
 
 // base model for RecordStore
 export abstract class KeyModel {

modules/playground/src/todo/index.html

@@ -1,13 +1,14 @@
 <!doctype html>
-<html>
+<base>
   <title>Todo Angular 2</title>
   <link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
+  <base href="./">
 <body>
   <todo-app>
     Loading...
   </todo-app>
 
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/todo/index.ts

@@ -1,7 +1,7 @@
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
 import {NgFor} from '@angular/common';
-import {Store, Todo, TodoFactory} from './services/TodoStore';
+import {Store, Todo, TodoFactory} from './app/TodoStore';
 
 @Component({
   selector: 'todo-app',

modules/playground/src/upgrade/index.html

@@ -16,7 +16,7 @@
     <hr>
     <span class="greeting">Greetings from {{name}}!</span>
   </upgrade-app>
-  <script src="/benchmarks_external/src/angular.js"></script>
-  $SCRIPTS$
+  <script src="/all/playground/vendor/angular.js"></script>
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

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

@@ -7,7 +7,7 @@
     <image-demo>
     </image-demo>
 
-    $SCRIPTS$
+    <script src="../../bootstrap.js"></script>
     <!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
 

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

@@ -1,8 +1,9 @@
 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/facade';
 import {FileReader, Uint8ArrayWrapper} from './file_api';
-import {TimerWrapper} from '@angular/facade';
+
 
 @Component({selector: 'image-demo', viewProviders: [BitmapService], templateUrl: 'image_demo.html'})
 export class ImageDemo {

modules/playground/src/web_workers/images/single_thread.html

@@ -8,7 +8,7 @@
     <image-demo>
     </image-demo>
 
-    $SCRIPTS$
+    <script src="../bootstrap.js"></script>
     <!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
 

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

@@ -1,4 +1,4 @@
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {ImageDemo} from './index_common';
 
 export function main() {

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

@@ -8,6 +8,6 @@
     Loading...
   </input-app>
 
-  $SCRIPTS$
+  <script src="../../bootstrap.js"></script>
 </body>
 </html>

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

@@ -21,6 +21,6 @@
     Loading...
   </hello-app>
 
-  $SCRIPTS$
+  <script src="../../bootstrap.js"></script>
 </body>
 </html>

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

@@ -1,5 +1,5 @@
 import {Renderer, ElementRef, Component, Directive, Injectable} from '@angular/core';
-import {StringWrapper} from '@angular/facade';
+import {StringWrapper} from '@angular/core/src/facade/lang';
 
 // A service available to the Injector, used by the HelloCmp component.
 @Injectable()

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

@@ -7,6 +7,6 @@
   <button type="button" id="send_echo">Send Echo</button>
   <p id="echo_result"></p>
   <p id="ui_result"></p>
-  $SCRIPTS$
+  <script src="../../bootstrap.js"></script>
 </body>
 </html>

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

@@ -1,9 +1,9 @@
-import {PromiseWrapper} from '@angular/facade';
+import {PromiseWrapper} from '@angular/core/src/facade/async';
 import {Component} from '@angular/core';
 import {
   ServiceMessageBrokerFactory,
   PRIMITIVE
-} from '../../../../@angular/platform-browser/src/worker_app';
+} from '@angular/platform-browser/src/worker_app';;
 
 const ECHO_CHANNEL = "ECHO";
 

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

@@ -3,6 +3,6 @@
   <title>Web Worker Router Example</title>
 <body>
   <app></app>
-  $SCRIPTS$
+  <script src="../../bootstrap.js"></script>
 </body>
 </html>

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

@@ -8,6 +8,6 @@
   </todo-app>
 
 
-  $SCRIPTS$
+  <script src="../../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/web_workers/todo/index_web_socket.html

@@ -8,6 +8,6 @@
   </todo-app>
 
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/web_workers/todo/services/TodoStore.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {ListWrapper, Predicate} from '@angular/facade';
+import {ListWrapper, Predicate} from '@angular/core/src/facade/collection';
 
 // base model for RecordStore
 export class KeyModel {

modules/playground/src/zippy_component/app/zippy.ts

@@ -1,7 +1,7 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {ObservableWrapper} from '@angular/facade';
+import {ObservableWrapper} from '@angular/core/src/facade/async';
 
-@Component({selector: 'zippy', templateUrl: 'zippy.html'})
+@Component({selector: 'zippy', templateUrl: 'app/zippy.html'})
 export class Zippy {
   visible: boolean = true;
   @Input() title: string = '';

modules/playground/src/zippy_component/index.html

@@ -6,6 +6,6 @@
     Loading...
   </zippy-app>
 
-  $SCRIPTS$
+  <script src="../bootstrap.js"></script>
 </body>
 </html>

modules/playground/src/zippy_component/index.ts

@@ -1,6 +1,6 @@
-import {bootstrap} from '@angular/platform-browser';
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {Component} from '@angular/core';
-import {Zippy} from './zippy';
+import {Zippy} from './app/zippy';
 
 @Component({
   selector: 'zippy-app',

modules/tsconfig.json

@@ -26,7 +26,6 @@
     "benchmarks_external",
     "benchpress",
     "payload_tests",
-    "playground",
     "rollup-test",
     "upgrade-ts2dart.d.ts",
     "zone-ts2dart.d.ts"

protractor-js-new-world.conf.js

@@ -0,0 +1,39 @@
+var BROWSER_OPTIONS = {
+  LocalChrome: {
+    'browserName': 'chrome'
+  },
+  ChromeOnTravis: {
+    browserName: 'chrome',
+    chromeOptions: {
+      'args': ['--no-sandbox'],
+      'binary': process.env.CHROME_BIN
+    }
+  }
+};
+
+
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    'dist/all/**/e2e_test/**/*_spec.js'
+  ],
+  exclude: [
+    '**/alt_routing/**', // temporary package
+    '**/web_workers/**', // needs to be setup
+    '**/key_events/**',  // can't tell why this is failing
+    '**/sourcemap/**'     // fails only on travis
+  ],
+  capabilities: process.env.TRAVIS ? BROWSER_OPTIONS.ChromeOnTravis : BROWSER_OPTIONS.LocalChrome,
+  directConnect: true,
+  baseUrl: 'http://localhost:7777/',
+  framework: 'jasmine2',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 60000,
+    print: function(msg) { console.log(msg)}
+  },
+  useAllAngular2AppRoots: true
+};
+
+

protractor-js.conf.js

@@ -2,7 +2,7 @@ var data = module.exports = require('./protractor-shared.js');
 var config = data.config;
 
 config.baseUrl = 'http://localhost:8001/';
-// TODO: remove exclusion when JS verison of scrolling benchmark is available
+// TODO: remove exclusion when JS version of scrolling benchmark is available
 config.exclude.push('dist/js/cjs/benchmarks_external/e2e_test/naive_infinite_scroll_spec.js');
 config.exclude.push('dist/js/cjs/benchmarks_external/e2e_test/naive_infinite_scroll_perf.js');