(Angular2) 无法读取 toastr 的未定义属性 'extend'

Question

我正在尝试在 angularjs 2 中使用 toastr 作为一项服务，它将如下所述注入到我的组件中。当调用 handleEvent 函数时，我收到 "Cannot read property 'extend' of undefined"。非常感谢对错误的任何建议 and/or 解释。

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

之前加载

Answer 2

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

环境：Angular 7 和 bootstrap 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"
    ]

Answer 3

这对我有用：

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

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

Answer 4

确保在使用 toastr 之前导入 jquery。这是 toastr 的要求。

Answer 5

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

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

(Angular2) 无法读取 toastr 的未定义属性 'extend'

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

javascript

typescript

toastr

angular

(Angular2) 无法读取 toastr 的未定义 属性 'extend'

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

javascript

typescript

toastr

angular

(Angular2) 无法读取 toastr 的未定义属性 'extend'