angular make withXsrfConfiguration options configurable

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?

Continue reading...