2

Есть 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:

введите сюда описание изображения

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

1 ответ 1

1

Как вариант, в дефолтном маршруте убрать дефолтные параметры, т.е. сделать:

routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}"
);

Хотя с дефолтными параметрами отработает в asp.net core:

routes.MapRoute(
    name: "default",
    template: "{controller=Home}/{action=Index}/{id?}"
);
routes.MapRoute(
   name: "spa-fallback",
   template: "{*url}",
   defaults: new { controller = "Home", action = "Index" }
);

Видимо, что-то изменили в роутинге в новом asp.

8
  • Не работает. После запуска отображается главная страница и все - любой клик на меню снова мерцанием отображает главное окно - Home/Index. И если убрать маршрут spa-fallback, то и главное окно не может загрузится. 22 мая 2017 в 15:53
  • @adamshakhabov. Хм, странно. Я у себя проверял, работало. Может проект скинете в архиве, попробую у себя развернуть?
    – skubarenko
    22 мая 2017 в 16:39
  • Я бы конечно не против. Но работаю в ветке корпоративного проекта и не могу публиковать исходники. 22 мая 2017 в 17:02
  • Догадываюсь почему у меня не работает - после запуска проекта, Angular-приложение не сразу подгружается - оно запускает только после перехода по @Html.ActionLink(@"РСУР", "Spa", "Rsur"). А до этого естественно никакие роуты кроме MVC и API не функционируют. 22 мая 2017 в 17:08
  • Сделайте минимальный фейковый проект, где проблема воспроизводится. Я чуть позже закину свой семпл, на основе вашего, где нормально все работало
    – skubarenko
    22 мая 2017 в 17:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.