200 Internationalization - chempkovsky/CS82ANGULAR GitHub Wiki
- read Angular Internationalization
- read Example Angular Internationalization application
- with
angular.json
-file
- with
- In the article we did use the
ng add @angular/localize
command - In the 00000 Third page of the Wizard-paragraph we mentioned
Generate localized typescript code
-CheckBox - As a result we generated Html with
i18n
-attributes- for example, open the
src\app\components\phbk-division-view\adlg\phbk-division-view-adlg.component.html
-file
- for example, open the
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
- for example, open the
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();
...
- in terminal of the project run the command
ng extract-i18n --output-path src/locale
the src\locale\messages.xlf
-file will be created
- read the article first
- run the command
npm install -g xlf-auto-translate
- 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
- open
angular.json
-file
- 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": {
-
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",
-
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
},
- 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"
},
-
Note: we have already set
"sourceLocale": "en-US"
- We need to add the following sections:
- Take care of the last separator. It must be (
,
).
- 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"
},
- 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
- here is update item form
Click to show the picture
- Note: the following command is available as well:
ng serve --configuration=en -o
- We defined
sourceLocale
as string
"i18n": {
...
"sourceLocale": "en-US",
...
}
- There is another notation
"i18n": {
...
"sourceLocale": {
"code": "en-US",
"baseHref": ""
},
....
}