I'm trying to set my LOCALE_ID token before my angular app bootstraps by using the documentation method:

import { LOCALE_ID } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [{provide: LOCALE_ID, useValue: 'fr-FR' }]
});

When checking the token in my AppModule's constructor, it seems like it's been reset to defaults

export class AppModule {
    constructor(@Inject(LOCALE_ID) private locale: string) {
        console.log('Locale - App module', this.locale);
    }
}

Outputs: Locale - App module en-US

What am I missing here ?

Here is a Stackblitz reproducing the issue:

I'm trying to set my LOCALE_ID token before my angular app bootstraps by using the documentation method:

import { LOCALE_ID } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [{provide: LOCALE_ID, useValue: 'fr-FR' }]
});

When checking the token in my AppModule's constructor, it seems like it's been reset to defaults

export class AppModule {
    constructor(@Inject(LOCALE_ID) private locale: string) {
        console.log('Locale - App module', this.locale);
    }
}

Outputs: Locale - App module en-US

What am I missing here ?

Here is a Stackblitz reproducing the issue: https://stackblitz./edit/angular-2rdtb6

• javascript
• angular
• locale

• If your AppModule imports another module that provides this token, then it will overwrite the providers from bootstrapping. – Reactgular Commented Jul 24, 2019 at 14:04
• It's the first time we're introducing the token in the project, so it shouldn't be the cause – Alex Commented Jul 24, 2019 at 14:08
• You're going to have to create a reproducible example with stackblitz, because all you've provided is the documentation example. Which is assumed to work, and if it doesn't then you should open a bug report. Otherwise, I don't see how people can answer this. – Reactgular Commented Jul 24, 2019 at 14:11
• Edited the question with a stackblitz example – Alex Commented Jul 24, 2019 at 14:25

2 Answers 2

You should be passing providers to platform injector not to piler injector:

platformBrowserDynamic([ {provide: LOCALE_ID, useValue: 'fr-FR' }])
                                          \/
                                    extraProviders
  .bootstrapModule(AppModule);  

Beware that to test it in stackblitz you have to reload application since Angular creates platform only once.

See also:

• What you always wanted to know about Angular Dependency Injection tree

You can try just set the provider in app.module.ts

@NgModule({
  providers: [
    {
       // your objects here
    }
  ]
})