错误:[$injector:模块rr] 与角度 JS [GULP CONTEXT]

Error: [$injector:modulerr] with angular JS [GULP CONTEXT]

本文关键字:JS CONTEXT GULP rr injector 模块 错误      更新时间:2023-09-26

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

强调我使用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
    };
  }

})();

控制器:

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

我的索引.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>

非常感谢您的帮助

您错过了必须遵循适用于configrun块上的DI的缩小规则,这应该如下所示。我建议您遵循注入依赖关系的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
        }
    ]);
})();

请参阅文档中此处指定的警告