在angular2中无法用SystemJS加载phoenix js库

Question

我遵循了Angular2快速入门typescript教程(在这里)。

现在我正在尝试包含Phoenix .js包，以便我可以连接到我的Elixir Phoenix通道。

我已经将phoenix从这个包添加到我的包中。

我在systemjs.config.js中添加了一行，如下所示:

'phoenix': 'node_modules/phoenix/web/static/js/phoenix.js'

我想把它导入到我的Angular2服务中，就像这样(我使用的是ES6，已经阅读了这个问题):

import { Socket } from 'phoenix';      

我得到错误

app/app.phoenix_channels.service.ts(2,24): error TS2307: Cannot find module 'phoenix'.

我实际上不是100%确定SystemJS配置文件是如何包含和运行的。它在应用程序之前包含在HTML中，但是当我编译typescript时，我看不到它被包含或解析。

我已经在Stack上解决了这个问题，但是我不知道如何使用Angular教程提供的框架来加载依赖项。

我试着添加additional_deps作为一个键到systemjs.config.js，像这样:

additional_deps: {
  src: 'node_modules/phoenix/priv/static/phoenix.js',
  inject: 'libs'
},

但这似乎行不通。

如何加载这个依赖项，以便我可以从这个库导入?

Answer 1

您有用于运行时的JS文件，但错误是编译错误，因为它正在寻找typescript文件。对于库，使用TypeScript定义文件，但有些库不支持TypeScript，所以我们需要安装带有类型定义的外部模块。

一些JS项目你可能找不到定义文件，你需要自己写。或者你可以按照你链接到的答案中的海报所做的去做。只声明随机的any类型变量(不导入)

declare var Socket: any;

现在你可以使用Socket。这样做的问题是，你没有任何强类型或智能感知。

幸运的是，似乎有人为phoenix写了一个定义文件

npm install --save-dev @types/phoenix

这应该能让它工作。至于运行时，你的SystemJS配置看起来应该是好的。