Application Configuration

Often you will need to use some kind of configuration in your application. For most backends this can be done using envionment variables or settings files, however in Angular applications this is not as straight forward. A common approach I like to take is to setup a appsettings.json file, that is served alonside the application and can be used to store configuration values. The application will read this file, pass it around as a provider and use it as needed.

Setup

Start by creating a new file in the public directory called appsettings.json. This file will contain all the configuration values for the application.

{
    "someSetting": "SomeValue"
}

Next we will update the main.ts to read the appsettings.json file and pass it to the application as a provider. Setup the following exports before the application bootstrap.

export const APP_SETTINGS = new InjectionToken<AppSettings>('APP_SETTINGS');

export const fetchAppSettings = async (): Promise<AppSettings> => {
  const baseHref = document.querySelector('base')?.getAttribute('href');
  const settingUrl = baseHref === '/' ? '/appsettings.json' : `${baseHref}/appsettings.json`;
  const response = await fetch(settingUrl);
  return await response.json();
};

export const provideAppSettings = (appSettings: AppSettings): StaticProvider => {
  return {
    provide: APP_SETTINGS,
    useValue: appSettings,
  };
};

In this we are creating a new InjectionToken called APP_SETTINGS that will be used to inject the configuration values into the application. We also have a function fetchAppSettings that will fetch the appsettings.json file and return the configuration values. Finally we have a function provideAppSettings that will create a provider for the configuration values.

Next we can update the bootstrap function to fetch the configuration values and pass them to the application.

(async function () {
  // Fetch the app settings and then bootstrap the application
  const appSettings = await fetchAppSettings();
  bootstrapApplication(AppComponent, {
    providers: [
      provideAppSettings(appSettings),
      { provide: appConfig, useValue: appSettings },
      ...appConfig.providers,
    ],
  })
})();

TIP

If you have other configuration in the appConfig you will also need to ensure it's passed correctly to the bootstrapApplication() function.

This will fetch the configuration values and pass them to the application as a provider.

Usage

Using settings is now as simple as injecting the APP_SETTINGS token into a service or component.

app.component.ts

import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { APP_SETTINGS } from '../main';
import { AppSettings } from './common/models/config';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  appSettings: AppSettings = inject(APP_SETTINGS);
  title = 'app-settings';
  someSetting = this.appSettings.someSetting
}

app.component.html

<h1>{{ title }}</h1>
<p>The value of someSettings is: {{ someSetting }}</p>