Angular href='/' not resolving

Question

I have a route configured to redirect to a default page /patients, and otherwise it sends the user to /login. Currently if I navigate to localhost:<port>, I get the default page. The problem arises from wanting to click on the logo with href='/'. When I do this it does not call the resolve function. It renders nothing, essentially, and removes the page elements that are meant to live behind authentication.

Is this configured wrong? Can anyone tell me what is happening here? Please let me know if you need more info. Thanks.

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/patients', {
            templateUrl: '/templates/dashboard.html',
            requireLogin: true,
            resolve: {
                auth: function (SessionService) {
                    SessionService.resolve()
                }
            }
        }).
        when('/', {
            redirectTo: '/patients'
        }).
        otherwise({
            redirectTo: '/login'
        });

Answer 1

You need to put the link to '#/' since your angular routing is working in hashbang mode. Take a look at this thread for more details about hasgband mode and HTML5 mode. If you want to get rid of the '#' from your routes try enabling HTML5 mode. The code would be something link this:

app.config(['$routeProvider', '$locationProvider' function ($routeProvider, $locationProvider) {
    $routeProvider.
        when('/patients', {
            templateUrl: '/templates/dashboard.html',
            requireLogin: true,
            resolve: {
                auth: function (SessionService) {
                    SessionService.resolve()
                }
            }
        }).
        when('/', {
            redirectTo: '/patients'
        }).
        otherwise({
            redirectTo: '/login'
        });
        $locationProvider
            .html5Mode(true)
}])

Just a word of caution, after enabling HTML5 mode, direct angular links may not work. You will have to change the server configuration a bit to rewrite the links to the entry point in your application. If you are using ASP.NET, add a rewrite rule in your web.config. Add this under the system.webServer section

<rewrite>
    <rule name="HTML5 Compatible Mode" stopProcessing="true">
              <match url=".*" />
              <conditions>
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
              </conditions>
              <action type="Rewrite" url="/" />
    </rule>
</rewrite>