How To Deploy Multiple Angular Applications To Single Azure App Service

Introduction 

in this article, we are going to see how to deploy multiple angular projects in a single azure app service. 

First, we are going to set up and install angular CLI. For example, here I have created 3 new angular projects please follow the steps below. 

open a terminal window and run the following command. 

npm install -g @angular/CLI

Once you've installed the client successfully, next run the CLI command ng new and provide the application name like TestAngularProject1. 

Here ng represents angular. The ng new command prompts you for information about features to include in the initial application. 

Angular CLI installs the necessary Angular npm packages and other dependencies. This can take some time to render the changes. 

ng new TestAngularProject1 
cd TestAngularProject1 

ng new TestAngularProject2 
cd TestAngularProject2 

ng new TestAngularProject3 

cd TestAngularProject3 

Once you've installed all the above commands please run the application using the ng serve—open command. 

Then run command ng build gets dist. deployment build files for all the 3 projects. 

Next, I am going to create an azure app service from Azure Portal. Once you create the app service you need to add some configuration settings.  

Here I have created an app service named testangularsat. -->Go to azure portal home page and click the app service testangularsat. In the left side menu select configuration under the Settings menu. 

In the configuration page, I have selected the 4th tab Path Mappings. In the path mapping, I'm going to add Virtual applications and directories. 

Next, I'm going to add 3 Virtual applications and directories for TestAngularProject1, TestAngularProject2, and TestAngularProject3. Click + New virtual application or directory button and add the directory name Please refer to the below images. 

Here I have added Visual Path names like TestAngularProject1 and Physical Path names like site\TestAngularProject1. Site refers to the rooting path. 

I have added 3 directories for TestAngularProject1, TestAngularProject2, and TestAngularProject3. 

Once you've created all the virtual directories open the app service root and add the 3 folders like TestAngularProject1, TestAngularProject2, and TestAngularProject3. 

Next, please move all the three-deployment build dist files to azure app directories folders. 

Please open the web app service testangularsat and see the 3 different angular application changes to the Azure app service.

1st Angular application 

2nd Angular application 

3rdAngular application 

I hope this article was helpful for you.