# How to Translate an Angular App (Built-in vs Runtime) | Vitra.ai > Angular's own i18n compiles a separate build per language. That is fast and it means adding a language is a deployment, not a content update as well. **Canonical URL**: https://www.vitra.ai/general/translate-an-angular-app **Source**: This is the Markdown rendering of https://www.vitra.ai/general/translate-an-angular-app, generated at build time from that page. --- 4 min read # How to Translate an Angular App (Built-in vs Runtime) Angular's own i18n compiles a separate build per language. That is fast and it means adding a language is a deployment, not a content update as well. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Senior Product Manager , Vitra.ai Updated Aug 17, 2026 ![How to Translate an Angular App (Built-in vs Runtime)](https://www.vitra.ai/static/images/blog/translate-an-angular-app.jpg) Table of contents [Build-time, not runtime](#build-time-not-runtime) [XLIFF extraction is the workflow](#xliff-extraction-is-the-workflow) [i18n attributes and what they carry](#i18n-attributes-and-what-they-carry) [ICU expressions for plurals and select](#icu-expressions-for-plurals-and-select) [The runtime alternative](#the-runtime-alternative) [Serving the builds](#serving-the-builds) [Deployment topology](#deployment-topology) [Extraction in CI](#extraction-in-ci) [Where to start](#where-to-start) [FAQ](#faq) Contributors [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Senior Product Manager Subscribe to our newsletter Subscribe > **Quick answer —** Angular ships i18n that extracts to XLIFF and produces one compiled build per locale. It is the fastest option at runtime and the least flexible operationally, because a new language means a new build and a new deploy. ## Build-time, not runtime Angular's native i18n substitutes translations during compilation. Each locale becomes its own bundle with the strings baked in. Nothing is looked up at runtime, so there is no performance cost and no flash of untranslated content. The trade-off is that language is fixed at build time: you cannot switch in the browser without loading a different build, and adding a language goes through your release process. ## XLIFF extraction is the workflow `ng extract-i18n` produces an XLIFF file — the same industry format translation tools already understand, which is a genuine advantage over bespoke JSON. Each locale gets its own translated XLIFF, and the build consumes them. Unit IDs tie a translation to its source, and they change when the source text changes, which is how Angular tells you a string needs re-translating. ## i18n attributes and what they carry The `i18n` attribute marks an element as translatable and can carry a description and a meaning. Both reach the translator. Use them. "Close" as a verb on a button and "Close" as an adjective are the same word in English and different words nearly everywhere else, and `meaning` is how you separate them. ## ICU expressions for plurals and select Angular uses ICU message syntax inline: plural and select expressions written directly in the template. It is expressive and it is easy to break, because the braces are structural. A translation that loses a brace produces a build error rather than a runtime one, which is the better failure mode. ## The runtime alternative Libraries exist that load JSON at runtime and allow in-browser switching. They cost a lookup per string and they decouple language from deployment. Choose native for a marketing site where each locale is deployed anyway. Choose runtime for an application where users switch language themselves. ## Serving the builds Each locale build needs its own path, and the server has to route to the right one. That routing is also what gives you distinct URLs per language, so it serves SEO as well as delivery. [website translation](https://www.vitra.ai/features/website-translation) handles content outside the bundle and [translation memory](https://www.vitra.ai/features/translation-memory) means each release re-translates only what changed. Setup notes are on the [Angular integration](https://www.vitra.ai/integration/angular-js) page. ## Deployment topology One build per locale means the deployment artefact count multiplies. A CDN routing on path prefix is the usual answer, with each locale build served from its own directory. Get the fallback right: a request for a locale you do not build should serve the default rather than a 404, and it should do so without a redirect chain. ## Extraction in CI Run extraction on every build and fail when new untranslated units appear. Otherwise a developer adds a string, the build succeeds, and that string ships in English to every locale. ## Where to start Render one page in the target language and view source. If the translated text is in the HTML, search engines can read it. If it only appears after hydration, it is a client-side render and needs the server side solved first. ## FAQ **How does Angular's built-in i18n work?** It substitutes translations at build time, producing one compiled bundle per locale. Nothing is looked up at runtime, so there is no performance cost and no flash of untranslated content. **Can users switch language in the browser with Angular i18n?** Not with the native approach, because language is fixed at build time. In-browser switching needs a runtime library that loads JSON, which costs a lookup per string but decouples language from deployment. **What format does Angular extract to?** XLIFF, which is an industry standard translation tools already understand. Unit IDs tie each translation to its source and change when the source text changes, flagging strings that need re-translating. **What is the i18n meaning attribute for?** Disambiguation. Close as a verb and close as an adjective are one word in English and different words nearly everywhere else, and meaning is how a translator is told which is intended. Our blog ## Lastest blog posts Tool and strategies modern teams need to help their companies grow. Automotive [Automotive Brochure Localization by Market](https://www.vitra.ai/automotive/automotive-brochure-localization) A car brochure is a spec grid, a legal footer and a photo library, all market-specific. What actually has to change, and why the layout decides the schedule. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Aug 18, 2026 Automotive [Automotive Campaign Localization Across Markets](https://www.vitra.ai/automotive/automotive-campaign-localization) Campaigns run through national companies and dealer networks, so one master becomes hundreds of files. Where the offer text and the disclaimers actually break. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Aug 18, 2026 Automotive [Car Service Manual Translation for Technicians](https://www.vitra.ai/automotive/automotive-service-manual-translation) A workshop manual is read mid-repair by someone with the car on a lift. What that demands of procedures, torque figures and fault codes, in every language. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Aug 18, 2026 [View all posts](https://www.vitra.ai/blog/page/1) --- ## Structured data ```json { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.vitra.ai/general/translate-an-angular-app" }, "headline": "How to Translate an Angular App (Built-in vs Runtime)", "image": [ { "@type": "ImageObject", "url": "https://www.vitra.ai/static/images/blog/translate-an-angular-app.jpg" } ], "datePublished": "2026-08-17T00:00:00.000Z", "dateModified": "2026-08-17T00:00:00.000Z", "author": [ { "@type": "Person", "name": "Samhitha J Bhatt" } ], "publisher": { "@type": "Organization", "name": "Vitra.ai", "logo": { "@type": "ImageObject", "url": "https://www.vitra.ai/static/images/vitra-v-logo.png" } }, "description": "Angular's own i18n compiles a separate build per language. That is fast and it means adding a language is a deployment, not a content update as well." } ``` ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.vitra.ai" }, { "@type": "ListItem", "position": 2, "name": "General", "item": "https://www.vitra.ai/general" }, { "@type": "ListItem", "position": 3, "name": "How to Translate an Angular App (Built-in vs Runtime)", "item": "https://www.vitra.ai/general/translate-an-angular-app" } ] } ``` ```json { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "How does Angular's built-in i18n work?", "acceptedAnswer": { "@type": "Answer", "text": "It substitutes translations at build time, producing one compiled bundle per locale. Nothing is looked up at runtime, so there is no performance cost and no flash of untranslated content." } }, { "@type": "Question", "name": "Can users switch language in the browser with Angular i18n?", "acceptedAnswer": { "@type": "Answer", "text": "Not with the native approach, because language is fixed at build time. In-browser switching needs a runtime library that loads JSON, which costs a lookup per string but decouples language from deployment." } }, { "@type": "Question", "name": "What format does Angular extract to?", "acceptedAnswer": { "@type": "Answer", "text": "XLIFF, which is an industry standard translation tools already understand. Unit IDs tie each translation to its source and change when the source text changes, flagging strings that need re-translating." } }, { "@type": "Question", "name": "What is the i18n meaning attribute for?", "acceptedAnswer": { "@type": "Answer", "text": "Disambiguation. Close as a verb and close as an adjective are one word in English and different words nearly everywhere else, and meaning is how a translator is told which is intended." } } ] } ```