What is in Angular 2 Opaque Token and What’s the Point?

by

update Angular4

In Angular4 OpaqueToken is deprecated and will be replaced by InjectionToken.
InjectionToken allows to pass a generic type parameter.

export let APP_CONFIG = new InjectionToken<MyConfig>("app.config");

See also

original

What? What’s an Angular2 token to begin with?

What’s an Opaque Token? What is it used for?

A token is a key for providers of Angulars dependency injection.
Providers are registered with a key and components, directives, and service classes instantiated by DI get dependencies injected which are looked up by provider keys.

DI supports types, strings, OpaqueToken and objects as keys.

export let APP_CONFIG = new OpaqueToken("app.config");

export let APP_CONFIG_2 = {};

providers: [
  MyService, // type is key and value
  {provide: MyService, useClass: MyFancyServiceImpl}, // type is key, `MyFancyServiceImpl` is the value (or rather the information how to create the value
  {provide: 'myservice', useClass: MyService}, // key is a string
  {provide: APP_CONFIG, useValue: {a: 'a', b: 'b'}} // key is an `OpaqueToken`
  {provide: APP_CONFIG_2, useValue: {a: 'a', b: 'b'}} // key is an object

]

// one of these decorators needs to be added to make DI work
@Injectable()
@Component()
@Directive()
@Pipe()
class MyComponent {
  // DI looks up a provider registered with the key `MyService` 
  constructor(private myService: MyService) {} 

  // Same as before but explicit
  constructor(@Inject(MyService) private myService: MyService) {} 

  // DI looks up a provider registered with the key 'myService'
  constructor(@Inject('myservice') private myService: MyService) {} 

  // DI looks up a provider registered with the `OpaqueKey` `APP_CONFIG`
  constructor(@Inject(APP_CONFIG) private myConfig: any) {} 

  // DI looks up a provider registered with the object `APP_CONFIG_2`
  constructor(@Inject(APP_CONFIG_2) private myConfig: any) {}

The object key (APP_CONFIG_2) and the OpaqueToken (APP_CONFIG) need to be the exact same instance. A different instance with the same content won’t work. This makes it easy to look up where the key is declared and whether the provider and the injection target use the same key.

For a string it can be a different instance, this brings the risk, that the same string value is used in different modules and might cause conflicts or the wrong provider being injected.

More Related Contents:

  1. Use component from another module
  2. How to show a loading spinner while waiting on an observable getting data from a service in Angular
  3. How to get reference of the component associated with ElementRef in Angular 2
  4. Why use “?” operator in template binding?
  5. angular2 manually firing click event on particular element
  6. How can I watch for changes to localStorage in Angular2?
  7. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  8. async/await in Angular `ngOnInit`
  9. Connect Angular application with ReactJS app?
  10. Get Value From Select Option in Angular 4
  11. How to undo Angular 2 Cli ng-eject?
  12. Angular2 How to navigate to certain section of the page identified with an id attribute
  13. CORS issue with Google Oauth2 for server side webapps
  14. angular2 – infinite loop when i call method from a Angular 2 class inside template
  15. How to smooth scroll to page anchor in angular 4 without plugins properly?
  16. How to make CORS-enabled HTTP requests in Angular 2?
  17. Angular – res.json() is not a function
  18. Angular 2 + Ionic 2: Detect if an object was modified
  19. Http.get() working but not working in build(Release/Debug) in Ionic 4
  20. inject() must be called from an injection context
  21. Angular firebase email verification false after verify
  22. Property ‘of’ does not exist on type ‘typeof Observable [duplicate]
  23. How to enable production mode?
  24. Angular2 router (@angular/router), how to set default route?
  25. Angular2 ngFor OnPush Change Detection with Array Mutations
  26. How to correctly import operators from the `rxjs` package
  27. Syntax Error in Angular App: Unexpected token
  28. Angular 2 creating reactive forms with nested components
  29. Angular4 Load external html page in a div
  30. angular2: http post not executing

Leave a Comment