How to change NgModule configuration at runtime

Question

There are some modules that expose their service configuration, for example:

• AngularFireModule.initializeApp(firebaseConfig),
• StoreModule.provideStore(reducer),
• RouterModule.forRoot(routes)...

How would I reconfigure one of these at runtime? For example, user selects one of two links and different module is lazy loaded and configured differently... How can I pass data to this new NgModule?

All I can think of is to put something in global scope and read it from there, but... doesn't feel right :)

Answer 1

Providers can't be modified after the injector was created.

You can create a service that provides different instances depending on status.

@Injectable()
class ProviderService {
  constructor(injector:Injector) {}

  set firebaseConfig(firebaseConfig) {
    let resolvedProviders = ReflectiveInjector.resolve([AngularFireModule.initializeApp(firebaseConfig)]);
    this.childInjector = ReflectiveInjector.fromResolvedProviders(resolvedProviders, this.injector);    
  }

  get firebase ():AngularFireModule {
    return this.childInjector.get(AngularFireModule);
  }
}

and then use it like

class MyComponentOrService {
  constructor(provider:ProviderService) {}

  changeFirebase() {
    this.provider.firebaseConfig = ...;
    this.fb = this.provider.firebase;
  }

  doSomething() {
    this.fb.xxx();
  }
}