Browse Source

update: localization page

pull/23285/head
sumeyye 7 months ago
parent
commit
c2e3e70839
  1. 72
      docs/en/framework/ui/angular/localization.md

72
docs/en/framework/ui/angular/localization.md

@ -9,7 +9,7 @@ The Localization key format consists of 2 sections which are **Resource Name** a
```js
const environment = {
//...
// ...
localization: {
defaultResourceName: "MyProjectName",
},
@ -49,7 +49,7 @@ Localization data is stored in key-value pairs:
```js
{
//...
// ...
AbpAccount: { // AbpAccount is the resource name
Key: "Value",
PagerInfo: "Showing {0} to {1} of {2} entries"
@ -121,12 +121,12 @@ See an example:
```ts
import { provideAbpCore, withOptions } from '@abp/ng.core';
@NgModule({
export const appConfig: ApplicationConfig = {
providers: [
// ...
provideAbpCore(
withOptions({
...,
// ...,
localizations: [
{
culture: 'en',
@ -155,22 +155,18 @@ import { provideAbpCore, withOptions } from '@abp/ng.core';
],
}),
),
...
],
})
export class AppModule {}
};
```
...or, you can determine the localizations in a feature module:
...or, you can determine the localizations in a feature provider configuration:
```ts
// your feature module
// your feature configuration
@NgModule({
imports: [
//...other imports
CoreModule.forChild({
localizations: [
export function provideFeatureConfiguration(): EnvironmentProviders{
return provideAbpCoreChild({
localizations: [
{
culture: 'en',
resources: [
@ -196,9 +192,8 @@ export class AppModule {}
],
},
],
}),
]
})
})
}
```
The localizations above can be used like this:
@ -267,8 +262,8 @@ import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<abp-loader-bar></abp-loader-bar>
<router-outlet></router-outlet>
<abp-loader-bar />
<router-outlet />
`,
})
export class AppComponent {}
@ -286,11 +281,12 @@ Since ABP has more than one language, Angular locale files loads lazily using [W
import { provideAbpCore, withOptions } from '@abp/ng.core';
import { registerLocale } from '@abp/ng.core/locale';
@NgModule({
export const appConfig: ApplicationConfig = {
providers: [
// ...
provideAbpCore(
withOptions({
...,
// ...,
registerLocaleFn: registerLocale(
// you can pass the cultureNameLocaleFileMap and errorHandlerFn as optionally
{
@ -302,10 +298,9 @@ import { registerLocale } from '@abp/ng.core/locale';
),
}),
),
...
// ...
],
})
export class AppModule {}
};
```
### Mapping of Culture Name to Angular Locale File Name
@ -317,19 +312,18 @@ Some of the culture names defined in .NET do not match Angular locales. In such
If you see an error like this, you should pass the `cultureNameLocaleFileMap` property like below to the `registerLocale` function.
```js
// app.module.ts
// app.config.ts
import { registerLocale } from '@abp/ng.core/locale';
// if you have commercial license and the language management module, add the below import
// import { registerLocale } from '@volo/abp.ng.language-management/locale';
@NgModule({
export const appConfig: ApplicationConfig = {
providers: [
// ...
provideAbpCore(
withOptions({
...,
// ...,
registerLocaleFn: registerLocale(
{
cultureNameLocaleFileMap: {
@ -340,18 +334,18 @@ import { registerLocale } from '@abp/ng.core/locale';
)
}),
),
]
})
],
};
```
See [all locale files in Angular](https://github.com/angular/angular/tree/master/packages/common/locales).
### Adding a New Culture
Add the below code to the `app.module.ts` by replacing `your-locale` placeholder with a correct locale name.
Add the below code to the `app.config.ts` by replacing `your-locale` placeholder with a correct locale name.
```js
//app.module.ts
//app.config.ts
import { storeLocaleData } from "@abp/ng.core/locale";
import(
@ -361,7 +355,7 @@ import(
).then((m) => storeLocaleData(m.default, "your-locale"));
```
...or a custom `registerLocale` function can be passed to the `CoreModule`:
...or a custom `registerLocale` function can be passed to the abp core provider configuration options:
```js
// register-locale.ts
@ -376,22 +370,22 @@ export function registerLocale(locale: string) {
)
}
// app.module.ts
// app.config.ts
import { registerLocale } from './register-locale';
@NgModule({
export const appConfig: ApplicationConfig = {
providers: [
// ...
// ...
provideAbpCore(
withOptions({
...,
// ...,
registerLocaleFn: registerLocale,
}),
),
//...
]
})
],
};
```
After this custom `registerLocale` function, since the en and fr added to the `webpackInclude`, only en and fr locale files will be created as chunks:

Loading…
Cancel
Save