2

first of all , i know this error seems to be famous and i should be able to get the solution with google easily but unfortunately none of the links i read did help me to solve the problem...

I underline the fact i use gulp to minify the Javascript.

Basically this is my module:

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

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


})();

authentication is the following service:

(function () {

  angular
    .module('meanApp')
    .factory('authentication', authentication);

  // $inject : To allow the minifiers to rename the function parameters and still be able to inject the right services, the function needs to be annotated with the $inject property. The $inject property is an array of service names to inject.
  // https://docs.angularjs.org/guide/di

  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() {
      var token = getToken();
      var payload;

      if(token){
        payload = token.split('.')[1];
        payload = $window.atob(payload); //will decode a Base64 string
        payload = JSON.parse(payload);

        return payload.exp > Date.now() / 1000;
      } else {
        return false;
      }
    };

    var currentUser = function() {
      if(isLoggedIn()){
        var token = getToken();
        var payload = token.split('.')[1];
        payload = $window.atob(payload);
        payload = JSON.parse(payload);
        return {
          email : payload.email,
          name : payload.name
        };
      }
    };

    //An interface between the Angular app and the API, to call the login and register end-points and save the returned token. This will use the Angular $http service

    // strict mode : 
    var register = function(user) {
      console.log("ARNAUD: Arriving in register promise");
      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');
    };

   /* console.log("currentUser:"+currentUser);
    console.log("saveToken:"+saveToken);
    console.log("getToken:"+getToken);
    console.log("isLoggedIn:"+isLoggedIn);
    console.log("register:"+register);
    console.log("login:"+login);
    console.log("logout:"+logout);*/

    return {
      currentUser : currentUser,
      saveToken : saveToken,
      getToken : getToken,
      isLoggedIn : isLoggedIn,
      register : register,
      login : login,
      logout : logout
    };

  }


})();

A controller:

(function () {

  angular
    .module('meanApp')
    .controller('registerCtrl', registerCtrl);

  registerCtrl.$inject = ['$location', 'authentication'];
  function registerCtrl($location, authentication) {
    console.log("ARNAUD : inside registerCtrl, initializing the properties to empty");
    var vm = this;

    vm.credentials = {
      name : "",
      email : "",
      password : ""
    };

    vm.onSubmit = function () {
      console.log('ARNAUD : arriving in vm.Submit');
      authentication
        .register(vm.credentials)
        .error(function(err){
          alert(err);
        })
        .then(function(){
          $location.path('profile');
        });
    };

  }

})();

my index.html:

<!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>

Thanks a lot for your help

2
  • Lots of code, but... what is the error? Post the complete and exact error message. And don't use minified versions of libraries while in development. Commented Mar 17, 2016 at 21:44
  • I'm getting started with Angular JS. Sorry but i don't know all the best practices yet.. Commented Mar 17, 2016 at 21:58

1 Answer 1

1

You missed to have to follow minification rule applies to DI on config & run block which should be like below. I'd suggest you to follow Inline Array Annotation method of DI which injecting dependency.

Code

(function () {

  var app = angular.module('meanApp', ['ngRoute']);
    app.config (['$routeProvider', '$locationProvider', 
       function($routeProvider, $locationProvider) {
           //code as is
       }
    ]);

    app.run(['$rootScope', '$location', 'authentication', 
        function($rootScope, $location, authentication) {
           //code as is
        }
    ]);
})();

See the warning specified here in DOCS

Sign up to request clarification or add additional context in comments.

2 Comments

Thank you , it solved my problem. I will remember it
np. glad to help you.. Thanks :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.