[How to Configure Angular Modules Loaded by the Router] A simple module with routing #blog #angular

foo.module.ts

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 {}