Angular 2依赖注入 - 服务注入某些组件但不是全部

Question

I am working to an Angular 2 application which has only one module with several services registered as providers at bootstrap. The application has also several components in the same module which are using these services.

All components are receiving the services using DI (services are declared as parameters in construtor).

The problem that I am facing is: the same service is correctly injected in some components but in other no.

I checked the Injector object for the components where the injection fails and the services instances are within the Injector object. What it fails is the searching with the Injector.get() method. The token provided as parameter is different from the token stored in the Injector dictionary. I am not able to find out why because I am using the class name of the service and the token is automatically generated by the Javascript engine from this class name.

I tried to use OpaqueTokens to control the injection and, again, even if I am using the same opaque token, when Injector.get() method is called, the token provided by argument is considered different from the token stored by injector.

A short fragment from the code looks like

myservice.service.ts

import { OpaqueToken } from '@angular/core'

export const BACKEND = new OpaqueToken('backend');

app.module.ts

import { BACKEND } from 'myservice.service'
...
providers: [{ provide: BACKEND, useValue: "TestValue" }]

mycomponent.component.ts

import { Component, Inject } from '@angular/core'
import { BACKEND } from 'myservice.service'

@Component(
{
selector:'mycomponent'
templateUrl: ...
})
export class MyComponent
{
  constructor(@Inject(BACKEND) config: string) {
    console.info(JSON.stringify(config));
  }
}

This injection with BACKEND token works for some components but for other not (the empty {} object is injected). I tried to debug the Javascript code in browser and it looks like the Injector is called with a different token than the token from dictionary (they are looking the same, with the same name 'backend' but still different and === returns false).

Note: I am using Angular 2.4.2, Typescript 2.1 with 'commonjs' modules and 'node' module resolution. systemjs is used as module loader.

Please, can you provide some ideeas about how to fix this?

Thanks,

Answer 1

• Do you have various declarations of providers from different modules/components? For every declaration inside the providers array, angular will create a new instance of these services.

• Do you have included the parentheses in the @Injectable decorator? https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#injectable