diff --git a/public/docs/_examples/upgrade/ts/ng2_components/app/index.html b/public/docs/_examples/upgrade/ts/ng2_components/app/index.html
index be97a6cfe2..2bc6531b68 100644
--- a/public/docs/_examples/upgrade/ts/ng2_components/app/index.html
+++ b/public/docs/_examples/upgrade/ts/ng2_components/app/index.html
@@ -12,20 +12,17 @@
+
+
+
+
+
@@ -19,13 +21,7 @@
packages: {
'js': {
defaultExtension: 'js'
- },
- 'rxjs': {
- defaultExtension: 'js'
}
- },
- map: {
- 'rxjs' : '/node_modules/rxjs'
}
});
System.import('js/app');
diff --git a/public/docs/_examples/upgrade/ts/ng2_final/package.json b/public/docs/_examples/upgrade/ts/ng2_final/package.json
index d9428d6935..7dc5e6226d 100644
--- a/public/docs/_examples/upgrade/ts/ng2_final/package.json
+++ b/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",
- "zone.js": "0.5.8",
+ "rxjs": "5.0.0-beta.0",
+ "zone.js": "0.5.10",
"systemjs": "0.19.6"
},
"devDependencies": {
diff --git a/public/docs/_examples/upgrade/ts/ng2_final/test/karma.conf.js b/public/docs/_examples/upgrade/ts/ng2_final/test/karma.conf.js
index 78b81c4da1..5fad1839c4 100644
--- a/public/docs/_examples/upgrade/ts/ng2_final/test/karma.conf.js
+++ b/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: 'test/unit/**/*.js', included: false, watched: true},
- {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false}
+ {pattern: 'app/js/**/*.html', included: false, watched: true},
+ {pattern: 'test/unit/**/*.js', included: false, watched: true}
],
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/"
}
});
};
diff --git a/public/docs/_examples/upgrade/ts/ng2_final/test/karma_test_shim.js b/public/docs/_examples/upgrade/ts/ng2_final/test/karma_test_shim.js
index 43c3d123ee..07e5378108 100644
--- a/public/docs/_examples/upgrade/ts/ng2_final/test/karma_test_shim.js
+++ b/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'
}
});
diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html b/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html
index a0739be79e..26caa8b4e9 100644
--- a/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html
+++ b/public/docs/_examples/upgrade/ts/ng2_initial/app/index.html
@@ -18,8 +18,10 @@
+
+
@@ -28,13 +30,7 @@
packages: {
'js': {
defaultExtension: 'js'
- },
- 'rxjs': {
- defaultExtension: 'js'
}
- },
- map: {
- 'rxjs' : '/node_modules/rxjs'
}
});
System.import('js/app.module');
diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/package.json b/public/docs/_examples/upgrade/ts/ng2_initial/package.json
index d9428d6935..7dc5e6226d 100644
--- a/public/docs/_examples/upgrade/ts/ng2_initial/package.json
+++ b/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",
- "zone.js": "0.5.8",
+ "rxjs": "5.0.0-beta.0",
+ "zone.js": "0.5.10",
"systemjs": "0.19.6"
},
"devDependencies": {
diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/test/karma.conf.js b/public/docs/_examples/upgrade/ts/ng2_initial/test/karma.conf.js
index 5172938b23..6ad38dc6ba 100644
--- a/public/docs/_examples/upgrade/ts/ng2_initial/test/karma.conf.js
+++ b/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',
- {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
+ 'node_modules/angular2/bundles/testing.dev.js'
// #enddocregion ng2-testing
// #docregion ng2
],
diff --git a/public/docs/_examples/upgrade/ts/ng2_initial/test/karma_test_shim.js b/public/docs/_examples/upgrade/ts/ng2_initial/test/karma_test_shim.js
index 43c3d123ee..07e5378108 100644
--- a/public/docs/_examples/upgrade/ts/ng2_initial/test/karma_test_shim.js
+++ b/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'
}
});
diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade
index 713d4ea441..9b37be324d 100644
--- a/public/docs/ts/latest/guide/upgrade.jade
+++ b/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
- ```
- angular-phonecat
- ├── bower.json
- ├── package.json
- ├── app
- │ ├── js
- │ │ ├── core
- │ │ │ ├── checkmark.filter.js
- │ │ │ ├── core.module.js
- │ │ │ └── phone.factory.js
- │ │ ├── phone_detail
- │ │ │ ├── phone_detail.html
- │ │ │ ├── phone_detail.module.js
- │ │ │ └── phone_detail.controller.js
- │ │ ├── phone_list
- │ │ │ ├── phone_list.html
- │ │ │ ├── phone_list.module.js
- │ │ │ └── phone_list.controller.js
- │ │ └── app.module.js
- │ ├── css
- │ │ ├── animations.css
- │ │ └── app.css
- │ ├── img
- │ │ └── ...
- │ ├── phones
- │ │ └── ...
- │ └── index.html
- └── test
- ├── e2e
- │ └── scenarios.js
- ├── unit
- │ ├── checkmark.filter.spec.js
- │ ├── phone_detail.controller.spec.js
- │ ├── phone.factory.spec.js
- │ └── phone_list.controller.spec.js
- ├── karma.conf.js
- └── protractor-conf.js
- ```
+.filetree
+ .file angular-phonecat
+ .children
+ .file bower.json
+ .file package.json
+ .file app
+ .children
+ .file js
+ .children
+ .file core
+ .children
+ .file checkmark.filter.js
+ .file core.module.js
+ .file phone.factory.js
+ .file phone_detail
+ .children
+ .file phone_detail.html
+ .file phone_detail.module.js
+ .file phone_detail.controller.js
+ .file phone_list
+ .children
+ .file phone_list.html
+ .file phone_list.module.js
+ .file phone_list.controller.js
+ .file app.module.js
+ .file css
+ .children
+ .file animations.css
+ .file app.css
+ .file img
+ .children
+ .file ...
+ .file phones
+ .children
+ .file ...
+ .file index.html
+ .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
- include it in `index.html` separately:
+ The `Http` service isn't included in the main Angular 2 bundle, so we need to
+ 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
- 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')
+ does not load all of them by default.
-: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
- the Angular 2 test support library to our unit test suite. We first need to
- add a couple more things to the list of files that Karma is loading:
+ To bring our test suite up to speed with the changes, we should first enable
+ the Angular 2 test support library in our unit test suite. We first need to
+ 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
- similar mappings for RxJS as we now have in the SystemJS config
- in `index.html`:
+ browser adapter before getting to the spec files:
+makeExample('upgrade/ts/ng2_initial/test/karma_test_shim.js', null, 'test/karma_test_shim.js')