javascript - 错误 : [$injector:modulerr] with angular JS [GULP CONTEXT]

Question

首先，我知道这个错误似乎很出名，我应该能够轻松地通过谷歌获得解决方案，但不幸的是，我阅读的所有链接都没有帮助我解决问题...

我强调了我使用 gulp 来缩小 Javascript 的事实。

基本上这是我的模块:

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


})();

身份验证是以下服务:

(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
    };

  }


})();

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

  }

})();

我的 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>

非常感谢您的帮助

Answer 1

您错过了必须遵循适用于 config 和 run block 上的 DI 的缩小规则，应该如下所示。我建议您遵循注入(inject)依赖项的 DI 的内联数组注释方法。

代码

(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
        }
    ]);
})();

查看指定的警告 here在文档中