未知提供商 - NavigationCtrl，Restangular

我目前通过我的旧项目的工作，让他们完全作为一个小重构运动再次合作，我遇到了一些AngularJS代码无法再编译来了。我相信这是到更新的依赖关系，因为我并没有改变这个源代码的功能至少3年。

我得到的问题是：

angular.js：15567错误：[$注射器：unpr]未知提供商：AProvider < - A < - NavigationCtrl https://errors.angularjs.org/1.7.8/$injector/unpr?p0=AProvider%20%3C- ％20A％20％3 C-％20NavigationCtrl
 at angular.js:138 at angular.js:4924 at Object.getService [as get] (angular.js:5084) at angular.js:4929 at getService (angular.js:5084) at injectionArgs (angular.js:5109) at Object.invoke (angular.js:5133) at $controllerInit (angular.js:11704) at nodeLinkFn (angular.js:10517) at compositeLinkFn (angular.js:9832) 

我理解这是注入问题。我试图注入一些角不知道。这是一个有点混乱，因为我还没有与AngularJS现在工作了一段时间（有使用角2+）。

我app.js文件是这样的：

angular.module('qaDashboard', ['restangular'])
    .run(['$anchorScroll', function ($anchorScroll) {
        $anchorScroll.yOffset = 85;   // always scroll by 50 extra pixels
    }]);

angular.module('qaDashboard').controller('NavigationCtrl', function ($scope, $location, $anchorScroll) {
    $scope.scrollTo = function (id) {
        $location.hash(id);
        $anchorScroll();
    };
});

// Environment
require('../components/environments/script.js');
require('../components/environments/style.scss');

// Feature
require('../components/features/script.js');
require('../components/features/style.scss');

// Day
require('../components/days/script.js');
require('../components/days/style.scss');

// Hour
require('../components/hours/script.js');

// Report Data (URL & JSON)
require('../components/report/script.js');
require('../components/report/style.scss');

// Index Style
require('../stylesheets/style.scss');

而我index.html是这样的：

<!DOCTYPE html>
<html ng-app="qaDashboard">

<head>
    <title>DASHBOARD</title>
    <script src="/node_modules/angular/angular.js"></script>
    <script src="/node_modules/lodash/lodash.js"></script>
    <script src="/node_modules/restangular/src/restangular.js"></script>
    <script src="/javascripts/app.bundle.js" type="text/javascript"></script>

<body>
    <div class="navbar">
        <p>Regression Test Dashboard</p>
        <div ng-controller="NavigationCtrl" class="navbarAlign">
            <a ng-click="scrollTo('Dev')" class="btn">Dev</a>
            <a ng-click="scrollTo('QA')" class="btn">QA</a>
            <a ng-click="scrollTo('Staging')" class="btn">Staging</a>
            <a ng-click="scrollTo('Staging_EMEA')" class="btn">Staging EMEA</a>
            <a ng-click="scrollTo('Production')" class="btn">Production</a>
            <a ng-click="scrollTo('Production_EMEA')" class="btn">Production EMEA</a>
            <!--<a class="btn">[Do stuff]</a>-->
        </div>
    </div>

    <environments>

    </environments>
</body>

</html>

我试图消除个别控制器和没有奏效。我失去了一些东西明显在这里吗？有语法/ API改变了很多，因为我最后一次使用此代码工作？

该app,js文件被捆绑的WebPack得到 -不知道如果这是问题的根源。我知道一个事实，这个代码之前的工作完全正常。我只是觉得我失去了一些东西微不足道，它证明了一点很难被发现。

我package.json -是否有帮助：

{
  "name": "dashboard",
  "version": "0.5.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "angular": "^1.7.8",
    "body-parser": "~1.19.0",
    "concat-map": "0.0.1",
    "convert-time": "^0.3.0",
    "cookie-parser": "~1.4.4",
    "dateformat": "^3.0.3",
    "debug": "~4.1.1",
    "express": "~4.17.1",
    "jenkins-api": "^0.3.1",
    "lodash": "^4.17.15",
    "morgan": "~1.9.1",
    "restangular": "^1.6.1",
    "serve-favicon": "~2.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "acorn": "^6.2.0",
    "acorn-dynamic-import": "^4.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.1.0",
    "file-loader": "^4.1.0",
    "html-loader": "^0.5.5",
    "node-sass": "^4.12.0",
    "promise": "^8.0.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.1.0",
    "webpack": "^4.36.1"
  }
}

编辑：

我已经试过这样：

angular.module('qaDashboard', ['restangular'])
    .controller('NavigationCtrl', function ($scope, $location, $anchorScroll) {
        $scope.scrollTo = function (id) {
            $location.hash(id);
            $anchorScroll();
        }
            .run(['$anchorScroll', function ($anchorScroll) {
                $anchorScroll.yOffset = 85;   // always scroll by 50 extra pixels
            }])
    });

没有运气。

编辑2：

我只是想georgeawg与下面的代码响应：

angular.module('qaDashboard', ['restangular'])
    .controller('NavigationCtrl', ["$scope", "$location", "$anchorScroll",
        function ($scope, $location, $anchorScroll) {
            $scope.scrollTo = function (id) {
                $location.hash(id);
                $anchorScroll();
            }
        }]);

// Environment
require('../components/environments/script.js');
require('../components/environments/style.scss');

// Feature
require('../components/features/script.js');
require('../components/features/style.scss');

// Day
require('../components/days/script.js');
require('../components/days/style.scss');

// Hour
require('../components/hours/script.js');

// Report Data (URL & JSON)
require('../components/report/script.js');
require('../components/report/style.scss');

// Index Style
require('../stylesheets/style.scss');

我发现了一个angular.js:15567 Error: [$injector:unpr] Unknown provider: AProvider <- A现在的问题。

我的部件是这样的：

angular.module('qaDashboard').component('environments', {
    controller: function (Restangular) {
        this.$onInit = () => {
            Restangular.one('environments').get().then((response) => {
                this.environments = response.environments;
            });
        }
    },
    template: require('./template.html'),

}).filter('formattedEnvironment', () => {
    return (item) => {
        return item.replace('-', ' ')
                   .replace('_', ' ')
                   .replace('_', ' ')
                   .replace('_', ' ');
    }
});

<div id="{{environment}}" ng-repeat="environment in $ctrl.environments" class="borderedHolder">
    <h1>{{environment | formattedEnvironment}}</h1>
    <features environment='environment' >

    </features>
</div>

（有几个组件，它们都使用Restangular像上面^

编辑3：我已经试过：

搭配： angular.js:15567 Error: [$controller:ctrlreg] The controller with the name 'EnvironmentsController' is not registered.

angular.module('qaDashboard').component('environments', {
    controller: 'EnvironmentsController', ['Restangular', function (Restangular) {
        this.$onInit = () => {
            Restangular.one('environments').get().then((response) => {
                this.environments = response.environments;
            });
        }
    },
        template]: require('./template.html'),

})

使用内联阵注释：

angular.module('qaDashboard', ['restangular'])
.controller('NavigationCtrl', ["$scope","$location","$anchorScroll",
  function($scope, $location, $anchorScroll) {
    $scope.scrollTo = function (id) {
        $location.hash(id);
        $anchorScroll();
    }
}]);

更新

为了帮助您找到这样那样的问题，你丑化，使用严格的依赖注入之前。

从文档：

采用严格的依赖注入
您可以添加一个ng-strict-di是在相同的元素指令ng-app选择加入严格DI模式：
 <!doctype html> <html ng-app="myApp" ng-strict-di> <body> I can add: {{ 1 + 2 }}. <script src="angular.js"></script> </body> </html> 
每当服务试图使用隐注释严格的模式抛出一个错误。

欲了解更多信息，请参阅

AngularJS开发指南-严格依赖注入
AngularJS，应用指令API参考-与非严格

更新＃2

使用内联阵注释：

请你能告诉我根据我的编辑3？

app.component('environments', {
    ̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶:̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶R̶e̶s̶t̶a̶n̶g̶u̶l̶a̶r̶)̶ ̶{̶
    controller: ["Restangular", function(Restangular) {
        this.$onInit = () => {
            Restangular.one('environments').get().then((response) => {
                this.environments = response.environments;
            });
        }
    ̶}̶,̶
    }],
    template: require('./template.html'),    
})

从文档：