1. 技术文章
  2. Webpack bundling causes Unknown provider $injector/unpr error

Webpack bundling causes Unknown provider $injector/unpr error

由 故事扮演 提交于 2019-12-11 04:49:45

问题


Unknown provider - NavigationCtrl, Restangular

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.

The issue I'm getting is:

angular.js:15567 Error: [$injector:unpr] Unknown provider: 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)

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+).

My app.js file looks like this: 

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');

And my index.html looks like this:

<!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>

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?

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.

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"
  }
}

EDIT:

I've tried this:

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
            }])
    });

without luck.

Edit 2:

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');

I'm getting an angular.js:15567 Error: [$injector:unpr] Unknown provider: AProvider <- A issue now.

My components look like this: 

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>

(there are several components and they all use Restangular like above ^

Edit 3: I've tried:

with: 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'),

})

回答1:


Use Inline Array Annotation:

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.

From the Docs:

Using Strict Dependency Injection

You can add an ng-strict-di directive on the same element as ng-app to 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.

For more information, see

  • AngularJS Developer Guide - Strict Dependency Injection
  • AngularJS ng-app Directive API Reference - with ng-strict-di

Update #2

Use Inline Array Annotation:

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'),    
})

From the Docs:

Implicit Annotation

Careful: If you plan to minify your code, your service names will get renamed and break your app.

For more information, see

  • AngularJS Developer Guide - Implicit Annotation


来源：https://stackoverflow.com/questions/57118069/webpack-bundling-causes-unknown-provider-injector-unpr-error

标签
javascript
angularjs
refactoring
restangular
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!