Angular Routing NgRoute Fails To Pull My Other HTML Files

So after reading here and there on MEAN, I decided to make my first MEAN application which is pretty small, all seems to work except the routeing to make my app a one-page app. Any

Solution 1:

Change your links from <a href="#/login"> to <a href="#!/login">, <a href="#"> to <a href="#!"> etc..

I also have this issue but changing from a hash to hashbang resolves it for me.

Solution 2:

Try this one. I'm not sure this will fix your issue. But please try this one.

Change your route provider by including default parameter.

app.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'main.html',
                controller: 'mainController'
            })
            .when('/login', {
                templateUrl: 'login.html',
                controller: 'authController'
            })
            .when('/register', {
                templateUrl: 'register.html',
                controller: 'authController'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

and provide the links like <a href="#/login">Login</a>

Solution 3:

Try this one:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
       templateUrl: 'main.html',
       controller: 'mainController'
     })
     .when('/login', {
       templateUrl: 'login.html',
       controller: 'authController'
     })
     .when('/register', {
       templateUrl: 'register.html',
       controller: 'authController'
     })
     .otherwise({
       redirectTo: '/'
     });
});

For Sign Out, You should use such as:

<p class="navbar-right navbar-text" ng-show="authenticated"><a href="#/" ng-click="signout()">Logout</a></p>

Solution 4:

App.config(['$routeProvider', '$locationProvider', function config($routeProvider, $locationProvider) {  
    $locationProvider.hashPrefix('')

    $routeProvider
        .when('/', {
            templateUrl: 'login.html',
            controller: 'loginController'
        })
        .otherwise('/');
}]);

will work see https://docs.angularjs.org/api/ng/provider/$locationProvider