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