Deploy Angular 2 with Azure Webapp

In order to run angular2 app in azure follow these steps:

1. create a new ng app (with ng cli) : ng new testApp and push to some github repo.
2. create Azure deployment files for Kudu :

npm install azure-cli -gazure site deploymentscript --node

this will create 2 files .deployment and deploy.cmd

3. edit the deploy.cmd remove the --production from the line

:: 3. Install npm packages

so that all dependencies will be installed (including ng cli)

4. add under the section of :: 3. Install npm packages

this snippet:

echo Handling Angular build       :: 4. Build ng app    IF EXIST "%DEPLOYMENT_TARGET%\package.json" (      pushd "%DEPLOYMENT_TARGET%"      call :ExecuteCmd "!NODE_EXE!" ./node_modules/@angular/cli/bin/ng build --prod --env=prod --aot      IF !ERRORLEVEL! NEQ 0 goto error      :: the next line is optional to fix 404 error see section #8      call :ExecuteCmd cp "%DEPLOYMENT_TARGET%"/web.config "%DEPLOYMENT_TARGET%"/dist/      IF !ERRORLEVEL! NEQ 0 goto error      popd    )

5. create a new webapp in azure and bind it to your github repository
   
6. now just change the root of the app in the Azure "Application Settings"
   under "Virtual applications and directories"
   from

site\wwwroot

to

site\wwwroot\dist

7. trigger a deployment. (by pushing to github or manually from the azure portal)
8. (optional) for fixing the 404 when refreshing, you need to add a web.config on the root with this content:

   <?xml version="1.0" encoding="UTF-8"?>    <configuration>      <system.webServer>        <rewrite>          <rules>            <rule name="AngularJS" stopProcessing="true">              <match url=".*" />              <conditions logicalGrouping="MatchAll">                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />              </conditions>              <action type="Rewrite" url="index.html" />            </rule>          </rules>        </rewrite>      </system.webServer>    </configuration>

9. open your app .. BOOM!
   

I know this is a bit late but none of the other answers give explicit instructions. Hopefully this can help someone.

I'm assuming you are using Angular-CLI.

Run:

npm install

ng build (depending on your setup you might be able to run npm build)

This creates a folder called ./dist that contains the necessary files for your working website. Then use a script-able FTP client to push all of the content inside of ./dist to the ./site/wwwroot folder of the Azure webapp.

You'll need to use the FTP credentials of the wabapp, as found in the Publish Profile, from your Azure Portal.This Stackoverflow question will hep you with that. Where is "download publish profile" in the new Azure Portal?

If you need this for Continuous deployment purposes, and you are using git repo, than it's very simple, just follow instructions here Continuous deployment using GIT in Azure App Service.

But, in general, it's not directly related to angular2. Try also this Using Windows PowerShell scripts to publish to dev and test environments capabilities.

angular-cli, which is (or will became) main tool for angular building, testing, deploying, at this time do not have such function, nor requirement (as i know so far). You can request feature on their github.