javascript - 如何在 Angular 2 应用程序中导入 socket.io-client？

Question

我想在我的 Angular 2 应用程序中包含 sockets.io-client。首先我安装了 socket.io-client，安装了 typings:

npm install socket.io-client --save
typings install socket.io-client --save --ambient

下一步是将 socket.io-client 包含到我的 index.html 中:

 <script src="node_modules/socket.io-client/socket.io.js"></script>

在我的组件中，我正在导入 sockets.io:

import * as io from 'socket.io-client'

然后使用它:

var socket = io('http://localhost:3000');
socket.on('event', function(data:any){
   console.log(data);
}.bind(this)); 

这失败了:

zone.js:101 GET http://localhost:3001/socket.io-client 404 (Not Found)
(index):18 Error: Error: XHR error (404 Not Found) loading http://localhost:3001/socket.io-client

有什么想法吗？

Answer 1

为了注册模块以便导入它，您需要将它包含在您的 SystemJS 配置中。

System.config({
    packages: {
        ...
        "socket.io-client": {"defaultExtension": "js"}
    },
    map: {
        "socket.io-client": "node_modules/socket.io-client/socket.io.js"
    }
});

并将您的导入更改为:

从'socket.io-client'导入io；
import * as io from "socket.io-client

此外，您不再需要在脚本标签中导入，因此删除:

<script src="node_modules/socket.io-client/socket.io.js"></script>

最后，如果您想添加类型，请在您的 typings.json 中添加:

{
  "ambientDependencies": {
    ...
    "socket-io-client":"github:DefinitelyTyped/DefinitelyTyped/socket.io-client/socket.io-client.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
  }
}

附言将来，将类型中的哈希更改为最新的提交哈希。