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 deploy multiple locales in Angular, configure the source locale and translation files in angular.json, build the locale variants you need, and publish each variant at the URL path its base href expects. For a static deployment, your web server can redirect a visitor from the site root according to the browser’s Accept-Language header and fall back to your default locale. With Angular server rendering and outputMode set to server, Angular handles that redirection dynamically.
How Angular creates localized application builds
Angular localization is a build-time process: translated text is compiled into separate application variants. The CLI places each variant in a locale-specific directory beneath the configured output path, sets the generated document’s lang attribute, and adjusts its base href for the locale path. This is distinct from choosing which locale a visitor should see; deployment routing handles that decision.
The overall flow is: configure locale data, extract and provide translations, build the desired variants, then serve those variants at matching public paths.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Configure locales and translation files
In the project’s i18n configuration in angular.json, identify the source locale and map each target locale to its translation file. If you do not specify a source locale, Angular documents en-US as the default. Locale IDs use BCP 47 tags as their basis, so keep the chosen IDs consistent in configuration, translation content, output paths, and server routing.
#1 Best Overall
Angular’s translation guide explains how to mark template text for translation and extract messages with ng extract-i18n. The command can produce supported translation formats such as XLIFF, with options for the output path and file name. After translations are supplied, the localized build compiles them into the application variants.
A locale entry can also define a baseHref or a subPath. These values affect where the built variant is expected to live, so decide the public URL structure before publishing the build.
Build all locales or a selected subset
Set the build option localize to true to generate all configured locales, or use an array of locale IDs to build only a subset, such as ["fr"]. For a one-off build, Angular documents ng build --localize. The deployment guide says ng build defaults to the production configuration.
Use ng serve to develop against one localized locale at a time. Angular’s development server does not support serving multiple localized variants simultaneously. In a release pipeline, build the intended locale set and publish the resulting locale-specific directories.
Rank #3
Match output directories, public URLs, and base hrefs
For a typical static deployment, each locale is served from a distinct subdirectory, for example /fr and /es. The output directory, the public URL, and the base href must agree: the base href tells the browser how to resolve relative links and resources from the localized page. Angular’s deployment guide states, “The HTML base tag with the href attribute specifies the base URI, or URL, for relative links.” See Angular’s deployment guide.
Angular adds a configured locale subpath to the base href when generating localized variants. If you need to customize both the output directory subpath and the base href, use the locale’s subPath setting. The workspace configuration reference says subPath and baseHref cannot be used together on the same locale setting; consult the workspace configuration reference when choosing the setting.
For assets served from a separate compile-time URL, Angular offers --deploy-url. It overlaps with the base href mechanism, so prefer configuring the base href where it fits and use --deploy-url only when your asset arrangement requires it. See Angular’s deploy-url guidance.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteRoute visitors to an available locale
With static locale directories, configure the web server to serve each variant at its matching path. At the root URL, the server can inspect Accept-Language, redirect to an available locale, and fall back to the configured default when the preferred language is unavailable. A locale switcher should point to the corresponding path for the other variant.
Angular’s deployment documentation provides Nginx and Apache examples at Deploy multiple locales. Treat them as starting points rather than universal configurations: adapt the locale matching rules, default locale, document root, and single-page-app fallback behavior to your application and hosting setup. Verify that direct navigation to nested application routes still serves the correct locale’s application.
If the app uses Angular server rendering with outputMode set to server, Angular documents dynamic redirection based on Accept-Language. That lets the server-rendered setup own locale selection instead of relying solely on manually configured static-server redirects.
Choose the deployment approach that fits your hosting
| Approach | Who selects the locale | What it requires | Fallback ownership |
|---|---|---|---|
| Static locale-specific paths | Your web server, typically using Accept-Language at the root |
Build and publish the locale directories at matching URL subpaths; configure server routing | Your server configuration |
Server-rendered output with outputMode set to server |
Angular handles redirection dynamically from Accept-Language |
An Angular server-rendered deployment | Handled dynamically by Angular; configure and verify behavior for your available locales |
Angular’s documentation describes these deployment patterns but does not establish a general cost or performance advantage for either. Choose based on whether you already deploy server-rendered Angular or can manage locale routing in your web server.
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 minuteWindows 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 reinstallTranslation workflow beyond Angular’s native build
Angular’s native workflow uses translation files and builds localized variants. Teams coordinating translators or frequent content updates may prefer a centralized translation-management workflow. For example, Transifex documents an Angular localization workflow that marks content in code and sends it for localization using a command-line tool. That is an optional workflow, not a requirement for Angular localization; the cited documentation does not establish comparative pricing, translation quality, or performance.
Quick Recap
Deployment checks before release
- Confirm the source locale and each target locale ID in
angular.json, and ensure every configured translation file is present. - Build the locales intended for release; confirm the generated locale directories and each document’s
langattribute. - Check that each variant’s base href matches its public URL path and that any separate asset path is configured deliberately.
- Test the root redirect with supported and unsupported
Accept-Languagepreferences, including the default-locale fallback. - Open locale URLs directly, including nested application routes, and confirm the server returns the matching localized application rather than a missing page or a different locale.
- Test the locale switcher from more than one route so it leads to the equivalent destination in the selected locale where that route exists.
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.
