(Angular2) Невозможно прочитать свойство 'extend' of undefined for toastr

Question

Я пытаюсь использовать toastr в angularjs 2 как услугу, которая будет введена в моем компоненте, как указано ниже. Когда вызывается функция handleEvent, я получаю «Не могу прочитать свойство« расширять »неопределенного». Любые предложения и/или объяснения ошибки очень ценятся.

app.moudle.ts импортировал ToastrService и ToastrService был добавлен в провайдеры.

//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); 
    } 
} 

Ошибка:
[Эта ошибка возникает после выхода console.log]

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

Добавить script src="node_modules/toastr/build/toastr.min.js"

После этого script src="node_modules/jquery/dist/jquery.min.js"></script>

Причина: toastr.js использует jQuery, поэтому jQuery должен загружаться до toastr.js