Cannot build angular project

[SavvasZaidQuadri]

From what I can tell, I followed the documentation pretty closely. The project has no errors when I run ng serve, the api calls are working fine locally. Only when I run ng build I see an error. The error I am getting is the following after triggering a build:

Error: src/app/core/graphql/graphql.module.ts:11:33 - error TS2322: Type '{ url: string; }' is not assignable to type 'string | URIFunction'.
    Type '{ url: string; }' provides no match for the signature '(operation: Operation): string'.

    11        link: httpLink.create({ uri: environment.preloginServiceUrl }), 
                                   ~~~

  node_modules/apollo-angular/http/types.d.ts:12:5
    12     uri?: string | URIFunction;
           ~~~
    The expected type comes from property 'uri' which is declared here on type 'Options'

My graphql module:

import { HttpClientModule } from '@angular/common/http';
import { APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache } from '@apollo/client/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { environment } from 'src/environments/environment';

export function createApolloFactory(httpLink: HttpLink) {
    return {
        link: httpLink.create({ uri: environment.preloginServiceUrl }), // HERE WE WILL PUT OUR GRAPHQL URL
        cache: new InMemoryCache(),
    };
}

@NgModule({
    imports: [BrowserModule, HttpClientModule],
    providers: [
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApolloFactory,
            deps: [HttpLink],
        },
    ],
})
export class GraphQLModule {}

My package.json:

"dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "@apollo/client": "^3.5.7",
    "@graphql-codegen/cli": "^2.6.2",
    "@graphql-codegen/introspection": "^2.1.1",
    "@graphql-codegen/typescript": "^2.4.11",
    "@graphql-codegen/typescript-apollo-angular": "^3.4.10",
    "@graphql-codegen/typescript-operations": "^2.4.0",
    "@savvaslearning/cel-components": "^7.2.2",
    "apollo-angular": "^2.6.0",
    "git-rev-sync": "^2.0.0",
    "graphql": "^15.0.0",
    "ng-recaptcha": "^8.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.9",
    "@angular-eslint/builder": "12.7.0",
    "@angular-eslint/eslint-plugin": "12.7.0",
    "@angular-eslint/eslint-plugin-template": "12.7.0",
    "@angular-eslint/schematics": "12.7.0",
    "@angular-eslint/template-parser": "12.7.0",
    "@angular/cli": "~12.2.9",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.28.2",
    "@typescript-eslint/parser": "4.28.2",
    "eslint": "^7.26.0",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "karma-spec-reporter": "0.0.32",
    "ts-node": "~8.3.0",
    "typescript": "~4.3.5"
  }

I tried changing around the versions of graphql/apollo packages, but still no luck -- this is the first time I'm encountering this with apollo-angular.. must be something I'm doing wrong?