miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(angular): add guide on i18n for Angular Rspack (#30732)

Browse Source 
## 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 2025-04-16 18:38:22 +01:00 committed by GitHub
parent a911318017
commit 4b4226d2e0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 189 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/generated/manifests/menus.json
View File

@ -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",

44
docs/generated/manifests/nx.json
View File

@ -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",

18
docs/generated/manifests/tags.json
View File

@ -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": "",

6
docs/map.json
View File

@ -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
View 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
│ │ ├── ...
```

1
docs/shared/guides/angular-rspack/introduction.md
View File

@ -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.

1
docs/shared/reference/sitemap.md
View File

@ -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)