When refreshing page in angular 2 with mvc , I get Server Error in '/' Application?

Question

When refreshing the page in angular 2 application with ASP MVC, I get Server Error in '/' Application.

and when I open link in another tab I get the same error

Any help please ?

Answer 1

You should turn on logging to see what error is happening.

How to do that depends on your MVC version, but it seems you are not using .Net Core, so you can just turn off custom error mode.

<configuration>
    <system.web>
        <customErrors mode="Off"/>
    </system.web>
</configuration>

This should show you the real error and you can figure out what's wrong further.

Answer 2

There are two options for solving this problem. You can either add the hash location strategy to your app module.

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
imports: [.... ],
declarations: [...],
bootstrap: [AppComponent],
providers: [
  {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
  }
]
})
export class AppModule { }

This option will only work for the parts of your Angular2 app that live on the Home ASP Controller

Your second option is to add routes to your ASP Controller that match your Angular 2 app routes and return the "Index" View

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    [ActionName("Angular-Route1")]
    public IActionResult AngularRoute1()
    {
        return View("Index");
    }

    public IActionResult Route2()
    {
        return View("Index");
    }
}