Injecting a value as a service with useValue and OpaqueTokens

In Angular 1, there was a broad selection of service types you could use in your application. A subset of these types allowed you to inject a static value instead of a service instance, and this useful ability is continued in Angular 2.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/3032/.

Getting ready

Begin with the following simple application:

[app/app.module.ts] 
 
import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {RootComponent} from './root.component'; 
import {ArticleComponent} from './article.component'; 
 
@NgModule({ 
  imports: [ 
    BrowserModule 
  ], 
  declarations: [ 
    RootComponent, 
    ArticleComponent 
  ], 
  bootstrap: [ 
    RootComponent 
  ] 
}) 
export class AppModule {} 
[app/root.component.ts] &...