Upgrade to Angular 7 in a few steps

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 couldn’t be easier.

Let’s start!

You need to follow a few steps in order to upgrade your Angular to version 7:

 

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 --save

and: 

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, else 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, the latest version might have differences with the current one so you might want to check what's new and change some things. For example, in our project, we're using ngx-scrollbar. The latest version brings change that renamed the module 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 can get right together.

After installing new version, is normal to have some errors. In our project we had a problem with typescript version, we changed to a lower version and we had a problem with the main css file, it added  ‘src’ before file name in import in styles.css. For some modules that you are using, the latest version might have differences with the current one so you might want to check what's new and change some things. For example, in our project, we're using ngx-scrollbar. The latest version brings change that renamed the module from ScrollbarModule to NgScrollbarModule and you will have to change that in the imports. Also, we're using google maps module and I had to change import from ‘@types/googlemaps’ to ‘googlemaps’ and add 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 errors but most of the experienced developers should not have any problems solving them. Good luck!
 

on January 23, 2019