181. What is the purpose of custom id?
When you change the translatable text, the Angular extractor tool generates a new id for that translation unit. Because of this behavior, you must then update the translation file with the new id every time.
For example, the translation file `messages.de.xlf.html` has generated trans-unit for some text message as below
```html
<trans-unit id="827wwe104d3d69bf669f823jjde888" datatype="html">
```
You can avoid this manual update of `id` attribute by specifying a custom id in the i18n attribute by using the prefix @@.
```javascript
<h1 i18n="@@welcomeHeader">Hello i18n!</h1>
```
182. What happens if the custom id is not unique?
You need to define custom ids as unique. If you use the same id for two different text messages then only the first one is extracted. But its translation is used in place of both original text messages. For example, let's define same custom id `myCustomId` for two messages,
```html
<h2 i18n="@@myCustomId">Good morning</h3>
<!-- ... -->
<h2 i18n="@@myCustomId">Good night</p>
```
and the translation unit generated for first text in for German language as
```html
<trans-unit id="myId" datatype="html">
<source>Good morning</source>
<target state="new">Guten Morgen</target>
</trans-unit>
```
Since custom id is the same, both of the elements in the translation contain the same text as below
```html
<h2>Guten Morgen</h2>
<h2>Guten Morgen</h2>
```
183. Can I translate text without creating an element?
Yes, you can achieve using `<ng-container>` attribute. Normally you need to wrap a text content with i18n attribute for the translation. But if you don't want to create a new DOM element just for the sake of translation, you can wrap the text in an <ng-container> element.
```html
<ng-container i18n>I'm not using any DOM element for translation</ng-container>
```
Remember that `<ng-container>` is transformed into an html comment
184. How can I translate attribute?
You can translate attributes by attaching `i18n-x` attribute where x is the name of the attribute to translate. For example, you can translate image title attribute as below,
```html
<img [src]="example" i18n-title title="Internationlization" />
```
By the way, you can also assign meaning, description and id with the i18n-x="<meaning>|<description>@@<id>" syntax.
185. List down the pluralization categories?
Pluralization has below categories depending on the language.
1. =0 (or any other number)
2. zero
3. one
4. two
5. few
6. many
7. other
186. What is select ICU expression?
ICU expression is is similar to the plural expressions except that you choose among alternative translations based on a string value instead of a number. Here you define those string values.
Let's take component binding with `residenceStatus` property which has "citizen", "permanent resident" and "foreigner" possible values and the message maps those values to the appropriate translations.
```javascript
<span i18n>The person is {residenceStatus, select, citizen {citizen} permanent resident {permanentResident} foreigner {foreigner}}</span>
```
187. How do you report missing translations?
By default, When translation is missing, it generates a warning message such as "Missing translation for message 'somekey'". But you can configure with a different level of message in Angular compiler as below,
1. **Error:** It throws an error. If you are using AOT compilation, the build will fail. But if you are using JIT compilation, the app will fail to load.
2. **Warning (default):** It shows a 'Missing translation' warning in the console or shell.
3. **Ignore:** It doesn't do anything.
If you use AOT compiler then you need to perform changes in `configurations` section of your Angular CLI configuration file, angular.json.
```javascript
"configurations": {
...
"de": {
...
"i18nMissingTranslation": "error"
}
}
```
If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding the 'MissingTranslationStrategy' property as below,
```javascript
import { MissingTranslationStrategy } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule, {
missingTranslation: MissingTranslationStrategy.Error,
providers: [
// ...
]
});
```
188. How do you provide build configuration for multiple locales?
You can provide build configuration such as translation file path, name, format and application url in `configuration` settings of Angular.json file. For example, the German version of your application configured the build as follows,
```javascript
"configurations": {
"de": {
"aot": true,
"outputPath": "dist/my-project-de/",
"baseHref": "/fr/",
"i18nFile": "src/locale/messages.de.xlf",
"i18nFormat": "xlf",
"i18nLocale": "de",
"i18nMissingTranslation": "error",
}
```
189. What is an angular library?
An Angular library is an Angular project that differs from an app in that it cannot run on its own. It must be imported and used in an app. For example, you can import or add `service worker` library to an Angular application which turns an application into a Progressive Web App (PWA).
**Note:** You can create own third party library and publish it as npm package to be used in an Application.
190. What is AOT compiler?
The AOT compiler is part of a build process that produces a small, fast, ready-to-run application package, typically for production. It converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.
Comments
Post a Comment
please do not enter any spam link in the comment box