I have a problem when refreshing in my angular webapp

Question

I'm encountering an issue in my web application developed with Angular for the frontend and ASP.NET Core for the backend, deployed in azure. Whenever I press the "Update" button or F5 on the page, regardless of where I am, I consistently receive this 404 error: "404 - File or directory not found. The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable."

Any help or guidance would be greatly appreciated. Thank you!

I cannot find any way to solve this.

Answer 1

Ensure the correct URL configurations are present in the Angular app, and verify the Azure App Service deployment to guarantee all necessary files are present.

If using Angular routing, make sure the routes are defined properly. Check the Angular routing configuration to ensure it aligns with the application's structure.

A sample application was created using ASP.NET Core Web API .NET 7 for the backend and Angular 17 for the frontend.

In my Program.cs, I added the frontend URL as shown below.

Program:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddCors(c => {
    c.AddPolicy("https://<FrontEndAzureWebAppName>.azurewebsites.net", options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
});
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseSwagger();
app.UseSwaggerUI(x =>
{
    x.SwaggerEndpoint("/swagger/v1/swagger.json", "Web API V1");
    if (app.Environment.IsDevelopment())
        x.RoutePrefix = "swagger";
    else
        x.RoutePrefix = string.Empty;
}
);
app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.MapFallbackToFile("/index.html");
app.Run();

In my weather.service.ts, I added the backend URL as shown below.

My weather.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { WeatherForecast } from './weather-forecast.model';
@Injectable({
  providedIn: 'root'
})
export class WeatherService {
  private apiUrl = 'https://<BackendApiWebAppName>.azurewebsites.net/WeatherForecast';
  constructor(private http: HttpClient) { }
  getWeatherForecast(): Observable<WeatherForecast[]> {
    return this.http.get<WeatherForecast[]>(this.apiUrl); 
  }
}

Local FrontEnd Output:

I successfully published the backend to the Azure App Service, as shown below.

And then, published the frontend through VS Code, as shown below.

Azure App Service Backend Output:

I allowed CORS In My backend azure web app as shown below.

After refreshing the page, it loads successfully without any issues.

Azure App Service Frontend Output: