Angular-cli: Import 3rd Party Library (Socket.io)

[chrislow]

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.

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)

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

[RicardoVaranda]

DUP of #1157

Seems to be a common error when trying to install a 3rd party module, I think FIlipe Silva is currently looking into this issue.

[maxhamulyak]

There is a workaround to get this to compile.
In your src folder there is a typings.d.ts file that declares the module var. In that file browser.d.ts is installed.

I added the following to that file.
/// <reference path="../typings/index.d.ts" />

After the typings install runs there should be a index.d.ts in your typings folder that references socket io in the globals folder.

Perhaps this should be managed automatically after running typings install, but this should at least let you use socket.io-client

[chrislow]

I can confirm that adding /// <reference path="../typings/index.d.ts" /> to typings.d.ts works, thank u :+1:

[zeecher]

Still getting, сannot find module 'socket.io-client'. Does anyone has found solution to this issue ?

[filipesilva]

Closed as this issue was made obsolete by https://github.com/angular/angular-cli/pull/1455.

[RicardoVaranda]

@filipesilva Can you explain a little bit on how it was obselete or how we can go about doing this now since I've no previous knowledge of Webpack. Thanks :smiley:

[filipesilva]

In the webpack update SystemJS is not used anymore, thus does not need to be configured. You won't need any kind of webpack knowledge - just import stuff in TS and it should work.

[amarewgs]

I have tried to install typings for socket.io-client but had issues and got it working with
sudo typings install dt~socket.io-client --global --save

[jspenc72]

@amarewgs That worked for me! Thanks!

[marcusreese]

This helped for me: npm install @types/socket.io-client --save

[rengineerpc]

@marcusreese Looks like you responded just in time to this thread. Thanks your solution worked for me

[jspenc72]

Any success with the latest angular 2.0 @rengineerpc

[jspenc72]

?

[rengineerpc]

Yes that's what I'm using @jspenc72

[bityob]

@marcusreese Thank you! That worked for me!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}