I injected the 2.1.1 version ngtagsinput like this into my controller:
app.controller('homeCtrl', ['$scope','$http','ngTagsInput', function($scope,$http){
}])
*NOTE: TESTED! add ngTagsInput into the function() will not make a difference...
I loaded the ngtagsinput lib after angularjs lib.
I wonder what else I could test to resolve the error of:
Error: [$injector:unpr] Unknown provider: ngTagsInputProvider <- ngTagsInput
http://errors.angularjs.org/1.2.9/$injector/unpr?p0=ngTagsInputProvider%20%3C-%20ngTagsInput
Don't get me wrong, I know basically this provider is not detected.
but my lib is found (did not report 404), I saw ngTagsInput used in its library....
So, its really bugging me the same solution no more works for this lib! What's special about this lib and why this error is there while I met all the standard to fix it?
It looks like you have tried to inject ngTagsInput into your controller, while you should be injecting it into your module as a dependency. For example:
angular.module('myApp', ['ngTagsInput'])
note module, not controller
You can see as per the creators example: https://github.com/mbenford/ngTagsInput#example
This happens because there are multiple types of injection used in angular. When you declare a module, you need to specify which other modules are available to use within your module.
See: https://docs.angularjs.org/guide/module
When you inject into say a controller, you are basically saying that you want to use a particular object inside it. That object must be a part of your module to be valid. For a third party library, this usually means adding it as a module dependency (as above), and then injecting any object that is part of that library into your controllers and services.
Related
I'm trying to do upgrade components written in AngularJS1 to Angular6. I'm taking the approach of having the wrappers for all the existing AngularJS1 component by extending "UpgradeComponent" placed under the folder "directive-wrappers" in my example. When I try to add some controllers which doesn't have any directives, I get the error message
Error: [$injector:unpr] Unknown provider: testDirective2DirectiveProvider <- testDirective2Directive
https://errors.angularjs.org/1.7.8/$injector/unpr?p0=testDirective2DirectiveProvider%20%3C-%20testDirective2Directive
at eval (angular.js:138)
at eval (angular.js:4924)
at Object.getService [as get] (angular.js:5084)
at eval (angular.js:4929)
at Object.getService [as get] (angular.js:5084)
at Function.UpgradeHelper.getDirective (upgrade_helper.ts:56)
at new UpgradeHelper (upgrade_helper.ts:52)
at TestDirective2Wrapper.UpgradeComponent (upgrade_component.ts:106)
at new TestDirective2Wrapper (TestDirective2Wrapper.ts:27)
at createClass (provider.ts:265) "<app-root _nghost-c69="">"
I tried adding studentController and homePageController, but not able to load it. Any ideas why I'm facing this issue?
https://stackblitz.com/edit/ng6hybrid-c8h6uv
There are two issues that need to be addressed. First, in the studentController.js file, you are using the var mainApp = angular.module("testApp", []); syntax which is resetting the AngularJS module and everything that got instantiated before is being removed.
To answer your question about the controllers, AngularJS controllers can't be upgraded directly using UpgradeComponent (see https://angular.io/guide/upgrade#using-angularjs-component-directives-from-angular-code) because they aren't components/directives that have a template. That is why the error you get (after fixing the first issue) is Unknown provider: studentControllerDirectiveProvider <- studentControllerDirective. It can't find a directive for the reference studentController, so it is adding Directive to see if that has anything.
To fix this, either convert the controller in AngularJS to a directive with a template, or convert it to a service in AngularJS and then inject it into Angular using the UpgradeModule. Keep in mind you will need a template somewhere for this controller so it can be upgraded to Angular. Please see a working example of this in my stackblitz below.
https://stackblitz.com/edit/ng6hybrid-zs6waw?file=app%2Fdirective-wrappers%2FstudentControllerWrapper.ts
I'm confused about something. Some dependencies have to be injected to the main module. For example:
angular.module("app", ["ui.router", "ui.bootstrap", "toaster"]);
Whereas some other dependencies can just be injected into the controllers, but don't need to be injected into the main module. For example:
angular.module("app").controller("newCtrl", ["$q", newCtrl);
I'm having difficulties understanding why. Any help will be much appreciated.
$q a service within the core ng module, per the documentation.
All services within the ng module are bootstrapped and registered when the angular.js file is loaded and parsed. This allows you to inject them anywhere in your app.
However, the three examples you have listed above are all external, modular dependencies. They need to be explicitly registered into your application so that the components within are available when the $injector service attempts to resolve them.
You inject modules into other modules.
You inject providers, services, and factories that are included in those modules into the specific controllers.
In Angular, you define a module like so:
angular.module('MyModule1', []);
Notice how module function takes two arguments. Second argument being the array of other modules this module is dependent on. This construct is for setting a module.
Once the module is defined, you can attach controller, services etc. to the module.
angular
.module('MyModule1')
.service('MyService1');
Notice, how this time only one argument was give to the module function. That means you are getting an already registered module.
Lets say you create another module MyModule2, but MyModule2 needs to use the services defined by the MyModule1.
You just set the module MyModule2 with MyModule1 as its dependency.
angular.module('MyModule2', ['MyModule1']);
Now, you want to create a controller (or a directive, or a service, whatever) in MyModule2 that actually makes use of the service MyService1 defined in MyModule1.
That's where the Dependency Injection (DI) of Angular comes in. You define your controller with the service name as function parameter and when Angular instantiates your controller, it makes sure the service instance is found and provided to your controller.
angular
.module('MyModule2')
.controller('MyController2', function (myService1) {
// Hey I can use myService1
// Dependency Injection FTW!
});
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.
I have a JS Fiddle here: Angular module injection. I also have a respository here that from what I can tell, duplicates my code: Blink-Example
When I open index.html I get the error:
Error: Unknown provider: fromBadFactoryProvider <- fromBadFactory
I'm trying to inject a module into my app that has a factory on it and use that factory in the app, but always get this error. What am I doing wrong?
It's because your copy of 1.0.6 is mangled -- you deleted an asterisk from it on line 1128.
Edit: Another reason to use a shared CDN. :)
What exactly does the "inject" line do?:
function PhotoGalleryCtrl($route, $xhr) {
}
PhotoGalleryCtrl.$inject = ['$route', '$xhr'];
Are $route and $xhr predefined somewhere? Where to read about them?
Who said that the PhotoGalleryCtrl function has the .$inject method?
Both $route and $xhr are native AngularJS services, the latter has been replaced by $http in the most recent versions of AngularJS. They are part of the ng module.
You can read about them here
ng.$route
ng.$http
$inject tells angular to make available those services to the controller PhotoGalleryCtrl
Dependency injection and modules are core features of Angular. They both minimize global state and allow for better unit testing, you can read more about them here
Modules
Dependency Injection