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

If your `AppModule` imports another module that provides this token, then it will overwrite the providers from bootstrapping. — Reactgular, Jul 24 '19 at 14:04
It's the first time we're introducing the token in the project, so it shouldn't be the cause — Alex, Jul 24 '19 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, Jul 24 '19 at 14:11

score 8 · Accepted Answer · answered Jul 24 '19 at 14:24

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

this is similar to `providedIn: platform`? – The.Wolfgang.Grimmer Jul 25 '21 at 08:04 — The.Wolfgang.Grimmer, Jul 25 '21 at 08:04

score -1 · Answer 2 · answered Jul 24 '19 at 14:07

-1

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

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

answered Jul 24 '19 at 14:07

Joe Lee

49
4

That way is working indeed ! I need to get the locale info from my API though, I was planning on using a fetch in the main.ts for that – Alex Jul 24 '19 at 14:10

Platform browser dynamic providers not used

2 Answers2