200 Internationalization - chempkovsky/CS82ANGULAR GitHub Wiki

Notes

Steps required to accomplish the task

Notes

Click to show the code 
<div mat-dialog-actions>
  <button mat-button (click)="onCancel()" cdkFocusInitial i18n="Cancel@@PhbkDivisionViewAdlgComponent.Cancel">Cancel</button>
  <button mat-button (click)="onOk()" i18n="Ok@@PhbkDivisionViewAdlgComponent.Ok">Ok</button>
</div>
  • As a result we generated Typescript code with a special dictionaries
    • for example, open the src\app\components\phbk-division-view\aform\phbk-division-view-aform.component.ts-file
Click to show the code 
...
@Component({
  selector: 'app-phbk-division-view-aform',
  templateUrl: './phbk-division-view-aform.component.html',
  styleUrls: ['./phbk-division-view-aform.component.css']
})
export class PhbkDivisionViewAformComponent implements OnInit, OnDestroy, IEventEmitterPub {

    frases: {[key:string]: string}  = {
        'Not-all-props': $localize`:Not all properties are set@@PhbkDivisionViewAformComponent.Not-all-props:Not all properties are set`,
        'caption': $localize`:Review Division@@PhbkDivisionViewAformComponent.Review-Item:Review Division`,
        'title': $localize`:Select Item@@PhbkDivisionViewAformComponent.SelItem:Select Item`,
        'Not-all-masters': $localize`:Not all masters have been set@@PhbkDivisionViewAformComponent.Not-all-masters:Not all masters have been set`,
        'DivisionId-label': $localize`:Id of the Division@@PhbkDivisionViewAformComponent.DivisionId-label:Id of the Division`,
        'DivisionId-hint': $localize`:Enter Division Id@@PhbkDivisionViewAformComponent.DivisionId-hint:Enter Division Id`,
        'DivisionId-placeholder': $localize`:Id of the Division@@PhbkDivisionViewAformComponent.DivisionId-placeholder:Id of the Division`,
        'DivisionName-label': $localize`:Name of the Division@@PhbkDivisionViewAformComponent.DivisionName-label:Name of the Division`,
        'DivisionName-hint': $localize`:Enter Division Name@@PhbkDivisionViewAformComponent.DivisionName-hint:Enter Division Name`,
        'DivisionName-placeholder': $localize`:Name of the Division@@PhbkDivisionViewAformComponent.DivisionName-placeholder:Name of the Division`,
        'DivisionDesc-label': $localize`:Description of the Division@@PhbkDivisionViewAformComponent.DivisionDesc-label:Description of the Division`,
        'DivisionDesc-hint': $localize`:Enter Enterprise Division Description@@PhbkDivisionViewAformComponent.DivisionDesc-hint:Enter Enterprise Division Description`,
        'DivisionDesc-placeholder': $localize`:Description of the Division@@PhbkDivisionViewAformComponent.DivisionDesc-placeholder:Description of the Division`,
        'EntrprsIdRef-label': $localize`:Id of the Enterprise@@PhbkDivisionViewAformComponent.EntrprsIdRef-label:Id of the Enterprise`,
        'EntrprsIdRef-hint': $localize`:Enter Enterprise  Id@@PhbkDivisionViewAformComponent.EntrprsIdRef-hint:Enter Enterprise  Id`,
        'EntrprsIdRef-placeholder': $localize`:Id of the Enterprise@@PhbkDivisionViewAformComponent.EntrprsIdRef-placeholder:Id of the Enterprise`,
        'EEntrprsName-label': $localize`:Name of the Enterprise@@PhbkDivisionViewAformComponent.EEntrprsName-label:Name of the Enterprise`,
        'EEntrprsName-hint': $localize`:Enter Enterprise Name@@PhbkDivisionViewAformComponent.EEntrprsName-hint:Enter Enterprise Name`,
        'EEntrprsName-placeholder': $localize`:Name of the Enterprise@@PhbkDivisionViewAformComponent.EEntrprsName-placeholder:Name of the Enterprise`,
    }

    @Output('before-submit') beforeSubmit = new EventEmitter();
    ...

Steps required to accomplish the task

Create messages xlf

  • in terminal of the project run the command
ng extract-i18n --output-path src/locale

the src\locale\messages.xlf-file will be created

Translate messages xlf

Install XlfAutoTranslate

  • run the command
npm install -g xlf-auto-translate

Translate the file

  • in terminal of the project run the command
xlf-auto-translate -i src/locale/messages.xlf -o src/locale/messages.ru.xlf -f en -t ru

the src\locale\messages.ru.xlf-file will be created

Modify angular json

  • open angular.json-file

Modify projects:AngularPhonebook section

  • We need to add the following section:
Click to show the code 
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "ru": {
            "translation": "src/locale/messages.ru.xlf",
            "baseHref": ""
          }
        }
      },
  • Here is a new version
Click to show the code 
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "AngularPhonebook": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "ru": {
            "translation": "src/locale/messages.ru.xlf",
            "baseHref": ""
          }
        }
      },
      "architect": {

Modify projects:AngularPhonebook:architect:build:options section

  • we need to add "localize": true, and "aot": true,

  • Here is a new version

Click to show the code 
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "localize": true,
            "aot": true,
            "outputPath": "dist/angular-phonebook",
            "index": "src/index.html",

Modify projects:AngularPhonebook:architect:build:configurations:development section

  • we need to add "localize": false,

  • Here is a new version

Click to show the code 
            "development": {
              "localize": false,
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },

Modify projects:AngularPhonebook:architect:build:configurations section

  • We need to add the following two section:
Click to show the code 
            "ru": {
              "localize": ["ru"]
            },
            "en": {
              "localize": ["en-US"]
            }
  • Here is a new version
Click to show the code 
            "development": {
              "localize": false,
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
            "ru": {
              "localize": ["ru"]
            }            
            "en": {
              "localize": ["en-US"]
            }            
          },
          "defaultConfiguration": "production"
        },

Modify projects:AngularPhonebook:architect:serve section

  • Note: we have already set "sourceLocale": "en-US"
  • We need to add the following sections:
    • Take care of the last separator. It must be (,).
Click to show the code 
            "ru": {
              "browserTarget": "AngularPhonebook:build:development,ru"
            },
            "en": {
              "browserTarget": "AngularPhonebook:build:development,en"
            }
  • Here is a new version
Click to show the code 
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "AngularPhonebook:build:production"
            },
            "development": {
              "browserTarget": "AngularPhonebook:build:development"
            },
            "ru": {
              "browserTarget": "AngularPhonebook:build:development,ru"
            },
            "en": {
              "browserTarget": "AngularPhonebook:build:development,en"
            }
          },
          "defaultConfiguration": "development"
        },

Test

  • run Webapi apps
  • in terminal of the project run the command
ng serve --configuration=ru -o
  • here is a result
Click to show the picture

Solution structure

  • here is update item form
Click to show the picture

Solution structure

  • Note: the following command is available as well:
ng serve --configuration=en -o

sourceLocale Reminder

  • We defined sourceLocale as string
      "i18n": {
...
        "sourceLocale": "en-US",
...
      }
  • There is another notation
      "i18n": {
...
        "sourceLocale": {
          "code": "en-US",
          "baseHref": ""
        },
....
      }
⚠️ **GitHub.com Fallback** ⚠️