时间戳

首页 > 解决方案 > 名称为XXX的控制器未注册-重构使用webpack的旧项目

javascript - 名称为XXX的控制器未注册-重构使用webpack的旧项目

问题描述

我目前正在重构我以前工作的旧 AngularJS 项目之一，但自从更新依赖项后，它就停止工作了。

我在控制台中收到一条错误消息：

名称为“NavigationCtrl”的控制器未注册。

我的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 捆绑（如您所见） - 我不知道问题是否与此有关？

起初我认为这是一个错字，但事实并非如此。

如何注册我的组件？

正如我之前提到的，我以前不必这样做，我的项目在更新依赖项之前运行良好。

编辑：

我已经实施了你的建议，但现在它给了我：

错误：[$injector:unpr] 未知提供者：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('_', ' ');
        }
    });

索引.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>

标签： javascriptangularjswebpackrefactoring

解决方案

只有第一个模块声明应该指定依赖项。

错误

angular.module('qaDashboard', ['restangular'])
.controller('NavigationCtrl',NavigationCtrl) 

angular.module('qaDashboard', ['restangular'])
.component('environments', {/* ... */})

再次声明依赖会导致控制器被注销。

正确的

 angular.module('qaDashboard', ['restangular'])
.controller('NavigationCtrl',NavigationCtrl) 

 angular.module('qaDashboard')
.component('environments', {/* .. */})

有关详细信息，请参阅

推荐阅读