Toastr undefined in angularjs

Question

I am doing tutorial and this part is about implementing login and this should give baloons about login success

angular.module("app").value("mvToastr", toastr);

angular.module("app").factory("mvNotifier", function(mvToastr) {
   return {
      notify: function(msg) {
          mvToastr.success(msg);
          console.log(msg);
       }
    }
});

I am getting this and I don't understand it a bit. All .js files seem to be loaded. Please tell me where is the problem, thank you.

TypeError: Cannot call method 'extend' of undefined
   at getOptions (http://localhost:3030/vendor/toastr/toastr.js:282:14)
   at Object.success (http://localhost:3030/vendor/toastr/toastr.js:68:17)
   at Object.notify (http://localhost:3030/app/common/mvNotifier.js:6:22)
   at http://localhost:3030/app/account/mvNavBarLoginCtrl.js:8:28
   at wrappedCallback (http://localhost:3030/vendor/angular/angular.js:11033:81)
   at wrappedCallback (http://localhost:3030/vendor/angular/angular.js:11033:81)
   at http://localhost:3030/vendor/angular/angular.js:11119:26
   at Scope.$eval (http://localhost:3030/vendor/angular/angular.js:12045:28)
   at Scope.$digest (http://localhost:3030/vendor/angular/angular.js:11871:31)
   at Scope.$apply (http://localhost:3030/vendor/angular/angular.js:12151:24)

   angular.js:9503

it's pluralsight premium pluralsight.com/training/Courses/TableOfContents/… - Improving the Client Login Code — user3123165
– user3123165, Commented Mar 5, 2014 at 23:03
Congrats, your question helped me implement toastr as an Angular service. Thanks! — iulial
– iulial, Commented Jul 14, 2017 at 11:29

Phil Price · Accepted Answer · 2014-03-06 00:30:33Z

19

Looking at the toastr sources it looks like getOptions() calls jQuery's $.extend() method.

Toastr takes a dependency on jQuery, from the first line of the github readme:

toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.

Just include jquery in your master view html.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

answered Mar 6, 2014 at 0:30

Phil Price

2,31320 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3123165 Over a year ago

thank you so much, you are right. I had jquery and i knew it, but the path was wrong. i had jquery/jquery.js but i should have jquery/dist/jquery.js @phil

Arminder Dahul Over a year ago

This makes no difference to me. I pull in jQuery before toastr.js and it still doesn't work. Angular just doesn't like it.

Zach Lysobey Over a year ago

@ArminderDahul late reply I know, but toastr does work fine with angular. You should include jquery before angular, otherwise angular will essentially overwrite jquery with its own "jqlite" implementation. docs.angularjs.org/misc/…

Yidir · Accepted Answer · 2019-05-21 02:43:25Z

1

I had this problem and it turns out Toastr needs JQuery to work, always make sure you include JQuery before Toastr, for example in angular.json:

            "scripts": [
              "node_modules/jquery/dist/jquery.min.js", // Make sure this comes before
              "node_modules/toastr/build/toastr.min.js", // this one
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

answered May 21, 2019 at 2:43

Yidir

6138 silver badges12 bronze badges

Comments

Post Impatica · Accepted Answer · 2015-08-27 21:46:33Z

0

I had this problem working with automated tasks and then loading up in browser. I upgraded browser-sync and it fixed it.

answered Aug 27, 2015 at 21:46

Post Impatica

16.7k11 gold badges73 silver badges86 bronze badges

Collectives™ on Stack Overflow

Toastr undefined in angularjs

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related