Migrating From Angular 1 To Angular 2

First, Why Angular 2?

Like every other technology upgrade, it’s to make the user’s job easier; the users being developers in this case. Angular 2 is a lot easier to learn than Angular 1, it uses a language called Typescript which is a superset of Javascript. It has all the features of Javascript and much more, which ultimately get compiled to Javascript, without all of the usual runtime errors.

So really, why Angular2?

Angular 1 was never ready for the transition from desktops to smartphones or mobile; it had a lot of performance issues, the apps were really slow, never really attracted a lot of users. Therefore, the necessity to update to an Angular version with better performance.To sum it up:

Performance
Better Mobile Support
Better Learning Path

How to migrate from Angular 1 to Angular 2

Preparation:1) Follow the AngularJS Style Guide - Folder-to-Folder Structure, Modularity. 2) Using a module loader such as SystemJS, Webpack, or Browserify allows us to use the built-in module systems of TypeScript or ES2015.
Migrating Methods:
There are two ways to do this:

ngForward
ngUpgrade

ngForward:ngForward is not a real upgrade framework for Angular 2 but instead we can use it to create Angular 1 apps that look like Angular 2. The initial setup for making an Angular1 app look like Angular2 is done by running a command :
npm i --save ng-forward@latest reflect-metadata
This installs the ngForward module, we should create a configuration file, say config.js, it is used to load the Angular application after it has been bootstrapped.
ng-forward is an open source project that aims to let you write Angular 1 code that looks very similar to Angular 2. It lets you get familiar with the syntax of ng2(Angular 2).
Note: ng-forward isn’t by the angular core team, it is created by the community.
At this point, we are all set to use Angular 2 features in the existing Angular app.
An Angular app usually is comprised of controllers, services and directives, while migrating your code to Angular 2, we’re going to end up having components and services. The services in Angular 1 and Angular 2 are pretty much the same, the directives and controllers are gonna be converted into components, so having modularity and cohesion in your Angular 1 code will make it a lot easier.
Actual MigrationConsider having three files, the usual app.js, a directive - componentA and a service - serviceA, the directive has a service dependency. We’re gonna make a gradual migration using mainly three methods from mg-forward, they are : Component<, Injector<, Bundle.
The app.js will import the directive (which soon would become a component), and add it in angular.module.
ComponentA is converted into an Angular Component by following the Angular component syntax - decorator that provides metadata and creating an exportable class ‘ComponentA’, we still haven’t converted ServiceA into Angular component, so we’ll inject it by by name using a string, which can reference any Angular provider. Finally we export ComponentA using a bundle method. ngForward doesn't create an angular module until bundle is called.Migration of a service is fairly simple, you create an exportable class with service name and use the Injectable decorator from the ng-forward, now since we have made the service into an Angular Component, we no longer need to mention the service name as a string in ComponentA, you can mention it as an object, and add it in the provider’s array of ComponentA.
Now that we've got all the things converted, we can move our bundle call to the top most level of our app. Bundle will follow all the dependencies via the directives and providers properties to include them all in one bundled module.ngUpgrade:The preparation is pretty much the same, as you have for the ngForward method. Essentially having component directives rather than using low-level features like ng-controller and scope inheritance.
Upgrading with ngUpgrade is quite smooth as you can mix and match AngularJS and Angular components in the same application and have them interoperate seamlessly. The ngUpgrade is not a one step process, and both the frameworks can co-exist during the transition period.
In the DOM of a hybrid ngUpgrade application are components and directives from both AngularJS and Angular. These components communicate with each other by using the input and output bindings of their respective frameworks, which ngUpgrade bridges together. So at this point you have a hybrid application that goes back and forth between the two frameworks.
Using UpgradeModule with ngModule : The AngularJS and Angular have their own ways of having modules. Angular adds assets using angular.module and Angular uses ngModule decorator to create classes. In a hybrid application you run both versions of Angular at the same time. That means that you need at least one module each from both AngularJS and Angular. You will import UpgradeModule inside the NgModule, and then use it for bootstrapping the AngularJS module.
You must bootstrap the Angular bits first and then ask the UpgradeModule to bootstrap the AngularJS bits next.Using Angular Components from AngularJS codes:You can start the gradual process upgrading the code by using an Angular component in AngularJS, the way to do that would be to make the component act like a directive in the ANgularJS context, this can be done by using the downgradeComponent() method.
Using AngularJS Directives from Angular code:You can upgrade AngularJS component directives and then use them from Angular. Not all kinds of AngularJS directives can be upgraded. The directive really has to be a component directive. An AngularJS directive is upgraded to an Angular component by creating a new Angular directive that extends UpgradeComponent and doing a super call inside its constructor. You should add each Angular component in the AppModule’s declaration array.
Project AngularJS code in Angular:This can be done using the <ng-content>, so say you have a downgraded Angular component, that requires some AngularJS code to be projected into it, when using the component from AngularJS, you can supply contents for it and that content is put into the location of the <ng-content> tag in Angular.
Transcluding Angular code into AngularJS:Transcluding is nothing but having a reference, this time think of an AngularJS directive that’s been upgraded to an Angular component, we can transclude Angular code in the AngularJS directive by using <ng-transclude> directive, this is the location where the Angular code will be transcluded(added by reference).