Platform browser dynamic providers not used

Question

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.com/edit/angular-2rdtb6

Answer 1

You should be passing providers to platform injector not to compiler 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