Webpack捆绑导致未知提供程序$ injector/unpr错误 [英] Webpack bundling causes Unknown provider $injector/unpr error
问题描述
我目前正在处理我的旧项目，以使它们作为一次小型重构练习能够再次完全正常工作，并且遇到了一些不再编译的AngularJS代码.我相信这取决于更新的依赖关系，因为我已经至少三年没有更改此源代码的功能了.
I'm currently working through my old projects to get them fully working again as a small refactoring exercise and I came across some AngularJS code that doesn't compile anymore. I believe this is down to the updated dependencies as I have not changed the functionality of this source code for at least 3 years.
我遇到的问题是:
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
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 +).
I understand this as an injection issue. I'm trying to inject something that Angular doesn't know about. It's a little confusing as I've not worked with AngularJS for a while now (having used 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发生了很大变化吗?
I've tried removing individual controllers and that hasn't worked. Am I missing something obvious here? Has the syntax/ API changed a lot since I last worked with this code?
app，js 文件由webpack捆绑-如果这是问题的根源，则不知道.我知道一个事实，就是这段代码以前工作得很好.我只是觉得我缺少一些琐碎的东西，事实证明这很难发现.
The app,js file gets bundled by webpack - dunno if that's the root of the issue. I know for a fact that this code worked perfectly fine before. I just feel like I'm missing something trivial and it's proving a little difficult to spot.
我的 package.json -如果有帮助的话:
My package.json - if it helps:
{
"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
}])
});
没有运气.
我只是用以下代码尝试了georgeawg的响应:
I just tried georgeawg's response with the following code:
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错误:[$ injector:unpr]未知提供程序: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 ，就像上面的^
(there are several components and they all use Restangular like above ^
我已经尝试过:
与: angular.js:15567错误:[$ controller:ctrlreg]未注册名称为'EnvironmentsController'的控制器.
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();
}
}]);
更新
为帮助您在丑陋之前发现此类问题，请使用严格依赖注入.
Update
To help you find this kind of problem before you uglify, use Strict Dependency Injection.
从文档中:
使用严格的依赖注入
您可以在与
ng-app相同的元素上添加ng-strict-di指令，以选择进入严格的DI模式:
Using Strict Dependency Injection
You can add an
ng-strict-didirective on the same element asng-appto 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.
有关更多信息，请参见
使用内联数组注释:
请您根据我的修改3向我展示?
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'),
})
从文档中:
隐式注释
谨慎:如果您打算缩小您的代码，您的服务名称将被重命名并破坏您的应用程序.
Careful: If you plan to minify your code, your service names will get renamed and break your app.
有关更多信息，请参见
这篇关于Webpack捆绑导致未知提供程序$ injector/unpr错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
