On May 2nd Angular 2 moved from the beta stage to the release candidate stage and is currently on RC 1. The move from beta to RC was a bit more involved than the moves between beta. This post is going to cover the changes I went through to get my SPA sample application migrated to RC 1.
Update package.json
With this release Angular 2 was split from a single dependency in to multiple. The other big change is a rename of from angular2 to @angular. The following is my updated dependencies section.
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"
}
After the above change make sure to run npm install in the root of the project from a command prompt. Not sure if it was just me, but the dependency auto restore in Visual Studio wouldn’t work for the @angular dependencies.
Update gulpfile.js
Due to the changes in the dependency structure my gulpfile had to be updated to copy the new files to the proper locations. I took the opportunity to move all of my dependency to a lib folder.
gulp.task("angular2:moveLibs", function () {
return gulp.src([
"node_modules/@angular/common/**/*",
"node_modules/@angular/compiler/**/*",
"node_modules/@angular/core/**/*",
"node_modules/@angular/http/**/*",
"node_modules/@angular/platform-browser/**/*",
"node_modules/@angular/platform-browser-dynamic/**/*",
"node_modules/@angular/router/**/*",
"node_modules/@angular/router-deprecated/**/*",
"node_modules/@angular/upgrade/**/*",
"node_modules/systemjs/dist/system.src.js",
"node_modules/systemjs/dist/system-polyfills.js",
"node_modules/rxjs/**/*",
"node_modules/es6-shim/es6-shim.min.js",
"node_modules/zone.js/dist/zone.js",
"node_modules/reflect-metadata/Reflect.js"
],
{ base: "node_modules" })
.pipe(gulp.dest(paths.webroot + "Angular/lib"));
});
If you were using the previous version of my gulp take make sure to remove the old dependencies from the wwwroot/Angular/ folder.
Update Entry Point View
Again because of the dependency changes the entry point view for the Angular 2 application needed changes which is Angular2.cshtml in my project. A systemjs.config.js was added to handle the bulk of the configuration. The following is the full source for my entry point view.
<html>
<head>
<title>Angular 2 QuickStart</title>
<script src="~/Angular/lib/es6-shim/es6-shim.min.js"></script>
<script src="~/Angular/lib/zone.js/dist/zone.js"></script>
<script src="~/Angular/lib/reflect-metadata/Reflect.js"></script>
<script src="~/Angular/lib/systemjs/dist/system.src.js"></script>
<script src="~/Angular/app/systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
Add system.config.js
This new file is where the configuration of systemjs happens. I found this setup in Dan Wahlin’s Angular2-JumpStart project which can be found here. The only real changes I made from Dan’s file was to adjust the map section to match my folder layout.
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': '../Angular/app',
'rxjs': '../Angular/lib/rxjs',
'@angular': '../Angular/lib/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
Update Component Imports
With the change in package names all imports that were using angular2 need to be changed to @angular. The following is an example of this from my app.component.ts file.
Before:
import {Component} from 'angular2/core';
import {OnInit} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
After:
import {Component} from '@angular/core';
import {OnInit} from '@angular/core';
import {HTTP_PROVIDERS} from '@angular/http';
NgFor Change
There was also a slight syntax change around ngFor that changes the name declaration of the current item in the iteration of a loop. The following shows the before and after.
Before: *ngFor="#contact of contacts" After: *ngFor="let contact of contacts"
Complete
With the above changes my application was run able again. The hardest part of the upgrade for me was getting systemjs configured properly. Hope your upgrade goes smooth and if not leave a comment with what issues you had.
hiii, i am working in old angular2 rc1. my task is to convert it to new latest rc6. i am doing it manual. its so complicated to convert each component syntax to rc6 syntax.. is there any migration technique that convert all component together. if possible plzz suggest
Sorry I haven’t done any work with Angular 2 since RC 2.
its ok,thanks for concern.. anderson..
I do plan to revisit Angular 2 in the future, but it will be from the point of a new project not an upgrade. Best of luck in your migration!
Feel free to come back and leave comments if you find your answer.