how to deploy angular 2 project on azure

Question

I am new in angular2 project development.

Can any one please tell me how to deploy angular2 project on azure portal. I have deploy my angular2 project on azure using bitbuket repositoy.

but when i am accessing http://demo.azurewebsites.net it show following error in browser window.

HTTP Error 502.5 - Process Failure

Common causes of this issue:

The application process failed to start

The application process started but then stopped

The application process started but failed to listen on the configured port

Troubleshooting steps:

Check the system event log for error messages

Enable logging the application process’ stdout messages

Attach a debugger to the application process and inspect

please help me

thanks

Answer 1

I saw there are not many complete tutorial teach how to deploy an angular app to azure. This is my approach and it works for me. There are few ways but I prefer using local git to deploy angular app to azure.

1. you create a local folder(let's say "A") and run git init.

2. go to your project folder(let's say "B") which you want to deploy and open your file through powershell run
   ng build --prod --bh "./" then it will create a dist folder in your "B". Now your "B" file should has some bundle files... and asset folder in side of dist folder. You need to copy all these files and paste into your "A", which is your local folder.

3. Assume you already have the resource in your Azure(name it "angularProj") then you go to the overview , you can see the Ftp hostname below is the URL you gonna use. you don't need to do anything in here just make sure you have the resource it set up already.

4. Now you go to the deployment option of your resource=> choose Source => Local Git. fill up it and click ok. then it will show up a message says Successfully set up deployment source. Now go to Overview page you will see the FTP changes to git clone. and copy your git clone url.

5. Go to your local git repository("A"), and type command:
   git add . git commit --message "initial" git remote add original (past your copied url in here) git push original master Now there should has a window pop up let you type the password.

6. go to your portal panel and Deployment options : it's in pending. wait few minutes. Once the app set up successfully. Go to the overview click the URL you should be able see exactly the same web page as your localhost project.

Additional: 7. you can also go customer domain to set up your own domain name mapping to the azure.

I am not a native speaker I tried my best to explain what I want to express. Hope it helps and works for you too.

Answer 2

Put your angular app in an asp.net app, so when you run the asp.net app it serves the same index.html file that angular app uses, then deploy it to azure.

or

deploy it as a node app like explained here