Angular Router配置时error injector Unknown provider:$ocLazyLoad

Question

重要的代码片段

• index.html

<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="https://cdn.bootcss.com/oclazyload/1.1.0/modules/ocLazyLoad.core.js"></script>

• app.js

angular.module("MetronicApp", [
    "ui.router", 
    "ui.bootstrap", 
    "oc.lazyLoad",
    "ngSanitize",
    "ngResource",
])

• config.router.js

angular.module("MetronicApp")
.config(['$stateProvider', '$urlRouterProvider','$ocLazyLoad', function($stateProvider, $urlRouterProvider,$ocLazyLoad) {
    $urlRouterProvider.otherwise("/dashboard.html"); 
    $stateProvider
        .state('dashboard', {
            url: "/dashboard.html",
            controller: 'DashboardController',
            templateUrl: 'app/pages/dashboard.html',
            resolve: {
                loadMyService: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        './assets/global/plugins/morris/morris.css',                            
                        './assets/global/plugins/morris/morris.min.js',
                        './assets/global/plugins/morris/raphael-min.js',                            
                        './assets/global/plugins/jquery.sparkline.min.js',
                        './assets/pages/scripts/dashboard.min.js',
                        'app/controllers/DashboardController.js',
                    ]);
                }]
              }
        })    
}]);

报错信息

angular.js:116 Uncaught Error: [$injector:modulerr] Failed to instantiate module MetronicApp due to:
Error: [$injector:unpr] Unknown provider: $ocLazyLoad
http://errors.angularjs.org/1.6.6/$injector/unpr?p0=%24ocLazyLoad
    at https://cdn.bootcss.com/angular.js/1.6.6/angular.js:116:12
    at https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4826:19
    at getService (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4981:32)
    at injectionArgs (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:5006:58)
    at Object.invoke (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:5032:18)
    at runInvokeQueue (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4927:35)
    at https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4937:11
    at forEach (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:410:20)
    at loadModules (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4917:5)
    at createInjector (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4839:19)
http://errors.angularjs.org/1.6.6/$injector/modulerr?p0=MetronicApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20%24ocLazyLoad%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.6%2F%24injector%2Funpr%3Fp0%3D%2524ocLazyLoad%0A%20%20%20%20at%20https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A116%3A12%0A%20%20%20%20at%20https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4826%3A19%0A%20%20%20%20at%20getService%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4981%3A32)%0A%20%20%20%20at%20injectionArgs%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A5006%3A58)%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A5032%3A18)%0A%20%20%20%20at%20runInvokeQueue%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4927%3A35)%0A%20%20%20%20at%20https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4937%3A11%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A410%3A20)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4917%3A5)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4839%3A19)
    at https://cdn.bootcss.com/angular.js/1.6.6/angular.js:116:12
    at https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4826:19
    at getService (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4981:32)
    at injectionArgs (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:5006:58)
    at Object.invoke (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:5032:18)
    at runInvokeQueue (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4927:35)
    at https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4937:11
    at forEach (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:410:20)
    at loadModules (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4917:5)
    at createInjector (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4839:19)
http://errors.angularjs.org/1.6.6/$injector/modulerr?p0=MetronicApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20%24ocLazyLoad%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.6%2F%24injector%2Funpr%3Fp0%3D%2524ocLazyLoad%0A%20%20%20%20at%20https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A116%3A12%0A%20%20%20%20at%20https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4826%3A19%0A%20%20%20%20at%20getService%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4981%3A32)%0A%20%20%20%20at%20injectionArgs%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A5006%3A58)%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A5032%3A18)%0A%20%20%20%20at%20runInvokeQueue%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4927%3A35)%0A%20%20%20%20at%20https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4937%3A11%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A410%3A20)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4917%3A5)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.6.6%2Fangular.js%3A4839%3A19)
    at https://cdn.bootcss.com/angular.js/1.6.6/angular.js:116:12
    at https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4957:15
    at forEach (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:410:20)
    at loadModules (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4917:5)
    at createInjector (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:4839:19)
    at doBootstrap (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:1949:20)
    at bootstrap (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:1970:12)
    at angularInit (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:1855:5)
    at HTMLDocument.<anonymous> (https://cdn.bootcss.com/angular.js/1.6.6/angular.js:33884:5)
    at i (http://127.0.0.1:8020/open/static/assets/global/plugins/jquery.min.js:2:27451)

• 求大佬告诉我错在哪了？

Answer 1

很明显的错误啊，config阶段怎么可以直接使用service呢，这个阶段只能使用provider来配置提供服务的工厂函数，你这里调用的$ocLazyLoad的工厂函数还没配置完成呢。

把config里面的$ocLazyLoad删掉就可以了，如下

config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider)

Answer 2

config里面能注入只能是Provider吧，所以这就是angular1的局限性吧。