未注册名称为XXX的控制器-重构使用Webpack的旧项目 [英] The controller with the name XXX is not registered - refactoring old project that uses webpack
问题描述
我目前正在重构以前工作过的旧AngularJS项目之一，但由于更新了依赖关系，因此已停止工作.
I'm currently refactoring one of my old AngularJS projects which worked before, but since updating the dependencies, has stopped working.
我在控制台中看到一条错误消息:
I'm getting an error in the console that says:
名称为"NavigationCtrl"的控制器未注册.
The controller with the name 'NavigationCtrl' is not registered.
我的 app.js 文件如下所示:
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');
和我的 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>
此 app.js 文件通过Webpack捆绑在一起(如您所见)-我不知道问题出在哪里吗?
This app.js file gets bundled via Webpack (as you can see) - I don't know if the problem is with that?
起初我以为是错字，但事实并非如此.
At first I assumed it was a typo but that's not the case.
如何注册我的组件?
我之前没有做过此事，在更新依赖项之前，我的项目运行良好.
I've not had to do this before as I mentioned earlier, my project worked fine before updating the dependencies.
我已经执行了您的建议，但是现在它给了我:
I have implemented your suggestion but it now gives me:
错误:[$ injector:unpr]未知提供程序:AProvider<-A
Error: [$injector:unpr] Unknown provider: AProvider <- A
我的app.js:
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');
和 ../components/environments/script.js :
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('_', ' ');
}
});
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>
和模板:
<div id="{{environment}}" ng-repeat="environment in $ctrl.environments" class="borderedHolder">
<h1>{{environment | formattedEnvironment}}</h1>
<!-- <features environment='environment'>
</features> -->
</div>
推荐答案
仅第一个模块声明中应指定依赖项.
Only the first module declaration should have dependencies specified.
错误
angular.module('qaDashboard', ['restangular'])
.controller('NavigationCtrl',NavigationCtrl)
angular.module('qaDashboard', ['restangular'])
.component('environments', {/* ... */})
再次声明依赖关系将导致控制器被注销.
Declaring dependencies again will cause the controller to be unregistered.
angular.module('qaDashboard', ['restangular'])
.controller('NavigationCtrl',NavigationCtrl)
angular.module('qaDashboard')
.component('environments', {/* .. */})
有关更多信息，请参见
这篇关于未注册名称为XXX的控制器-重构使用Webpack的旧项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
