Other Ways to Access the Config Object

[pjlamb12]

The benefit of this library is to be able to load config objects that are not needed at build time from an HTTP endpoint or from a JSON file. Thus, feature flags could be turned on/off, API endpoints can be changed, etc. If you use the environments file, the value is required at build time and potentially a separate build needs to be done for each environment.

Right now, the only way to get the configuration values is to inject the service into your component/service/directive and then use the getConfigObject or getConfigObjectKey methods. This generally works, but it would be really nice to be able to access the config object in other ways. For example, an InjectionToken could be created and injected in the desired component:

export const APP_CONFIG = new InjectionToken('APP_CONFIG', { providedIn: 'root', factory: () => {} });

export class MyComponent {
  constructor(@Inject('APP_CONFIG') private config: Config ) {}
}

Another great use case is to load the config and be able to use it in the decorator of a module. Something like this:

@NgModule({
  imports: [
    AuthenticationModule.forRoot(APP_CONFIG.authentication)
  ]
})
export class AppModule {}

The APP_CONFIG.authentication part is obviously placeholder, and I'm not sure how we would get access to it, but it would be nice. Sometimes these things change (maybe a new scope is added or a callbackUrl is changed) and you don't need to re-build your application. Using some runtime config like this library would be great.

The problem is I don't know 1) if any of this is possible, or 2) how to implement it.

I was thinking of trying to create the injection token and have the factory call the load config function; in essence it would look very much like the APP_INITIALIZER does here. Is that possible? What options are available to potentially accomplish the goals listed above? I'm open to suggestions, and PRs/code input as well if you are interested in helping.

Thanks!

[pjlamb12]

I tried the following, seeing if I could get the config object in an injection token, but it didn't work:

// inside the app.module.ts
export const APP_CONFIG = new InjectionToken('APP_CONFIG', {
	providedIn: 'root',
	factory: async () => {
		const config = await fetch('/assets/config/config.json')
			.then((config) => {
				return config.json();
			})
			.then((config) => {
				console.log(config);
			});

		return config;
	},
});

// app.component.ts
	constructor(@Inject(APP_CONFIG) private config: any) {}

	ngOnInit() {
		console.log(this.config);
	}

The problem is that the console.log just logs this:

ZoneAwarePromise { __zone_symbol__state: true, __zone_symbol__value: undefined }

[yharaskrik]

Some options by using fetch ahead of time:

1. Manually

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

import { AppModule } from './app/app.module';
import { CONFIG } from './app/config.token';

fetch('config.json')
  .then((res) => res.json())
  .then((config) => {
    platformBrowserDynamic([
      {
        provide: CONFIG,
        useValue: config,
      },
    ])
      .bootstrapModule(AppModule)
      .catch((err) => console.error(err));
  });

2. Reusable

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

import { AppModule } from './app/app.module';
import { PlatformRef } from '@angular/core';
import { CONFIG } from './app/config.token';

async function bootstrapWithConfig(
  configPath: string,
  ...args: Parameters<PlatformRef['bootstrapModule']>
) {
  const res = await fetch(configPath);
  const config = await res.json();

  return platformBrowserDynamic([
    { provide: CONFIG, useValue: config },
  ]).bootstrapModule(...args);
}

bootstrapWithConfig('config.json', AppModule).catch(console.error);

3. Standalone API

import { CONFIG } from './app/config.token';
import {
  ApplicationConfig,
  bootstrapApplication,
} from '@angular/platform-browser';
import { AppStandaloneComponent } from './app/app-standalone.component';

async function bootstrapWithConfig(
  configPath: string,
  ...args: Parameters<typeof bootstrapApplication>
) {
  const res = await fetch(configPath);
  const config = await res.json();

  const options: ApplicationConfig = args[1] ?? { providers: [] };

  return bootstrapApplication(args[0], {
    ...options,
    providers: [
      ...options.providers,
      {
        provide: CONFIG,
        useValue: config,
      },
    ],
  });
}

bootstrapWithConfig('config.json', AppStandaloneComponent).catch(console.error);

4. SSR

server.ts

server.get('*', (req, res) => {
    res.render(indexHtml, {
      req,
      providers: [
        { provide: APP_BASE_HREF, useValue: req.baseUrl },
        provideConfig(
          JSON.parse(
            readFileSync(join(__dirname, '../browser/config.json'), {
              encoding: 'utf-8',
            })
          )
        ),
      ],
    });
  });

app.server.module.ts

import { NgModule } from '@angular/core';
import {
  ServerModule,
} from '@angular/platform-server';
import { ENVIRONMENT_INITIALIZER, inject } from '@angular/core';
import { CONFIG } from './config.token';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

export function provideSsrConfig() {
  return {
    provide: ENVIRONMENT_INITIALIZER,
    useValue() {
      const config = inject(CONFIG);
      const document = inject(DOCUMENT);
      const script = document.createElement('script');
      script.type = 'text/javascript';

      script.text = `
      	config = ${JSON.stringify(config)}
      `;

      document.head.insertBefore(script, document.head.firstChild);
    },
    multi: true,
  };
}

@NgModule({
  imports: [AppModule, ServerModule],
  bootstrap: [AppComponent],
  providers: [provideSsrConfig()],
})
export class AppServerModule {}

main.ts (could be used like this in the AppModule as well)

function bootstrap() {
  platformBrowserDynamic([
    {
      provide: CONFIG,
      useValue: (global as any)['config'],
    },
  ])
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
}

if (document.readyState === 'complete') {
  bootstrap();
} else {
  document.addEventListener('DOMContentLoaded', bootstrap);
}

and then you can reference your config in global.config as it will be init'ed in the <head> via a script.

Repo: https://github.com/yharaskrik/angular-load-config-demo

[pjlamb12]

This is one way I figured out to do it, which is very similar to what is happening now but the config is available as an Injection Token:

7908931

@yharaskrik what do you think?

[yharaskrik]

I don't think that solves your problem of wanting it available during bootstrap, so you still won't be able to use the config during AppModule/AppComponent initialization process.

[pjlamb12]

Yes that's true. I'm gonna try some of your suggestions as well and see how that goes.

[yharaskrik]

Added an SSR example.

[pjlamb12]

So options 1-3 above can be used just like my example, but can they also be used in the NgModule decorator? They can't be injected there, can they? If they can that's great; If you can't use the config object like this:

@NgModule({
  MyModule.forRoot({ someValue: CONFIG.vaue })
})

Then the commit I have above results in really the same experience and they don't have to change anything about the bootstrap process.

[yharaskrik]

Yes and no. So If you do one of Option 1-3 the config will be in the Injector as the time AppModule gets resolved. This means there are a couple of things you can do.

1. If you control the module yourself then you can use the injection token like this:

@NgModule({})
class MyModule {
  static forRoot() {
    return {
     ngModule: MyModule,
     providers: [ { provide: MyService, useFactory: () => {
       const config = inject(MY_CONFIG);
       return new MyService(config)
     }} ]
    }
  }
}

Since it is in the injector you can use it like you normally would with the DI system (since it is supplied in the Injector as part of the bootstrap). You could use it with EnvironmentInjectors or APP_INITIALIZERS etc.

2. If you do not control the module, this gets a little tricker but if the library is configurable through a DI token then you could do something like

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [
        {
            provide: LIBRARY_CONFIG_TOKEN,
            useFactory: () => {
                const myConfig = inject(CONFIG);
                
                return {
                    /// construct the library config from myConfig
                }
            }
        }
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

Might be some other options I am not thinking of.

[dgp1130]

Drive by comment without a whole lot of context, one idea I had some time ago was about having the CLI or Universal write some configuration into the HTML (maybe <template data-ng-config>{ "foo": "bar" }</template>) and then having a service which reads from this state into a configuration object. Then it's just up to the server to render out that configuration. This has the benefits of:

1. Can be done at build time, serve time, or a mix of both.
2. Can use any server implementation.
3. Universal / Node servers could have a library to make this even easier, though it wouldn't be strictly required to use.
4. Can load the config synchronously, since you don't have to make a network request.

My biggest problem with this is just that there's no easy way to make the types sound. You just have to hope the MyConfigObject type matches what was rendered to the page. A Universal / Node API could possibly make this a little more safe at least, but not everyone will be able to use that.

Not sure if that's in line with the direction for this particular library (or even this discussion), but something to think about.