（Angular2）无法读取 toastr 未定义的属性“扩展”答案

【问题标题】：(Angular2) Cannot read property 'extend' of undefined for toastr（Angular2）无法读取 toastr 未定义的属性“扩展”
【发布时间】：2017-02-11 17:18:42
【问题描述】：

我正在尝试使用 angularjs 2 中的 toastr 作为服务，如下所述，该服务将注入我的组件中。当调用 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输出之后抛出]

例外：./EventListComponent 类 EventListComponent 中的错误 - 内联模板：6:16 导致：无法读取属性“扩展”的不明确的。原始异常：无法读取未定义的属性“扩展”
TypeError：无法读取未定义的属性“扩展” 在 m (toastr.js:411) 在 Object.s [成功] (toastr.js:85) 在 ToastrService.success (toastr.service.ts:12)

【问题讨论】：

什么是 ToastrService？
这就像我们在编码相同的东西 - 我正要问：D
你是否包含了 JQuery？
尴尬的是，没有。我将两者都包含在 angular-cli 的“脚本”部分中，它可以工作，谢谢！有没有更好的办法？
@kemsky ：是的 jquery 已包含在内，加载应用程序时我没有任何依赖项异常。

标签： javascript angular typescript toastr

【解决方案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 之前加载

【讨论】：

对于 Angular v12.x.x，您必须将其添加到 angular.json 文件中的 scripts 部分

【解决方案2】：

这对我有用：

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

在脚本部分下的 angular.json 文件中按确切顺序。

【讨论】：

【解决方案3】：

bootstrap.min.css 也应该在 toastr.min.js 之前加载。

环境：Angular 7 和引导程序 4。

下面是我的 angular.json 部分，它正在工作。

   "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"
    ]

【讨论】：

【解决方案4】：

确保在使用 toastr 之前导入 jquery。它是烤面包机的要求。

【讨论】：

【解决方案5】：

打开终端->npm install jquery --save
转到angular.json 文件添加以下内容：

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

【讨论】：