Webpack 捆绑导致 Unknown provider $injector/unpr 错误

Question

未知提供商 - NavigationCtrl、Restangular

我目前正在处理我的旧项目，作为一个小的重构练习，让它们再次完全工作，我遇到了一些不再编译的 AngularJS 代码。我相信这取决于更新的依赖项，因为我至少 3 年没有更改此源代码的功能。

我遇到的问题是：

angular.js:15567 Error: [$injector:unpr] Unknown provider: AProvider <- A <- NavigationCtrl https://errors.angularjs.org/1.7.8/$injector/unpr?p0=AProvider%20%3C-%20A%20%3C-%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)

我理解这是一个注入问题。我正在尝试注入一些 Angular 不知道的东西。这有点令人困惑，因为我已经有一段时间没有使用 AngularJS（使用过 Angular 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'),

})

Answer 1

使用Inline Array Annotation:

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

更新

为了帮助您在丑化之前发现此类问题，请使用严格依赖注入。

来自文档：

Using Strict Dependency Injection

You can add an ng-strict-di directive on the same element as ng-app to opt into strict DI mode:
<!doctype html>
<html ng-app="myApp" ng-strict-di>
<body>
  I can add: {{ 1 + 2 }}.
  <script src="angular.js"></script>
</body>
</html>
Strict mode throws an error whenever a service tries to use implicit annotations.

有关详细信息，请参阅

更新 #2

使用Inline Array Annotation:

Please can you show me based on my edit 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'),    
})

来自文档：

Implicit Annotation

Careful: If you plan to minify your code, your service names will get renamed and break your app.

有关详细信息，请参阅

AngularJS Developer Guide - Implicit Annotation

Webpack 捆绑导致 Unknown provider $injector/unpr 错误

Webpack bundling causes Unknown provider $injector/unpr error

javascript

refactoring

angularjs

restangular

未知提供商 - NavigationCtrl、Restangular

更新

Using Strict Dependency Injection

更新 #2

Implicit Annotation