Angular2 CLI Socket.io（第三方库进口）

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

我试图导入socket.io-client与angular-cli产生angular2应用程序，但我不能让它的工作。Angular2 CLI Socket.io（第三方库进口）

chat.component.ts

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

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

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

角-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)

来源

2016-07-04 Chris

这个文件目前node_modules/socket.io-client/socket.io.js。

检查dts文件存在于typings文件夹中用于socket-io。

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

来源

2016-07-05 02:39:52 Siraj

'chat-client \ node_modules \ socket.io-client \ socket.io.js'存在。 'chat-client \ typings \ globals \ socket.io-client \ index.d.ts'也是。我将'src/system-config.ts'中的格式更改为'cjs'，仍然不起作用：C – Chris

系统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' 
} 
};

角-CLI-build.js

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

工作像charm angular-cli：“1.0.0-beta.10”

来源

2016-08-05 09:56:30 LonsomeHell

这个工作对我来说：

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

来源

2017-01-05 04:09:42

@axiac仅有代码的答案可能不太好，但它仍然是答案。我会推荐你这篇关于LQPRQ的文章：[你做错了：在低质量岗位队列中请求理智]（http://meta.stackoverflow.com/questions/287563/youre-doing-it-在低质量岗位队列中的错误理由为理智） – FelixSFD

@FelixSFD你是对的。我没有对答案的内容给予足够的重视，并且给人的印象是那些说明问题中的问题不能被复制的答案之一。我现在更仔细地阅读这个问题，这个答案似乎是有效的，即使它很短。 – axiac

1）安装socket.io客户端

npm install socket.io-client --save

2）安装socket.io客户端分型

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

3）进口插座.io客户端在您的应用/代码

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

来源

2017-01-23 18:01:33 Llewellyn1411

像魅力一样工作，谢谢！ – totallytotallyamazing

Angular2 CLI Socket.io（第三方库进口）

回答

相关问题