TypeError: newToast.scope.init is not a function

I’m using angular-toastr in my project and i’ve got this error, when first toastr appears.

TypeError: newToast.scope.init is not a function
  File http://page.com/js/vendor.js line 73525 col 15 in _notify/</</<
  File http://page.com/js/vendor.js line 22503 col 27 in processQueue
  File http://page.com/js/vendor.js line 22519 col 27 in scheduleProcessQueue/<
  File http://page.coml/js/vendor.js line 14151 col 7 in completeOutstandingRequest
  File http://page.com/js/vendor.js line 14539 col 7 in Browser/self.defer/timeoutId<

Unfortunately, this error appear always on server (for first toastr) and only one on my local machine.

This is my config:

angular.extend(toastrConfig, {
  closeButton: false,
  iconClasses: {
    info: 'toast-message',
    warning: 'toast-cart'
  },
  templates: {
    toast: 'templates/common/services/alersts_service/alertsServ.html'
  }
});

I’m inlcuding angular-toastr.tpls.js script in my html files.

[danielcmorris]

THE FIX:

I’ve had this problem for ages and just ignored it, but I finally got to it. Someone here even pointed it out and it worked. $templateCache.

    app.config(function (toastrConfig:any) {
        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: 'toast.html',
                progressbar: 'progressbar.html'
            },
            timeOut: 5000,
            titleClass: 'toast-title',
            toastClass: 'toast'
        });
    });


    app.run(['$templateCache',function ($templateCache:any) {
        
        $templateCache.put('toast.html', `
            <div class="{{toastClass}} {{toastType}}" ng-click="tapToast()">
                <div ng-switch on="allowHtml">
                    <div ng-switch-default ng-if="title" class="{{titleClass}}" aria-label="{{title}}">{{title}}</div>
                    <div ng-switch-default class="{{messageClass}}" aria-label="{{message}}">{{message}}</div>
                    <div ng-switch-when="true" ng-if="title" class="{{titleClass}}" ng-bind-html="title"></div>
                    <div ng-switch-when="true" class="{{messageClass}}" ng-bind-html="message"></div>
                </div>
                <progress-bar ng-if="progressBar"></progress-bar>
            </div>`);

        $templateCache.put('progressbar.html', `<div class="toast-progress"></div>`);



    }]);

you’ll notice that I changed the config so toast.html and progressbar.html have no paths.
Then I force toast.html and progressbar.html into the cache.

I think the problem was simply that the template just didn’t load fast enough. Was driving me nuts, because I couldn’t get it to happen on my local server, but the production machine had the bug.

Anyway, if you’re having trouble, try just cutting and pasting that code into yours. If it works, boom, you’re done.

[Foxandxss]

It should be fixed, but apparently not. Would you be able to reproduce this in a plunker or a little project at github? I would like to try.