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

【问题标题】：Webpack bundling causes Unknown provider $injector/unpr errorWebpack 捆绑导致 Unknown provider $injector/unpr 错误
【发布时间】：2019-07-19 18:41:37
【问题描述】：

未知提供程序 - NavigationCtrl、Restangular

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

我遇到的问题是：

angular.js:15567 错误：[$injector:unpr] 未知提供者：AProvider 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 &lt;- 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'),

})

【问题讨论】：

  • 在调用.run之前，您是否尝试过上移控制器定义
  • 还是同样的问题。 - 请参阅编辑

标签： javascript angularjs refactoring restangular


【解决方案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();
    }
}]);

更新

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

来自文档：

使用严格的依赖注入

您可以在与 ng-app 相同的元素上添加 ng-strict-di 指令以选择进入严格 DI 模式：

<!doctype html>
<html ng-app="myApp" ng-strict-di>
<body>
  I can add: {{ 1 + 2 }}.
  <script src="angular.js"></script>
</body>
</html>

只要服务尝试使用隐式注释，严格模式就会引发错误。

有关详细信息，请参阅

更新 #2

使用Inline Array Annotation：

请您根据我的编辑 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'),    
})

来自文档：

隐式注释

小心：如果您打算 minify 您的代码，您的服务名称将被重命名并破坏您的应用程序。

有关详细信息，请参阅

【讨论】：

  • 感谢您的回复。我刚刚尝试过这个，我想现在我的问题出在我的组件上？请参阅编辑 2
  • 这似乎是 Restangular 的问题 - 我认为？
  • 好的，太好了，我已经解决了这个问题。刚收到Error: [$controller:ctrlreg] The controller with the name 'NavigationCtrl' is not registered.。有什么想法吗？
  • 这个答案解决了缩小导致$injector:undef 错误的问题。 $controller:ctrlreg 错误是另一个问题，应该在 new question 中提出。
  • 非常感谢，非常感谢。我在这里创建了另一个问题：stackoverflow.com/questions/57135511/…
猜你喜欢
  • 2016-09-27
  • 2023-03-29
  • 2020-02-08
  • 1970-01-01
  • 1970-01-01
  • 2017-12-10
  • 1970-01-01
  • 2016-11-12
  • 2016-05-26
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode