Créons un custom provide en standalone API - Angular 15 next

Depuis la mise à jour angular 15, nous avons une toute nouvelle façon de gérer les modules, et les non modules ahah.

Dans notre main.ts, maintenant, plus de AppModule : bonjour les provide functions.
Alors nous nous sommes dits : comme respecter ce principe et créer notre propre provide function ?!

Découvrons comment faire ensemble !

Un main.ts déjà bien rempli

Avec la standalone API, clairement le main.ts peut vite devenir une liste de providers, qui peut prendre de l’ampleur.

const providers: Array<Provider | EnvironmentProviders> = [
  provideRouter(mainRoutes),
  provideHttpClient(),
  provideStore({ router: routerReducer}),
  provideRouterStore(),
  provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }),
  provideEffects(),
  importProvidersFrom(BrowserAnimationsModule),
];

bootstrapApplication(AppComponent, { providers }).then(applicationLoaded);

Créer notre propre provide function

Dans notre exemple, nous voulons ajouter un token d’injection de dépendance, pour les paramètres d’accès à Google API (pour notre calendrier).

Nous avons donc cherché dans le code Angular, et nous avons trouvé le code d’un provider (par exemple provideHttpClient).
Il utilise la fonction makeEnvironmentProviders.

Il devient alors très facile de construire une provide function :

export const provideGoogleApis = (config: GoogleApiConfig) => {
  const provider: Provider = [{
    provide: googleApiConfigToken,
    useValue: googleApiConfig
  }];

  return makeEnvironmentProviders(provider);
}

Nous utilisons ici le jeton d’injection suivant :

export const googleApiConfigToken = new InjectionToken<GoogleApiConfig>('Google api config');
export const googleApiConfig: GoogleApiConfig = {
  client: client,
  apiKey: key
};

Avec le type :

export type GoogleApiConfig = {
  client: string,
  apiKey: string
}

Appel dans notre main.ts

Il suffit d’appeler notre custom provide function dans notre main.ts standalone :

const providers: Array<Provider | EnvironmentProviders> = [
  provideRouter(mainRoutes),
  provideHttpClient(),
  provideStore({ router: routerReducer}),
  provideRouterStore(),
  provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }),
  provideEffects(),
  importProvidersFrom(BrowserAnimationsModule),
  provideGoogleApis(googleApiConfig)
];

bootstrapApplication(AppComponent, { providers }).then(applicationLoaded);

Et voila ! 🙂