在main.ts和app.module中使用相同的服务实例化（到处都是单个）

Question

I have a service named "LocaleService" provided in 'root' which contains all my locale logic.

This service init the localization of the app and provide some functions about locales.

I have to initialize this service in the main.ts to make the angular locale works

Here my initialization :

var injector = ReflectiveInjector.resolveAndCreate([LocaleService]);
var localeService : LocaleService = injector.get(LocaleService)


platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    { provide: TRANSLATIONS, useValue: localeService.translations },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
    { provide: LOCALE_ID, useValue: localeService.locale },
  ]
})
  .catch(err => console.log(err));

The problem is that the service get instanced a second time when used in my one of my component like this :

  constructor(private localeService : LocaleService, private userEndpoint: UserEndpoint) { }

  ngOnInit() {

    alert(this.localeService.locale);

    this.user = new User();

     this.userEndpoint.getCurrentUser().subscribe(u =>{
       this.user = u;
     })


  }

I wish that my bootstrap providers would carry the same instance everywhere but it doesn't.

Is there a way to carry the same instance i created in main.ts over all my application ?

Here is my service :

import { Injectable } from '@angular/core';
import { loadMessages, locale } from 'devextreme/localization';
import { registerLocaleData } from '@angular/common';
import localeFRCA from '@angular/common/locales/fr-CA';
import config from "devextreme/core/config";
import "devextreme-intl";

declare const require;

@Injectable({providedIn:'root'})
export class LocaleService {

  translations : string;
  locale : string;

  constructor(){

    //Default currency CAD
    config({defaultCurrency:"CAD"});
    //register angular locale frCA
    registerLocaleData(localeFRCA);

    let dxMessageFR = require("devextreme/localization/messages/fr.json");
    loadMessages(dxMessageFR);

    this.locale = localStorage.getItem('locale');
    if (!this.locale) {

      if (navigator.language.toUpperCase().indexOf("FR") !== -1)
      this.locale = "fr-CA";
      else
      this.locale = "en-CA";

      localStorage.setItem('locale', this.locale);

    }
    //set devextreme intl language for dev extreme widget;
    locale(this.locale);

    this.translations = require(`raw-loader!../../locale/messages.${this.locale}.xlf`);
  }


}

Answer 1

the "problem" is

@Injectable({providedIn:'root'})
export class LocaleService {
...

the providedIn: 'root' tells Angular to provide that service for the whole application.
This is a new feature in Angular 6, that needs a bit time to get familar with. :-)

You provide your service a second time in your module.

platformBrowserDynamic().bootstrapModule(AppModule, {
    providers: [
    { provide: LocaleService, useValue: localeService},
    { provide: TRANSLATIONS, useValue: localeService.translations },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
    { provide: LOCALE_ID, useValue: localeService.locale },
  ]
})

Use only one of both versions and happines will be yours. :-)

warm regards

Answer 2

I ended up using a global static class instead of injection. Only thing i have to do is call my init method in the main.ts like this :

LocaleService.init();

Now i can import my service anywhere i needed too :

import { LocaleService } from './app/services/locale.service';

Here my class :

export class LocaleService {

  static translations : string;
  static locale : string;

 static init(){

   //Default currency CAD
   config({defaultCurrency:"CAD"});
   //register angular locale frCA
   registerLocaleData(localeFRCA);

   let dxMessageFR = require("devextreme/localization/messages/fr.json");
   loadMessages(dxMessageFR);

   this.locale = localStorage.getItem('locale');
   if (!this.locale) {

     if (navigator.language.toUpperCase().indexOf("FR") !== -1)
     this.locale = "fr-CA";
     else
     this.locale = "en-CA";

     localStorage.setItem('locale', this.locale);

   }
   //set devextreme intl language for dev extreme widget;
   locale(this.locale);

   this.translations = require(`raw-loader!../../locale/messages.${this.locale}.xlf`);

 }

};