Sharing Top Content from the Angular-sphere.

Angular v4: Hybrid Upgrade Application – Hacker Noon

  • Sometimes it was too complicated and cause to circular dependency that solved by the forwardRef function.Upgrade adapter instatiation — the old wayAnd the bootstrapping looks like:Bootstraping the application using the upgrade adapterThe new way — UpgradeModule and static functionVersion 2.2.0 brings us module that used to bootstrapping the application and allows AngularJS and Angular v4 components to be used together inside a hybrid upgrade application, which supports AoT compilation.
  • That means we don’t have to do the upgrade work all at once, since there’s a natural coexistence between the two frameworks during the transition period.App module file — import the UpgradeModule and use ngDoBootstrap lifecycle hookWe need to add an override to prevent Angular from bootstrapping itself in the form of the ngDoBootstrap empty class method.And the bootstrapping looks like:Bootstraping the application using the UpgradeModuleHybridHelperIn order to do the upgrade and downgrade of the building blocks (services, providers, factories, directives, components) angular brings us static functions and a base class to extend.
  • You can see that there are 4 inputs and 3 outputs.v4 component with inputs and outputsAnd the registration of the component in the NgModule:v4 module with entryComponent metadataSince this component is being used from the v1 module, and is an entry point into our Angular application, we also need to add it to the entryComponents for our Angular module.The downgrading operation uses the downgradeComponent string, componentSelector: string, componentClass: any, options?
  • There are no changes in the service or in the NgModule.v4 serviceAnd the registration of the component in the NgModule:v4 module for registering a serviceThe downgrading operation uses the downgradeProvider string, providerName: string, providerClass: any): IHybridHelpermoduleName — v1 module nameproviderName—v1 provider nameproviderClass— provider class typedowngrading v4 serviceSo simple… :)Upgrade a ProviderWhen you have an v1 service/factory/provider and you want to use it in v4 by the dependency injection mechanism (in another provider or component) you suppose to upgrade the service.Here is our document converter service:v1 service for upgradingUnlike the downgrading process, upgrading a provider require building of provider object with factory method.
  • : string): FactoryProviderng1Name— v1 provider nameng2Name—optional parameter for v4 provider name (default: ng1Name value)v4 module with registration of upgraded v1 serviceUpgrade a ComponentWhen you have a ng1 component and you want to use it in ng4 template (via other component, directive or route) you suppose to upgrade the component.Here is our document stars v1 directive:v1 directive for upgradingWe can upgrade this component to v4 using the UpgradeComponent class.

Angular version 4 is out and now we can enjoy its benefits. As explained in the Top 8 Resources to Explore Angular 4, the advantages of the version are enormous. It contains performance improvements…

@DorMoshe: I just published “Angular v4: Hybrid Upgrade Application” #angular #angularjs #angular4 #javascript #webdevelopment

Angular version 4 is out and now we can enjoy its benefits. As explained in the Top 8 Resources to Explore Angular 4, the advantages of the version are enormous. It contains performance improvements, better error messages, smaller modules, brand new features and a lot of improvements to the v1-v4 hybrid application. Version 4 brings with her changes in the upgrade and downgrade processes, in order to support AoT compilation for the hybrid application.

In this article we will cover the new way to upgrade application from AngularJS to Angular v4. In order to work comfortably with the new way, we will build a wrapper that simplify our coding.

One of the keys to a successful upgrade is to do it incrementally, by running the two frameworks side by side in the same application, and porting AngularJS components to Angular one by one. This makes it possible to upgrade even large and complex applications without disrupting other business, because the work can be done collaboratively and spread over a period of time. The upgrade module in Angular has been designed to make incremental upgrading seamless.

Until version 2.2.0, in order to build a hybrid app, we used the Upgrade Adapter. The upgrade adapter needed to be instantiate with the main app @NgModule. All the upgrade and downgrade processes were done via the adapter. Sometimes it was too complicated and cause to circular dependency that solved by the forwardRef function.

And the bootstrapping looks like:

Version 2.2.0 brings us module that used to bootstrapping the application and allows AngularJS and Angular v4 components to be used together inside a hybrid upgrade application, which supports AoT compilation. This module called UpgradeModule and needs to be imported via the @NgModule.imports array.

Therefore, we need to install the @angular/upgrade package via npm and add a mapping for the @angular/upgrade/static package in our system.config file:

The upgrade module is a very useful tool for upgrading anything but the smallest of applications. With it we can mix and match AngularJS and Angular components in the same application and have them inter-operate seamlessly. That means we don’t have to do the upgrade work all at once, since there’s a natural coexistence between the two frameworks during the transition period.

We need to add an override to prevent Angular from bootstrapping itself in the form of the ngDoBootstrap empty class method.

And the bootstrapping looks like:

In order to do the upgrade and downgrade of the building blocks (services, providers, factories, directives, components) angular brings us static functions and a base class to extend. The static functions and the base class are parts of the @angular/upgrade/static.

Because of the changes in the hybrid process I decided to build helper called HybridHelper. The helper is a wrapper for Angular upgrade and downgrade api. It helps us to separate our application from the changes of angular hybrid process. Also, it brings us readability and used as a black box for our purposes.

When you have a v4 component and you want to use it in v1 tamplate (via other component, directive or route) you suppose to downgrade the component.

Here is our document component. You can see that there are 4 inputs and 3 outputs.

And the registration of the component in the NgModule:

for our Angular module.

function.

You can see that we must provide information about the component being downgraded. This is because once the AoT compiler has run, all metadata about the component has been removed from the code, and so cannot be inferred.

When you have an v4 injectable (like a service) and you want to use it in v1 by the dependency injection mechanism (via other component, service or provider) you suppose to downgrade the service.

Here is our documents service. There are no changes in the service or in the NgModule.

And the registration of the component in the NgModule:

function.

So simple… 🙂

When you have an v1 service/factory/provider and you want to use it in v4 by the dependency injection mechanism (in another provider or component) you suppose to upgrade the service.

Here is our document converter service:

Unlike the downgrading process, upgrading a provider require building of provider object with factory method. The HybridHelper wrap this to simplify these steps.

function in the NgModule file.

When you have a ng1 component and you want to use it in ng4 template (via other component, directive or route) you suppose to upgrade the component.

Here is our document stars v1 directive:

call inside it’s constructor, we have a fully upgrade v1 component to be used inside Angular.

We can upgrade this component to v4, annotate inputs and outputs in the upgrade directive, and then provide the input and output using v4 template syntax.

Upgraded components are v4 directives, instead of components, because Angular is unaware that AngularJS will create elements under it. As far as Angular knows, the upgraded component is just a directive — a tag — and v4 doesn’t have to concern itself with it’s children.

All what is left is to add it to AppModule’s declarations array:

Here is the code of the wrapper that do the magic

As you can see, the downgrade functions return the HybridHelper instance to support chaining. Here is an example for hybrid downgrading file that demonstrates the use of the chaining feature:

Angular v4: Hybrid Upgrade Application – Hacker Noon

Comments are closed, but trackbacks and pingbacks are open.