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

Issue

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

Specifically, I

• installed the version of @angular/localize@16.1.3 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...

Answered By - Christian