May 20 2017

Upgrading from Angular 2 to Angular 4

I recently updated this Angular example from Angular 2.4.9 to Angular 4.1.0 and was pleasantly surprised at how simple it was, no code changes were required, all I had to do was update the package.json and tsconfig.json files. I'm guessing the changes required may vary across different projects that implement different functionality, but this was all I needed to do for my project.

You can view the changes to the Angular example on github here and I've included both versions of each file below to show how easy it was to upgrade from Angular 2 to Angular 4. 

After I'd made the below changes I just cleaned out my node_modules directory, ran npm install and npm start and everything just worked! :)


Angular 2.4.9 package.json

{
    "name": "angular2-registration-login-example",
    "version": "1.0.0",
    "repository": {
        "type": "git",
        "url": "https://github.com/cornflourblue/angular2-registration-login-example.git"
    },
    "scripts": {
        "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
        "lite": "lite-server",
        "tsc": "tsc",
        "tsc:w": "tsc -w"
    },
    "license": "MIT",
    "dependencies": {
        "@angular/common": "~2.4.0",
        "@angular/compiler": "~2.4.0",
        "@angular/core": "~2.4.0",
        "@angular/forms": "~2.4.0",
        "@angular/http": "~2.4.0",
        "@angular/platform-browser": "~2.4.0",
        "@angular/platform-browser-dynamic": "~2.4.0",
        "@angular/router": "~3.4.0",
        "@angular/upgrade": "~2.4.0",
        "core-js": "^2.4.1",
        "rxjs": "5.0.1",
        "systemjs": "0.19.40",
        "zone.js": "^0.7.4"
    },
    "devDependencies": {
        "concurrently": "^3.1.0",
        "lite-server": "^2.2.2",
        "typescript": "^2.0.10",

        "@types/core-js": "0.9.36",
        "@types/node": "^6.0.46",
        "@types/jasmine": "^2.5.36"
    }
}


Angular 4.1.0 package.json

{
	"name": "angular2-registration-login-example",
	"version": "1.0.0",
	"repository": {
		"type": "git",
		"url": "https://github.com/cornflourblue/angular2-registration-login-example.git"
	},
	"scripts": {
		"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
		"lite": "lite-server",
		"tsc": "tsc",
		"tsc:w": "tsc -w"
	},
	"license": "MIT",
	"dependencies": {
		"@angular/common": "^4.0.0",
		"@angular/compiler": "^4.0.0",
		"@angular/core": "^4.0.0",
		"@angular/forms": "^4.0.0",
		"@angular/http": "^4.0.0",
		"@angular/platform-browser": "^4.0.0",
		"@angular/platform-browser-dynamic": "^4.0.0",
		"@angular/router": "^4.0.0",
		"core-js": "^2.4.1",
		"rxjs": "^5.2.0",
		"systemjs": "^0.19.47",
		"zone.js": "^0.8.5"
	},
	"devDependencies": {
		"@types/node": "^6.0.60",
		"concurrently": "^3.1.0",
		"lite-server": "^2.3.0",
		"typescript": "^2.2.2"
	}
}


Angular 2.4.9 tsconfig.json

{
	"compilerOptions": {
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"module": "commonjs",
		"moduleResolution": "node",
		"noImplicitAny": true,
		"removeComments": false,
		"sourceMap": true,
		"suppressImplicitAnyIndexErrors": true,
		"target": "es5",
		"typeRoots": [
			"./node_modules/@types/"
		]
	},
	"compileOnSave": true,
	"exclude": [
		"node_modules/*"
	]
}


Angular 4.1.0 tsconfig.json

{
	"compilerOptions": {
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"lib": [ "es2015", "dom" ],
		"module": "commonjs",
		"moduleResolution": "node",
		"noImplicitAny": true,
		"sourceMap": true,
		"suppressImplicitAnyIndexErrors": true,
		"target": "es5"
	},
	"exclude": [
		"node_modules/*"
	]
}


Recommended Books on Angular 2/4


Web Developer Sydney

Feel free to drop me a line if you're looking for an Angular 2/4 developer or web developer in Sydney Australia, I also provide remote contracting services for clients outside Sydney.


Sponsored by