Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To make an additional locale variant available in an Angular application, import its module from @angular/common/locales/global in your startup code. The official guide uses French as its example: import '@angular/common/locales/global/fr';. Angular’s initial installation already includes locale data for en-US, so this import is needed for other locales.
What the global import does and does not do
A global variant import is a side-effect import. It has no exported value to use in your code; its job is to load locale data into Angular’s runtime so that Angular can apply that locale’s conventions when it formats values. The registerLocaleData API page describes this internal store in the same terms: it is global data “to be used internally by Angular.”
The import does not switch the application’s active locale on its own. Which locale Angular uses for pipes and i18n is controlled by the LOCALE_ID token, covered in the steps below. Keep the two concepts separate when you debug a locale problem: the import answers “is the data available?”, and LOCALE_ID answers “which data should be used now?”
How to import a global locale variant
- Pick the exact locale identifier. Use the identifier that matches your audience and the behavior you need, not a label guessed from a country or language name. The Refer to locales by ID guide explains the Unicode/BCP 47 identifier format and shows regional pairs such as
en-CAanden-US, orfr-CAandfr-FR. - Open the startup entry point. In a standalone application this is usually
src/main.ts. In an NgModules application, the guide says the import can go inapp.module. - Add the import above the bootstrap call. For French, the guide’s example is:
import '@angular/common/locales/global/fr'; // existing bootstrap code follows // bootstrapApplication(AppComponent, appConfig).catch(...) - Set
LOCALE_IDif the app should format with that locale. Provide the token with the same identifier you imported:import { LOCALE_ID } from '@angular/core'; providers: [ { provide: LOCALE_ID, useValue: 'fr' } ]Use the identifier that matches your import. If you imported a regional variant, use the regional identifier.
- Verify the output. Render a date, a number, and a currency value through
DatePipe,DecimalPipe, andCurrencyPipein a component, then compare the output before and after the change. Check the browser console for locale errors during startup.
Choosing a locale identifier
Locales carry more than language. Regional variants can differ in date order, number and decimal separators, currency placement, punctuation, and grammar. The identifier you choose therefore changes what users see, even when the language is the same. Import the module that matches the identifier you intend to use, and avoid importing a broader language module and assuming it covers a specific region.
#1 Best Overall
Two locale workflows compared
Angular offers two related routes. An explicit global import makes locale data available at runtime. The CLI’s --localize build produces translated application variants and registers locale data as part of that build. Choose by what you need to ship.
| Aspect | Explicit global import | CLI --localize build |
|---|---|---|
| Purpose | Makes one locale’s data available to Angular at runtime | Generates translated copies of the application, one per target locale |
| Where it is configured | Application source, such as main.ts or app.module |
Angular workspace build configuration, with source and target locales |
| How the locale is chosen | By the module path you import and the LOCALE_ID value you provide |
By the target locales listed in the workspace configuration |
| Typical use | Formatting values in one app build for another locale | Shipping separately translated builds, for example for different language sites |
Build translated variants with --localize
If you need translated copies of the application rather than a single runtime locale, use the build workflow. The Merge translations into the application guide describes the process:
- Define your source locale and target locales in the workspace configuration (
angular.json). - Run the localized build:
ng build --localizeThe CLI registers the locale data for each target and emits a locale-specific output for each one.
- Serve locales one at a time during development. The guide notes that the development server supports one localized locale at a time, so test each variant in its own run.
You do not need to add the global import by hand for locales the build already registers. Use a manual import when runtime formatting requires a locale your build does not otherwise load.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, 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 minuteRegistering locale data explicitly
Angular also exposes registerLocaleData(data, localeId?, extraData?) for registering locale data in code. Pass the locale data module’s default export as data, and the identifier as localeId when you need to name it. The older two-argument form, registerLocaleData(data, extraData?), has been deprecated since v5.1 on the API page. Use the three-argument form in new code.
Rank #3
Troubleshooting checklist
- Dates or numbers still use the default locale: confirm that
LOCALE_IDis provided with the same identifier you imported. - Build fails with a missing module path: check that the path is exactly
@angular/common/locales/global/<id>and that the identifier exists in the locale-ID reference. - Translated copies look the same as the source: confirm the target locales are listed in the workspace configuration and that you ran
ng build --localize, not a plain build. - Behavior differs from the guide: Angular documentation changes between releases. Check the guide against the Angular version in your project’s
package.jsonbefore changing code.
The global import is the smallest change that makes an extra locale’s data available. Use it for runtime formatting, and use the CLI localize build when you need separately translated application output.
Quick Recap
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.
