エラー：[$ injector：unpr]不明なプロバイダを修正するにはどうすればよいですか？

Question

angular.js:14362 Error: [$injector:unpr] Unknown provider: reportTypeServiceProvider <- reportTypeService <- ReportTypeControllerエラーが発生しています。

私はこれについてたくさんのものを見つけましたが、私のコードで何が問題なのかまだ分かりません。ここでは、次のとおりです。

pitchviz.js：

(function() { 
    'use strict'; 

    angular 
    .module('pitchviz', [ 
     'pitchviz.config', 
     'pitchviz.routes', 
     'pitchviz.report-types' 
    ]); 

    angular 
    .module('pitchviz.config', []); 

    angular 
    .module('pitchviz.routes', ['ngRoute']); 

    angular 
    .module('pitchviz') 
    .run(run); 

    run.$inject = ['$http']; 

    function run($http) { 
    $http.defaults.xsrfHeaderName = 'X-CSRFToken'; 
    $http.defaults.xsrfCookieName = 'csrftoken'; 
    } 
})(); 

pitchviz.config.js：

(function() { 
'use strict'; 

    angular 
    .module('pitchviz.config') 
    .config(config); 

    config.$inject = ['$locationProvider']; 

    function config($locationProvider) { 
    $locationProvider.html5Mode(true); 
    $locationProvider.hashPrefix('!'); 
    } 
})(); 

pitchviz.routes.js：

(function() { 
    'use strict'; 

    angular 
    .module('pitchviz.routes') 
    .config(config); 

    config.$inject = ['$routeProvider']; 

    function config($routeProvider) { 
    $routeProvider.when('/', { 
     controller: 'ReportTypeController', 
     controllerAs: 'vm', 
     templateUrl: '/static/templates/report-types/report-types.html' 
    }).otherwise('/'); 
    } 
})(); 

レポートタイプ/レポート-types.modules.js：

(function() { 
    'use strict'; 

    angular 
    .module('pitchviz.report-types', [ 
     'pitchviz.report-types.controllers', 
     'pitchviz.report-types.services' 
    ]); 

    angular 
    .module('pitchviz.report-types.controllers', []); 

    angular 
    .module('pitchviz.report-types.services', []); 
})(); 

レポートタイプ/コントローラ/レポート-type.controller.js：

(function() { 
    'use strict'; 

    angular 
    .module('pitchviz.report-types.controllers') 
    .controller('ReportTypeController', ['reportTypeService', ReportTypeController]); 

    ReportTypeController.$inject = ['reportTypeService']; 

    function ReportTypeController(reportTypeService) { 
    var vm = this; 

    vm.reportType = undefined; 

    activate(); 

    function activate() { 

     reportTypeService.get().then(reportTypeSuccess, reportTypeError); 

     function accountSuccess(data, status, headers, config) { 
     console.log(data); 
     vm.reportType = data.data; 
     } 

     function reportTypeError(data, status, headers, config) { 
     console.log(data); 
     console.log(status); 
     } 
    } 
    } 
})(); 

レポート型/サービス/レポート-type.service.js：

(function() { 
    'use strict'; 

    angular 
    .module('pitchviz.report-types.services') 
    .service('reportTypeService', ['reportTypeService', reportTypeService]); 

    reportTypeService.$inject = ['$http']; 

    function reportTypeService($http) { 
    var reportTypeService = { 
     get: get 
    }; 

    return reportTypeService; 

    function get() { 
     console.log("service"); 
     return $http.get('/api/report-types/'); 
    } 
    } 
})(); 

ここで何が起こっていますか？ありがとう！

Answer 1

ファイルごとに1つのモジュールがベタパターンですが、ここでは正しく使用されないという問題があります。子モジュールはファイルに定義する必要があります。 report-type.controller.js：

angular 
    .module('pitchviz.report-types.controllers', []) 
    .controller('ReportTypeController', ...) 

親モジュールファイルには、report-types.modules.jsはありません。

この方法でのみ、モジュールが存在する場合はモジュールユニットが存在し、モジュールファイルは任意の順序でロードできることが保証されます。

Answer 2

reportTypeServicepitchviz.report-types.servicesモジュール。しかしReportTypeControllerのpitchviz.report-types.controllersモジュール。私はpitchviz.report-types.controllersは別のモジュールであるのでreportTypeServiceを識別できないと思います。 pitchviz.report-types.controllersモジュールのreportTypeServiceにアクセスする場合。 reportTypeServiceをpitchviz.report-types.controllersモジュールに追加するか、pitchviz.report-types.controllersモジュールにpitchviz.report-types.servicesモジュールを注入する必要があります。

angular.module("pitchviz.report-types.controllers", ["pitchviz.report-types.services"]); 

Answer 3

観察：ここあなたがそこconfusable構文を作っているように、問題がreport-types/controllers/report-type.controller.jsです。

• $injectを使用してサービスを注入する必要はありません。既に配列を使用して注入してください。

これを削除します。すごい迫力....うーん、ここにあなたの構文は、超混乱して

.controller('ReportTypeController', ['reportTypeService', ReportTypeController]); 

function ReportTypeController(reportTypeService) { 
    .... 
    .... 
    .... 
}