Build-time Internationalization (i18n) with Angular Rspack
Angular Rspack supports Angular's build-time 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/localizemust be installed in your project.- You must have an
i18nconfiguration in yourproject.jsonfile.
It is assumed you have an i18n property in your project.json file that looks like this:
1{
2 "name": "my-app",
3 "i18n": {
4 "sourceLocale": "en-GB",
5 "locales": {
6 "fr": {
7 "translation": "src/locale/messages.fr.xlf"
8 }
9 }
10 },
11 "targets": {
12 "extract-i18n": {}
13 }
14}
15The 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.
Step 1: Configure the Rspack Configuration
To enable i18n, you need to add the following configuration to your rspack.config file:
1export default createConfig(
2 {
3 options: {
4 root: __dirname,
5 polyfills: [
6 'zone.js',
7 '@angular/localize/init',
8 ],
9 ...,
10 },
11 },
12 {
13 production: {
14 options: {
15 localize: true,
16 },
17 },
18 }
19);
20Step 2: Run the build
After configuring the Rspack configuration, you can run the build with the following command:
1npx nx build my-app
2It will output bundles in the dist directory with the following structure:
1dist
2├── browser
3│ ├── [localeCode]
4│ │ ├── main.js
5│ │ ├── main.js.map
6│ │ ├── index.html
7│ │ ├── styles.css
8│ │ ├── ...
9