Angular2, Injecting contants

Question

I am doing like this:

import {testInjection} from './ts/models';
import {bootstrap} from 'angular2/platform/browser'; 

bootstrap(AppComponent, [testInjection]).catch(err => console.error(err));

in models.ts

let TEST:string = "test";

export var testInjection: Array<any>=[
    bind(TEST).toValue(TEST)
];

and then in AppComponent:

class export AppComponent{
constructor(
 public http: Http,
    @Inject(TEST) TEST:string
    ){

  }
}

but getting this error: error TS2304: Cannot find name 'TEST'. Could someone just point me what I am doing wrong.

tnx

score 0 · Answer 1 · answered May 15 '16 at 15:51

you are doing in wrong way , make a Service

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

import { testInjection } from './models';

@Injectable()
export class TestService {
  getTestValue() {
    return testInjection;
  }
}

And in your AppComponent

import {TestService} from './test.service'
class export AppComponent{
constructor(
 public http: Http, _testService : TestService){
     console.log(_testService.getTestValue());
  }
}

In Angular2 you only need to use @Injecatable , and it should be used in the service. And in the component you just have to DI :) . hope it helps you

score 0 · Answer 2 · answered May 15 '16 at 16:13

Your are trying to use modal for your code , just for type checking , if you are using as you used in question you don't need to use @inject,

Better way to create single service in which you can check types, call methods and do whatever you want, now if you are going to create a service than it is necessary to provide at least one decorator, either you can @Component or you can use @Injectable. like this -

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

@Injectable()
export class TestService {
  name:string =null;
  email:string =null;
 ...///
  constructor(){
   //do your stuff
  }
}

or you can also use this like this -

import { Component } from './@angular/core';

    @Component({
       selector: 'testService'
    })
    export class TestService {
      name:string =null;
      email:string =null;
     ...///
      constructor(){
       //do your stuff
      }
    }

PS: - It is necessary to decorate class with at least one decorator

now by doing so you have successfully create one class, now if this class is being used in multiple components you can inject this at the time of bootstrap like this -

bootstrap(AppComponent, [TestService]).catch(err => console.error(err));

now if you inject your service while bootstrap, you dont need to provide this every time in the list of providers because angular automatically create instance of this service for each component,

But if you have't Inject your service while bootstrap than you need to import your service and also need to inject in the list of providers than you are able to use it like this : -

import { Component } from './@angular/core';
import { TestService } from './TestService';    

    @Component({
       selector: 'testService',
       providers: [TestService]
    })
    export class AppComponent {
      constructor(private service : TestService){
        this.service.blabla   //now you are able to use your service here
      }
    }

Hope this one clear some points regarding Injection in Angular2.

Angular2, Injecting contants

2 Answers2