Angular 2 is the next version of massively popular MV* framework(Angular) for building complex applications in the browser (and beyond).

Angular 2 comes with almost everything you need to build a complicated frontend web or mobile apps, from powerful templates to fast rendering, data management, HTTP services, form handling, and so much more.

In this blog I would provide instructions to run Angular2 App in Azure App Services.


  1. Install Nodejs :
  2. Install Angular CLI :
  3. Create a App Services Web App in Azure Portal

You can find a Sample Angular2 project with below operations @ GitHub Link

Create Sample Angular2 Project


Run App in Local Environment

ng serve

Angular App in Local Env

Changes to Deployment Script

Azure Source Control deployment process would involve below steps

  1. Moves content to azure web app
  2. Creates default deployment script, if there is no .deployment file in web app root folder
  3. Run’s deployment script. In case of a nodejs app it would do npm install here

At Step 2, Instead of deployment process creating a default script. We can include custom deployment script and change it’s content to run other tasks.

I have a separate Blog on this topic. Please Refer

We would basically need to add two new files

.deployment file with below content inside it

command = bash file with content from Link.

What are we doing in this other than default actions ?
  • Install node modules (By default it would ignore devDependencies as NODE_ENV would be production, So we need to change Deployment Script to run extra npm install with --only=dev flag)
# 3. Install NPM packages
if [ -e "$DEPLOYMENT_TARGET/package.json" ]; then
  eval $NPM_CMD install --production
  eval $NPM_CMD install --only=dev
  exitWithMessageOnError "npm failed"
  cd - > /dev/null
  • Run Angular Prod Build, this will create a dist folder and inserts all required files in it.
# 4. Angular Prod Build
if [ -e "$DEPLOYMENT_TARGET/.angular-cli.json" ]; then
  eval ./node_modules/.bin/ng build --prod
  exitWithMessageOnError "Angular build failed"
  cd - > /dev/null

Change Virtual applications and directories to use site\wwwroot\dist folder

As i have mentioned in previous step, Angular prod Build will create a dist folder which has required code to run app but Azure webapp ROOT folder is site\wwwroot.

This can be easily altered using Virtual applications and directories section available in app settings. Change site\wwwroot to site\wwwroot\dist and your app should be up and running

Publish App

Navigate to your root folder and commit your changes to WEB_APP_GIT_URL

git init  
git add .  
git commit -m "initial commit"  
git remote add angularapp WEB_APP_GIT_URL  
git push angularapp master  

Here is my App on Azure After publish

Angular2 App Azure

You can find a Sample Angular2 project with above operations @ GitHub Link


First Time deployment took very long : This is expected behavior as it has to install all node modules listed in package.json file.

404 error after refreshing url on custom/dynamic url
We use the IIS server to server the Angular application. Below is the web.config file for hosting it. That's all needed.

            <rule name="RewriteToIndex" stopProcessing="true">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                <action type="Rewrite" url="index.html" />
         <mimeMap fileExtension=".json" mimeType="application/json" />