How to Create & Deploy Angular Application on Mule Server

Author: Sanjeet Dahake

1. Angular Application:

Angular is an app-design framework and development platform for creating efficient and sophisticated single-page apps. Normally angular applications are developed using the NodeJS server and by installing Angular CLI on it. We can package out the build of an application and run it over any server. We are going to build a simple Angular application and deploy it on a mule server and interact with our mule APIs.

1. Challenge:

Once the build of Angular application is created it is deployed on the production environment on the NodeJS server which is the most popular choice but the same build can be deployed on other alternative servers as well eg Tomcat. Now, if we have a scenario where UI is Angular application and to serve the request we build Mule application, now during deployment, we will deploy Mule application to cloudhub and Angular app to NodeJS, so here we are managing two servers. What if we are able to deploy the Angular app to cloudhub ? Our lots of efforts can be saved. This blog will help you understand how we can merge the Angular app in Mule and deploy both on the same  cloudhub instance.

Steps to Install Angular CLI:

1. Download and install the NodeJS server.
   • Download Link : https://nodejs.org/en/download/
2. Verify the installation:
   • Open cmd and hit command > node -v
   • If this returns you the node version, you have successfully configured NodeJS server.
3. Install Angular CLI:
   • Open cmd and hit command > npm install -g @angular/cli 
4. Steps to create Angular application:
   • Create a new folder and open cmd at the same path
   • Type below command to create the application: 
     • Create command: ng new demo-app

These commands will create structure of angular application. You should be able to see below structure created under your working directory

• Run application using the command: ng serve

Observe below the line in logs:

Open your browser on http://localhost:4200/

Your application is running at above port, hit it and you should see dummy Angular UI like below:

1. Steps to build application using command :ng build –prod

Folder named “dist” will be created in your working directory which contains a folder with your application name and build files i.e minified js

That’s it, your code is ready to be deployed on a muleserver.

1. How to deploy Angular build on the Mule server.
2. Create New Mule applicationin Anypoint Studio: File->New->Mule Project
3. Open folder : ../src/main/resources
4. Copy folder created under ‘dist’

 i.e in my case : ../dist/demo-app  to ../src/mule/resources

You should get structure like below:

• Create a flow to load your landing page of the application.
• Here, it is index.html
• Load it using “Load Static Resource” connector operation of “HTTP” connector
• Design flow like below:

That’s all you need, just two simple flows and your application will be up, deploy project and open it browser:  http://localhost:8081/angular-demo

Conclusion:

This is how your Angular application can be easily served from the mule server as well.

You can design mule APIs around your Angular application and make them call via your angular code to serve your application purpose. Both, your APIs and Angular app can be under the same mule project and build amazing applications around it.