Angular 7 is the perfect platform for the professional development of modern applications. Staying up to date with the latest version is very important. In its current version 7, it is more powerful than ever, and it is very easy to master the basics. Upgrading to Angular 7 just couldn’t be easier. We’re going to present you a short, 9-step plan that’ll enable you to upgrade your current Angular version to Angular 7.
Let’s start!
Just follow these steps:
Step 1. Update Angular dependencies
npm install @angular/animations@latest @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest --save
Step 2. Update Angular dev dependencies:
npm install @angular-devkit/build-angular@latest @angular/compiler-cli@latest @angular/cli@latest @angular/language-service@latest --save-dev
Step 3. Update dependencies; Core-js and Zone.js:
npm install core-js@latest zone.js@latest --save
Step 4. Update dev dependencies; Types, codelyzer, karma tools, jasmine, protractor and tslint:
npm install @types/jasmine@latest @types/node@latest codelyzer@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-jasmine@latest karma-jasmine-html-reporter@latest jasmine-core@latest jasmine-spec-reporter@latest protractor@latest tslint@latest --save-dev
Step 5. Install the new version 3+ of TypeScript:
npm install typescript@latest --save-dev
Step 6. Install the latest version 6+ of RxJS:
npm install rxjs@latest rxjs-compat@latest --saveand:
npm install rxjs-tslint@latest --save-dev
Step 7. Install the latest version 4+ of Webpack:
npm install webpack@latest --save-dev
Step 8. Enable Ivy Renderer - In your tsconfig.json file add:
"angularCompilerOptions": {
"enableIvy": false
}
Make sure ‘enableIvy’ is off since it's not ready for production, otherwise you may have problems loading some modules and building the app.
Step 9. Run npm outdated and update all modules to latest.
For some modules that you are using, there might be a later version, different than the one that you’re using, so you might want to check what's new and change some things. For example, in our project, we're using ngx-scrollbar. In the latest version this module is renamed from ScrollbarModule to NgScrollbarModule and you will have to change that in the imports.
Also, a good practice is to upgrade the rest of your modules that are used in your app since they should be compatible with the newest version and you can check that by running:
npm outdated and update all modules to the latest with npm install X@latest --save where X stands for the module name. After this, our suggestion is to delete the folder 'node_modules' from your project and run npm install once again to download all the modules with the given versions in package-lock.json so everything will work together.
After installing a new version, it is normal to come across a few errors. For instance, in our project we had a problem with the typescript version, we changed to a lower version and we had a problem with the main css file – it added ‘src’ before file name when imported in styles.css.
Moreover, we're using google maps module and import from ‘@types/googlemaps’ had to be changed to ‘googlemaps’. We also added declare module 'googlemaps' in google maps module.
Congratulations, your angular project is successfully upgraded.
*Disclaimer: This tutorial follows the basic steps for upgrading your Angular project. Depending on the complexity of your project you may face some other issues but most experienced developers should be able to solve them. Good luck!