I have a project with frontend (Angular) and backend (.NET 8). They are both deployed on the root of a Web App in Azure through Azure Devops. The content of the server seems correct.

To put in perspective, we migrated backend from .NET framework to .NET 8. Before it worked but now doesn't seem to work properly on the server, in local it runs ok.

I tried this: How to deploy angular app and web API in same azure app service?, but without success.

The problem appears when configuring the web.config.

If I setup the web.config with accessing only json or font files, I can access this files and see the web application with an error as the backend returns a 404 because I haven't configured it in the web.config:

<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
        <staticContent>
          <mimeMap fileExtension=".json" mimeType="application/json" />
          <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
          <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
        </staticContent>
    </system.webServer>
  </location>
</configuration>

Once I add the backend configuration then the the server directly returns a 404 with this message in console:

Failed to load resource: the server responded with a status of 404 ()

Just like if frontend didn't exist.

The configuration I added for the backend is:

<handlers>
    <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
</handlers>
<aspNetCore processPath="dotnet" arguments=".\Epea.Api.dll" 
       stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" 
       hostingModel="inprocess" />

With this minimum content Swagger is accessible but not frontend.

I have tried almost everything, adding rewrite section with rules to Redirect, but the frontend doesn't seem to be accessible as the application always returns a 404.

The program.cs is normal apart from using app.UseStaticFiles();.

Am I missing something in this file or may it be related with the web app configuration?

I have a project with frontend (Angular) and backend (.NET 8). They are both deployed on the root of a Web App in Azure through Azure Devops. The content of the server seems correct.

To put in perspective, we migrated backend from .NET framework to .NET 8. Before it worked but now doesn't seem to work properly on the server, in local it runs ok.

I tried this: How to deploy angular app and web API in same azure app service?, but without success.

The problem appears when configuring the web.config.

If I setup the web.config with accessing only json or font files, I can access this files and see the web application with an error as the backend returns a 404 because I haven't configured it in the web.config:

<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
        <staticContent>
          <mimeMap fileExtension=".json" mimeType="application/json" />
          <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
          <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
        </staticContent>
    </system.webServer>
  </location>
</configuration>

Once I add the backend configuration then the the server directly returns a 404 with this message in console:

Failed to load resource: the server responded with a status of 404 ()

Just like if frontend didn't exist.

The configuration I added for the backend is:

<handlers>
    <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
</handlers>
<aspNetCore processPath="dotnet" arguments=".\Epea.Api.dll" 
       stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" 
       hostingModel="inprocess" />

With this minimum content Swagger is accessible but not frontend.

I have tried almost everything, adding rewrite section with rules to Redirect, but the frontend doesn't seem to be accessible as the application always returns a 404.

The program.cs is normal apart from using app.UseStaticFiles();.

Am I missing something in this file or may it be related with the web app configuration?

• angular
• azure
• asp-core
• deployment
• -8.0

• 2 When you configure the backend to handle all routes with path="*", the backend takes over and static files for the frontend aren't accessible unless explicitly handled. – Suresh Chikkam Commented Nov 20, 2024 at 3:45
• Hi enmontenegro_elio, if your project is created from SPA Template, it should have default static files middleware in it. If you conbine the angular project and core webapi into this project, we need to add static files middleware. – Jason Pan Commented Nov 20, 2024 at 7:52
• Here is the detailed steps for SPA ( Angular with Asp Core). – Jason Pan Commented Nov 20, 2024 at 7:54
• 1 Issue arises because the IIS configuration (via the Web.config) directs all requests to the .NET 8 backend without distinguishing between API and frontend static file requests. – Suresh Chikkam Commented Nov 20, 2024 at 8:32
• 1 Hi @SureshChikkam. First,, thanks for the answer. That's what i thought. How can I distinguish between Api and frontend files? Modifying the path = "*" would fix the error? – enmontenegro_elio Commented Nov 20, 2024 at 8:43

1 Answer 1

Modify the path="*" in the <handlers> section is the key to distinguishing between API routes and frontend files.

When you add the <handlers> and <aspNetCore> configuration, IIS assumes that every request (including those for Angular static files) should be handled by the backend application, which causes a 404 for frontend resources.

Configure Web.config:

<configuration>
  <system.webServer>
    <!-- ASP.NET Core handler for the backend -->
    <handlers>
      <add name="aspNetCore" path="api/*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
    </handlers>

    <!-- ASP.NET Core settings -->
    <aspNetCore processPath="dotnet" arguments=".\Epea.Api.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />

    <!-- Serve static files -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

    <!-- Rewrite rules for Angular frontend and backend API -->
    <rewrite>
      <rules>
        <!-- Serve Angular static files -->
        <rule name="Static Files" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" />
          </conditions>
          <action type="None" />
        </rule>

        <!-- Route API requests to the backend -->
        <rule name="Backend API" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="/{R:0}" />
        </rule>

        <!-- Fallback to Angular's index.html for frontend routes -->
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <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>

• These above settings are required for .NET 8 backend processing. All requests matching the API routes (e.g., /api/*) will be processed by the backend.

Backend should set up to serve static files.

Program.cs:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

// Serve static files for the Angular app
app.UseStaticFiles();

// Enable routing and map controllers
app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

app.Run();

Web App Configuration:

/site/wwwroot/
  index.html
  main.js
  styles.css
  Epea.Api.dll

If the backend and Angular frontend files are in separate directories. deployment merges into the Web App's root directory (/site/wwwroot). check that with out any conflicts.