This blog represents steps required to upgrade or update or migrate existing Angular 2 apps to Angular 5 apps. Greater details can be found on Angular 5 announcement blog.
The following are some of the activities which are recommended before the update/upgrade is done:
It is important to update package.json file for upgrading angular apps using Angular 4 to use Angular 5 modules. Once updated, later section discusses how to install latest modules.
Pay attention to the changes which needed to be made in package.json:
After making the above changes, this is how the code snippet should look like:
"dependencies": { "@angular/animations": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", "core-js": "^2.4.1", "rxjs": "^5.5.2", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.5.0", "@angular/compiler-cli": "^5.0.0", "@angular/language-service": "^5.0.0", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.2.0", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "~2.4.2", }
Perform following steps to reinstall the angular and related modules:
npm install
The following are some of the activities which can be done post update/upgrade:
It is recommended to switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. In version 4.3, HttpClient was shipped as part of @angular/common module. This saw a lot of adoption in Angular developers. Thus, Angular is promoting HttpClient and decided to deprecate Angular Http service which was part of HttpModule.
In order to update to HttpClient, all that is required to be done are some of the following:
For each RxJS operator you import, use import from ‘rxjs/operators’ and use the pipe operator.
While starting the app, you may run through following error:
Cannot find module ‘webpack/lib/node/NodeTemplatePlugin’
The following could be done to get away with the above error:
npm remove webpack -g npm i webpack --save-dev
Feel free to check this angular apps migration page by Google. In case you are developing web apps using Spring and Angular, check out my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.
Large language models (LLMs) have fundamentally transformed our digital landscape, powering everything from chatbots and…
As Large Language Models (LLMs) evolve into autonomous agents, understanding agentic workflow design patterns has…
In today's data-driven business landscape, organizations are constantly seeking ways to harness the power of…
In this blog, you would get to know the essential mathematical topics you need to…
This blog represents a list of questions you can ask when thinking like a product…
AI agents are autonomous systems combining three core components: a reasoning engine (powered by LLM),…