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

Posted 2023-04-18

【中文标题】Angular2 CLI Socket.io（第三方库导入）

【英文标题】：Angular2 CLI Socket.io (3rd Party Library import)

【发布时间】：2016-11-06 14:08:28

【问题描述】：

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)

【参考方案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";

【讨论】：

工作就像一个魅力，谢谢！

【参考方案2】：

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

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

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

【讨论】：

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

【参考方案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”

【参考方案4】：

这对我有用：

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

【讨论】：

@axiac 仅代码的答案可能不是一个好的答案，但它仍然是一个答案。我会向你推荐这篇关于 LQPRQ 的帖子：You're doing it wrong: A plea for sanity in the Low Quality Posts queue

@FelixSFD 你是对的。我没有对答案的内容给予足够的重视，并有这样的印象，它是那些表明问题中的问题无法重现的答案之一。我现在更仔细地阅读了这个问题，这个答案似乎是有效的，即使它很短。