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

我似乎无法让这些工作在一起.我正在使用Aurelia CLI并以类似的方式为其他库成功完成(如select2,spin,moment和numbers).我似乎无法工作.这是我到目前为止所拥有的.

首先我运行npm install toastr –save和typings install dt~toastr –global –save

在aurelia.json中,在vendor-bundle.js部分中,我添加了一个依赖项：

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

更新：重现的完整步骤

我安装了这些工具的这些版本：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","resources": [
"toastr.min.css"
],"deps": ["jquery"]
}

在依赖的底部.

由于与jquery的.d.ts文件冲突,在typings / globals / angular-protractor / index.d.ts上注释掉第1839行(声明var $：cssSelectorHelper;).

用.替换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');
  }
}

错误：TypeError：this.toastr.info不是函数

尝试3

import * as toastr from 'toastr';

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

错误：TypeError：toastr.info不是函数

尝试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时,所有上述都正确地转换.我没有错.

我迷失了我所缺少的东西或我还能尝试的其他东西.任何帮助将不胜感激！

更新：我的猜测是aurelia-cli中存在一个错误,或者更可能是我在某种程度上错误地处理了包aurelia-cli加载机制.当我从他们的站点获取typescript骨架时,使用jspm作为它的模块加载器,并按照上面的相同步骤,toastr工作得很好.

我有什么想法可以让它与aurelia-cli一起使用？

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

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

import * as toastr from 'toastr';

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

import { success } from 'toastr';

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