toastr.js如何在Aurelia和Typescript中工作？

Question

我似乎无法让这些工作在一起。我正在使用Aurelia CLI，并以类似的方式成功完成了其他库（如select2，旋转，时刻和数字）。尽管我看起来似乎无法正常工作。这是我到目前为止。

首先我跑npm install toastr --save和typings install dt~toastr --global --save

在aurelia.json，在供应商的bundle.js部分，我添加一个依赖这样：

"jquery", 
    { 
    "name": "toastr", 
    "path": "../node_modules/toastr/build", 
    "main": "toastr.min", 
    "resources": [ 
     "toastr.min.css" 
    ], 
    "deps": ["jquery"] 
    } 

---

UPDATE：全步骤REPRO

我安装了这些工具的这些版本：node（6.3.0），npm （3.10.3），AU（0.17.0或更新）

打开命令提示和类型：

au new au-toastr 
3 (Custom) 
2 (Typescript) 
3 (Sass) 
1 (configure unit testing) 
1 (Visual Studio Code) 
1 (create project) 
1 (install project dependencies) 
cd au-toastr 
npm install jquery --save 
npm install toastr --save 
typings install dt~jquery --global --save 
typings install dt~toastr --global --save 

然后，在编辑器中打开aurelia.json并添加

"jquery", 
{ 
"name": "toastr", 
"path": "../node_modules/toastr/build", 
"main": "toastr.min", 
"resources": [ 
"toastr.min.css" 
], 
"deps": ["jquery"] 
} 

到依赖性的底部。

由于与jquery的.d.ts文件冲突导致在typings/globals/angular-protractor/index.d.ts上注释掉第1839行（declare var $: cssSelectorHelper;）。

在命令提示符下使用

import * as toastr from 'toastr'; 

export class App { 
    activate() { 
    toastr.info('blah'); 
    } 
} 

OR

import 'toastr'; 

export class App { 
    activate() { 
    toastr.info('blah'); 
    } 
} 

类型au run更换app.ts内容，然后打开浏览器，然后导航到命令行表示，该应用程序可在网址（通常是http://localhost:9000）。

---

尝试1

import 'toastr'; 

export class ViewModel { 
    activate() { 
    toastr.info('blah'); 
    } 
} 

错误：的ReferenceError：未定义toastr

---

尝试2

import {autoinject} from 'aurelia-framework'; 
import 'toastr'; 

@autoinject() 
export class ViewModel { 
    constructor(private toastr: Toastr) { 
    } 

    activate() { 
    this.toastr.info('blah'); 
    } 
} 

错误：类型错误：this.toastr.info不是函数

---

尝试3

import * as toastr from 'toastr'; 

export class ViewModel { 
    activate() { 
    toastr.info('blah'); 
    } 
} 

错误：类型错误：toastr。信息是不是一个函数

---

尝试4

import {autoinject} from 'aurelia-framework'; 
import * as toastr from 'toastr'; 

@autoinject() 
export class ViewModel { 
    constructor(private toastr: Toastr) { 
    } 

    activate() { 
    this.toastr.info('blah'); 
    } 
} 

错误：类型错误：this.toastr.info不是函数

---

所有上述当我从命令行运行au build时正确传输。我没有得到任何错误。

我失去了我缺少的东西或者我可以尝试的东西。任何帮助将不胜感激！

---

UPDATE：我的猜测是，有在aurelia-cli或更可能我处理不正确地包在某种程度上考虑到aurelia-cli加载机制或者一个错误。当我从他们的站点获得打字稿骨架时，它使用jspm作为模块加载器，并按照上面的相同步骤操作，toastr工作得很好。

任何想法，我可以得到这个与aurelia-cli一起工作？

---

Answer 1

经过很多时间和朋友的帮助，我终于能够得到这个工作。

只有少数的变化应该是必要的 -

aurelia.json需要更新不使用toastr库的缩小的版本。

{ 
    //... 
    "dependencies": [ 
    //... 
    "jquery", 
    { 
     "name": "toastr", 
     "path": "../node_modules/toastr", 
     "main": "toastr", 
     "resources": [ 
     "build/toastr.min.css" 
     ], 
     "deps": ["jquery"] 
    } 
    ] 
} 

的toastr.info('here');功能调用通常需要在附加的方法或后所述元素是在DOM可用的情况发生。

，要求在HTML需要更新到

<require from="toastr/build/toastr.min.css"></require> 

希望这有助于app.html。

---

UPDATE 然后在您的视图模型中使用它，你可以做到这一点的几个方法之一：

import * as toastr from 'toastr'; 

export class App { 
    attached() { 
    toastr.success('here'); 
    } 
} 

---

import { success } from 'toastr'; 

export class App { 
    attached() { 
    success('here'); 
    } 
}