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

Question

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

Próbowałem zaimportować socket.io-client się z angular2 aplikacji wytworzonej z angular-cli ale nie mogę zmusić go do pracy.

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"} 
}; 

kątowe-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" 
    } 
} 

błąd i 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) 

Answer 1

Czy ten plik obecny node_modules/socket.io-client/socket.io.js.

Sprawdź, czy plik dts znajduje się w folderze typings dla gniazda-io.

Ponieważ już określono rozszerzenie w map, nie trzeba go określać ponownie w defaultExtension z package.
spróbuj dodać format: 'cjs' LUB format: 'amd' oparciu o biblioteki w systemie-config.ts package -> socket.io-client

Answer 2

/** 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' 
} 
}; 

skośnych CLI-build.js

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

Praca jak charm kątowy-cli: "1.0.0-beta.10"

Answer 3

Działa to dla mnie:

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

Answer 4

1) Instalacja socket.io-client

npm install socket.io-client --save 

2) Instalowanie typowania socket.io klienckich

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

3) gniazdo importu .io-client w twojej aplikacji/kod

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