Angular2 CLI Socket.io (3rd Party Library import)

问题:

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

I tried to import socket.io-client into an angular2 app generated with the angular-cli but i can't get it to work.

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 and stacktrace

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)

回答1:

1) Install socket.io-client

npm install socket.io-client --save

2) Install socket.io-client typings

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

3) Import socket.io-client in your app/code

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

回答2:

Is this file present node_modules/socket.io-client/socket.io.js.

Check dts file is present in typings folder for socket-io.

Since you already specified the extension in map no need to specify it again in defaultExtension of package.
Try adding format: 'cjs' OR format: 'amd' based on library in the package -> socket.io-client

回答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'
    ]
  });
};

Working like a charm angular-cli: "1.0.0-beta.10"

回答4:

This works for me:

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