sksallaj sksallaj - 6 months ago 66
AngularJS Question

angular using explicit notation failing at app.config()

So I've been trying to minify my code, and it's not been an easy journey.

Everything works if nothing is minified or bundled. The first thing I was told to do is not to minify first, and add "ng-strict-di" to the ng-app element. So that when I take care of all the errors that throw, I can minify no problem.

<html lang="en" ng-app="myApp" ng-strict-di>


And I refreshed the page, and then I got my error.

JavaScript error: Uncaught Error: [$injector:modulerr] Failed to instantiate
module myApp due to:
Error: [$injector:strictdi] function(toastrConfig) is not using explicit
annotation and cannot be invoked in strict mode


This is the library I'm using: https://github.com/Foxandxss/angular-toastr

In the documentation it shows how to apply a global configuration to all my toastrs:

app.config(function(toastrConfig) {
angular.extend(toastrConfig, {
allowHtml: false,
closeButton: false,
closeHtml: '<button>&times;</button>',
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
},
messageClass: 'toast-message',
onHidden: null,
onShown: null,
onTap: null,
progressBar: false,
tapToDismiss: true,
templates: {
toast: 'directives/toast/toast.html',
progressbar: 'directives/progressbar/progressbar.html'
},
timeOut: 5000,
titleClass: 'toast-title',
toastClass: 'toast'
});
});


Again everything works if I remove ng-strict-di, but when I apply it.. it errors out. If I remove the app.config code, everything works.. but I need this as I have a lot of toastr notifications throughout my app. So what's going on here? I couldn't find anything related to this in the angular docs, and it shows that I'm using app.config correctly, so why is this being a problem?

Answer

Going through the link that I commented, and after some double checking, I believe (never had to use this) that your problem is that you are requiring angular to implicitly figure out which providers you want. In strict mode (which was in that link I sent you), you have to explicitly define them. Here is an example from the Angular docs.

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

Notice the array syntax.

So for you, try

app.config(['toastrConfig',function(toastrConfig) {
  angular.extend(toastrConfig, {
    allowHtml: false,
    closeButton: false,
    closeHtml: '<button>&times;</button>',
    extendedTimeOut: 1000,
    iconClasses: {
      error: 'toast-error',
      info: 'toast-info',
      success: 'toast-success',
      warning: 'toast-warning'
    },  
    messageClass: 'toast-message',
    onHidden: null,
    onShown: null,
    onTap: null,
    progressBar: false,
    tapToDismiss: true,
    templates: {
      toast: 'directives/toast/toast.html',
      progressbar: 'directives/progressbar/progressbar.html'
    },
    timeOut: 5000,
    titleClass: 'toast-title',
    toastClass: 'toast'
  });
}]);
Comments