Apollo is not being defined before use

[quinnjr]

Hello,

I'm trying to use Apollo in a stand alone component and getting the following error message:

main.ts:5 ERROR Error: Client has not been defined yet
    at Apollo.checkInstance (ngApollo.mjs:205:19)
    at Apollo.ensureClient (ngApollo.mjs:197:14)
    at Apollo.subscribe (ngApollo.mjs:175:45)
    at HomeComponent.ngOnInit (home.component.ts:36:43)
    at zone-patch-rxjs.js:99:45
    at proto.<computed> (zone.js:1003:24)
    at callHookInternal (core.mjs:5154:14)
    at callHook (core.mjs:5181:13)
    at callHooks (core.mjs:5135:17)
    at executeInitAndCheckHooks (core.mjs:5085:9)

I'm importing Apollo in app.config.ts as

import { ApplicationConfig, inject, APP_INITIALIZER, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { Apollo, APOLLO_FLAGS, provideApollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { ApolloLink, InMemoryCache, Operation } from '@apollo/client/core';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { getMainDefinition } from '@apollo/client/utilities';
import { setContext } from '@apollo/client/link/context';
import { createClient } from 'graphql-ws';

import { routes } from './app.routes';
import { environment } from '../environments/environment';
import { authTokenInterceptor } from './interceptors/auth-token.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(withInterceptors([/*authInterceptor,*/ authTokenInterceptor])),
    {
      provide: APOLLO_FLAGS,
      useValue: {
        useInitialLoading: true,
        usePreloading: true
      }
    },
    provideApollo(() => {
      const httpLink = inject(HttpLink);

      const http = httpLink.create({
        uri: environment.api_url + '/graphql'
      });

      const wsLink = new GraphQLWsLink(
        createClient({
          url: environment.ws_url + '/graphql',
          connectionParams: () => {
            const token = localStorage.getItem('accessToken');
            return {
              Authorization: `Bearer ${token}`
            }
          }
        })
      ) as unknown as ApolloLink;

      const authLink = setContext((_, { headers }) => {
        const token = localStorage.getItem('accessToken');
        return {
          headers: {
            ...headers,
            Authorization:`Bearer ${token}`
          }
        }
      });

      const link = ApolloLink.from([
        authLink as unknown as ApolloLink,
        ApolloLink.split(
          (operation: Operation) => {
            const definition = getMainDefinition(operation.query);
            return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
          },
          wsLink,
          http as unknown as ApolloLink
        )
      ]);

      return {
        link,
        cache: new InMemoryCache(),
        defaultOptions: {
          watchQuery: {
            errorPolicy: 'all'
          },
          query: {
            errorPolicy: 'all'
          },
          mutate: {
            errorPolicy: 'all'
          }
        },
        connectToDevTools: environment.production ? false : true
      }
    })
  ]
};

My component:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Subscription } from 'rxjs';
import { Apollo, gql } from 'apollo-angular';

const WEBHOOK_SUBSCRIPTION = gql`
  subscription textractProcessingSubscription {
    textractProcessingUpdate {
      items {
        id
      }
      totalCount
    }
  }
`;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss',
  standalone: true,
  imports: [CommonModule],
  providers: [Apollo]
})
export class HomeComponent implements OnInit, OnDestroy {

  public latestTextractProcessing: any;

  private textractProcessing!: Subscription;

  constructor(private readonly apollo: Apollo) {

  }

  public ngOnInit(): void {
    this.textractProcessing = this.apollo.subscribe({
      query: WEBHOOK_SUBSCRIPTION
    }).subscribe(({ data }) => this.latestTextractProcessing = data);
  }

  public ngOnDestroy(): void {
    if (this.textractProcessing) {
      this.textractProcessing.unsubscribe();
    }
  }
}

Not putting Apollo in the component as a provider leads to Angular complaining:

main.ts:5 ERROR NullInjectorError: R3InjectorError(Standalone[HomeComponent])[Apollo -> Apollo -> Apollo]: 
  NullInjectorError: No provider for Apollo!
    at NullInjector.get (core.mjs:1663:27)
    at R3Injector.get (core.mjs:3109:33)
    at R3Injector.get (core.mjs:3109:33)
    at R3Injector.get (core.mjs:3109:33)
    at ChainedInjector.get (core.mjs:5454:36)
    at lookupTokenUsingModuleInjector (core.mjs:5807:39)
    at getOrCreateInjectable (core.mjs:5855:12)
    at Module.ɵɵdirectiveInject (core.mjs:11939:19)
    at NodeInjectorFactory.HomeComponent_Factory [as factory] (home.component.ts:24:27)
    at getNodeInjectable (core.mjs:6067:44)