Uncaught Error: [$injector:unpr] in AngularJS

Question

I'm trying to upgrade AngularJS version from 1.3 to 1.7 in my project. As a part of the upgradation I have upgraded the existing libraries to the respective compatible versions for AngularJS 1.7. However, I'm getting the below error in the console from the angular.js file. Any idea where I might be going wrong?

angular.js:26037 Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.7.8/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20ifesModal%20%3C-%20platform.systemInformationWarningsService
at angular.js:26037
at angular.js:26037
at Object.d [as get] (angular.js:26037)
at angular.js:26037
at d (angular.js:26037)
at e (angular.js:26037)
at Object.invoke (angular.js:26037)
at Object.$get (angular.js:26037)
at Object.invoke (angular.js:26037)
at angular.js:26037

platform.systemInformationWarningsService is a file in my application which is defined as:

(function () {
  'use strict';

  angular
  .module('platform')
  .service('platform.systemInformationWarningsService', systemInformationWarningsService);

  systemInformationWarningsService.$inject = ['$rootScope', '$interval', 'ifesModal', 'api', 'platform.ifesSecurity'];

  function systemInformationWarningsService($rootScope, $interval, ifesModal, api, ifesSecurity) {

    var warningsService = getWarningsService();
    var translations = Ifes.Assets.WebUI.Areas.Platform.Views.SystemInformation.SystemInformation();

    var service = {
      init: init,
      subscribe: undefined,
      unsubscribe: undefined
    };

    function init() {
      ifesSecurity.hasFunctionPermission('Core.SystemInformation.View').then(startScheduler);

      function startScheduler() {
        $interval(checkWarnings, 300000);
      }
    }

    function checkWarnings() {
      warningsService.getWarnings().$promise.then(success);

      function success(result) {

        if (result === undefined) {
          return;
        }

        var text = "";
        var previousWarnings = JSON.parse(localStorage.getItem("previousWarnings"));

        angular.forEach(result, function (warning) {
          var found = (previousWarnings !== null && previousWarnings.some(function(id) {
            return id === warning.Id;
          }));

          if (!found) {
            if (previousWarnings === null) {
              previousWarnings = [];
            }

            previousWarnings.push(warning.Id);

            if (text !== "") {
              text += "\r\n\r\n";
            }

            text += warning.Title + ":\r\n" + warning.Text;
          }
        });

        if (text !== "") {
          showWarning(text);
        }

        localStorage.setItem("previousWarnings", JSON.stringify(previousWarnings));
      }
    }

    function showWarning(text) {
      var modalOptions = {
        scope: $rootScope
      };

      $rootScope.alertHeader = translations.SystemInformationLabel;
      $rootScope.alertMessage = text;
      $rootScope.alertType = "warning";

      ifesModal.alert.open(modalOptions);
    }

    function getWarningsService() {
      return api('User/SystemInformation/:id', { id: '@Id' }, {
        getWarnings: { method: 'GET', url: 'User/SystemInformation/Warnings/Current', isArray: true }
      });
    }

    return service;
  }
})();

I read here https://code.angularjs.org/1.7.8/docs/error/$injector/unpr?p0=$modalProvider%20%3C-%20$modal%20%3C-%20ifesModal%20%3C-%20platform.systemInformationWarningsService%20at%20angular.js:26037 that the dependency might not be properly defined but I don't think that this is the issue here.

georgeawg georgeawg · Accepted Answer · 2019-11-20T01:08:36

If you are using the latest version of AngularUI bootstrap, the code needs to inject $uibModal instead of $modal, as all bootstrap directives and services names are now prepended with the $uib prefix.

Same thing will happen with the $modalInstance dependency, which needs to be changed to $uibModalInstance.

For more information, see

Angular Error - ReferenceError: $modal is not defined

Uncaught Error: [$injector:unpr] in AngularJS

2 Answers