CODEWITHSUNDEEP
angulartypescript
Nicolas D
Nicolas D

Reputation: 1222

Angular 2 inject a class into a service

I want to inject in my service a class with my config params.

I did the sample code below, but it is not working:

import { Config } from '../app.constants';

console.log(Config); // here i can access to my properties of config

@Injectable()
export class MyService {


  protected config: Config;

  constructor(protected _http: Http, @Inject(Config) _configuration: Config) {
    console.log(this.config); // undefined
    console.log(_configuration); // undefined
}

I think I didnt understood the scope and inject process of angular 2. How can I access to my class Config inside of my service MyService?

EDIT :

Here is my module

import { NgModule }      from '@angular/core';

import { MyService } from './my.service';
import { Config } from '../app.constants';


@NgModule({
  imports: [
  ],
  declarations: [
    MyService
  ],
  exports: [
    MyService
  ],
  providers: [
    MyService,
    Config
  ]
})
export default class MyModule {}

and here is my config : 

import { Injectable } from '@angular/core';

@Injectable()
export class Config {
  public Port: number = 1234;
  public Server: string = "http://my-server.com";
}

The service MyService is not directly called, but I extended it like that:

@Injectable() export class TestService extends MyService{ ... }

which is imported like that :

import { TestService } from '../service/test.service';
//some modules are from ng2-admin, we can ignore them
@NgModule({
  imports: [
    CommonModule,
    NgaModule,
    TestRouting
  ],
  declarations: [
    TestComponent,
    HoverTable
  ],
  exports: [
    TestComponent,
    HoverTable
  ],
  providers: [
    TestService
  ]
})
export default class TestModule {}

and finally my component 

@Component({
  selector: 'test-list',
  template: require('./test.html')
})
export class TestComponent {


   constructor(protected service: TestService) {
      //console.log(service);

   }

Upvotes: 0

Views: 1784

Answers (1)

JB Nizet
JB Nizet

Reputation: 692181

export class MyService {

  protected config: Config;

  constructor(protected _http: Http, @Inject(Config) _configuration: Config) {
    console.log(this.config); // undefined
    console.log(_configuration); // undefined
  }
}

You never initialize the config field anywhere, so it's undefined. All you need is

export class MyService {

  protected config: Config;

  constructor(protected _http: Http, _configuration: Config) {
    this.config = _configuration;
  }
}

Or simply

export class MyService {

  protected config: Config;

  constructor(protected _http: Http, protected config: Config) {
  }
}

Since MyService is a service, it must be added to the providers of your module, and not to the declarations (which is for components, pipes and directives):

@NgModule({
  providers: [
    MuleService,
    Config,
    MyService
  ]
})

If you want to only use TestService as a service, and not MyService, make sure that TestService has a constructor that takes all the arguments that must be injected, too:

constructor(http: Http, config: Config) {
  super(http, config);
}

Upvotes: 3

Related Questions