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

Are you using HTML5Mode? If not, then you probably should be using `href="#/"`. If you *are* using HTML5Mode, it requires configuration changes on the server to make relative href references work correctly, so listing your server may help. — Claies, Apr 21 '16 at 15:13
Worked! Thanks. If you want the points, put your comment into an answer, and I'll accept it. — Kraken, Apr 21 '16 at 15:17
Feel free to mark the provided answer as accepted if you think it helps. I didn't want to provide an answer that didn't sufficiently explain hashbang and HTML5 modes, which the provided answer does. — Claies, Apr 21 '16 at 15:36

score 2 · Accepted Answer · edited May 23 '17 at 10:33

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>

I am not using html5 mode, and I don't intend to change it immediately. (bigger fish to fry) The link appears to be working but my ```.when('/', ...)``` clause is saying a.match is not a function. Do I need to include the hash there as well? — Kraken, Apr 21 '16 at 15:49

Angular href='/' not resolving

1 Answers1