AngularJS injection Error - Unknown provider: modalMessagesProvider <- modalMessages

Question

I have a service opening an angular-ui-bootstrap modal with a component controller. But my controller can't get access to the parameter i am passing on (modalMessages, i just want to print it). The error is: Error: [$injector:unpr] Unknown provider: modalMessagesProvider <- modalMessages

Can anyone help?

Service:

angular.module('app').service('AlertService', function ($uibModal) {
    this.showModal = function (modalMessages) {
        return $uibModal.open({
            component: "modalComponent",
            resolve: {
                modalMessages: function () {
                    return modalMessages;
                }
            }
        }).result;
    }
});

Component Controller:

'use strict';

const Modal = {
    templateUrl: 'views/modals/modalAlert.html',
    controller: ['modalMessages', ModalCtrl],
    controllerAs: '$ctrl',
    bindings: {
        modalMessages: "<",
    }
}


angular.module('app').component('modalComponent', Modal);

function ModalCtrl() {

    this.modalMessages = modalMessages;
    console.log(this.modalMessages);
}

Where is the service modalMessages which you are using inside AlertService ? — Shashank Vivek
The Service is called like this: AlertService.showModal({ header: 'header', information: 'info' }); — Isabel
I tried to inject modalMessages to the controller, so it has to be function ModalCtrl(modalMessages) — Isabel
Can you check if you have .service('modalMessages',anywhere defined ? — Shashank Vivek
I don't, because it shouldn't be a service, it should be a parameter given from the service to the component — Isabel

Shashank Vivek Shashank Vivek · Accepted Answer · 2019-01-20T06:02:38

Take a look at this plunkr

Notice the changes I have done in:

(function(){
  const Modal = {
    templateUrl: 'modalAlert.html',
    controller:  ModalCtrl,
    bindings: {
      resolve: "<"
    }
};

angular.module('app').component('modalComponent', Modal);

function ModalCtrl() {
  var $ctrl = this;
  $ctrl.$onInit = function() {
    $ctrl.modalMessages = $ctrl.resolve.modalMessages;
  }
}

})()

you need to use resolve with bindings to access the passed paramaeter

AngularJS injection Error - Unknown provider: modalMessagesProvider <- modalMessages

1 Answers