Upgrading Angular 2 from beta 17 to RC4–Lessons learned Part 1

Last week I had to make a change to an existing Angular 2 codebase(written using Angular 2 Beta 17). Before applying the change I decided to (quickly) update the code to Angular 2 RC4. Turns out that quickly wasn’t so quick after all… A lot of things have changed between the beta and RC.

Here are some of the lessons I learned along the way:

NPM packages

The NPM packages have been renamed and do no longer contain Angular2 in their name. Instead they switched to @angular.

Here is my updated package.json:

	{
	"name": "angular2-quickstart",
	"version": "1.0.0",
	"scripts": {
	"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
	"lite": "lite-server",
	"postinstall": "",
	"tsc": "tsc",
	"tsc:w": "tsc -w",
	"typings": "typings"
	},
	"license": "ISC",
	"dependencies": {
	"@angular/common": "2.0.0-rc.4",
	"@angular/compiler": "2.0.0-rc.4",
	"@angular/core": "2.0.0-rc.4",
	"@angular/forms": "0.2.0",
	"@angular/http": "2.0.0-rc.4",
	"@angular/platform-browser": "2.0.0-rc.4",
	"@angular/platform-browser-dynamic": "2.0.0-rc.4",
	"@angular/router": "3.0.0-beta.1",
	"@angular/router-deprecated": "2.0.0-rc.2",
	"@angular/upgrade": "2.0.0-rc.4",
	"systemjs": "0.19.27",
	"core-js": "^2.4.0",
	"reflect-metadata": "^0.1.3",
	"rxjs": "5.0.0-beta.6",
	"zone.js": "^0.6.12",
	"bootstrap": "^3.3.6"
	},
	"devDependencies": {
	"concurrently": "^2.0.0",
	"lite-server": "^2.2.0",
	"typescript": "^1.8.10",
	"typings":"^0.8.1"
	}
	}

view raw package.json hosted with ❤ by GitHub

Of course I had to update the imports inside my components as well:

import {Component} from "@angular/core";
import {ROUTER_DIRECTIVES} from '@angular/router'
import {HTTP_PROVIDERS}    from '@angular/http';

System.config changes

After updating my NPM references, I got another error:

Error: SyntaxError: Unexpected token <(…)

Angular was no longer able to load my scripts. When I took a look at the network tab in the browser I noticed that the wrong URL was used. I had to update my system.config to fix this:

	var ngPackageNames = [
	'common',
	'compiler',
	'core',
	'forms',
	'http',
	'platform-browser',
	'platform-browser-dynamic',
	'router',
	'router-deprecated',
	'upgrade'
	];
	var packages={
	SampleApp: {
	format: 'register',
	defaultExtension: 'js'
	},
	'rxjs': { defaultExtension: 'js' }
	}
	// Individual files (~300 requests):
	function packIndex(pkgName) {
	packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
	}
	// Bundled (~40 requests):
	function packUmd(pkgName) {
	packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
	}
	// Most environments should use UMD; some (Karma) need the individual index files
	var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
	// Add package entries for angular packages
	ngPackageNames.forEach(setPackageConfig);
	System.config({
	map: {
	SampleApp: 'Apps/SampleApp',
	'@angular': 'node_modules/@angular',
	'rxjs': 'node_modules/rxjs'
	},
	packages: packages
	});
	System.import('SampleApp/main')
	.then(null, console.error.bind(console));

view raw system.config.js hosted with ❤ by GitHub

 

https://www.towfeek.se/2016/05/upgrading-to-angular-2-rc1-from-beta-lessons-learned/

https://angular.io/docs/ts/latest/guide/router.html

New script references

Now that the NPM packages were imported correctly, I had good hope that everything would work. But no, a new error appeared:

Reflect.getOwnMetadata is not a function

Some new scripts had to be referenced that were not required before. So I updated my script references and added the following:

	<script src="node_modules/core-js/client/shim.min.js"></script>
	<script src="node_modules/zone.js/dist/zone.js"></script>
	<script src="node_modules/systemjs/dist/system.src.js"></script>
	<script src="node_modules/reflect-metadata/Reflect.js"></script>

view raw scriptreferences.html hosted with ❤ by GitHub

We finally started to make some progress, next issue is tackling the new router. But that is for another blog post.