Socket.io-client: import socket io client in a angular 2 app

Created on 13 Feb 2017 · 9Comments · Source: socketio/socket.io-client

I tried to include socket io client into an angular 2 app and I got this error:

`Navigated to http://localhost:8080/

zone.js:1805 GET http://localhost:8080/node_modules/socket.io-client/socket.io.js 404 (Not Found)
scheduleTask @ zone.js:1805
ZoneDelegate.scheduleTask @ zone.js:255
Zone.scheduleMacroTask @ zone.js:168
(anonymous) @ zone.js:1829
send @ VM2118:3
fetchTextFromURL @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:551
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2806
(anonymous) @ system.src.js:3384
(anonymous) @ system.src.js:3707
(anonymous) @ system.src.js:4099
(anonymous) @ system.src.js:4562
(anonymous) @ system.src.js:4831
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:242
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
ZoneTask.invoke @ zone.js:349
(index):26 ZoneAwareError {__zone_symbol__error: Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:8080/node_modules/socket.io-cli…, __zone_symbol__stack: "(SystemJS) XHR error (404 Not Found) loading http:…0/app/protected/chat/chat.service/chat.service.js", originalErr: ZoneAwareError}
(anonymous) @ (index):26
ZoneDelegate.invoke @ zone.js:242
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
ZoneTask.invoke @ zone.js:349`

the package.json looks like this:

},
"keywords": [],
"author": "",
"license": "MIT",
"dependencies": {
"@angular/common": "~2.3.0",
"@angular/compiler": "~2.3.0",
"@angular/core": "~2.3.0",
"@angular/forms": "~2.3.0",
"@angular/http": "~2.3.0",
"@angular/platform-browser": "~2.3.0",
"@angular/platform-browser-dynamic": "~2.3.0",
"@angular/router": "~3.3.0",
"@angular/upgrade": "~2.2.0",

"angular-in-memory-web-api": "~0.2.4",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ng2-webstorage": "^1.5.0",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.1",
"socket.io-client": "^1.7.2",
"systemjs": "0.19.40",
"zone.js": "^0.7.6"

},
"devDependencies": {

"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"

},
"repository": {}
}`

and the systemjs.config.js looks like this:

`(function(global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',

    // angular bundles

    // other libraries
    "socket.io-client": 'npm:socket.io-client',
    'rxjs': 'npm:rxjs'
},

packages: {
'ng2-webstorage': { main: 'bundles/core.umd.js', defaultExtension: 'js' },
"socket.io-client": { main: './socket.io.js' },
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);`

I used it like this:

import * as io from "socket.io-client"; this.socket = io.connect("http://localhost:8080");

Any ideas?

Setup

OS:windows 10
browser:edge, chrome
socket.io-client version:1.7.2

Other information (e.g. stacktraces, related issues, suggestions how to fix)

Source

bigsmylePS

Most helpful comment

I cloned the angular 2 quickstart seed, and added socket.io client by installing the following packages:

socket.io-clientt
@types/socket.io-client

Within the main.ts, I've added the following code for debugging:
import * as io from 'socket.io-client'; console.dir( io );

To get it loaded by system.js you've to tweak the config by adding socket.io client similar to angular in memory web api (at your point after rxjs within map section):
'socket.io-client': 'npm:socket.io-client/dist/socket.io.js'

After adding it within the map section, it worked like a charm. So everything necessary in your case should be a correct map for socket.io-client.

Dreaded-Gnu on 16 Feb 2017

👍3 😄1

All 9 comments

The file socket.io.js is within the sub directory "dist".

It might work, when changing the map to something like the following:
"socket.io-client": 'npm:socket.io-client/dist'

Dreaded-Gnu on 14 Feb 2017

no, is has the same error

bigsmylePS on 14 Feb 2017

can you provide a small sample with package.json, simple html and systemjs config? Then I could play around a bit with systemjs to analyze the issue.

Dreaded-Gnu on 14 Feb 2017

sure what do u need?

bigsmylePS on 14 Feb 2017

package.json, systemjs config and simple index.html. That should be enough.

Dreaded-Gnu on 14 Feb 2017

package.json and systemjs.config i ve printed them before
and index.html:

myHistory

<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<!-- <link href="app/app.component.css" rel="stylesheet" /> -->

<!-- Polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
    System.import('app').catch(function(err) {
        console.error(err);
    });
</script>

Starter files

package.json server side:

`{
"name": "",

"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
},
"author": 
"license": "ISC",
"dependencies": {
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.15.2",
    "ejs": "^2.5.2",
    "express": "^4.14.0",
    "http": "0.0.0",
    "mongoose": "^4.6.5",
    "morgan": "^1.7.0",
    "passport": "^0.3.2",
    "passport-local": "^1.0.0",
    "path": "^0.12.7",
    "socket.io": "^1.7.2"
}`

bigsmylePS on 14 Feb 2017

I cloned the angular 2 quickstart seed, and added socket.io client by installing the following packages: