Angular2 CLI Socket.io（第三方库导入）

Question

angular-cli: 0.0.39 
node: 6.2.2 
os: win32 x64

我尝试将socket.io-client 导入到使用angular-cli 生成的angular2 应用程序中，但我无法让它工作。

chat.component.ts

import * as io from "socket.io-client";

@Component({
  ...
})
export class ChatAppComponent {
  ...
}

system-config.ts

/** Map relative paths to URLs. */
const map: any = {
    "socket.io-client": "vendor/socket.io-client/socket.io.js"
};

/** User packages configuration. */
const packages: any = {
    "socket.io-client": {"defaultExtension": "js"}
};

angular-cli-build.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/*.js',
      'es6-shim/es6-shim.js',
      'reflect-metadata/*.js',
      'rxjs/**/*.js',
      '@angular/**/*.js',
      'socket.io-client/socket.io.js'
    ]
  });
};

package.json

{
      "dependencies": {
        ...
        "socket.io-client": "^1.4.8",
        "systemjs": "0.19.26"
      },
      "devDependencies": {
        ...
        "typescript": "^1.8.10",
        "typings": "
      }
}

typings.json

{
  "ambientDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
  },
  "globalDependencies": {
    "socket.io-client": "registry:dt/socket.io-client#1.4.4+20160317120654"
  }
}

错误和堆栈跟踪

Error: Typescript found the following errors:
  C:/Users/Christian/Desktop/prototypes/chat-client/tmp/broccoli_type_script_compiler-input_base_path-5WNagLgm.tmp/0/src/app/chat.component.ts (4, 21): Cannot find module 'socket.io-client'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (C:\Users\Christian\Desktop\prototypes\chat-client\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:115:19)
    at BroccoliTypeScriptCompiler.build (C:\Users\Christian\Desktop\prototypes\chat-client\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)
    at C:\Users\Christian\Desktop\prototypes\chat-client\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
    at lib$rsvp$$internal$$tryCatch (C:\Users\Christian\Desktop\prototypes\chat-client\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (C:\Users\Christian\Desktop\prototypes\chat-client\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (C:\Users\Christian\Desktop\prototypes\chat-client\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (C:\Users\Christian\Desktop\prototypes\chat-client\node_modules\angular-cli\node_modules\broccoli-caching-writer\node_modules\rsvp\dist\rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Answer 1

1) 安装socket.io-client

npm install socket.io-client --save

2) 安装 socket.io-client 类型

npm install @types/socket.io-client --save-dev

3) 在您的应用/代码中导入 socket.io-client

import * as io from "socket.io-client";

Answer 2

此文件是否存在node_modules/socket.io-client/socket.io.js。

检查 dts 文件是否存在于 socket-io 的typings 文件夹中。

由于您已经在map 中指定了扩展名，因此无需在package 的defaultExtension 中再次指定它。
尝试在package -> socket.io-client 中基于库添加format: 'cjs' 或format: 'amd'

Answer 3

system-config.ts

/** Map relative paths to URLs. */
const map: any = {
    "socket.io-client": "vendor/socket.io-client/"
};

/** User packages configuration. */
const packages: any = {
    "socket.io-client": {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'socket.io.js'
}
};

angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'socket.io*/**/*.js'
    ]
  });
};

像魅力 angular-cli 一样工作：“1.0.0-beta.10”

Answer 4

这对我有用：

npm install --save @types/socket.io-client