HTML does not load when refreshing the route in ASP .NET with angular

Question

I have build my angular app and the output is wwwroot folder inside my ASP .NET API folder. When I build the app with dotnet watch run, everything works and shows normally, but when I refresh the route localhost:5000/users, it shows me raw json file instead of HTML/CSS content

Console error shows the following message: Content Security Policy: The page’s settings blocked the loading of a resource at https://localhost:5000/favicon.ico (“default-src”); In network refer-policy says "strict-origin-when-cross-origin" but my cors is set app.UseCors(x=>x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

My endpoints

app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
               endpoints.MapFallbackToController("Index","Fallback");
            
                
            });

Fallback Controller

 public class FallbackController : Controller
    {
        public IActionResult Index(){

            return PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(),"wwwroot","index.html"),
            "text/HTML");
        }
    }

Index.html from wwwroot folder

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SocialNetworkSPA</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

My ASP .NET Core version is 3.1 and Angular 11

Error img

Please not that everything is functional and works normally until I refresh the page, then these error occurs

Pritom Sarkar · Accepted Answer · 2021-07-31 13:35:17Z

0

Try this:-

 app.UseCors(x => x.AllowAnyHeader().AllowAnyMethod().WithOrigins("https://localhost:xxxx"));

And don't forget to add services.AddCors(); to your ConfigureServices.

answered Jul 31, 2021 at 13:35

Pritom Sarkar

2,2684 gold badges14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aviad P. · Accepted Answer · 2021-08-01 06:53:48Z

0

You have a route conflict for the /users path - it gets routed to your API controller instead of being routed to the controller that serves your Angular app.

You have to rethink your ASP.NET route configuration, e.g. make sure all API routes are prefixed by api/ so that there's never a conflict with Angular.

answered Aug 1, 2021 at 6:53

Aviad P.

32.8k15 gold badges111 silver badges126 bronze badges

Collectives™ on Stack Overflow

HTML does not load when refreshing the route in ASP .NET with angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related