Search code examples
angularinternationalizationnrwl-nx

nx serve is ignoring import of "@angular/localize/init"


I am trying to implement @angular/localize in my project which is part of an Nx workspace ([email protected]). I am following the official guide: https://angular.io/guide/i18n-overview

Specifically, I

  • installed the version of @angular/[email protected] which aligns with my current angular version

  • added import '@angular/localize/init' to my polyfills.ts

  • added /// <reference types="@angular/localize" /> to my main.ts

  • added i18n configuration to my project config:

    "i18n": {
      "sourceLocale": "en",
      "locales": {
        "de": {
          "translation": "apps/web/login/src/locale/messages.de.xlf"
        }
      }
    }
    
  • configured the build target

    ...
    "aot": true,
    "localize": ["de"]
    ...
    

When I nx serve this project, I am expecting to have my strings localize in de. However, I get the the following error

Error: It looks like your application or one of its dependencies is using i18n. Angular 9 introduced a global $localize() function that needs to be loaded. Please run ng add @angular/localize from the Angular CLI. (For non-CLI projects, add import '@angular/localize/init'; to your polyfills.ts file.

When I inspect my polyfills.js bundle file, I see that webpack apparently ignores the import of @angular/localize/init which explains the missing $localize function in the app.

...
/***/ 85028:
/*!****************************************!*\
  !*** @angular/localize/init (ignored) ***!
  \****************************************/
/***/ (() => {

/* (ignored) */

/***/ }),
...

How can I make webpack not ignore this import and make this work?

Extracting the tags using @angular-devkit/build-angular:extract-i18n works perfectly fine.

I tried to reinstall node_module to make sure versions are correct and also looked up github issues in order to find answers - without success


Solution

  • For the record: I was running into a problem where an outdated browserslist configuration prevented it to work: https://github.com/angular/angular/issues/48194

    basically I had configured safari >= 12 whereas angular officially supports only the latest two major versions. I changed that to safari >= 15 and now everything works.

    only took me 7 days of research...