Comment importer socket.io-client dans une application angulaire 2?

Ceci est une réponse tardive car je viens d'avoir ce problème et l'installation correcte types via npm résolu pour moi:

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

Ce paquet contient les définitions de type pour socket.io-client, donc si vous avez des erreurs de type, cela devrait les corriger.

j'ai aussi eu des problèmes lors de l'importation de socket.io dans mon projet et voici comment je l'ai résolu.

• utiliser L'angle 2 (rc.6)
• basé sur Systemjs
• à partir du squelette sur L'angle 2 les échantillons
• Noeud : 5.3.0
• Mac OSX El Capitan

la Voici :

1) éditez vos systemjs.config.fichier js :

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    map: {
      ... here my stuff ...
      "socket.io-client": 'npm:socket.io-client'
    },
    packages: {
      ... here my stuff ...
      "socket.io-client": {
        main: './socket.io.js'
      }
    }
  });
})(this);

2) Ouvrez votre projet dans un shell puis exec la ligne suivante : Habituellement, nous vous disons de faire:

npm install socket.io-client --save
typings install socket.io-client --save --ambient

mais vous pourriez recevoir un message vous disant que le drapeau ambiant est déprécié et que vous devriez utiliser global à la place. Mais vous verrez vite que ça ne marchera pas non plus. Je vous propose donc autre chose (les journaux des erreurs vous donneront des indices, mais vous ne le comprendrez probablement pas si vous n'y êtes pas allé!--29-->il y a avant) :

typings install dt~socket.io-client --save --global

3) Ouvrez votre composant qui nécessite une socket.io puis Ajouter à le haut de votre fichier :

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

puis allez vers le bas et d'ajouter :

export class MessageComponent implements OnInit {
  socket:any = null;

  constructor() {
      this.socket = io('http://localhost:1337');
  }
  ... here my stuff ...
}

où 1337 est le port de votre serveur de noeuds contenant socket.io qui a été lancé.

Maintenant, tout est prêt, vous pouvez le faire directement votre demande :

this.socket.emit('sendMessage', {content:'it works !'});

j'Espère que je l'aide :), bonne chance pour ton projet

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

j'ai essayé d'importer socket.io-client dans une application angular2 générée avec le angulaires-cli mais je n'arrive pas à le faire fonctionner.

le chat.composant.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"}
};

angulaires-cli-construire.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"
  }
}