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
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Twitter at https://twitter.com/jason_watmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some Angular 2 Help?
Search fiverr to find help quickly from experienced Angular 2 developers.
Support my work
