Angular Academy · Lesson

Building Localized Bundles

Produce per-locale application builds.

Building Localized Bundles is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

One Build per Locale

Angular's i18n is compile-time: it produces a separate, fully optimized bundle for each locale with the translations baked in. Users download only their language, with no runtime translation cost.

Configuring Localized Builds

With locales declared in angular.json, set localize: true in the build options to generate every locale at once.

"build": {
  "options": {
    "localize": true,
    "outputPath": "dist/app"
  }
}

Building All Locales

Run the production build; the CLI emits one folder per locale, each containing a complete app.

ng build --localize
# dist/app/en/  dist/app/fr/  dist/app/es/

Building a Single Locale

For faster iteration you can build just one locale by passing its code.

ng build --localize=fr

Setting the Base href per Locale

Each locale build can get its own baseHref so it is served from a subpath like /fr/. Configure it under each locale in angular.json.

"locales": {
  "fr": {
    "translation": "src/locale/messages.fr.xlf",
    "baseHref": "/fr/"
  }
}

Serving a Specific Locale in Dev

ng serve serves one locale at a time. Pass the configuration or locale you want to preview translations during development.

ng serve --configuration=fr

Routing Users to Their Locale

Because each locale is a separate deployable folder, you typically use the server or a CDN to redirect users to the right subpath based on their Accept-Language header or a language switcher.

Runtime $localize for Custom Setups

Advanced setups can load translations at runtime with loadTranslations() from @angular/localize before bootstrap. This trades the per-locale build for a single bundle plus a fetched translation map.

import { loadTranslations } from '@angular/localize';
loadTranslations(frTranslations);
// then bootstrapApplication(App)

Polyfill Requirement

Using $localize requires the @angular/localize polyfill. Add it once with the CLI; it registers the global needed for tagged-template translation.

ng add @angular/localize

Bundle Size Stays Small

Because translation happens at build time, the French bundle contains only French text, with no other languages and no translation engine shipped to the browser. This is why compile-time i18n keeps apps lean.

Deploying the Output

Deploy the entire dist/app directory; each locale subfolder is a standalone app. Configure your host so /fr/ serves the French build and the default locale serves at the root or its own path.

Quick Check

How does Angular ship translations?

Recap

Set localize: true and run ng build --localize to emit one folder per locale, each a complete app. Use per-locale baseHref (e.g. /fr/), serve a single locale in dev with --configuration, add the @angular/localize polyfill, and optionally load translations at runtime for custom setups.

Frequently asked questions

Is the “Building Localized Bundles” lesson free?

Yes — the full text of “Building Localized Bundles” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Building Localized Bundles”?

Produce per-locale application builds. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Building Localized Bundles” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy