Angular-cli: Setup LOCALE_ID in provider without i18n building options

Created on 14 Jun 2017  路  3Comments  路  Source: angular/angular-cli

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.


@angular/cli: 1.1.1
node: 7.7.3
os: darwin x64
@angular/common: 4.2.2
@angular/compiler: 4.2.2
@angular/core: 4.2.2
@angular/forms: 4.2.2
@angular/http: 4.2.2
@angular/platform-browser: 4.2.2
@angular/platform-browser-dynamic: 4.2.2
@angular/router: 4.2.2
@angular/cli: 1.1.1
@angular/compiler-cli: 4.2.2

Repro steps.

First of all, i don't want to use angular i18n logic from the box, because it's not cover some cases, i prefer ng2-translate. But anyway i wan't to use LOCALE_ID for Pipes because it's in core. And here is the problem:
Problem similar to #6618, But without using i18n angular translation build.
Heres is examples:

LOCALE_ID in AppModule

import {LOCALE_ID} from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [{provide: LOCALE_ID, useValue: 'fr-FR'}],
  bootstrap: [AppComponent]
})
export class AppModule { }

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'app works!';

  constructor(@Inject(LOCALE_ID) locale: string){
    console.log('locale', locale);
  }

}

This works, fine in: ng serve,ng build, ng build --prod
And in console we get _fr-FR_ value

If change provider to this (pass value from global namesapce)

providers: [{provide: LOCALE_ID, useValue: window['MY_LOCALE']}],

This works, fine only in: ng serve,ng build
Problem in: ng build --prod in console output _null_
Plus errors throws like: _Cannot convert undefined or null to object_, for Pipes

LOCALE_ID in Bootstrap

platformBrowserDynamic().bootstrapModule(AppModule, {providers: [{provide: LOCALE_ID, useValue: 'fr-FR'}]});
This is not workig in _ng serve,ng build,ng build --prod_ Result always is _en-US_ Ofcourse if pass value from global namesapce

platformBrowserDynamic().bootstrapModule(AppModule, {providers: [{provide: LOCALE_ID, useValue: window['MY_LOCALE']}]});
The same problem. ### The log given by the failure. Like in issue #6618
ERROR TypeError: Cannot convert undefined or null to object
    at new DateTimeFormat (native)

Actually this happens for all Pipes, that uses localization inside

Desired functionality.

_ng build --prod_ command should not ignore my variable from global namespace, or some solution to pass variable to LOCALE_ID, without using i18n build

Mention any other details that might be useful.

This works (provide in AppModule), fine only in: _ng serve, ng build_
Problem only in: _ng build --prod_

2 (required) broken

Most helpful comment

Hello,

there is an open issue in the angular repo about the fact that LOCALE_ID is not provided into the main injector in JIT like it is in AOT: https://github.com/angular/angular/issues/16960

Until this bug is fixed, the workaround is to provide it 2 times, both to the platformBrowserDynamic and to the bootstrapModule methods:

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

Please note that LOCALE_ID has to be provided at bootstrap, because it is used by the compiler. You cannot provide it in another module later if you want angular to use it correctly (for the date pipe for example). If you don't care about angular, then you can provide it later, it just will be available in the injection tree like any other token

For build / serve with AOT you should just use --locale in the cli

All 3 comments

Hello,

there is an open issue in the angular repo about the fact that LOCALE_ID is not provided into the main injector in JIT like it is in AOT: https://github.com/angular/angular/issues/16960

Until this bug is fixed, the workaround is to provide it 2 times, both to the platformBrowserDynamic and to the bootstrapModule methods:

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

Please note that LOCALE_ID has to be provided at bootstrap, because it is used by the compiler. You cannot provide it in another module later if you want angular to use it correctly (for the date pipe for example). If you don't care about angular, then you can provide it later, it just will be available in the injection tree like any other token

For build / serve with AOT you should just use --locale in the cli

workaround is to provide it 2 times, both to the platformBrowserDynamic and to the bootstrapModule

Works perfectly.
Thank you!

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

IngvarKofoed picture IngvarKofoed  路  3Comments

sysmat picture sysmat  路  3Comments

hartjo picture hartjo  路  3Comments

gotschmarcel picture gotschmarcel  路  3Comments

rwillmer picture rwillmer  路  3Comments