docs(angular): add guide on i18n for Angular Rspack (#30732)
## Current Behavior There is currently no documetation on how to configure i18n for Angular Rspack applications ## Expected Behavior Add documetation giving details on how to configure i18n for Angular Rspack applications
This commit is contained in:
Colum Ferry
GitHub
parent
a911318017
commit
4b4226d2e0
@ -1565,6 +1565,14 @@
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Internationalization (i18n)",
|
||||
"path": "/recipes/angular/rspack/internationalization",
|
||||
"id": "internationalization",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
}
|
||||
],
|
||||
"disableCollapsible": false
|
||||
@ -3059,6 +3067,14 @@
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Internationalization (i18n)",
|
||||
"path": "/recipes/angular/rspack/internationalization",
|
||||
"id": "internationalization",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
}
|
||||
],
|
||||
"disableCollapsible": false
|
||||
@ -3160,6 +3176,14 @@
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Internationalization (i18n)",
|
||||
"path": "/recipes/angular/rspack/internationalization",
|
||||
"id": "internationalization",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
}
|
||||
],
|
||||
"disableCollapsible": false
|
||||
@ -3188,6 +3212,14 @@
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Internationalization (i18n)",
|
||||
"path": "/recipes/angular/rspack/internationalization",
|
||||
"id": "internationalization",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Migration",
|
||||
"path": "/recipes/angular/migration",
|
||||
|
||||
@ -2143,6 +2143,17 @@
|
||||
"isExternal": false,
|
||||
"path": "/recipes/angular/rspack/handling-configurations",
|
||||
"tags": ["handling-configurations", "configurations"]
|
||||
},
|
||||
{
|
||||
"id": "internationalization",
|
||||
"name": "Internationalization (i18n)",
|
||||
"description": "",
|
||||
"mediaImage": "",
|
||||
"file": "shared/guides/angular-rspack/internationalization",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/recipes/angular/rspack/internationalization",
|
||||
"tags": ["internationalization", "i18n"]
|
||||
}
|
||||
],
|
||||
"isExternal": false,
|
||||
@ -4191,6 +4202,17 @@
|
||||
"isExternal": false,
|
||||
"path": "/recipes/angular/rspack/handling-configurations",
|
||||
"tags": ["handling-configurations", "configurations"]
|
||||
},
|
||||
{
|
||||
"id": "internationalization",
|
||||
"name": "Internationalization (i18n)",
|
||||
"description": "",
|
||||
"mediaImage": "",
|
||||
"file": "shared/guides/angular-rspack/internationalization",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/recipes/angular/rspack/internationalization",
|
||||
"tags": ["internationalization", "i18n"]
|
||||
}
|
||||
],
|
||||
"isExternal": false,
|
||||
@ -4330,6 +4352,17 @@
|
||||
"isExternal": false,
|
||||
"path": "/recipes/angular/rspack/handling-configurations",
|
||||
"tags": ["handling-configurations", "configurations"]
|
||||
},
|
||||
{
|
||||
"id": "internationalization",
|
||||
"name": "Internationalization (i18n)",
|
||||
"description": "",
|
||||
"mediaImage": "",
|
||||
"file": "shared/guides/angular-rspack/internationalization",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/recipes/angular/rspack/internationalization",
|
||||
"tags": ["internationalization", "i18n"]
|
||||
}
|
||||
],
|
||||
"isExternal": false,
|
||||
@ -4369,6 +4402,17 @@
|
||||
"path": "/recipes/angular/rspack/handling-configurations",
|
||||
"tags": ["handling-configurations", "configurations"]
|
||||
},
|
||||
"/recipes/angular/rspack/internationalization": {
|
||||
"id": "internationalization",
|
||||
"name": "Internationalization (i18n)",
|
||||
"description": "",
|
||||
"mediaImage": "",
|
||||
"file": "shared/guides/angular-rspack/internationalization",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/recipes/angular/rspack/internationalization",
|
||||
"tags": ["internationalization", "i18n"]
|
||||
},
|
||||
"/recipes/angular/migration": {
|
||||
"id": "migration",
|
||||
"name": "Migration",
|
||||
|
||||
@ -1123,6 +1123,24 @@
|
||||
"path": "/recipes/angular/rspack/handling-configurations"
|
||||
}
|
||||
],
|
||||
"internationalization": [
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/guides/angular-rspack/internationalization",
|
||||
"id": "internationalization",
|
||||
"name": "Internationalization (i18n)",
|
||||
"path": "/recipes/angular/rspack/internationalization"
|
||||
}
|
||||
],
|
||||
"i18n": [
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/guides/angular-rspack/internationalization",
|
||||
"id": "internationalization",
|
||||
"name": "Internationalization (i18n)",
|
||||
"path": "/recipes/angular/rspack/internationalization"
|
||||
}
|
||||
],
|
||||
"deployment": [
|
||||
{
|
||||
"description": "",
|
||||
|
||||
@ -737,6 +737,12 @@
|
||||
"id": "handling-configurations",
|
||||
"tags": ["handling-configurations", "configurations"],
|
||||
"file": "shared/guides/angular-rspack/handling-configurations"
|
||||
},
|
||||
{
|
||||
"name": "Internationalization (i18n)",
|
||||
"id": "internationalization",
|
||||
"tags": ["internationalization", "i18n"],
|
||||
"file": "shared/guides/angular-rspack/internationalization"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
88
docs/shared/guides/angular-rspack/internationalization.md
Normal file
88
docs/shared/guides/angular-rspack/internationalization.md
Normal file
@ -0,0 +1,88 @@
|
||||
---
|
||||
title: 'Build-time Internationalization (i18n) with Angular Rspack'
|
||||
description: "Guide on how to use Angular's build-time i18n with Angular Rspack"
|
||||
---
|
||||
|
||||
# Build-time Internationalization (i18n) with Angular Rspack
|
||||
|
||||
Angular Rspack supports Angular's [build-time i18n](https://angular.dev/guide/i18n) out of the box. This guide will walk you through how to use it.
|
||||
You can follow the steps completely, just make sure to place any changes to `angular.json` in your project's `project.json` file. Some of these changes may also need to be made to the `rspack.config` file.
|
||||
The steps below indicate where to make these changes.
|
||||
|
||||
The process of building an Angular Rspack application with i18n is similar to building an Angular application with i18n and reuses most of the same steps and configuration.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- `@angular/localize` must be installed in your project.
|
||||
- You must have an `i18n` configuration in your `project.json` file.
|
||||
|
||||
It is assumed you have an `i18n` property in your `project.json` file that looks like this:
|
||||
|
||||
```json {% highlightLines=["3-10"] %}
|
||||
{
|
||||
"name": "my-app",
|
||||
"i18n": {
|
||||
"sourceLocale": "en-GB",
|
||||
"locales": {
|
||||
"fr": {
|
||||
"translation": "src/locale/messages.fr.xlf"
|
||||
}
|
||||
}
|
||||
},
|
||||
"targets": {
|
||||
"extract-i18n": {}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% callout type="note" title="Extracting i18n messages" %}
|
||||
The `extract-i18n` target found in Angular projects will still be used to extract the i18n messages into XLIFF (or chosen format) files.
|
||||
You simply need to run `nx extract-i18n my-app` to extract the messages.
|
||||
{% /callout %}
|
||||
|
||||
## Step 1: Configure the Rspack Configuration
|
||||
|
||||
To enable i18n, you need to add the following configuration to your `rspack.config` file:
|
||||
|
||||
```js {% highlightLines=[7,15] %}
|
||||
export default createConfig(
|
||||
{
|
||||
options: {
|
||||
root: __dirname,
|
||||
polyfills: [
|
||||
'zone.js',
|
||||
'@angular/localize/init',
|
||||
],
|
||||
...,
|
||||
},
|
||||
},
|
||||
{
|
||||
production: {
|
||||
options: {
|
||||
localize: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Step 2: Run the build
|
||||
|
||||
After configuring the Rspack configuration, you can run the build with the following command:
|
||||
|
||||
```bash
|
||||
npx nx build my-app
|
||||
```
|
||||
|
||||
It will output bundles in the `dist` directory with the following structure:
|
||||
|
||||
```text
|
||||
dist
|
||||
├── browser
|
||||
│ ├── [localeCode]
|
||||
│ │ ├── main.js
|
||||
│ │ ├── main.js.map
|
||||
│ │ ├── index.html
|
||||
│ │ ├── styles.css
|
||||
│ │ ├── ...
|
||||
```
|
||||
@ -42,7 +42,6 @@ Please not that Angular Rspack support is still experimental and is not yet cons
|
||||
The following are known limitations and missing features of Angular Rspack:
|
||||
|
||||
- Static Site Generation (SSG) is not supported.
|
||||
- Angular's built-in support for Internationalization (i18n) is not supported.
|
||||
- Server Routing is not supported - still experimental in Angular currently.
|
||||
- App Engine APIs are not supported - still experimental in Angular currently.
|
||||
- Optimization is not currently 1:1 with Angular's optimization - however, there are still great optimizations that are made.
|
||||
|
||||
@ -115,6 +115,7 @@
|
||||
- [Introduction](/recipes/angular/rspack/introduction)
|
||||
- [Migrate from Angular Webpack](/recipes/angular/rspack/migrate-from-webpack)
|
||||
- [Handling Configurations](/recipes/angular/rspack/handling-configurations)
|
||||
- [Internationalization (i18n)](/recipes/angular/rspack/internationalization)
|
||||
- [Migration](/recipes/angular/migration)
|
||||
- [Migrating from Angular CLI](/recipes/angular/migration/angular)
|
||||
- [Migrating From Multiple Angular CLI Repos](/recipes/angular/migration/angular-multiple)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user