Cannot establish connection with apollo-angular

[fschmuck]

I hope someone could help me out.
I cannot establish a connection with my apollo-angular client but if I try to connect to the websocket server via postman or other tools it works.

I receive the following error:

client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
SubscriptionClient @ client.js:99
WebSocketLink @ index.js:12
createApollo @ graphql.module.ts:17
factory @ core.js:11521
hydrate @ core.js:11437
get @ core.js:11256
injectInjectorOnly @ core.js:4751
ɵɵinject @ core.js:4755
Apollo_Factory @ ngApollo.js:251
hydrate @ core.js:11437
get @ core.js:11256
injectInjectorOnly @ core.js:4751
ɵɵinject @ core.js:4755
FeedGQL_Factory @ graphql.ts:270
hydrate @ core.js:11437
get @ core.js:11256
get @ core.js:25365
get @ core.js:25079
lookupTokenUsingModuleInjector @ core.js:3342
getOrCreateInjectable @ core.js:3454
ɵɵdirectiveInject @ core.js:14736
AppComponent_Factory @ app.component.ts:11
getNodeInjectable @ core.js:3549
instantiateRootComponent @ core.js:10139
createRootComponent @ core.js:12500
create @ core.js:25168
bootstrap @ core.js:29671
(anonymous) @ core.js:29363
_moduleDoBootstrap @ core.js:29363
(anonymous) @ core.js:29333
invoke @ zone.js:372
onInvoke @ core.js:28705
invoke @ zone.js:371
run @ zone.js:134
(anonymous) @ zone.js:1276
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
drainMicroTaskQueue @ zone.js:582
invokeTask @ zone.js:491
invokeTask @ zone.js:1600
globalZoneAwareCallback @ zone.js:1637
Show 14 more frames
index.js:52 [WDS] Live Reloading enabled.
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
client.js:446 WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ client.js:446
(anonymous) @ client.js:414
timer @ zone.js:2561
invokeTask @ zone.js:406
onInvokeTask @ core.js:28692
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
ZoneTask.invoke @ zone.js:476
data.args. @ zone.js:2541
​ WebSocket connection to 'ws://localhost:8081/graphql' failed:
push.295.SubscriptionClient.connect @ vendor.js:77634
(anonymous) @ vendor.js:77602
timer @ polyfills.js:12455
invokeTask @ polyfills.js:10300
onInvokeTask @ vendor.js:37288
invokeTask @ polyfills.js:10299
runTask @ polyfills.js:10072
invokeTask @ polyfills.js:10381
ZoneTask.invoke @ polyfills.js:10370
data.args. @ polyfills.js:12435

Console output:

WebSocket connection to 'ws://localhost:8081/graphql' failed: WebSocket is closed before the connection is established.

My module configuration looks like this:

import { NgModule } from '@angular/core';
import { InMemoryCache, split } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';
import { OAuthService } from 'angular-oauth2-oidc';
import { AppConfigService } from '@einstein-ui/app-shared/app-config.service';
import { APOLLO_OPTIONS } from 'apollo-angular';

export function createApollo(httpLink: HttpLink) {

  const http = httpLink.create({
    uri: 'http://localhost:8081/graphql'
  });

 
  const ws = new WebSocketLink({
    uri: 'ws://localhost:8081/graphql',
    options: {
      reconnect: true
      }
    }
  });
  
  const link = split(
    // split based on operation type
    ({ query }) => {
      const definition = getMainDefinition(query);
      return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
    },
    ws,
    http
  );

  return {
    link,
    cache: new InMemoryCache()
  };
}

@NgModule({
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink]
    }
  ]
})
export class GraphQLModule {
}