(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)

Answer 1

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

Answer 2

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.