Initially, I am aware that this error is quite popular and one should be able to find the solution easily with a quick Google search. However, none of the resources I came across were helpful in resolving the issue...
I want to highlight the fact that I am using gulp for minifying the JavaScript code.
This is how my module looks like:
(function () {
var app = angular.module('meanApp', ['ngRoute']);
app.config (function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/register', {
templateUrl: '/auth/register/register.view.html',
controller: 'registerCtrl',
controllerAs: 'vm'
})
.when('/login', {
templateUrl: '/auth/login/login.view.html',
controller: 'loginCtrl',
controllerAs: 'vm'
})
.when('/profile', {
templateUrl: '/profile/profile.view.html',
controller: 'profileCtrl',
controllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
// Using the HTML5 History API
$locationProvider.html5Mode(true);
});
app.run(function($rootScope, $location, authentication) {
$rootScope.$on('$routeChangeStart', function(event, nextRoute, currentRoute) {
if ($location.path() === '/profile' && !authentication.isLoggedIn()) {
$location.path('/');
}
});
});
})();
The authentication service implementation is as follows:
(function () {
angular
.module('meanApp')
.factory('authentication', authentication);
authentication.$inject = ['$http', '$window'];
function authentication ($http, $window) {
var saveToken = function (token) {
$window.localStorage['mean-token'] = token;
};
var getToken = function () {
return $window.localStorage['mean-token'];
};
var isLoggedIn = function() {
/* Implementation details */
};
var currentUser = function() {
/* Implementation details */
};
var register = function(user) {
console.log("Registering user...");
return $http.post('/api/register', user).success(function(data){
saveToken(data.token);
});
};
var login = function(user) {
return $http.post('/api/login', user).success(function(data) {
saveToken(data.token);
});
};
var logout = function() {
$window.localStorage.removeItem('mean-token');
};
return {
currentUser : currentUser,
saveToken : saveToken,
getToken : getToken,
isLoggedIn : isLoggedIn,
register : register,
login : login,
logout : logout
};
}
})();
Here's a sample controller included:
(function () {
angular
.module('meanApp')
.controller('registerCtrl', registerCtrl);
registerCtrl.$inject = ['$location', 'authentication'];
function registerCtrl($location, authentication) {
console.log("Initializing properties...");
var vm = this;
vm.credentials = {
name : "",
email : "",
password : ""
};
vm.onSubmit = function () {
console.log('Submitting form...');
authentication
.register(vm.credentials)
.error(function(err){
alert(err);
})
.then(function(){
$location.path('profile');
});
};
}
})();
Lastly, here's a snippet from my index.html file:
<!DOCTYPE html>
<html ng-app="meanApp">
<head>
<title>MEAN stack authentication example</title>
<base href="/">
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap-theme.min.css">
</head>
<body ng-view>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="app.min.js"></script>
</body>
</html>
Thank you in advance for any assistance provided.