Удаление #! URL-адреса angular.js в веб-API ASP.Net

Question

Поэтому я пытаюсь удалить #! на моем угловом сайте и переходе на html5. Я посмотрел на другие руководства и реализовал их с помощью locationProvider и base в индексном файле. Сайт работает нормально, когда вы направляете его через ng-href на ссылку, но когда я нажимаю кнопку обновить / непосредственно ввести URL, я получаю ошибку 404. Я читал, что это связано с серверной стороной, на которой он не знает, куда маршрутизировать при ударе 404, поскольку.otherwise() является функцией hashbang.

При этом я посмотрел на конфигурацию WebApi и обнаружил, что уже настроил шаблон маршрута по умолчанию, если он попадет на 404, как показано ниже.

// Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First();
        jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

Любая помощь будет оценена

Answer 1

Как вы правильно заметили, проблема лежит на стороне сервера. Когда вы обновляете свой браузер, маршрутизация AngularJS не срабатывает. Вместо этого браузер отправляет запрос на сервер. Сервер не находит ничего в нужном месте, поэтому возвращает 404.

Ваш текущий маршрут на стороне сервера, который вы разместили в своем вопросе, обрабатывает только запросы к вашему веб-интерфейсу API.

В дополнение к маршруту веб-API вы должны добавить маршрут MVC, который доставляет вашу стартовую страницу.

Предполагая, что вашей стартовой страницей является index.html, добавьте следующую маршрутизацию в конфигурацию маршрута на стороне сервера.

//MVC
RouteTable.Routes.Ignore("api/{*url}"); // ignore api routes for mvc
RouteTable.Routes.MapPageRoute("NonAPIRoute", "{*url}", "~/index.html");

если у вас уже есть MVC Routing (например, в классе RouteConfig в папке App_Start), то ваш класс RouteConfig должен выглядеть примерно так

using System.Web.Mvc;
using System.Web.Routing;

namespace WebApplication1
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("api/{*pathInfo}"); // ignore api routes 
            routes.MapPageRoute("NonAPIRoute", "{*url}", "~/index.html");
        }
    }
}

Answer 2

Добавьте конфигурацию в ваш проект, чтобы включить режим HTML5 и удалить префикс

.config(['$locationProvider', function($locationProvider) {
    $locationProvider.hashPrefix(''); // by default '!'
     $locationProvider.html5Mode({
         enabled: true
     });
}]);