Как можно toastr.js работать в Aurelia и Typcript?

Question

Я не могу заставить их работать вместе. Я использую CLI Aurelia и сделал это аналогичным образом для других библиотек успешно (например, select2, spin, moment и numeral). Однако, похоже, я не могу получить тостр. Вот что я до сих пор.

Сначала я побежал 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

У меня установлены эти версии этих инструментов: узел (6.3.0), npm (3.10.3), аи (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"] 
} 

на дно зависимостей ,

Комментировать out line 1839 (declare var $: cssSelectorHelper;) on typings/globals/angular-protractor/index.d.ts из-за конфликта с файлом .d.ts jquery.

Заменить app.ts содержимое с

import * as toastr from 'toastr'; 

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

ИЛИ

import 'toastr'; 

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

типа au run в командной строке, а затем открыть браузер и перейти к URL, что командная строка говорит приложение доступно на (обычно 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'); 
    } 
} 

Ошибка: TypeError: 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'); 
    } 
} 

Ошибка: TypeError: this.toastr.info не является функцией

---

Все вышеперечисленное если я запустил au build из командной строки. У меня нет ошибок.

Я потерял то, чего не хватает или что еще могу попробовать. Любая помощь будет принята с благодарностью!

---

UPDATE: Я думаю, что это либо ошибка в aurelia-cli или более вероятно, я обработку пакета неправильно как-то в отношении механизма aurelia-cli нагрузки. Когда я получаю машинописный скелет со своего сайта, который использует jspm в качестве загрузчика модуля, и следуйте тем же самым шагам выше, тост работает просто отлично.

Любые идеи, как я могу заставить это работать с 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 в app.html должен быть обновлены до

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

Надеется, что это помогает.

---

UPDATE Затем, чтобы использовать его в вашей модели представления, вы можете сделать это одним из нескольких способов:

import * as toastr from 'toastr'; 

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

---

import { success } from 'toastr'; 

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