.Net Core 2 & AngularJS SPA Not Working

Question

I've been migrating a project over to .NET Core 2 from .NET Framework and the process was smoother than expected, however when I thought I had overcome to most difficult challenges, I can't for the life of me get the SPA aspect to work.

When I launch the app, it works fine so long as I go to the root (https://localhost:5001) and I can navigate with the Angular routing just fine. However if I try and load a page via a route, eg. https://localhost:5001/login, I get a generic Chrome 404 "This localhost page can’t be found".

My index.html is in the directory MyApp/Pages/ and my client-side code is in MyApp/wwwroot/app/. When moving the index.html into the wwwroot folder I get nothing at all.

In My Startup.cs, here is how I've set it up:

public class Startup
{
    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        } 

        app.UseHttpsRedirection();
        app.UseStaticFiles();

        var defaultFileOptions = new DefaultFilesOptions();
        defaultFileOptions.DefaultFileNames.Clear();
        defaultFileOptions.DefaultFileNames.Add("/index.html");
        app.UseDefaultFiles(defaultFileOptions);
        app.Use(async (context, next) =>
        {
            await next();
            if (context.Response.StatusCode == 404 &&
                !Path.HasExtension(context.Request.Path.Value))
            {
                context.Request.Path = "/index.html";
                context.Response.StatusCode = 200;
                await next();
            }
        });

        app.UseCookiePolicy();
        app.UseAuthentication();

        app.UseMvc();
    }
}

I've tried numerous guides but it seems that most that I can find are extremely outdated, or when trying to use methods in the posts, they're methods that I don't have. Any help is highly appreciated as I'd quite like to finish the migration and continue working on the project.

Answer 1

It turns out my problem was in the way that I was handling the 404. I was doing context.Request.Path = "/index.html"; in my Startup.cs, but it still couldn't resolve the html file, so instead I made it redirect back to the root path:

    app.Use(async (context, next) =>
    {
        await next();
        if (context.Response.StatusCode == 404 &&
            !Path.HasExtension(context.Request.Path.Value))
        {
            // This is what I changed. I need to resolve to "/" instead of "/index.html"
            context.Request.Path = "/";
            context.Response.StatusCode = 200;
            await next();
        }
    });

Thanks to @Anton Danylov for his suggestion pointing me to revisit that section of code.

Answer 2

The problem here is that you have an SPA, and Angular has it's own routing, but when you try to use an URL like this https://localhost:5001/login, this route is served by MVC and not by Angular, MVC does not find appropriate controller and returns 404 as a result.

What you should do, is to return index.html in response to such requests, so that Angular routing could take care of it. You may take a look at this article:

https://www.toptal.com/angular/angular-5-asp-net-core

Answer 3

use from this code :

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseBrowserLink();
}
else
{
    app.UseExceptionHandler("/Error");
}

app.UseStaticFiles();

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller}/{action=Index}/{id?}");
});
}

Follow link: Application startup in ASP.NET Core