Recommended Free Tools
To make an additional locale variant available in an Angular application, import that locale’s module from @angular/common/locales/global in your startup code. The official guide’s example for French is import '@angular/common/locales/global/fr';. The import supplies the locale data. It does not automatically change the application’s active locale, which Angular controls separately through LOCALE_ID.
Add the global import to your startup code
The official guide describes a short, side-effect import. Follow these steps:
As an Amazon Associate I earn from qualifying purchases.
- Identify the exact locale ID you need. Use the Unicode locale identifier that matches your audience, such as
fr-FRorfr-CA. The next section explains why the exact ID matters. - Open the application’s entry point. In a standalone application this is usually
src/main.ts, which the guide uses as its example. In an NgModules application the guide says the import can go inapp.moduleinstead. - Add the import alongside your other top-level imports. For French, the guide’s example is:
import '@angular/common/locales/global/fr';- Rebuild and run the application. Because the import is a side-effect import, its effect is that the module loads when the entry point runs. Locale-sensitive output still depends on which locale the application uses, so check the next sections before assuming a formatting change.
Angular’s initial installation already includes locale data for en-US. If your application only needs that default, you do not need a global import for it.
Choose the locale ID, not a label guessed from the audience
Angular identifies locales with Unicode locale identifiers based on BCP 47. The identifier encodes a language and a region, and regional variants can differ in date, number, currency, and punctuation conventions, as well as in grammar. The Angular locale-ID guide uses examples such as en-CA, en-US, fr-CA, and fr-FR to show this.
#1 Best Overall
Pick the identifier that matches the formatting and language your users need. Writing fr because the audience speaks French, when the product targets Quebec or France, can produce different results from the regional variant. Import the package module that corresponds to the identifier you intend to use.
Understand what each mechanism controls
Three related mechanisms are often confused. The table below separates what each one does.
| Mechanism | What it does | Where it is configured | Changes the active locale automatically? |
|---|---|---|---|
Global variant import (@angular/common/locales/global/…) |
Makes the locale data for one locale available to Angular | Application source, such as main.ts or app.module |
No. The import supplies data only. |
LOCALE_ID injection token |
Sets the locale used by i18n extraction, DatePipe, DecimalPipe, CurrencyPipe, PercentPipe, I18nPluralPipe, and ICU expressions |
Angular dependency injection, as documented in the LOCALE_ID API reference | It is the value that determines the active locale. Set it deliberately. |
ng build --localize |
Generates translated, locale-specific application variants. The CLI includes locale data and sets LOCALE_ID for each localized build. |
Workspace configuration (angular.json) and the localize build option |
Yes, for each generated variant. |
In short, the global import makes data available, LOCALE_ID selects the locale, and the CLI’s localized build handles both for each translated output. Use the explicit import when you need a locale’s data in a single application build. Use the CLI workflow when you are shipping translated copies of the app.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Build translated variants with --localize
When you need separate translated builds, define the source locale and the target locales in your workspace configuration. Then run the build with the localize option or with ng build --localize. The CLI registers the locale data and emits one output variant per locale. The guide to merging translations into the application explains this flow in detail.
Rank #3
The development server supports only one localized locale at a time. If you need to preview several translated variants, build and serve them separately rather than expecting the dev server to switch between them.
Register locale data explicitly with registerLocaleData
Angular also exposes registerLocaleData(data, localeId?, extraData?) for registering locale data in code. The API page describes its purpose in one line: “Register global data to be used internally by Angular.” The older two-argument form, registerLocaleData(data, extraData?), has been deprecated since v5.1. Do not use it in new code. Pass the locale ID as the second argument so the registration is explicit. See the registerLocaleData API page for the current signature.
Troubleshooting checklist
- Dates or numbers still follow
en-US: the global import does not change the active locale. Check the value provided forLOCALE_ID. - Output looks like the wrong regional variant: confirm you imported the module for the exact identifier you need, such as
fr-CArather thanfr. - A registration call uses two arguments: move to the locale-ID form of
registerLocaleData, since the two-argument signature is deprecated. - Instructions differ from your project: confirm the import path and API against the documentation for your installed Angular version. Guidance can change between releases.
- Several translated variants are needed during development: the dev server serves one localized locale at a time, so build each variant separately.
Sources for the statements above are Angular’s official documentation: the guide to importing global variants of locale data, the locale-ID guide, the merge guide, the LOCALE_ID API, and the registerLocaleData API.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Frequently Asked Questions
Do I need a global import for en-US?
No. Angular’s initial installation already includes locale data for en-US, so a global import is only needed for other locales.
Quick Recap
The Bottom Line
“”
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
