Hi, I can not find locale for pt-BR on angular 5

[AcciolyDSI]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Hi, I can not find locale for pt-BR on angular 5

Minimal reproduction of the problem with instructions

providers: [
{ provide: LOCALE_ID, useValue: 'pt-PT'}
]

Error: Missing locale data for the locale "pt-BR"

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.0.0

[sarunint]

Please read https://angular.io/guide/i18n#i18n-pipes

By the way, the issue tracker is not a place for support requests. Please ask for such requests at StackOverflow and tag the question with angular tag.

[Toxicable]

pt-BR dosen't appear to exist in out Locales as you can see here https://github.com/angular/angular/tree/master/packages/common/locales

cc @ocombe

[ocombe]

Hello, according to CLDR Portuguese (Brazil) [pt_BR] is the default content locale for Portuguese [pt], which means that you should import from "pt".

See this example: https://stackblitz.com/edit/angular-moddkn?file=app%2Fapp.module.ts

As you can see here: https://github.com/angular/angular/blob/master/packages/common/locales/pt.ts#L45 the currency for "pt" is "Real brasileiro" which is the currency from Brazil.
The reason why "pt" is not Portuguese from Portugal (and that they should use "pt-PT" instead) is probably that there are more people in Brazil making it the country with the most people speaking Portuguese .

[gandarez]

I added both LOCAL_ID and called the registerLocaleData(locale) to get it working properly.

import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';

registerLocaleData(localePt);

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'pt-BR' }    
  ]  
})
export class AppModule { }

[ocombe]

You should be able to do:

import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';

registerLocaleData(localePt, 'pt-BR');

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'pt-BR' }    
  ]  
})
export class AppModule { }

This will make sure that you register the locale with the exact LOCALE_ID that you defined

[JoseRFJuniorLLMs]

import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { registerLocaleData } from '@angular/common';
import ptBr from '@angular/common/locales/pt';
registerLocaleData(ptBr)

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

[webjoaoneto]

@ocombe nice example, works fine.
We need to register the locale within the module.

import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import ptBr from '@angular/common/locales/pt';
registerLocaleData(ptBr)

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

From the example: https://stackblitz.com/edit/angular-moddkn?file=app%2Fapp.module.ts

[fabiulous]

Default Portuguese locale should be pt-PT, there's no valid reason for it to be pt-BR.

[ocombe]

We follow the rules of CLDR on this, if you have an issue with their choices, you can open an issue here: http://cldr.unicode.org/index/bug-reports

[netstart]

Angular pipes can help you with internationalization: the DatePipe, CurrencyPipe, DecimalPipe and PercentPipe use locale data to format data based on the LOCALE_ID.

By default, Angular only contains locale data for en-US. If you set the value of LOCALE_ID to another locale, you must import locale data for that new locale. The CLI imports the locale data for you when you use the parameter --locale with ng serve and ng build.

If you want to import locale data for other languages, you can do it manually:

src/app/app.module.ts
content_copy
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeFr);
The files in @angular/common/locales contain most of the locale data that you need, but some advanced formatting options might only be available in the extra dataset that you can import from @angular/common/locales/extra. An error message informs you when this is the case.

src/app/app.module.ts
content_copy
import { registerLocaleData } from '@angular/common';
import localeFrCa from '@angular/common/locales/fr-CA';
import localeFrCaExtra from '@angular/common/locales/extra/fr-CA';

registerLocaleData(localeFrCa, localeFrCaExtra);

LOCALE NAME	OLD LOCALE ID	NEW LOCALE ID
Indonesian	in	id
Hebrew	iw	he
Romanian Moldova	mo	ro-MD
Norwegian Bokmål	no, no-NO	nb
Serbian Latin	sh	sr-Latn
Filipino	tl	fil
Portuguese Brazil	pt-BR	pt
Chinese Simplified	zh-cn, zh-Hans-CN	zh-Hans
Chinese Traditional	zh-tw, zh-Hant-TW	zh-Hant
Chinese Traditional Hong Kong	zh-hk	zh-Hant-HK

To portugues, you can use this snippet, beleza 👍 ?

import {NgModule, LOCALE_ID} from '@angular/core';
import localept from '@angular/common/locales/pt';
import {HashLocationStrategy, LocationStrategy, registerLocaleData} from '@angular/common';
registerLocaleData(localept, 'pt');

  providers: [
    {provide: LOCALE_ID, useValue: 'pt'},
]

[lucasvrocha]

Hi, I have import the locate 'pt' like you show
The date is been formated (pt), but the CurrencyPipe still is 'en-US'.

app.module.ts

import localePT from '@angular/common/locales/pt';
import localeExtraPT from '@angular/common/locales/extra/pt';
import { registerLocaleData } from '@angular/common';
registerLocaleData(localePT, 'pt', localeExtraPT);

...
providers: [
		{ provide: LOCALE_ID, useValue: "pt" },
....

https://stackblitz.com/edit/angular-locale-pt?embed=1&file=app/app.module.ts

You have some idea?

[ocombe]

Do you have an example of this? Maybe on stackblitz?

[lucasvrocha]

Yes @ocombe, I writed an exemple now.
You can see that symbol dont change from $ to R$

https://stackblitz.com/edit/angular-locale-pt?embed=1&file=app/app.module.ts

[ocombe]

The currency itself doesn't change with the language, you have to use a different currency code for that (which is what you did in your stackblitz example). $5 is still 5$ in french for example, only the formatting changes. The pipe doesn't convert the value of the currency.

[mariohmol]

I really dont get this.. when i use the currency pipe like this it changes the $ to R$..

this.currencyPipe.transform(amount, 'BRL', true, '1.2-2');

Shouldnt this have the same behaviour?

[ocombe]

If you say that you want bresilian real (BRL) then the symbol is $R in english (to avoid the confusion with $ for american dollar).
The symbol will be different if you change the LOCALE_ID of your application (and load the locale data file for that locale, look at this guide to find out how to do that).

[angular-automatic-lock-bot]

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.}