Compile-time vs. Runtime configuration of your Angular App

When you develop a bigger application, chances are quite high that you need some kind of configuration. That can range from simply visualizing the app's version number to injecting custom themes etc. In Angular you have different kind of approaches: compile-time and runtime configurations. Let's take a look at both of them.

Read the entire article here »

TL;DR

Compile-time configuration

When using the compile-time approach we're basically adding the configuration flags into the environment.ts and environment.prod.ts files that come generated with any Angular CLI setup. You can find them in the environments folder.

Based on the build command we're invoking, Angular replaces the configuration files, basically for the production environment it will overwrite the environment.ts file with the environment.prod.ts file. As such in our code we can simply import the file like...

import { environment } from '../environment/environment';

// do something meaningful with `environment`
console.log(environment);

..and do something meaningful with our configuration. We can also configure additional environments (besides dev and production). Just make sure to adjust the angular.json file properly to take care of these new environments.

Runtime configuration

Compile-time also means you need to recompile your app for each environment. This isn't always desirable, like when moving from dev to staging to production. You don't want to recompile each time (which might introduce new errors potentially). For implementing runtime configuration we can make use of the APP_INITIALIZER. It's a function we can configure on the AppModule and which allows us to return a Promise. The module will only bootstrap after the Promise resolves.

const appInitializerFn = () => {
  return () => {
    return new Promise((resolve, reject) => {
      ...
    });
  };
};

@NgModule({
  imports:      [ BrowserModule, FormsModule, SomeModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFn,
      multi: true
    }
  ]
})
export class AppModule {...}

To read more about how the APP_INITIALIZER works, check out the full blog post using the link below 😃.

Get all the details..

Read more »