import { BrowserModule } from '@angular/platform-browser' ; import { NgModule } from '@angular/core' ; import { RouterModule } from '@angular/router' ; import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; import { HttpClientModule } from '@angular/common/http' ; import { InMemoryCache } from 'apollo-cache-inmemory' ; import { Apollo , ApolloModule } from 'apollo-angular' ; import { split } from 'apollo-link' ; import { HttpLink , HttpLinkModule } from 'apollo-angular-link-http' ; import { WebSocketLink } from 'apollo-link-ws' ; import { getMainDefinition } from 'apollo-utilities' ; import { AppComponent } from './app.component' ; import { appRoutes } from './app.routes' ; @ NgModule ( { declarations : [ AppComponent ] , imports : [ BrowserAnimationsModule , BrowserModule , RouterModule . forRoot ( appRoutes ) , HttpLinkModule , HttpClientModule , ApolloModule , ] , providers : [ ] , bootstrap : [ AppComponent ] } ) export class AppModule { constructor ( apollo , httpLink ) { const hLink = httpLink . create ( { uri : '/graphql' } ) ; const subscriptionLink = new WebSocketLink ( { uri : `ws://localhost:5000/gql-ws` , options : { reconnect : true } } ) ; const link = split ( ( { query } ) => { const { kind , operation } = getMainDefinition ( query ) ; return kind === 'OperationDefinition' && operation === 'subscription' ; } , subscriptionLink , hLink ) ; apollo . create ( { link : link , cache : new InMemoryCache ( ) } ) ; } }