How to Configure Angular Modules Loaded by the Router

ABP Framework Angular UI has some built-in modules, each of which is a separate npm package. Every package has an exported module that can be loaded by the router. When loaded, these modules introduce several pages to the application via child routes.

To allow a degree of customization, we have an extensibility system, and this requires configuration. So, a question arises: How can we configure modules loaded by loadChildren? It may look like a requirement specific to our use case, but I believe the method described here may help other subjects.

The Setup

Here is a mere module that attaches a simple component to the path the router loads it.

import { Component, Inject, InjectionToken, NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";

export const FOO = new InjectionToken<string>("FOO");

@Component({
  selector: "app-foo",
  template: "{{ foo }} works!"
})
export class FooComponent {
  constructor(@Inject(FOO) public readonly foo: string) {}
}

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: "",
        component: FooComponent
      }
    ])
  ],
  declarations: [FooComponent],
  providers: [
    {
      provide: FOO,
      useValue: "foo"
    }
  ]
})
export class FooModule {}

Let's load this module with the router.

import { Component, NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { FooModule } from "./foo.module";

@Component({
  selector: "app-root",
  template: "<router-outlet></router-outlet>"
})
export clas