Угловое перенаправление ngRoute на неверный URL

Question

Я пишу продукт SPA с помощью AngularJS, обслуживаемый Express с помощью NodeJS. NodeJS/Express также предоставляет API для SPA. В производстве SPA будет находиться за прокси-сервером (Apache, или, возможно, nginx в будущем) - ниже проблема существует даже без прокси-сервера. ngRoute используется для обеспечения маршрутизации.

Первоначально я тестировал приложение локально, и все работало правильно. Я клонировал репо на тестовый сервер, но по какой-то причине URL-адреса некорректны, когда я пытаюсь использовать приложение.

Обычно, когда страница загружает приложение, переадресовывает на localhost:8080/#/home (home, являющийся основным маршрутом). Однако, когда на тестовом сервере он перенаправляется на domain.com/#!/home#%2Fhome.

Если я нажму ссылку, которая должна изменить URL-адрес на domain.com/#/quotations (href установлен относительный, а не абсолютный), я получаю domain.com/#!/home#%2Fquotations.

Моя конфигурация маршрутизатора:

app.config(['$routeProvider', function($routeProvider){ 
    // Routes 
    $routeProvider 
    .when('/home', { 
     templateUrl: '/views/home/home.html' 
    }) 
    .when('/staff', { 
     templateUrl: '/module/staff/views/staff.html', 
     controller: 'staffController', 
     controllerAs: 'staff' 
    }) 
    .when('/error', { 
     templateUrl: '/views/error/error.html', 
     css: '/views/error/error.css' 
    }) 
    .otherwise({ 
     redirectTo: '/home' 
    }); 
}]); 

В моем главном файле NodeJS сервера Я использую только web.use(Express.static('public_html')) для установки Express, чтобы обслуживать папку, содержащую public_html SPA.

Я попытался добавить <base href="/"> в голову моего index.html, но это не имеет никакого значения. Ни Angular, ни Express не настроены на выполнение каких-либо изменений (по умолчанию), чтобы переписать URL-адреса страниц, поэтому я очень смущен относительно проблемы.

Answer 1

В угловом 1,6 $ место в настоящее время добавляет «!» если вы хотите, чтобы удалить его, вы можете сделать это:

appModule.config(['$locationProvider', function($locationProvider) { 
    $locationProvider.hashPrefix(''); 
}]); 

Проверить этот вопрос, может помочь ... Angular web app having extra ! in the url

Answer 2

В зависимости от вашей маршрутизации вы должны использовать <base href="@Url.Content("~/")" /> в теге головы и избавиться от # от url, используя $locationProvider.html5Mode(true); по конфигурации маршрута в процессе производства.

Это исправит проблему, и если это сработает, вы всегда можете вернуть угловой формат URL-адреса, чтобы использовать #.

Другой вариант заключается в использовании этот код в узле конфигурации:

<VirtualHost *:80> 
    DocumentRoot "/public_html" 
    ServerName domain.com 
    ServerAlias www.domain.com 
</VirtualHost>