How to make Angular 11 i18n work in NRWL NX workspace.json?

user_552194 0
Viewed 2344

Angular 11 has built-in support for i18n. This works great when configure in angular.json config file. I am working on large project where there are multiple sub-project in single monorepo. We are using Nrwl NX workspace.json to configure the projects. Problem is that workspace.json has different syntax regarging the i18n, and it does not seem to be compatible with that of angular.json. Also the NX documentation is very brief (almost not existent) regarging the i18n.

Result is that currently my app is not localized at all.

Any ideas how to make i18n work inside NRWL NX?

Thank you in advance.

nrwl nrwl-nx angular internationalization
1 Answers

After several tries I have found a way how to make it work.

So there are several steps how to make Angular's i18n work within NRWL NX workspace.

Step #1) Define multiple locales in default build target

"targets": {
  "build": {
    "executor": "@angular-devkit/build-angular:browser",
    "options": {
        // … options not relevant to i18n removed
        "i18nMissingTranslation": "warning",
        "localize": ["fr", "en", "sp"]
    },

Step #2) Define named build targets for each locale

"configurations": {
   "production": {
     // ... some prod settings
   },
   "en": {
     "localize": ["en"]
   },
   "fr": {
     "localize": ["fr"]
   }
  },

Step #3) Update serve configuration to use specific build target Notice the appname:build:en - that instructs nx serve to use specific build target

"serve": {
 "executor": "@angular-devkit/build-angular:dev-server",
 "options": {
   "browserTarget": "appname:build:en"
 }
}

Step #4) Run nx serve to verify its working

Full article with more details is here - http://blog.davidjs.com/2021/03/working-with-angular-i18n-inside-nrwl-nx-workspace/

user_5521940
Related