Angular standalone:chain multiple functions in provideAppInitializer

Question

In my Angular application (version 19), I have a provideAppInitializer like this:

export const appConfig: ApplicationConfig = {
  
  providers: [
    ...
    provideAppInitializer(intializeAppFn),
    ..
  ]
};

And the intializeAppFn loads config from a service:

const intializeAppFn = () => {
  const configService = inject(AppConfigService);
  return configService.loadConfig();
};

What I would need is to add another provider which requires values from the configService.getConfig().

I want to add the provider shown here:

provideMatomo({
      siteId:// value from the config service
      trackerUrl:// value from the config service
    })

How do I properly chain for multiple initialize functions?

UPDATE

Solution which I tried so far, but the provider provideMatomo is not initialized

const initializeMatomoFn = () => {
  const configService = inject(AppConfigService);

  return configService.loadConfig().then(() => {
    const config = configService.getConfig();
    return provideMatomo({
      siteId: '',
      trackerUrl: config.MATOMO_BASE_URL,
    },withRouter());
  });
};
provideAppInitializer(initializeMatomoFn)

Andrei · Accepted Answer · 2025-05-08 12:01:12Z

2

considering matomo sources you can pass a factory to the provideMatomo

provideMatomo(() => {
    const config = inject(AppConfigService).getConfig();
    return {
      siteId: config.siteId, // value from the config service
      trackerUrl: config.MATOMO_BASE_URL, // value from the config service
    };
})

answered May 8 at 12:01

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

shamon shamsudeen May 8 at 12:15

How to use async await here, because i need to use configService.loadConfig() to load the config

shamon shamsudeen May 8 at 12:25

``` const loadMatomoConfig = async () => { const config = inject(AppConfigService) await config.loadConfig(); console.log('config', config.getConfig()); return { siteId: 1, // value from the config service trackerUrl: '', // value from the config service }; } this is tried but getting a type mismatch error Promise<{ siteId: number; trackerUrl: string; }>' is not assignable to parameter of type 'MatomoConfiguration

shamon shamsudeen May 8 at 12:46

The problem is the return type of provideMatomo accepts only normal interface, not allows a promise

Andrei May 8 at 20:15

@shamonshamsudeen you rather provide it exactly as I wrote in the piece of code. unless it is used in app initializer, it should be initialized after your appInitializer is ready = inject(AppConfigService).getConfig(); will get you a config synchroniously

Naren Murali · Accepted Answer · 2025-05-08 11:32:20Z

1

You can make the API call, get the data and then initialize using bootstrapApplication.

export function initializeApp(): Promise<any> {
  // fetch("https://someUrl.com/api/user").then((res:any) => res.json()) // <- place your API here!
  return firstValueFrom(
    of({
        MATOMO_BASE_URL: 'url here'
      }) // simulate api call
  );
}

initializeApp().then((config: any) => {
  bootstrapApplication(App, {
    providers: [
      provideHttpClient(),
      provideMatomo({
        siteId: '',
        trackerUrl: config.MATOMO_BASE_URL,
      },withRouter()),
    ],
  });
});

Related Answer - How to inject a Service inside ApplicationConfig?

answered May 8 at 11:32

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

7 Comments

Naren Murali May 8 at 13:30

@shamonshamsudeen Use a combination of app initializer to set the config values in a property called config (construct the config property the same structure needed by the package{ siteId: config.siteId, trackerUrl: config.MATOMO_BASE_URL, }) on the service itself. Then use Andrei method to access the config object and just return the appConfigService.config inside provideMatomo it might work, no need for async await, due to objects being memory references, we can try to make this method work.

Naren Murali May 8 at 13:51

@shamon code example of what I am explaining stackblitz

shamon shamsudeen May 9 at 5:46

Muarli, i tried the approach but the configs is null in the providematmo factory

Naren Murali May 9 at 5:58

@shamonshamsudeen even though the config is empty at first, it will latest have a value populated, just check if the package is functioning correctly, also it should not be null, please refer my stackblitz and use the same.

shamon shamsudeen May 9 at 6:00

Yea its relecting, i can access it via promise , but the providematomo factory doesn't accept the promise returns

|

Collectives™ on Stack Overflow

Angular standalone:chain multiple functions in provideAppInitializer

2 Answers 2

4 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related