文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Webpack捆绑导致不明供应商$注射器/unpr错误

问Webpack捆绑导致不明供应商$注射器/unpr错误
EN

Stack Overflow用户
提问于 2019-07-19 18:41:37
回答 1查看 1.4K关注 0票数 2

未知提供者- NavigationCtrl，Restangular

目前，我正在研究我的旧项目，以使它们作为一个小的重构练习再次充分发挥作用，并且我遇到了一些不再编译的AngularJS代码。我相信这是由于更新的依赖关系，因为我至少3年没有改变这个源代码的功能。

我要面对的问题是：

angular.js:15567错误：$injector:unpr未知提供者: AProvider <- A <- NavigationCtrl https://errors.angularjs.org/1.7.8/$injector/unpr?p0=AProvider%20%3C-%20A%20%3C-%20NavigationCtrl 在angular.js:138 at angular.js:4924 at Object.getService 如得到 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文件如下所示：

代码语言：javascript
复制
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看起来是这样的：

代码语言：javascript
复制
<!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 -如果有用的话：

代码语言：javascript
复制
{
  "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"
  }
}

编辑：

我试过这个：

代码语言：javascript
复制
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的响应：

代码语言：javascript
复制
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问题。

我的组件看起来如下：

代码语言：javascript
复制
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('_', ' ');
    }
});
代码语言：javascript
复制
<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.

代码语言：javascript
复制
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'),

})
restangular
javascript
angularjs
refactoring
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-19 22:15:12

使用内联数组注释

代码语言：javascript
复制
angular.module('qaDashboard', ['restangular'])
.controller('NavigationCtrl', ["$scope","$location","$anchorScroll",
  function($scope, $location, $anchorScroll) {
    $scope.scrollTo = function (id) {
        $location.hash(id);
        $anchorScroll();
    }
}]);

更新

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

来自“文件”：

使用严格依赖注入 您可以在与ng-app相同的元素上添加一个ng-app指令，以选择进入严格的DI模式:每当服务试图使用隐式注释时，严格模式都会引发错误。

有关详细信息，请参阅

更新#2

使用内联数组注释

请给我看一下我的编辑3好吗？

代码语言：javascript
复制
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'),    
})

来自“文件”：

隐式注释 ：如果您计划缩小您的代码，您的服务名称将被重命名并破坏您的应用程序。

有关详细信息，请参阅

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/57118069

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档