7

I have two separate projects, ASP.net Web API and Angular 8.
I was able to publish both on the same App Service.

So assuming the url is: http://someurl.azurewebsites.net:

But when I access the link, it opens the default ASP.Net home page. After adding /index.html to the link, it opens the website, however if I refresh the page it takes me back to the ASP.Net home page

I tried changing the default documents in the App Service and setting it to index.html but that didn't work.

I want the angular app to be the default page for the app service.

Improve this question

4 Answers 4

Reset to default
9

Basically this needs following steps to be done to make it working.

Solution contains

i) sampleApp.API(.Net Core Web API)

ii)sampleApp.UI( Angular App)

Setting up Azure portal for two applications

1) Go to your web app in azure portal -> Settings->configurations

2) Select Path Mappings and here create new mapping entry for subsite .While adding this entry don't select directory checkbox to keep this as virtual application type.Click save 

 **Virtual Path:** /{folderName}            **physicalPath:**  /site/wwwroot/{folderName}

3) Now go to VS2017 right click your API project and click publish

4) In publish settings window make paths as 

site name : existing + "/{folderName} "
DestinationUrl : existing + "/{folderName} "

5) Now ng-build --prod your angular app and deploy dist/clientApp folder and publish with root paths.

so now both should work as

angular app https://{AzureAppName}.azurewebsites.net

Web API https://{AzureAppName}.azurewebsites.net/{folderName}/api/{controllerName}/{action}

If still user face "cant read configuration data from web.config" issue while accessing api project

For this in your API project go to startup.cs and change configure function to have following line of code

app.Map('/{folderName}', app1 => Configure1(app1, loggerFactory);

and create in blank copy of configure function with name configure1 and redeploy your API project as mentioned above.

public void Configure1(IApplicationBuilder app, ILoggerFactory loggerFactory)
        {
            //keep it blank
        }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

some users could face Error code :502 as well instead of 500.19 ( Cant read configuration one ) solution would remain same.
What is the {folderName} in your scenario? Is it the name of the app-name-folder created under the dist folder by Angular when building the angular project or something else?
1

You can create sub application for api and set path API Application and IIS configuration set startup page for index.html

Its working fine!

Please follow following step:

  1. First create web application and set angular app path and domain
  2. Then select this web application and right click to create another sub application like api
Improve this answer

Comments

0

In the App Service on Azure Portal, launch Cmd and run dir command to check what files are deployed to wwwroot.

And, has API been set up as separate virtual directory?

Improve this answer

Comments

0

In Visual Studio 2022 and with .NET 6, there is an Angular project type where API and Angular as bundled within a single solution. Directly out of the box, you can publish the root solution to Azure so that both get deployed into a single App Service.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.