Integrating Angular App in an existing Ext JS App

When an application is already in use and the significant effort has already been put in to be where it is, then redoing them again in any other framework becomes a big deal. However, many times the business see a need for either replacing the existing framework with something else or just doing additional work in the new framework/technology.

As part of this article, I will help you in exploring the option of gracefully extending your existing Ext JS application by adding additional features that are developed in Angular.

Common Reasons

Some of the common business reasons for switching to the different technology that we come across as part of our Professional Services are:

• The business has a large (multi-department, multi-functional) application in Ext JS, whereas a new function was implemented in Angular and it needs to be added to the larger application for a unified view. And, the business does not want to redo the same application in Ext JS.
• Business lost its key Ext JS team members and it is able to find support from the people who finds it easy to do things in Angular
• Business is convinced with the development in the Angular world. Business wants to adopt Angular for its mid and long-term application strategy. However, it doesn’t want to invest in the already developed functionalities

In all these cases, it becomes important for the business to be able to integrate the existing Ext JS application with the Angular application efficiently. In this article, I will demonstrate how to use Angular applications inside Ext JS. 

Pre-Requisites

• Node.js 6.9.0 or higher
• Angular-cli installed globally
• Sencha Cmd
• Ext JS SDK
• Angular knowledge
• Ext JS knowledge

Solutions

In Order to try out these two approaches, we should first create one Angular Application using CLI and one ExtJS application using Sencha Cmd.

Create Angular Application

Let’s create a new project using angular-cli by running the following command

The command  generates application folder structure as shown below:

Let us modify app.component to render a text-box and a paragraph with the binding so that whenever we change the text in the text-box, the changed text appears in the paragraph. Following is the relevant code in the App.component.html:

To run the application run below command in the project root directory through terminal:

As indicated in the ng serve output, the application is accessible through http://localhost:4200. When you launch this application in the browser, it looks as shown below:

Create ExtJS Application

Let’s create an ExtJS application using Sencha Cmd.

Cmd creates an application with the basic template. Go to the application root folder – ExtAng – and run sencha app watch to run the application. You can access the application using the URL, http://localhost:1841/  and see the following output:

Integrating Angular App with Ext JS App

Now let us render the sampleapp Angular application that we have created earlier inside the Users tab of the ExtAng Ext JS application.

Integrate as an independent solution:

Create an iFrame using component and add it to the Users tab in Main.js file under classic/src/view/Main.js

Reload the application in the browser and switch to the Users tab. You shall see the Angular application, as shown below:

Similarly, when user clicks on Users tab, you can open the angular application in a new browser tab using window.open API. In either case, the application works as an external application and the integration need is really minimal. 

Integrate as an Ext JS  Component:

The second approach is to render Angular application as an Ext JS component inside an Ext JS Application.

I have developed an Ext JS package, which has a ngComponent with xtype ngapp, which can be used like any other component in an Ext JS application. However, it needs a few configs and it requires certain steps to be followed at the angular application level to make it work.

When ngapp is rendered, it loads the Angular Application’s script files into the Ext JS application and also adds Angular Applications root element to the Component DOM. Thus, the Angular Application sits completely inside the Ext JS application as if it is just another component.

Let us see those steps now:

1. The ngapp component needs two configs
   • ngRootTag: Angular application’s AppComponent selector, which is the root element for the angular application
   • ngAppPath: Angular application’s development builds output path, which will be loaded by the ngapp as Ext JS component.
2. Build the angular application with output configured in such a way that the generated artifacts are inside the Ext JS application. For example, I pushed angular build output to ExtAng project’s root directory with the below command
   
   
   ng build -vc false -op /Users/phani/wtcprojects/angularapps/ExtAng/angularapp

   1	ng build -vc false -op /Users/phani/wtcprojects/angularapps/ExtAng/angularapp

3. This added the output of the build command into ExtAng Ext JS application folder
   
   
   
4. Now add ngapp to the Groups Tab in the MainView, to see the angular application in Groups Tab as shown below in Main.js file under classic/src/view/Main.js
   
   
   { title:’Groups’, iconCls:’fa-users’, layout:’fit’, items:[{ xytpe:’ngapp’, ngRootTag:’app-root’, ngAppPath:’./angularapp’ }] }

   1 2 3 4 5 6 7 8 9 10

   { title:’Groups’, iconCls:’fa-users’, layout:’fit’, items:[{ xytpe:’ngapp’, ngRootTag:’app-root’, ngAppPath:’./angularapp’ }] }

Now Launch the ExtAng application in the browser and you shall be able to see the Angular app being rendered in a tabpanel.

Summary

In this article, I have explained how to render the Angular application in existing Ext JS application with the two possible solution approaches. NgComponent and the sample application’s used in this article are available on GitHub. 
To keep things really clean, we DON’T recommend mixing up too many frameworks. However, we do understand that sometimes business may have such need and we hope that the solution proposed in this article will help you in reusing your past work!