Update cookies preferences

Upgrading from Angular 2 to 4

We began using Angular 2 (now known as just Angular) when it was fairly new. One of our internal projects was in hiatus for a while, when we was ready to pick it back up again, Angular had jumped from version 2 to 4.

Sometimes upgrading can be a bit of a nightmare, but luckily Angular had us covered with the docs and changelogs, we had to jump two major versions and it was lucky the docs are so detailed.
For most people, running the following command will upgrade their dependencies and are probably good to go.

npm install @angular/{ animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@4.0.0 typescript@latest --save

if you are using animations, you will also need to import
BrowserAnimationsModule from @angular/platform-browser/animations
in your App.

If you are upgrading an advanced Angular app, we recommend this handy tool put together by the people at Angular, it gives you a list of tasks that you should complete before, during and after an upgrade in Angular, from a variety of versions, all in one place.
https://angular-update-guide.firebaseapp.com/

We did run into various NPM errors, including rxjs and zone.js packages, however this was resolved by installing the latest our Node and NPM versions.

You will also have to replace obsolete Angular packages with their replacement ones in your app too, in our case there was many, including changes to the Angular Styleguide that we wanted to keep up to date with, these changes that we have outline below you may or may not have to change, depending on how old your Angular Project is.

main.ts
As we wanted to keep up to date with the way Angular structures projects, we wanted to keep up to date with how they do it, this has changed since we started this project, so we made the following changes

  • Replace import { bootstrap } from '@angular/platform-browser-dynamic' with import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
  • Change the older bootstrap function to now use platformBrowserDynamic().bootstrapModule(AppModule);
  • Refactor app specific code from being inside main.ts into app/app.module.ts

NgForm
Replace import { NgForm } from '@angular/common' with import { NgForm } from '@angular/forms'

Routing

  • Remove the obsolete Routing package imports and directives
  • Use the newer Routing package for Angular, styleguide suggest we create app-routing.module.ts, so we migrated our old routes into there, then imported import { RouterModule, Routes} from '@angular/router' and import { NgModule} from '@angular/core' and configured the newer Routing module using the docs (https://angular.io/docs/ts/latest/guide/router.html#!#basics-config)
  • Where we had to import ROUTER_DIRECTIVES to use any routing directives, we now no longer have to so we removed them from the imports and component configuration.
  • Replaced RouterConfig type with Routes

Directives
Since upgrading Angular, directives are no longer a part of the @Component configuration, these will have to be moved into the declarations array inside our NgModule, in our case this will be in our app.module.ts

Pipes
Similar to Directives, Pipes are no longer a part of the @Component configuration too, so these are also moved into the declarations array inside our NgModule, in app.module.ts

HTTP
To keep in line with how the most recent Angular Docs and styleguide, we changed the way our HTTP calls are done slightly according to the docs, this now includes an rxjs package to handle changing selected HTTP observables to promises a simple error handler. Docs for this: https://angular.io/docs/ts/latest/guide/server-communication.html

Want to learn more about our services or speak to us about a project?


Mike

Mike Sheward

Technical Director

Mike is our Technical Director who has worked on eCommerce projects since 2014 and has been with Develo since 2015. He became certified in Adobe Commerce in 2023. Mike’s favourite aspect of web development is tackling intricate eCommerce challenges with the bespoke platform Magneto/Hyvä, and he tells us his best achievement from working at Develo is fostering a culture of growth and innovation within our team. Outside of work, he can be found spending time with his family, baking and walking his dogs.


Develo is a leading Magento agency and eCommerce web development company based in Birmingham, in the UK, serving clients globally since 2010. We provide our Learn articles to share knowledge of magento web development, web app development and more to the wider web developer community. To extend your team with our white label web developers, collaborate or consult with us on your project contact us here.


...
Mike

share:

Ready to start your next project?

See how we can help you accelerate your business