Ошибка 404 при обновлении страницы SPA-приложения

Есть SPA-приложение со стэком MVC + WebAPI + Angular4. Вот backend-маршруты:

RouteConfig.cs

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
        //Этот маршрут добавил я. Думал, что это поможет передать непонятный маршрут дальше
        //на сторону frontend и там его перехватит Angular
        routes.MapRoute(
            name: "spa-fallback",
            url: "{*url}",
            defaults: new { controller = "Home", action = "Index" }
            );
    }

WebApiConfig.cs

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
} 

Вот сторона frontend:

app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParticipsComponent } from './particips/particips.component';
import { PlanComponent } from './plan/plan.component';
import { ResultComponent } from './result/result.component';
const appRoutes: Routes = [
    { path: 'particips', component: ParticipsComponent },
    { path: 'plan', component: PlanComponent },
    { path: 'result', component: ResultComponent },
    { path: '', component: ParticipsComponent, pathMatch: 'full' } // redirect to home page on load
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.component.html

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a routerLink="/particips" routerLinkActive="active">Участники</a></li>
                    <li><a routerLink="/plan" routerLinkActive="active">Планирование</a></li>
                    <li><a routerLink="/result" routerLinkActive="active">Результаты</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <!-- routing here -->
        <router-outlet></router-outlet>
    </div>
</div>

Когда на странице app.component.html кликаю по «Результаты», то все хорошо и браузер переходит по маршруту /result на соответствующую страницу result.html. Но если обновить страницу(F5), выскакивает ошибка 404:

Почему так происходит? И как исправить?