How to create a multi-language Angular app
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Building applications that support multiple languages is essential for reaching global audiences and providing localized user experiences.
As the creator of CoreUI, a widely used open-source UI library with comprehensive Angular support, I’ve implemented internationalization in enterprise applications throughout my 11 years of Angular development.
The most robust approach is using Angular’s built-in @angular/localize package with the i18n attribute for template translations.
This method provides compile-time safety and efficient runtime translation switching.
Use Angular’s i18n attribute in templates and configure build targets for each supported language.
import { Component } from '@angular/core'
@Component({
selector: 'app-greeting',
template: `
<h1 i18n="@@welcomeMessage">Welcome to our application</h1>
<p i18n="@@description">This is a multilingual app</p>
`
})
export class GreetingComponent {}
Here the i18n attribute marks text for translation with unique IDs. Run ng extract-i18n to generate translation files. Create locale-specific XLIFF files like messages.en.xlf and messages.es.xlf with translated content. Configure angular.json with locale-specific build configurations that reference these translation files. Build separate versions for each language using ng build --localize.
Best Practice Note:
This is the same approach we use in CoreUI Angular components to support enterprise applications across different regions. For runtime language switching without rebuilding, consider using ngx-translate library instead, though it sacrifices some type safety for flexibility.
