Hello I am trying to make the xsrf option argument configurable. But unfortunately my approaches do not work.

given the following code angular module:

// Define InjectionToken for XSRF configuration
export interface XsrfConfig {
  cookieName: string;
  headerName: string;
}

// Shared variable to store the XSRF configuration dynamically
const xsrfOptions: XsrfConfig = { cookieName: 'X-XSRF-TOKEN', headerName: 'X-XSRF-TOKEN' };

@NgModule({
  imports: [
    CommonModule,
    ....
  ],
  providers: [
    {
      provide: ENVIRONMENT_INITIALIZER,
      useFactory: () => {
        const config = inject(DEFAULT_CONFIG);
        xsrfOptions.cookieName = config.xsrf.cookieName;
        xsrfOptions.headerName = config.xsrf.headerName;
        return () => true;
      },
      multi: true,
    },
    provideHttpClient(
      withXsrfConfiguration(xsrfOptions), // Uses dynamically updated values
      withInterceptorsFromDi()
    ),
  ],
  declarations: [
   
  ],
  exports: [
   
  ],
})

The order is allways that the call to withXsrfConfiguration is done with the default values of the xsrfOptions and the factory function which sets the xsrfOptions again is called after.

How can I archive that the httpclient is configured after the lambda of the useFactory is called?

Hello I am trying to make the xsrf option argument configurable. But unfortunately my approaches do not work.

given the following code angular module:

// Define InjectionToken for XSRF configuration
export interface XsrfConfig {
  cookieName: string;
  headerName: string;
}

// Shared variable to store the XSRF configuration dynamically
const xsrfOptions: XsrfConfig = { cookieName: 'X-XSRF-TOKEN', headerName: 'X-XSRF-TOKEN' };

@NgModule({
  imports: [
    CommonModule,
    ....
  ],
  providers: [
    {
      provide: ENVIRONMENT_INITIALIZER,
      useFactory: () => {
        const config = inject(DEFAULT_CONFIG);
        xsrfOptions.cookieName = config.xsrf.cookieName;
        xsrfOptions.headerName = config.xsrf.headerName;
        return () => true;
      },
      multi: true,
    },
    provideHttpClient(
      withXsrfConfiguration(xsrfOptions), // Uses dynamically updated values
      withInterceptorsFromDi()
    ),
  ],
  declarations: [
   
  ],
  exports: [
   
  ],
})

The order is allways that the call to withXsrfConfiguration is done with the default values of the xsrfOptions and the factory function which sets the xsrfOptions again is called after.

How can I archive that the httpclient is configured after the lambda of the useFactory is called?

• angular

Share Improve this question Follow asked Mar 10 at 11:16 straegerstraeger 42233 silver badges1212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The bootstrapModule has a secondary argument (CompilerOptions), which accepts providers array, maybe there you can configure the values.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { InjectionToken } from '@angular/core';

// Define InjectionToken for XSRF configuration
export interface XsrfConfig {
  cookieName: string;
  headerName: string;
}

// Shared variable to store the XSRF configuration dynamically
const xsrfOptions: XsrfConfig = {
  cookieName: 'X-XSRF-TOKEN',
  headerName: 'X-XSRF-TOKEN',
};

const DEFAULT_CONFIG = new InjectionToken<string>('DEFAULT_CONFIG');

platformBrowserDynamic()
  .bootstrapModule(AppModule, {
    providers: [
      {
        provide: DEFAULT_CONFIG,
        useValue: {
          cookieName: 'testCookieName',
          headerName: 'testHeaderName',
        },
      },
    ],
  })
  .catch((err) => console.error(err));