Published: 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

 


Need Some Angular 2 Help?

Search fiverr to find help quickly from experienced Angular 2 freelance developers.


Follow me for updates

I share all new blog posts on Twitter and Facebook.


When I'm not coding

My wife and I are attempting to ride motorcycles around Australia and vlog about it on YouTube.


Comments


Supported by