How do I provide a dynamic value to a config inside Angular .forRoot?

Question

I'm trying to use the official imgix angular library for our project. However I am facing difficulties when providing a dynamic value to the forRoot.

import { NgModule } from '@angular/core';
import { BrowserModule, TransferState } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { UrlSerializer } from '@angular/router';
import { ImgixAngularModule } from '@imgix/angular';

import { COOKIE_CONSENT_VERSION } from 'ish-core/configurations/state-keys';
import { CoreModule } from 'ish-core/core.module';
import { PWAUrlSerializer } from 'ish-core/routing/pwa-url.serializer';

import { environment } from '../environments/environment';

import { AppComponent } from './app.component';
import { CompareRoutingModule } from './extensions/compare/pages/compare-routing.module';
import { ContactUsRoutingModule } from './extensions/contact-us/pages/contact-us-routing.module';
import { PunchoutRoutingModule } from './extensions/punchout/pages/punchout-routing.module';
import { QuickorderRoutingModule } from './extensions/quickorder/pages/quickorder-routing.module';
import { QuotingRoutingModule } from './extensions/quoting/pages/quoting-routing.module';
import { RecentlyRoutingModule } from './extensions/recently/pages/recently-routing.module';
import { StoreLocatorRoutingModule } from './extensions/store-locator/pages/store-locator-routing.module';
import { TactonRoutingModule } from './extensions/tacton/pages/tacton-routing.module';
import { AppLastRoutingModule } from './pages/app-last-routing.module';
import { AppRoutingModule } from './pages/app-routing.module';
import { ShellModule } from './shell/shell.module';

@NgModule({
  declarations: [AppComponent],
  /* eslint-disable @angular-eslint/sort-ngmodule-metadata-arrays */
  imports: [
    BrowserModule.withServerTransition({ appId: 'intershop-pwa' }),
    BrowserAnimationsModule,
    CoreModule,
    ShellModule,
    AppRoutingModule,
    QuickorderRoutingModule,
    QuotingRoutingModule,
    PunchoutRoutingModule,
    TactonRoutingModule,
    StoreLocatorRoutingModule,
    RecentlyRoutingModule,
    CompareRoutingModule,
    ContactUsRoutingModule,
    AppLastRoutingModule,
    ImgixAngularModule.forRoot({
      domain: 'example-int.imgix.net',
      includeLibraryParam: false,
      defaultImgixParams: {
        auto: 'format,compress',
      },
    }),
  ],
  /* eslint-enable @angular-eslint/sort-ngmodule-metadata-arrays */
  bootstrap: [AppComponent],
  providers: [{ provide: UrlSerializer, useClass: PWAUrlSerializer }],
})
export class AppModule {
  constructor(transferState: TransferState) {
    if (!transferState.hasKey<number>(COOKIE_CONSENT_VERSION)) {
      transferState.set(COOKIE_CONSENT_VERSION, environment.cookieConsentVersion);
    }
  }
}

I've tried a lot of examples I found in stackoverflow but couldn't find a answer that could help me. The project is a Intershop PWA application where I need to use a stateProperty to retrieve a environment variable containing the domain for IMGIX. I'm pretty new to Angular in general and any help would be greatly appreciated