(Angular2) Cannot read property 'extend' of undefined for toastr

Question

I'm trying to use toastr in angularjs 2 as a service which will be injected in my component as mentioned below. When the handleEvent function is called i'm receiving "Cannot read property 'extend' of undefined". Any suggestions and/or explanation for the error is much appreciated.

app.moudle.ts has imported ToastrService and ToastrService has been added in providers.

//events/events-list.components.ts

import { ToastrService } from '../common/toastr.service';
@Component ({
    selector: 'event-list',
    template: `
    <div>
        <h1> Upcoming Angular 2 Event </h1>
        <hr>
        <div class="row">
            <div *ngFor="let event_data of all_data" class="col-md-5">
                <event-thumbnail (click)="handleEvent(event_data.name)" [event]="event_data"></event-thumbnail>
    </div>  
            </div>
        </div>
    `
})

export class EventListComponent implements OnInit {
  all_data:any[]
  constructor(private eventService : EventService , private toastr : ToastrService ){
    //moved code from here to ngOnInit 
  }

  ngOnInit(){
    this.all_data = this.eventService.getEvents();
  }

  handleEvent(eventName) {
    console.log("hey here  "+eventName);
    this.toastr.success(eventName);
  }
}

Error:
[ This error is thrown after the console.log output ]

EXCEPTION: Error in ./EventListComponent class EventListComponent - inline template:6:16 caused by: Cannot read property 'extend' of undefined. ORIGINAL EXCEPTION: Cannot read property 'extend' of undefined
TypeError: Cannot read property 'extend' of undefined at m (toastr.js:411) at Object.s [as success] (toastr.js:85) at ToastrService.success (toastr.service.ts:12)

It's like we are coding the same thing - I was just about to ask that :D — Leo, Feb 11 '17 at 17:34
Embarrassingly, no. I included both in 'scripts' section of angular-cli and it works, thank you! Is there a better way? — Leo, Feb 11 '17 at 17:53
@kemsky : yes jquery has been included and i don't have any dependency exception upon loading the app. — Mad-D, Feb 12 '17 at 19:07
@RomanC I would guess that ToastrService is a wrapper around the Toastr library. And again another guess but Mad-D was watching the same Pluralsight Angular course that I'm watching now. — Daniel Hollinrake, Aug 05 '22 at 14:48
@DanielHollinrake I don't know how it's integrated into the code. But if you use the typescript it's provided by the `import` directive. For example see how to import services [here](https://stackoverflow.com/a/47851377/573032). — Roman C, Aug 09 '22 at 10:05

score 51 · Accepted Answer · edited Oct 28 '17 at 07:40

51

Add this script src="node_modules/toastr/build/toastr.min.js"

After this script src="node_modules/jquery/dist/jquery.min.js"></script>

Reason : toastr.js uses jQuery, so jQuery should get loaded before toastr.js

edited Oct 28 '17 at 07:40

Hakan Fıstık

16,800
14
110
131

answered Feb 13 '17 at 10:38

Abhinavkumar Singh

526
5
2

For Angular v12.x.x, you must add it to _scripts_ section inside **angular.json** file – Ramin Mammadzada Sep 12 '21 at 12:45

score 3 · Answer 2 · answered May 29 '19 at 21:46

Also bootstrap.min.css should bet loaded before toastr.min.js.

Environments: Angular 7 and bootstrap 4.

Below is my part of angular.json, and it is working.

   "styles": [
      "node_modules/ngf-bootstrap/dist/bootstrap.min.css",
      "node_modules/toastr/build/toastr.min.css",
      "src/styles.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.js",
      "node_modules/toastr/build/toastr.min.js"
    ]

score 3 · Answer 3 · edited Jun 05 '20 at 19:15

3

This did the trick for me:

"scripts": [ 
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/toastr/build/toastr.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
]

In that exact order inside the angular.json file under the scripts section.

edited Jun 05 '20 at 19:15

Syntle

5,168
3
13
34

answered Aug 01 '19 at 21:26

sid7747

690
7
15

score 1 · Answer 4 · answered Aug 11 '20 at 12:23

1

Make sure to import jquery before using toastr. Its a requirement for toastr.

answered Aug 11 '20 at 12:23

Zeeshan Mehdi

1,241
1
17
18

score 0 · Answer 5 · edited Jan 23 '21 at 21:05

0

open terminal -> npm install jquery --save
Go to the angular.json file add the following:

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/toastr/build/toastr.min.js"
]

edited Jan 23 '21 at 21:05

Zsolt Meszaros

21,961
19
54
57

answered Jan 23 '21 at 19:36

Shivam Singh

1

(Angular2) Cannot read property 'extend' of undefined for toastr

5 Answers5