×
IBORN Logo
Illustration of upgrading to Angular 7.

Upgrade to Angular 7 in few steps

Toni Gelev
January 23, 2019

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 --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, 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!

More similar blog posts:

Illustration of upgrading to Angular 7.
What’s new in Angular 9

After several months of delays and considerable uncertainty, version 9 of Angular, one of the most widely used Front-End development frameworks in the world, was finally released.

Illustration of upgrading to Angular 7.
Is Aurelia the “Next Gen” JavaScript Framework?

In case you aren’t familiar with it, Aurelia is a collection of Javascript modules that allow you to create web, mobile or desktop applications from open source while complying with web standards.

This framework not only allows us to create incredible user interfaces, it enables us to do it in easily scalable, maintainable and scalable way.

Illustration of upgrading to Angular 7.
Why we should use React and Redux together?

Are you a front-end developer working with React.js and struggling whether to use Redux? Don’t worry you’re not alone.

Illustration of upgrading to Angular 7.
Front-end development with React and Redux

More about the React-Redux combo and their roles in front-end development.