How to Migrate Angular 5 to Angular 6
In this post, you will learn about How to update or migrate your Angular 5 app (using Angular 5.1 or Angular 5.2 version) to use Angular 6.0.0. The following are some of the points covered:
The following needs to be done before you start on the migration:
The following commands need to be executed as part of migrating Angular 5.1 or Angular 5.2 app to Angular 6.*.
sudo npm install -g @angular/cli sudo npm install @angular/cli
sudo ng update @angular/cli
This is how my package.json file looked before executing above command. Note some of the following changes:
{ "name": "rbot-ui", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^5.2.10", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "@angular/service-worker": "^5.2.0", "core-js": "^2.4.1", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, "devDependencies": { "@angular/cli": "~1.7.3", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "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": "~4.1.0", "tslint": "~5.9.1", "typescript": "~2.5.3" } }
This is how the new package.json file looked like after executing ng update command.
{ "name": "rbot-ui", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "6.0.0", "@angular/common": "6.0.0", "@angular/compiler": "6.0.0", "@angular/core": "6.0.0", "@angular/forms": "6.0.0", "@angular/http": "6.0.0", "@angular/platform-browser": "6.0.0", "@angular/platform-browser-dynamic": "6.0.0", "@angular/router": "6.0.0", "@angular/service-worker": "6.0.0", "core-js": "^2.4.1", "rxjs": "^6.1.0", "zone.js": "~0.8.26" }, "devDependencies": { "@angular/cli": "6.0.0", "@angular/compiler-cli": "6.0.0", "@angular/language-service": "6.0.0", "@types/highcharts": "^5.0.22", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "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": "~4.1.0", "tslint": "~5.9.1", "typescript": "2.7.2" } }
sudo ng update @angular/core
sudo ng update @angular/material
sudo ng update @angular/cli --migrate-only --from=1.7.3
"compilerOptions": { ... "strictPropertyInitialization": false }
With above, you should be all set. Execute the command, ng serve and make sure the app compiles.
You may see the error related to has no exported member ‘Observable’. You could get rid of such errors using the following commands:
npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json
npm uninstall rxjs-compat
You may still see errors such as has no exported member ‘Observable’ in one or more of the packages. You would be required to upgrade those packages to the higher version using Angular 6.0.0. Thus, I would recommend you still wait for a while before going for the upgrade.
In this post, you learned about how to migrate Angular 5.1 or Angular 5.2 app to use Angular 6.0.0.
Did you find this article useful? Do you have any questions or suggestions about this article? Leave a comment and ask your questions and I shall do my best to address your queries.
Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…
Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…
Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…
Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…
The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…
Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…