Library socket.io-client is not compatible with latest Angular 6

[jameskentTX]

I want to:

• report a bug - solved, look last two lines for workaround

Library socket.io-client is not compatible with latest Angular 6. There is error at execution time:

ReferenceError: global is not defined at Object../node_modules/socket.io-client/node_modules/socket.io-parser/is-buffer.js (is-buffer.js:4)

Please read comment below to know more:
angular/angular-cli#9827 (comment)

If you want to see this error for yourself, add to angular 6.0 app simple service like that below:

import { Injectable } from 'angular/core';
import * as socketIo from 'socket.io-client';

@Injectable()
export class SocketService {
    private socket;

    constructor() {}

    public initSocket(): void {
        this.socket = socketIo();
    }
}

Error disappears when you remove initSocket function.

---

---

Ok, there is workaround in Angular 6 to work with socket.io-client.
Add (window as any).global = window; to polyfills.ts

[darrachequesne]

There are indeed a number of global references in the project and its dependencies: https://github.com/search?utf8=%E2%9C%93&q=global+repo%3Asocketio%2Fengine.io-client+repo%3Asocketio%2Fengine.io-parser+repo%3Asocketio%2Fsocket.io-client+repo%3Asocketio%2Fsocket.io-parser+extension%3A.js&type=Code&ref=advsearch&l=&l=

I'm not sure about the side-effects of removing these references though.

[jessycormier]

@darrachequesne Would it be possible to have these changes added to a fork of the project until properly resolved?

[darrachequesne]

@jessycormier what do you mean by "a fork of the project"?

A first side-effect, it seems removing the global in darrachequesne/has-binary#4 breaks some Electron apps: darrachequesne/has-binary#5...

[christo-ph]

Hi. Is here any progress? Any solution? Any recommended workaround?

[datumgeek]

@realshaft - the above work-around worked for me in Ionic 4 / Angular 6 web app

Ok, there is workaround in Angular 6 to work with socket.io-client.
Add (window as any).global = window; to polyfills.ts (located in src folder)

[LabinotAvdiu]

@realshaft thank you , it works in angular6 ;)

[iampeters]

hello @everyone,
please help me out.
so i created a service to handle my websocket connection and injected it a component.
the connection to the socket is fine as i get the a user connected in the server console.
but when i tried to send a message from the component nothing is sent.
here are my files:
socketService.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import * as io from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class SocketService {

  private url = 'http://localhost:3000';
  private socket = io(this.url);

  // send a message to socket
  message( msg ) {
    // send msg
    this.socket.emit('chat', msg);
  }

  chat(msg) {
    this.socket$.emit('chat', msg);

    // let observable
  }
}

and the component file

import { Component, OnInit } from '@angular/core';
import { SocketService } from '../../socket.service';

@Component({
  selector: 'app-socket',
  templateUrl: './socket.component.html',
  styleUrls: ['./socket.component.scss']
})
export class SocketComponent implements OnInit {

  constructor(
    private socket: SocketService
    ) { }

  ngOnInit() {
  }

  send() {
    const msg = 'hello';
    this.socket.message(msg);
  }

}

here is my socket server connection. i used MVC

const gameModel = require('../models/game')
const userModel = require('../models/users')
const wsModel = require('../models/socket')
const socket = require('socket.io')

module.exports = (server) => {

const io = socket(server);

// WebSocket handler
io.on('connection', (socket) => {
    console.log('a user connnected')
})

// get the chat msg
io.on('chat', (msg) => {
    // io.emit('res', json.stringify(msg))
    console.log(msg);
})

}

thank you in advance

[mjarkk]

here a bit hacky way to get it working:
Download socket.io-client from a cdn And place it in the src folder with the name socket.io-client.js

Inside the main.ts add these lines:

import * as io_ from './socket.io-client.js';
window['io'] = io_;

Inside polyfills.ts add:

(window as any).global = window;

Now you can use call socket.io-client using:

window['io']('localhost')

[pcnate]

mine started working by simply adding the following

Inside polyfills.ts add:

(window as any).global = window;

angular 6.1.0
socket.io-client 2.1.1

This continues to work after upgrading to angular 7.1.x

[edgexie]

it help me, but why?

[sagarbhamre]

@realshaft thank you , it works in angular6 ;)

It worked for me on Angular 7.x also, thanks.

[fromage9747]

(window as any).global = window;
This worked for me as well on Angular 7.

[ibnsamy96]

same solution works with angular 8

[jusfeel]

God Can't believe I say this. Same solution @mjarkk provided. Works in angular10! -- For me, the reason is that 2.x server doesn't work with 3.x client!

[mjarkk]

After 3 versions this hack stil works lmao, i bet it works the same in angular 11.
But seeing this issue popup again i would now just advice to use native javascript WebSockets as they are supported in all major browsers, for a tutorial to get started: https://javascript.info/websocket.

[darrachequesne]

For future readers: this issue was fixed in [email protected], there is no reference to the global object anymore.

Related commits:

• eeafa44
• socketio/socket.io-parser@b47efb2 (included in [email protected])
• socketio/engine.io-client@99bcc62 (included in [email protected])

Besides: an example with Angular 11 was added here: https://github.com/socketio/socket.io/tree/master/examples/angular-todomvc

Thanks!