📄 Angular Internationalization Set-up in Existing Project

#angular #internationalization #i18n

Step 1: Install @angular/localize

$ ng add @angular/localize

Step 2: Update Angular JSON

Second screen

Step 3: Extract Messages

$ ng extract-i18n --output-path src/locale

This command will create XLF files in the specified locations (src/locale/messages.ar.xlf,src/locale/messages.fr.xlf)

Step 4: Translate Messages

Translate the messages in each XLF file for the supported languages as mentioned in Angular Documentation here.

Step 5: Build and Serve

$ ng build --localize
$ ng serve --configuration fr --port 4100 // Opens french version on port 4100
$ ng serve --configuration ar --port 4200 // Opens arabic version on port 4200

✅ Article link: https://levelup.gitconnected.com/angular-internationalization-set-up-in-existing-project-891dcf6cee95