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
- Angular 2 Cookbook - Second Edition by Matt Frisbie (a developer at Google)
- Angular 2 Development with TypeScript
by Yakov Fain and Anton Moiseev
Need Some Angular 2 Help?
Search fiverr for freelance Angular 2 developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!