Angular App in Multiple Languages

Angular App in Multiple Languages

Angular App in Multiple Languages

To Localize your app follow the i18n internationalization official guideline in the Angular website

Steps

  1. Create the angular app
    ng new localized-app
  2. Add Internationalization (i18n) support
    ng add @angular/localize
  3. Add the i18n custom attribute to your text elements
    <h1 i18n>PLEASE TRANSLATE THIS</h1>
  4. Extract the source language file into a dedicated folder using the xi18n command
    ng xi18n --output-path src/locale
  5. Verify that src/locale/messages.xlf was created
  6. Create a translation file for each language: copy messages.xlf and rename the copy by using the locale-id of the targeted language, for example, “es” stands for spanish:
    messages.es.xlf
  7. Open messages.es.xlf with a text editor (or with a xlf editor if you have one), you will see something like this
    <?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="0a5c022a373a53f84ed6feda3f87bfa8709104ba" datatype="html">
        <source>PLEASE TRANSLATE THIS</source>
        <context-group purpose="location">

          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">1</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>
  8. Under the source element, create a target element and set its value to the translated text
    	...
      <trans-unit id="0a5c022a373a53f84ed6feda3f87bfa8709104ba" datatype="html">
        <source>PLEASE TRANSLATE THIS</source>
        <target>FAVOR DE TRADUCIR ESTO</target>
		...
      </trans-unit>
	...
  9. Repeat this step for every text element that need to be translated
  10. Open angular.json, you will add an i18n configuration object in projects -> localized-app
    ...
"projects": {
  "localized-app": {
    ...
    "i18n": {
      "sourceLocale": "en-US",
      "locales": {
        "es": "src/locale/messages.es.xlf"
      }
    },
    "architect": {
    ...
    }
}
  11. In angular.json add the localize = true configuration field into projects -> architect -> build -> options
    ...
	"build": {
	  "builder": "@angular-devkit/build-angular:browser",
	  "options": {
	    "localize": true,
	    "aot": true,
...
  12. Build the project and get different versions of the deployed app for each language
    ng build --localize
  13. Check your dist folder, you should see this:
  14. Try running the app
    ng serve
  15. You’ll get an error

    The angular guide says

    Due to the deployment complexities of i18n and the need to minimize rebuild time, the development server only supports localizing a single locale at a time. Setting the “localize” option to true will cause an error when using ng serve if more than one locale is defined. Setting the option to a specific locale, such as “localize”: [“fr”], can work if you want to develop against a specific locale (such as fr).

  16. Go back to angular.json, and change the localize field we set on step 11 to an array with just one locale
    ...
	"build": {
	  "builder": "@angular-devkit/build-angular:browser",
	  "options": {
	    "localize": ["es"],
	    "aot": true,
...
  17. Try running the app again
    ng serve
  18. Change the value in localize to “[en-US]” and run the app again to see the result in english
        ...
    "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        "localize": ["es"],
        "aot": true,
    ...
  19. You can create a custom locale-specific configuration so you don’t have to change this value everytime, please see the guideline
  20. For more advanced scenarios SEE THE ANGULAR GUIDELINE

References

Comments

Post a Comment

Popular posts from this blog

WPF - Combobox with a null item

--- --- WPF - Combobox with a null item It adds an item for “Select All” or “Empty” functionality into a combobox Converter public class ComboBoxEmptyItemConverter : IValueConverter { /// <summary> /// this object is the empty item in the combobox. A dynamic object that /// returns null for all property request. /// </summary> private class EmptyItem : DynamicObject { public string Name { get ; set ; } = "Empty" ; public override bool TryGetMember ( GetMemberBinder binder , out object result ) { // just set the result to null and return true result = null ; return true ; } } public object Convert ( object value , Type targetType , object parameter , CultureInfo culture ) { // assume that the value at least inherits from IEnumerable ...
Read more

Add Cordova and Electron to an Angular App

Image
--- --- Add Cordova and Electron to an Angular App Run your angular app as a web, Windows, Android or Linux app, and and if you have the means, in an Iphone or a Mac. Here I’m just covering the browser, Windows and Android. You can find this code in Github . Works in Windows 10 Node js 12.13 Angular CLI 10.1.1 Cordova 10 Android Studio Create the Angular App Create an Angular app by running this command in the terminal ng new angular-app Run in the browser Run ng serve Open http://localhost:4200 in your favorite browser Install Electron in the Angular App To install electron in angular-app run npm install --save-dev electron Inside angular-app create a file and name it main.js Copy the code the from the first app tutorial in the Electron web site and paste it in main.js const { app , BrowserWindow } = require ( 'electron' ) function createWindow ( ) { // Create the browser window. const win = new BrowserWindow ( { width : ...
Read more

How to enable CORS between an Angular app and an ASP.Net Web API Service

Image
How to enable CORS between an Angular app and an ASP.Net Web API Service If you have an ASP Net WebAPI service running in one domain, and an angular app running in another domain, you’ll need to enable CORS in the web service, in this example, we’re also enabling Windows authentication Works for NET Framework 4.8 Microsoft ASPNET Web API Angular CLI 10.1 Node 10.15 Windows 10 Create a .NET WebAPI application with Windows Authentication Create a folder and name it Models Inside Models create Employee.cs and this code: public class Employee { public int Id { get ; set ; } public string Name { get ; set ; } public string Email { get ; set ; } } Create the Employees controller, right click the Controllers folder and click Add Controller In the Add Scaffold window, select Web API 2 Controller - Empty In Controller Name write EmployeesController In EmployeesController.cs include this code: [ RoutePrefix ...
Read more