2

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

Vishal G
  • 179
  • 4
  • 12
  • Are you serving the angular app with a .net app? – LLL Apr 29 '17 at 14:32
  • yes, i have 2 application first is angular client app and second is server app i.e asp.net core app. i have deployed asp.net core app on azure.but now i have to deploy angular app on azure but i haven't knowledge of how to deploy angular app on azure. and i have to communicate client app to server app. so i have to deploy 2 apps on azure. – Vishal G Apr 30 '17 at 10:11
  • But is your angular app also hosted by an asp.net app? like if you start an asp.net application on visual studio it will load the angular app? – LLL May 01 '17 at 11:18
  • my asp.net app is already hosted on azure.and i have to host my angular2 app on azure. – Vishal G May 02 '17 at 04:45
  • is the angular app served by that asp.net app or is it a different app? – LLL May 02 '17 at 10:30
  • angular app is different and asp.net core app is different. – Vishal G May 02 '17 at 15:12
  • 1
    Might need to take a look at https://stackoverflow.com/questions/37487046/deploy-angular-2-with-azure-webapp – Amir Sasson May 28 '17 at 16:15
  • I wrote a blog post about deploying angular and asp.net core to azure https://medium.com/@omikolaj1/complete-guide-to-deploying-angular-and-asp-net-33a0976d0ec1 – O.MeeKoh Aug 04 '19 at 03:19
  • https://sajeetharan.com/2020/02/14/deploy-angular9-app-to-azure-with-github-actions/ – Sajeetharan Feb 15 '20 at 12:57

2 Answers2

3

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

LLL
  • 3,566
  • 2
  • 25
  • 44
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.

Ethan
  • 154
  • 6