> [email protected] serve:ssr /Users/ks89/git/project
> node dist/server.js
/Users/ks89/git/project/dist/server.js:160136
    return /*require.resolve*/(!(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
Error: Cannot find module "."
    at webpackMissingModule (/Users/ks89/git/project/dist/server.js:160136:76)
          
A workaround in my case was to force close the socket after a certain time. It increases the render time but it works:
this.socket = io(this.wssEndpoint);
setTimeout(() => {
     this.socket.close();
}, 10000);
I can't wait to see a more elegant solution :)
          
@Ks89 , We are experiencing the same error with Express + Universal. Were you able to find a solution ?
Error: Cannot find module "."
    at webpackMissingModule (/Users/ks89/git/project/dist/server.js 
          
Check this. an answer on stackoverflow. You need to detect if it is browser of or server side.

https://stackoverflow.com/a/41721980/6261137
          
I found a solution that works for me. I'm using feathers.js and don't handle the socket directy. The second step is therefore a guess how it works with pure socket.io.
There is somewhere a similar issue where I found parts of the solution, but I could not find it anymore - so thanks original author :)
First, the socket creation needs to run outside of angular:
this.ngZone.runOutsideAngular(() => {
  this.socket = io(this.BASE_URL)
Second, the on callback needs to run in the zone again (don't ask me why :D)
this.socket.on('message', (data) => {
  ngZone.run(() => {
    doStuff(data)
Now it should work, but you just have created a memory leak because the socket does not get closed. You need to add a ngOnDestroy method to your service that created the socket:
ngOnDestroy(): void {
  this.socket.close()
For completeness here is my code that works with feathers.js:
data.service.ts:
import { Services } from './../../../../shared/types/services'
import { Injectable, NgZone, OnDestroy } from '@angular/core'
import { environment } from '../../environments/environment'
import feathers, { Application } from '@feathersjs/feathers'
import




    
 socketio from '@feathersjs/socketio-client'
import * as rx from 'feathers-reactive'
import * as io from 'socket.io-client'
import { ngFeathersWebsocketSupport } from '../../lib/ng-feathers-websocket-support'
@Injectable()
export class DataService implements OnDestroy {
  constructor(
    public ngZone: NgZone
    this.init()
  BASE_URL = environment.dataUrl
  app = feathers() as Application<Services>
  socket: SocketIOClient.Socket = null
  protected init() {
    this.ngZone.runOutsideAngular(() => {
      this.socket = io(this.BASE_URL)
      this.app
        .configure(socketio(this.socket, {
          timeout: 10 * 1000
        }))
        .configure(rx({ idField: '_id' }))
        .configure(ngFeathersWebsocketSupport({ ngZone: this.ngZone }))
  ngOnDestroy(): void {
    this.socket.close()
ng-feathers-websocket-support.ts:
export function ngFeathersWebsocketSupport(options: { ngZone: any }) {
  const mixin = function (service) {
    const originalOn = service.on.bind(service)
    const serviceMixin = {
      on(event, cb) {
        return originalOn(event, (...args) => {
          options.ngZone.run(() => {
            cb(...args)
    // get the extended service object
    service.mixin(serviceMixin)
  return function (app) {
    app.mixins.push(mixin)
Hope this helps anyone :)
          
Simply we can check for browser and initilize the socket things
import { isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';
constructor(@Inject(PLATFORM_ID) private platformId: Object) {
  if(isPlatformBrowser(this.platformId)) { // check if this is runing in browser
    this.socket = io('http://localhost:3000/'); // call io constructor
    this.init(); // do the all initilization, e.g. this.socket.on('message', msg => {})
          
@sean-nicholas

thank you so much !! it works !

by the way, using fromEvent in RxJs makes code much more clean.

in Websocket.service.ts
@Injectable({
  providedIn: 'root'
export class WebsocketService implements OnDestroy {
    private url = 'ws://localhost:8081';
    private socket: SocketIOClient.Socket;
    constructor(private readonly ngZone: NgZone) {
      this.ngZone.runOutsideAngular(() => {
        this.socket = io(this.url, {
          reconnection: true,
          reconnectionDelay: 5000,
          reconnectionAttempts: 5,
      this.on$('connection').subscribe(console.log);
      this.on$('error').subscribe(console.log);
      this.on$('wsException').subscribe(console.log);
      this.on$('connect_error').subscribe(console.log);
    emit(channel: string, emitValue: any) {
      this.socket.emit(channel, emitValue);
    on$(channel: string) {
      return fromEvent(this.socket, channel);
    off(channel: string) {
      this.socket.off(channel);
    ngOnDestroy() {
      this.socket.close();
in Other.Component.ts
// ....
  ngOnInit() {
    this.websocketService.on$('message').subscribe((message:any) => {
      this.ngZone.run(() =>{
            this.message = message;
            this.changeDetectorRef.markForCheck()  // if you need.
  sendMessage() {
       this.websocketService.emit('message', 'emit a message to server');
  ngOnDestroy() {
    this.websocket.off('message');
          
@sean-nicholas @hsuanyi-chou
I tried these solutions, but what about the acknowledgements (callback) in the emit method? Because in this case we are not able to wait for that.
Actually I implemented a queue system, and wait for the response form the server, and if the queue is get emptied I close the connection.
in Other.Component.ts, use on$ to subscribe and will be received the data when socket.io server emitted.
//...
   ngOnInit() {
        this.WebsocketService.on$('message').subscribe(data =>
            this.ngZone.run(() =>{
               this.message = message;
               this.changeDetectorRef.markForCheck()  // if you need.
//...
you can send any keyword (replace 'message') you like to listen to.
remember using ngZone in the subscribe callback function.
          
@hsuanyi-chou
I speak about this case:
emit(channel: string, emitValue: any, cb: Function) {
    this.socket.emit(channel, emitValue, cb);
In this case the angular won't wait for the response of the server.
Check this. an answer on stackoverflow. You need to detect if it is browser of or server side.

https://stackoverflow.com/a/41721980/6261137
Esta solución es sencilla y efectiva
Does universal work with socket.io? and how to?
I’m just a beginner trying to understand the

business, maybe it can help me in my

writing and illustration of children’s books.
          
@sean-nicholas so I am in the middle of trying what you are speaking of and this other solution that is working per se and seems like a hack.
Let me show you what I have:

this is the SSE service, same would go for websockets.
import { isPlatformBrowser } from '@angular/common';
import { Injectable, NgZone, Inject, PLATFORM_ID } from "@angular/core";
import { Observable } from "rxjs";
@Injectable({
  providedIn: 'root'
export class SseService {
  private isBrowser: boolean = isPlatformBrowser(this.platformId);
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    private _zone: NgZone
      if (this.isBrowser) {
        console.log('this happened here');
  getServerSentEvent(url: string): Observable<EventSource> {
    return Observable.create(observer => {
      const eventSource: EventSource = this.getEventSource(url);
      eventSource.onmessage = event => {
        this._zone.run(() => {
          observer.next(event);
        });
      eventSource.onerror = error => {
        this._zone.run(() => {
          observer.error(error);
        });
    });
  private getEventSource(url: string): EventSource {
    if (this.isBrowser) {
      console.log('this happened here 2');
      return new EventSource(url);
this is the implementation.
ngOnInit() {
    this.sseService
      .getServerSentEvent('http://localhost:4201/user/stream')
      .subscribe(data => console.log('data here >>>>> ', data));
I am trying to implement      this.ngZone.runOutsideAngular(() => { instead
If I don't use the browser detection hack then I get this error. FYI, I don't know why I am calling it a hack but it something about it smells.
ERROR ReferenceError: EventSource is not defined
          
@xtianus79 Okay, so I'm not quite sure if you need the runOutsideAngular if you are using server sent events. But if you do, I would think that this might work (just a guess, it's long ago that I implemented my solution and I don't know SSE)
getServerSentEvent(url: string): Observable<EventSource> {
    return Observable.create(observer => {
      this._zone.runOutsideAngular(() => {
        const eventSource: EventSource = this.getEventSource(url);
        eventSource.onmessage = event => {
          this._zone.run(() => {
            observer.next(event);
          });
        eventSource.onerror = error => {
          this._zone.run(() => {
            observer.error(error);
          });
      });
    });
The isPlatformBrowser function is not a hack at all. I use it all the time. And especially in your use case it makes sense because EventSource does only exist in the browser and not in node.js. Therefore you need to make that distinction.
But I think you should return an EventSource mock from getEventSource if you are on the server  otherwise const eventSource would be undefined and eventSource.onmessage would fail.
I'm using Angular SSR with ASP.Net using SPA Services. Application became irresponsive when i pass 1K concurrent request using apache JMeter or WebSurg. Most of the time connection timeout shows up or application took more then 120 secs to load the home page.

It would be very helpful if someone could suggest a possible solution
Simply we can check for browser and initilize the socket things
import { isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';
constructor(@Inject(PLATFORM_ID) private platformId: Object) {
  if(isPlatformBrowser(this.platformId)) { // check if this is runing in browser
    this.socket = io('http://localhost:3000/'); // call io constructor
    this.init(); // do the all initilization, e.g. this.socket.on('message', msg => {})
work fine for me
          
Simply call WebSocket only in the browser mood. Follow the answer.

https://stackoverflow.com/a/41721980/5978179
Here is my socket Service
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { io } from 'socket.io-client';
import { Observable } from 'rxjs';
import { isPlatformBrowser } from '@angular/common';
@Injectable({
  providedIn: 'root'
export class SocketServiceService {
  isBrowser: boolean | undefined;
  socket: any;
  // uri: string = "ws://localhost:3000";
  uri: string = "http://localhost:3000";
  constructor(@Inject(PLATFORM_ID) platformId: Object) {
    this.isBrowser = isPlatformBrowser(platformId);
    if (this.isBrowser) {
      this.socket = io(this.uri);
  listen(eventName: string) {
    return new Observable((subscriber) => {
      this.socket.on(eventName, (data: any) => {
        subscriber.next(data);
  emit(eventName: string, data: any) {
    this.socket.emit(eventName, data);
  close() {
    this.socket.close();
          
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.