Hi I'm trying to use $window object in the module below.
var testInterceptor = function($provide,$httpProvider,$window){
// actual Code
}
angular.module('MyApp')
.config(testInterceptor);
But the page is throwing the error like below
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to:
Error: [$injector:unpr] Unknown provider: $window
Please help me to resolve this issue.
$window is a service and can't be used in config phase.
Only providers and constants can be used here.
Read the documentation. https://docs.angularjs.org/guide/module
Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
What you could do is place your necessary code in the run phase. Because you can use services here.
Try this one. (http://codepen.io/anon/pen/jWRmqZ)
var testInterceptor = function($provide,$httpProvider,$window){
// More Code
}
angular.module('MyApp', [])
.config(['$provide','$httpProvider','$window', testInterceptor]);
Related
I tried to add a custom service into the ng module directly
'use strict';
angular
.module("ng")
.service('getAQueryParameterByName', ['', function(){
console.log("getAQueryParameterByName service active");
this.getParameter = function(name){
console.log("getParameter!");
}
}]);
As a result, when I try to run the service by doing getAQueryParameterByName.getParameter(var) I encountered error of
ReferenceError: getAQueryParameterByName is not defined
Usually this error is because I did not inject the service, however, I suppose, as I inject the custom service directly into the module, therefore, I really do not need to inject again into controller? But, I tried to add the service again into the controller anyway, and I received error of
Error: [$injector:unpr] Unknown provider: Provider <- <- getAQueryParameterByName
I am really confused at this point... Where did I do wrong?
Change your definition to:
'use strict';
angular
.module("ng")
.service('getAQueryParameterByName', [function(){
console.log("getAQueryParameterByName service active");
this.getParameter = function(name){
console.log("getParameter!");
}
}]);
Although, I wouldn't recommend extending the ng module. That should be viewed as a third party as far as modular architecture.
I'd like to integrate ui-rangeSlider in a app based on MEAN.io framework.
But I think the problem is the same for any module.
When I add the parameter in the function
angular.module('mean', ['ui-rangeSlider']).controller('PreferencesController', ['$scope', 'Global',
I added the required static ressources in the app.js :
Preferences.aggregateAsset('js', 'angular.rangeSlider.js');
I get an error
Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
Do you have any idea ?
Thank you
did you see this? How to implement jQuery range slider in AngularJS
I think you need to pass $stateProvider to your module. Without seeing more code I am not sure, I think it is not finding $stateProvider and is not an error related to the range slider script.
I have a simple AngularJS application for which I used grunt serve to scaffold the code and test it. I now want the code deployed to a server using nginx and I'm doing it with the grunt build task which generates the code in the ./dist folder. I now want this code transferred to the server where it can be hosted.
I don't know if the error is related to minifying the code, but the app doesn't run.
The errors are:
Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.6/$injector/unpr?p0=aProvider%20%3C-%20a
at http://localhost/kds/scripts/ded94bd9.vendor.js:3:30474
at http://localhost/kds/scripts/ded94bd9.vendor.js:4:13890
at Object.c [as get] (http://localhost/kds/scripts/ded94bd9.vendor.js:4:13194)
at http://localhost/kds/scripts/ded94bd9.vendor.js:4:13985
at c (http://localhost/kds/scripts/ded94bd9.vendor.js:4:13194)
at d (http://localhost/kds/scripts/ded94bd9.vendor.js:4:13440)
at Object.e [as instantiate] (http://localhost/kds/scripts/ded94bd9.vendor.js:4:13587)
at http://localhost/kds/scripts/ded94bd9.vendor.js:4:29734
at http://localhost/kds/scripts/ded94bd9.vendor.js:4:22719
at f (http://localhost/kds/scripts/ded94bd9.vendor.js:3:30909)
What's going wrong here?
EDIT Also, on the Chrome network log: http://cl.ly/image/3z0v3X2n1f3h
And the conf section of nginx.conf:
location /kds/ {
alias /Users/asheshambasta/code/kds/dist/;
index index.html index.htm;
}
And grunt serve loads up the application without problems.
When you see an error in AngularJS like "Unknown provider: aProvider <- a" or "Unknown provider: nProvider <- n", it means the AngularJS dependency injection system was not able to match an argument to a provider. This error is legitimate when you have an argument in an injected function that does not exist, but...
It more often than that, means your AngularJS code was minified, which requires some work. You will have to annotate your controllers/services/etc in a certain way for AngularJS's dependency injection system to find it. See the docs (search for "minification") for more details, but here's a quick rundown:
// This injects $scope and $http as the two arguments to the controller.
myApp.controller("MyCtrl", ["$scope", "$http", function($scope, $http) { ... }]);
The other option is to disable minification in your build configuration.
I'm trying to inject service/provider into my provider but it seems like I cannot do it the same way with factory or service? Please tell me what I did wrong, I know it's simple and probably just a stupid mistake but I cannot findout
Plnkr: http://plnkr.co/edit/B1XGDZNOpiIJVE4q3zMP?p=preview
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: $window
As mentioned by #Michael, you cannot inject dependencies into provider this way. You can provide your dependencies in get method
this.$get =['$window', 'alert', function (window, alert){
}];
You can't do this. Provider will be registered during the configuration phase. And in this phase the services are not yet available for injection. See http://docs.angularjs.org/guide/module - Module Loading & Dependencies
Also checkout http://docs.angularjs.org/guide/providers. There you will see what is available during configuration phase.
it seems that from angular's point of view the order of registering of a service provider and the module configuration code is important: in order for the configuration code to find the provider, the provider should be registered before.
This was a total surprise for me, as I thought that angular first processes all provider registrations, to make them available for DI, and then calls config callbacks, like this:
module.config(function(myServiceProvider) {...});
Please see here a very short test that demonstrates the problem. It fails on "unknown provider", you can see it in the JS console: http://plnkr.co/edit/jGJmE2Fq7wOrwubdlTTX
Am I missing anything here? Is it an expected angular behavior?
Thanks.
Looks like this behavior has changed in more recent versions of Angular (not sure when exactly). I modified your Plunker to point from 1.0.7 to 1.3.0 and it worked without error as you had originally expected.
Similar example of code that works:
var myModule = angular.module('myModule', []);
myModule.config((myServiceProvider) => {
});
myModule.service('myService', () => {
});
Running a config for a provider before the provider is registered with the module should work just fine as you were expecting.
Reference
For reference, this reported issue appears to be the one to have fixed it: https://github.com/angular/angular.js/issues/6723
The Angular documentation for module state that:
Recommended Setup
While the example above is simple, it will not scale to large applications. Instead we recommend that you break your
application to multiple modules like this:
A service module, for service declaration
A directive module, for directive declaration
A filter module, for filter declaration
And an application level module which depends on the above modules, and which has initialization code.
As you are using a single module that you call app, you are creating a dependency between that module's config and declaration of a provider. What you should have done is to place all your providers into a separate module, such as:
var appr = angular.module('appr', [])
.provider('myService', function() {
this.$get = function() {};
})
Then you declare the dependency of your app using:
var app = angular.module('plunker', ['appr']);
Check out the updated Plunker: http://plnkr.co/edit/Ym3Nlsm1nX4wPaiuVQ3Y?p=preview
Also, instead of using the generic provider, consider using more specific implementation of provider such as controller, factory or service. Take a look at Module API documentation for more detail.