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

 

Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.

 


Sponsored by