chore(upgrade) bring upgrade tutorial up to speed with alpha.54

- Use angular2-polyfills bundle
- Use separate upgrade bundle
- Use Rx bundle and remove superfluous SystemJS config for RxJS
- Switch to CSS file tree from ASCII

public/docs/_examples/upgrade/ts/ng2_components/app/index.html

@@ -12,20 +12,17 @@
   <script src="bower_components/angular-animate/angular-animate.js"></script>
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/angular-resource/angular-resource.js"></script>
+  <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
   <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
+  <script src="../node_modules/angular2/bundles/upgrade.dev.js"></script>
+  <script src="../node_modules/rxjs/bundles/Rx.js"></script>
   <script src="../node_modules/angular2/bundles/http.dev.js"></script>
   <script>
     System.config({
       packages: {
         'js': {
           defaultExtension: 'js'
-        },
-        'rxjs': {
-          defaultExtension: 'js'
         }
-      },
-      map: {
-        'rxjs' : '/node_modules/rxjs'
       }
     });
     System.import('js/app.module');

public/docs/_examples/upgrade/ts/ng2_components/package.json

@@ -6,12 +6,12 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-alpha.53",
+    "angular2": "2.0.0-alpha.54",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-alpha.14",
+    "rxjs": "5.0.0-beta.0",
-    "zone.js": "0.5.8",
+    "zone.js": "0.5.10",
     "systemjs": "0.19.6"
   },
   "devDependencies": {

public/docs/_examples/upgrade/ts/ng2_components/test/karma.conf.js

@@ -13,26 +13,28 @@ module.exports = function(config){
       'app/bower_components/angular-mocks/angular-mocks.js',
       // #docregion ng2
       'node_modules/systemjs/dist/system.src.js',
+      'node_modules/angular2/bundles/angular2-polyfills.js',
       'node_modules/angular2/bundles/angular2.dev.js',
+      'node_modules/angular2/bundles/upgrade.dev.js',
       // #enddocregion ng2
       // #docregion ng2-http
+      'node_modules/rxjs/bundles/Rx.js',
       'node_modules/angular2/bundles/http.dev.js',
       // #enddocregion ng2-http
       'test/karma_test_shim.js',
       {pattern: 'app/js/**/*.js', included: false, watched: true},
       {pattern: 'test/unit/**/*.js', included: false, watched: true},
       // #docregion ng2-testing
-      'node_modules/angular2/bundles/testing.js',
+      'node_modules/angular2/bundles/testing.dev.js',
-      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
       // #enddocregion ng2-testing
 
       // #docregion html
-      {pattern: 'js/**/*.html', included: false, watched: true}
+      {pattern: 'app/js/**/*.html', included: false, watched: true}
     ],
 
     proxies: {
       // required for component assests fetched by Angular's compiler
-      "/js/": "/base/app/js"
+      "/js": "/base/app/js"
     },
     // #enddocregion html
 
@@ -51,9 +53,7 @@ module.exports = function(config){
     junitReporter : {
       outputFile: 'test_out/unit.xml',
       suite: 'unit'
-    },
+    }
-
-    logLevel: 'LOG_DEBUG'
 
   });
 };

public/docs/_examples/upgrade/ts/ng2_components/test/karma_test_shim.js

@@ -17,13 +17,7 @@ System.config({
               pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
               return pathsMapping;
             }, {})
-    },
-    'rxjs': {
-      defaultExtension: 'js'
     }
-  },
-  map: {
-    'rxjs' : '/base/node_modules/rxjs'
   }
 });
 

public/docs/_examples/upgrade/ts/ng2_final/app/index.html

@@ -9,7 +9,9 @@
   <link rel="stylesheet" href="css/animations.css">
   <!-- #docregion scripts -->
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
+  <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
   <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
+  <script src="../node_modules/rxjs/bundles/Rx.js"></script>
   <script src="../node_modules/angular2/bundles/http.dev.js"></script>
   <!-- #docregion ng2-router -->
   <script src="../node_modules/angular2/bundles/router.dev.js"></script>
@@ -19,13 +21,7 @@
       packages: {
         'js': {
           defaultExtension: 'js'
-        },
-        'rxjs': {
-          defaultExtension: 'js'
         }
-      },
-      map: {
-        'rxjs' : '/node_modules/rxjs'
       }
     });
     System.import('js/app');

public/docs/_examples/upgrade/ts/ng2_final/package.json

@@ -6,12 +6,12 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-alpha.53",
+    "angular2": "2.0.0-alpha.54",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-alpha.14",
+    "rxjs": "5.0.0-beta.0",
-    "zone.js": "0.5.8",
+    "zone.js": "0.5.10",
     "systemjs": "0.19.6"
   },
   "devDependencies": {

public/docs/_examples/upgrade/ts/ng2_final/test/karma.conf.js

@@ -4,15 +4,16 @@ module.exports = function(config){
     basePath : '..',
     files : [
       'node_modules/systemjs/dist/system.src.js',
+      'node_modules/angular2/bundles/angular2-polyfills.js',
       'node_modules/angular2/bundles/angular2.dev.js',
+      'node_modules/rxjs/bundles/Rx.js',
       'node_modules/angular2/bundles/http.dev.js',
-      'node_modules/angular2/bundles/testing.js',
+      'node_modules/angular2/bundles/testing.dev.js',
       'node_modules/angular2/bundles/router.dev.js',
       'test/karma_test_shim.js',
       {pattern: 'app/js/**/*.js', included: false, watched: true},
-      {pattern: 'app/**/*.html', included: false, watched: true},
+      {pattern: 'app/js/**/*.html', included: false, watched: true},
-      {pattern: 'test/unit/**/*.js', included: false, watched: true},
+      {pattern: 'test/unit/**/*.js', included: false, watched: true}
-      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false}
     ],
     autoWatch : true,
     frameworks: ['jasmine'],
@@ -28,7 +29,7 @@ module.exports = function(config){
     },
     proxies: {
       // required for component assests fetched by Angular's compiler
-      "/app/js/": "/base/src/app/js/"
+      "/js/": "/base/app/js/"
     }
   });
 };

public/docs/_examples/upgrade/ts/ng2_final/test/karma_test_shim.js

@@ -17,13 +17,7 @@ System.config({
               pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
               return pathsMapping;
             }, {})
-    },
-    'rxjs': {
-      defaultExtension: 'js'
     }
-  },
-  map: {
-    'rxjs' : '/base/node_modules/rxjs'
   }
 });
 

public/docs/_examples/upgrade/ts/ng2_initial/app/index.html

@@ -18,8 +18,10 @@
   <script src="../node_modules/es6-promise/dist/es6-promise.js"></script>
   <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
   <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
+  <script src="../node_modules/angular2/bundles/upgrade.dev.js"></script>
   <!-- #enddocregion ng2 -->
   <!-- #docregion ng2-http -->
+  <script src="../node_modules/rxjs/bundles/Rx.js"></script>
   <script src="../node_modules/angular2/bundles/http.dev.js"></script>
   <!-- #enddocregion ng2-http -->
   <!-- #docregion systemconfig -->
@@ -28,13 +30,7 @@
       packages: {
         'js': {
           defaultExtension: 'js'
-        },
-        'rxjs': {
-          defaultExtension: 'js'
         }
-      },
-      map: {
-        'rxjs' : '/node_modules/rxjs'
       }
     });
     System.import('js/app.module');

public/docs/_examples/upgrade/ts/ng2_initial/package.json

@@ -6,12 +6,12 @@
   "repository": "https://github.com/angular/angular-phonecat",
   "license": "MIT",
   "dependencies": {
-    "angular2": "2.0.0-alpha.53",
+    "angular2": "2.0.0-alpha.54",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-alpha.14",
+    "rxjs": "5.0.0-beta.0",
-    "zone.js": "0.5.8",
+    "zone.js": "0.5.10",
     "systemjs": "0.19.6"
   },
   "devDependencies": {

public/docs/_examples/upgrade/ts/ng2_initial/test/karma.conf.js

@@ -17,16 +17,17 @@ module.exports = function(config){
       'node_modules/es6-promise/dist/es6-promise.js',
       'node_modules/angular2/bundles/angular2-polyfills.js',
       'node_modules/angular2/bundles/angular2.dev.js',
+      'node_modules/angular2/bundles/upgrade.dev.js',
       // #enddocregion ng2
       // #docregion ng2-http
+      'node_modules/rxjs/bundles/Rx.js',
       'node_modules/angular2/bundles/http.dev.js',
       // #enddocregion ng2-http
       'test/karma_test_shim.js',
       {pattern: 'app/js/**/*.js', included: false, watched: true},
       {pattern: 'test/unit/**/*.js', included: false, watched: true},
       // #docregion ng2-testing
-      'node_modules/angular2/bundles/testing.js',
+      'node_modules/angular2/bundles/testing.dev.js'
-      {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
       // #enddocregion ng2-testing
     // #docregion ng2
     ],

public/docs/_examples/upgrade/ts/ng2_initial/test/karma_test_shim.js

@@ -17,13 +17,7 @@ System.config({
               pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
               return pathsMapping;
             }, {})
-    },
-    'rxjs': {
-      defaultExtension: 'js'
     }
-  },
-  map: {
-    'rxjs' : '/base/node_modules/rxjs'
   }
 });
 

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

@@ -47,45 +47,57 @@ include ../../../../_includes/_util-fns
   
   In terms of project structure, this is where our work begins
   
-  ```
+.filetree
-  angular-phonecat
+  .file angular-phonecat
-  ├── bower.json
+  .children
-  ├── package.json
+    .file bower.json
-  ├── app
+    .file package.json
-  │   ├── js
+    .file app
-  │   │   ├── core
+    .children
-  │   │   │   ├── checkmark.filter.js
+      .file js
-  │   │   │   ├── core.module.js
+      .children
-  │   │   │   └── phone.factory.js
+        .file core
-  │   │   ├── phone_detail
+        .children
-  │   │   │   ├── phone_detail.html
+          .file checkmark.filter.js
-  │   │   │   ├── phone_detail.module.js
+          .file core.module.js
-  │   │   │   └── phone_detail.controller.js
+          .file phone.factory.js
-  │   │   ├── phone_list
+        .file phone_detail
-  │   │   │   ├── phone_list.html
+        .children
-  │   │   │   ├── phone_list.module.js
+          .file phone_detail.html
-  │   │   │   └── phone_list.controller.js
+          .file phone_detail.module.js
-  │   │   └── app.module.js
+          .file phone_detail.controller.js
-  │   ├── css
+        .file phone_list
-  │   │   ├── animations.css
+        .children
-  │   │   └── app.css
+          .file phone_list.html
-  │   ├── img
+          .file phone_list.module.js
-  │   │   └── ...
+          .file phone_list.controller.js
-  │   ├── phones
+        .file app.module.js
-  │   │   └── ...
+      .file css
-  │   └── index.html
+      .children
-  └── test
+        .file animations.css
-      ├── e2e
+        .file app.css
-      │   └── scenarios.js
+      .file img
-      ├── unit
+      .children
-      │   ├── checkmark.filter.spec.js
+        .file  ...
-      │   ├── phone_detail.controller.spec.js
+      .file phones
-      │   ├── phone.factory.spec.js
+      .children
-      │   └── phone_list.controller.spec.js
+        .file  ...
-      ├── karma.conf.js
+      .file index.html
-      └── protractor-conf.js
+    .file test
-  ```
+    .children
+      .file e2e
+      .children
+        .file scenarios.js
+      .file unit
+      .children
+        .file checkmark.filter.spec.js
+        .file phone_detail.controller.spec.js
+        .file phone.factory.spec.js
+        .file phone_list.controller.spec.js
+      .file karma.conf.js
+      .file protractor-conf.js
 
+:marked
   This is actually a pretty good starting point. In particular, this organization
   follows the [Angular Style Guide](https://github.com/johnpapa/angular-styleguide),
   which is an important [preparation step](preparation.html) before a successful upgrade. 
@@ -505,7 +517,7 @@ include ../../../../_includes/_util-fns
 
 :marked
   The first two scripts are for adding some ES6 features to older browsers
-  that don't natively support them. The last two bring in Angular 2
+  that don't natively support them. The last three bring in Angular 2
   itself.
   
   While we're at it, let's also load the same files into unit tests by
@@ -607,15 +619,16 @@ include ../../../../_includes/_util-fns
   
   We can replace this implementation with an Angular 2 service class, while 
   keeping our controllers in Angular 1 land. In the new version we'll just use
-  the the `HTTP` service from Angular 2 instead of ngResource.
+  the the `Http` service from Angular 2 instead of ngResource.
   
-  The `HTTP` service isn't included in the main Angular 2 bundle, so we need to 
+  The `Http` service isn't included in the main Angular 2 bundle, so we need to 
-  include it in `index.html` separately:
+  include it in `index.html` separately. As the service uses RxJS Observables,
+  we also need to bring in the RxJS bundle:
   
 +makeExample('upgrade/ts/ng2_initial/app/index.html', 'ng2-http')
 
 :marked
-  We'll also do the same in `karma.conf.js` so that HTTP will be available in
+  We'll also do the same in `karma.conf.js` so that `Http` will be available in
   unit tests:
   
 +makeExample('upgrade/ts/ng2_initial/test/karma.conf.js', 'ng2-http')
@@ -677,14 +690,8 @@ include ../../../../_includes/_util-fns
 :marked
   Notice that we're importing the `map` operator of the RxJS `Observable` separately.
   We need to do this for all RxJS operators that we want to use, since Angular 2
-  does not load all of them by default. This does mean that we need to tweak our
+  does not load all of them by default.
-  SystemJS configuration a bit, so that it knows where to find the additional RxJS
-  code from. We installed the RxJS node module along with Angular 2, and we just need
-  let SystemJS know where it is:
-  
-+makeExample('upgrade/ts/ng2_initial/app/index.html', 'systemconfig', 'app/index.html')
 
-:marked
   The new `Phones` service now has the same features that the original, ngResource based
   service did. You can remove the old `phones.factory.ts` file. Now we just
   need to register the new service into the application, so that our Angular 1
@@ -743,17 +750,15 @@ include ../../../../_includes/_util-fns
   In any case, what we've achieved is a migration of a service to Angular 2
   without having to yet migrate the controllers that use it.
   
-  To bring our test suite up to speed with the changes, we should first enabled
+  To bring our test suite up to speed with the changes, we should first enable
-  the Angular 2 test support library to our unit test suite. We first need to 
+  the Angular 2 test support library in our unit test suite. We first need to 
-  add a couple more things to the list of files that Karma is loading:
+  add the angular `testing` bundle to list of files that Karma is loading:
   
 +makeExample('upgrade/ts/ng2_initial/test/karma.conf.js', 'ng2-testing')
 
 :marked
   Then we'll update the Karma test shim. It should load the Angular 2
-  browser adapter before getting to the spec files. It should also have
+  browser adapter before getting to the spec files:
-  similar mappings for RxJS as we now have in the SystemJS config
-  in `index.html`:
   
 +makeExample('upgrade/ts/ng2_initial/test/karma_test_shim.js', null, 'test/karma_test_shim.js')