Angular2 CLI Socket.io(第 3 方库导入)

2024-06-24

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

我尝试导入socket.io-客户端 http://socket.io/进入使用生成的 angular2 应用程序角度-cli https://github.com/angular/angular-cli但我无法让它工作。

聊天组件.ts

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

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

系统配置.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'
    ]
  });
};

包.json

{
      "dependencies": {
        ...
        "socket.io-client": "^1.4.8",
        "systemjs": "0.19.26"
      },
      "devDependencies": {
        ...
        "typescript": "^1.8.10",
        "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)安装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";
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular2 CLI Socket.io(第 3 方库导入) 的相关文章

随机推荐

  • 如何防止不同浏览器渲染字体不同?

    我在尝试在所有浏览器中保持一致的字体样式时遇到问题 如下所示 safari的字体渲染系统使字体粗细比chrome的字体粗细小 Safari Chrome 我尝试使用在其他问题上找到的解决方案 尽管他们没有解决这个问题 如何在所有主要浏览器中
  • 获取对组件树上某种类型的所有指令的引用

    我有一个复杂的场景 需要帮助 我有一个指令 称为TagDirective 它被放置在我的应用程序中的多个元素上 我有另一个指令 QueryDirective 需要引用的所有实例TagDirective存在于其宿主元素以及层次结构中其上方的所
  • 适用于 Windows 的 D-Bus 等效项

    有人知道 Windows 的 Linux D Bus 机制吗 Thanks 选择你的毒药 http msdn microsoft com en us library aa365574 28VS 85 29 aspx http msdn mi
  • Selenium IDE - 如何处理 java 脚本警报和确认

    我是自动化测试的新手 并开始使用 Selenium IDE 作为自动化的选择 我只是想知道是否有任何方法可以使用 IDE 处理 java 脚本警报 举一个场景 我单击 删除 按钮 出现一个带有 确定 和 取消 选项的 java 脚本警告框
  • 猜谜游戏 python 二分查找

    我无法弄清楚我的代码有什么问题 我试图让用户想到 1 到 100 之间的数字 然后这个程序就能猜到它 该程序将范围的高数和低数相加 然后除以二 并将其用作猜测值 如果程序猜测的数字大于用户的数字 则用户输入 1 如果小于 则输入 1 如果猜
  • HTTPS:Laravel 使用 .htaccess (public/)

    我试图在我的 Laravel 项目中包含 https 而不使用 godaddy 仅使用htaccess没什么大不了的 因为我正在使用proxypass来自我的 SSL 认证网站 该网站将传递到我的 laravel 项目 我只需要把我的 la
  • maven- assembly-plugin 不添加与系统范围的依赖关系

    这是我的 pom 文件
  • 合并具有一对一关系的表

    我有 3 个用于会员系统的 MySQL 表 users 成为用户的最低要求 仅与帐户信息相关 电子邮件 密码 is activated 等 user profiles 用户提供的个人信息 姓名 地址 电话 user member profi
  • 文本对齐:-webkit-center 与文本对齐:中心

    有谁知道为什么 text align center 和 text align webkit center 之间有区别 例如 如果您有 section h1 Title h1 div class image div h1 h1 section
  • 如何在servlet中获取表单参数? request.getAttribute 不起作用

    是否可以让同一个 servlet 执行验证 似乎在这里可能需要利用某种递归 但是当我在电子邮件框中输入内容并单击 提交 时 电子邮件参数仍然为空 单击 提交 后 URL 更改为 http localhost servlet EmailSer
  • 微服务:有哪些优点和缺点?

    与其他架构相比 使用微服务有哪些优点和缺点 何时应该使用微服务有经验法则吗 Pros 萨姆 纽曼在构建微服务 https rads stackoverflow com amzn click com 1491950358 列举了微服务的主要优
  • MongoDB 将通过 $lookup 聚合运算符使用分片

    lookup是 MongoDB 3 2 中的新增功能 它对同一数据库中的未分片集合执行左外联接 以从 联接 集合中过滤文档进行处理 To use lookup the from集合不能被分片 另一方面 分片是一种有用的水平扩展方法 一起使用
  • Angular 2 将参数传递给构造函数引发 DI 异常

    我想在构造函数中的组件上设置字符串属性 但是当我尝试这样的操作时 Component selector wg app templateUrl templates html wg app html export class AppCompon
  • 使用 Django-taggit 和 django-taggit-serializer 有问题

    我正在尝试通过 taggit 和 taggit 序列化程序在我的模型中添加标签 我在 Rest 框架中制作 API 我按照说明进行操作 https github com glemmaPaul django taggit serializer
  • 如何让按钮执行php脚本?

    如何让 html 按钮执行 php 脚本 我正在开发一个登录系统 其中只有一个用户可以登录 每当其他用户尝试登录时 它应该给他们弹出警告消息 another user is already logged in Do you want to
  • observer.complete() 的作用是什么?

    In rxjsobserver complete 在observer next 之后到底做了什么 来自文档 http reactivex io rxjs class es6 MiscJSDoc js ObserverDoc html obs
  • 在 PHP 中处理 PUT/DELETE 参数

    我正在做我的CodeIgniter 的 REST 客户端库 http github com philsturgeon codeigniter restclient我正在努力弄清楚如何在 PHP 中发送 PUT 和 DELETE 参数 在一些
  • Javascript/Jquery 更改 onclick 类?

    我想改变一个点击类 我现在拥有的 但是 当然 这是行不通的 此外 它应该再次恢复到以前的状态 My html div class meta info 因此 每当我按下 showhide myclass 时 我的类就应该更改为 mynewcl
  • Git 克隆已经是克隆的存储库

    做这个手术有什么副作用吗 git clone已经是另一个远程存储库的克隆的存储库 没有副作用 但您应该准确了解克隆存储库时会发生什么 一些理论 问题 是 当您 以正常方式 克隆存储库时 即在调用时没有调整任何时髦的旋钮git clone y
  • Angular2 CLI Socket.io(第 3 方库导入)

    angular cli 0 0 39 node 6 2 2 os win32 x64 我尝试导入socket io 客户端 http socket io 进入使用生成的 angular2 应用程序角度 cli https github co