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'),
})
angular.module('qaDashboard', ['restangular'])
.controller('NavigationCtrl', ["$scope","$location","$anchorScroll",
function($scope, $location, $anchorScroll) {
$scope.scrollTo = function (id) {
$location.hash(id);
$anchorScroll();
}
}]);
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-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.
For more information, see
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