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

Question

首先，我知道這個錯誤似乎很有名，我應該可以很容易地用google獲得解決方案，但不幸的是我沒有閱讀過的鏈接確實幫我解決了這個問題...

我強調了我使用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'); 
     }); 
    }; 

    } 

})(); 

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

你錯過了必須遵循的縮小規則適用於DI上config & run塊應該是像下面。我建議你遵循注入依賴關係的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 
     } 
    ]); 
})(); 

看到警告指定在DOCS