AngularJS - unknown provider $modal when getting a service from angular.injector

Question

I have a piece of javascript code which needs to call an angular service. I try to access the service by retrieving the angular module where the service is defined and then getting the service it self:

    var messagemanagerModule = angular.injector(['ng', 'portal.services.messagemanager']);
    var messageService = messagemanagerModule.get('MessageService');
    messageService.postMessage('portal', moduleId, 'selectModule');

The module and service is defined like this:

    angular.module('portal.services.messagemanager', ['modules.modal', 'modules.softlogoff'])
    .factory('MessageService', messageService);

messageService.$inject = ['$rootScope', '$modal', '$translate', 'ConfigurationService'];

function messageService($rootScope, $modal, $translate, ConfigurationService) {
    var service = {
        showMessage: showMessage,
        showSoftLogoff: showSoftLogoff,
        postMessage: postMessage,
        supportedMessages: supportedMessages
    };

    return service;

Unfortunately I get the error:

Error: $injector:unpr Unknown provider: $modalProvider <- $modal <- MessageService"

I think I need to inject $modal, but I don't know how to do it.

score 0 · Answer 1 · answered Jun 23 '16 at 09:31

0

The ui-bootstrap library now uses `$uibModal' service.

So you need to inject $uibModal service.

messageService.$inject = ['$rootScope', '$uibModal', '$translate', 'ConfigurationService'];

function messageService($rootScope, $uibModal , $translate, ConfigurationService) {
var service = {
    showMessage: showMessage,
    showSoftLogoff: showSoftLogoff,
    postMessage: postMessage,
    supportedMessages: supportedMessages
};

return service;

answered Jun 23 '16 at 09:31

ashfaq.p

5,379
21
35

I don't think that is the problem. I have no problem calling the MessageService from another controller. When I use $uibModal the application faults durring startup: Unknown provider: $uibModalProvider <- $uibModal <- MessageService <- ContextManagerService – peterbf Jun 23 '16 at 10:01

score 0 · Answer 2 · answered Jun 23 '16 at 10:35

0

I think you need to include the ui.bootstrap module as a dependency of your module: include ui.bootstrap in you dependencies:

angular.module('portal.services.messagemanager', ['modules.modal','modules.softlogoff','ui.bootstrap'])

Further you need to include the ui-bootstrap-xxx.min.js somewhere in your html. If you use ui-bootstrap in version >= 0.14 you need to change $modal to $uibModal

answered Jun 23 '16 at 10:35

Thorsten

91
1
3

1

Maybe the other Module which uses your MessageService has already ui.bootstrap as a dependency, but in your current module which uses the MessageService ui.bootstrap is maybe not included. – Thorsten Jun 23 '16 at 10:38
I use version 0.12 so I think $modal is right. The module 'portal.services.messagemanager' works fine - I can call it from another controller without problems. It is only when I call from "outside" angular that I am missing something. – peterbf Jun 23 '16 at 10:40
I got a bit further by adding 'ui.bootstrap' to this line: var messagemanagerModule = angular.injector(['ng', 'ui.bootstrap', 'portal.services.messagemanager']); In the code "outside" angular where I want to use the service. Now I get another unknown provider error, but I properbly just have to find the correct module to inject. – peterbf Jun 23 '16 at 10:48
In the place where you use the javascript snippet, is there the ui.bootstrap-xxx.js loaded? You can check in firebug if it is there – Thorsten Jun 23 '16 at 10:50
I think 'ui.bootstrap' gets loaded now when I have added it to the angular.injector modules array. One of the services uses $location which gives me this error: Unknown provider: $rootElementProvider <- $rootElement <- $location <- ConfigurationService <- $location Any idea how to solve this? – peterbf Jun 23 '16 at 11:42
I think you have to add the module which holds the ConfigurationService into your injector too. Further you have to ensure that the js file containing that service is also loaded. – Thorsten Jun 23 '16 at 12:06
I finally got it to work by adding a rootElement. [example](http://stackoverflow.com/questions/28399456/unknown-provider-rootelementprovider-when-using-injector-to-get-location-ser) I added the 'mockApp' described in the second example in answer by @PSL – peterbf Jun 23 '16 at 12:21

AngularJS - unknown provider $modal when getting a service from angular.injector

2 Answers2