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

---