Miguel Miguel - 2 years ago 465
TypeScript Question

Singleton service in Angular 2

I'm little confused about singleton services on Angular 2. I need a translate service in whole application, and I want there is only one instance of the service. I have two buttons to switch the language. When i run the app, I use a pipe to translate content and it works, but the switch buttons don't work. I get an error message:

self.parent.context.use is not a function'.

I guess it's all about some misunderstood about some angular concepts so, anyone can help me to implement a global service correctly?

//Translation service
export class TranslateService {
private _currentLang: string;

this._currentLang = 'es';

public get currentLang() {
return this._currentLang;

public use(lang: string): void {
// set current language
this._currentLang = lang;

private translate(obj : LocalizedData): string {
// private perform translation
return obj[this._currentLang];

public instant(obj: LocalizedData ) {
// call translation
return this.translate(obj);

//Navbar Module
imports: [ CommonModule, FormsModule],
declarations: [ NavbarMenuComponent, TranslatePipe],
exports: [ NavbarMenuComponent]

export class NavbarModule { }

//App component
selector: 'app',
template:'<navbar-menu ></navbar-menu>'

export class AppComponent implements OnInit{
public translatedText : string;

//app Module
imports: [ BrowserModule, FormsModule, NavbarModule],
declarations: [ AppComponent],
bootstrap: [ AppComponent],
providers: [ TranslateService],

export class AppModule { }

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule,[ TranslateService]);

Answer Source

In Angular2 services are singletons per provider. If you provide a service multiple times, you'll get multiple instances.

If you provide it in

  providers: [SomeService]

then it will be provided at the root scope and you'll get a single instance for your whole application. Even when more than one @NgModule() contains a service in providers, you'll get only one instance because they are hoisted in the application root scope.

Lazy loaded modules have their own root scope.

If you provide a service in @Component() every such component instance and it's children will get a different service instance.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download