Angular ngRoute redirecting to malformed URL

Question

I'm writing an SPA product using AngularJS, being served by Express using NodeJS. NodeJS/Express also provides the API for the SPA. In production the SPA will sit behind a proxy (Apache, or perhaps nginx in the future) - the below issue exists even without a proxy. ngRoute is used to provide routing.

I was initially testing the application locally and everything was working correctly. I cloned the repo to a test server, but for some reason the URLs are malformed when I try to use the application.

Normally, when the page loads the application redirects to localhost:8080/#/home (home being the catch-all route). However, when on the test server it redirects to domain.com/#!/home#%2Fhome.

If I click on a link which should change the URL to domain.com/#/quotations (href is set relative, not absolute), I get domain.com/#!/home#%2Fquotations.

My router configuration:

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'
    });
}]);

In my main NodeJS server file I am only using web.use(Express.static('public_html')) to set Express to serve the folder public_html containing the SPA.

I have tried adding <base href="/"> into the head of my index.html, but that has made no difference. Neither Angular nor Express are configured to do anything different (than the default) to rewrite page URLs, so I'm very confused as to what the problem is.

Answer 1

In angular 1.6 $location now adds a "!" if you want to remove it you can do this:

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

Check this question, might help ... Angular web app having extra ! in the url

Answer 2

Depending of your routing you should use <base href="@Url.Content("~/")" /> in head tag and get rid of # from url using $locationProvider.html5Mode(true); on route configuration in production.

That will fix the problem and if that works you can always revert the angular based url format to use #.

The other option is to use this code in your node config:

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