2

After updating our Angular app from version 14.0.4 to version 15.1.3 (also tried 15.1.2 before) we get the following error when trying to access the app:

Uncaught 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.
For server-side rendering applications add the import to your `main.server.ts` file.)

So the problem is, that we already did those steps many updates ago. As you can see also from the description, this is sth. introduced with version 9. But we are running version 14 (and earlier) without any issues of this kind. The app compiles without errors and this is a run-time error.

I also tried re-running the mentioned command ng add @angular/localize after the version update, which just adds @angular/localize to the types array in the tsconfig, but it still fails with the same error.

I did the update following the recommended angular update website (https://update.angular.io/?l=3&v=14.0-15.0) and also updated all other co-dependencies to the newest version (like material, NgRx, typescript etc.)

We use $localize either directly in components, for example:

 private readonly onLabel = $localize`:@@common_onLabel:`;

Or also in a shared way like this:

export const i18nD = $localize`:@@components_timeDisplay_shortDaysFormat:` as 'd';

I would appreciate any ideas or steps I could try, because I'm running out of ideas what to try next.

Recek
  • 1,258
  • 13
  • 16

3 Answers3

2

I finally found the issue: It was an outdated browserslist configuration. It was not touched for several years and looked like this:

"browserslist": [
  "> 1%",
  "last 1 version",
  "not ie > 0",
  "not ie_mob > 0",
  "safari >= 10",
  "not dead"
]

Removing it completely already fixed the issue. I'm still evaluating if I should set it to this "defaults and supports es6-module" or the Angular 15 defaults: https://angular.io/guide/build#configuring-browser-compatibility. Both seem to work and not cause the error mentioned in my question.

Recek
  • 1,258
  • 13
  • 16
1

It looks like in recent versions they use a different system to include global $localize function.
It does not rely anymore on polyfill, but instead looks for the presence of @angular/localize among TS compiler configuration types array's items.
https://github.com/angular/angular-cli/pull/24032

Try re-issuing schematic for adding $localize

ng add @angular/localize

or adding manually the type path in your tsconfig.json or whatever TS configuration file your project uses.

{
  "compilerOptions": {
    ...
    "types": ["@angular/localize"]  
  }
  ...
}
4javier
  • 481
  • 2
  • 7
  • 22
  • Thanks for your answer, but I already tried that and still getting the same error. – Recek Feb 09 '23 at 08:27
  • Are you sure there's not any other TS configuration file overloading `types` declaration? Where does `tsConfig` property point for your building target? – 4javier Feb 09 '23 at 11:23
  • `tsConfig` points to `src/tsconfig.app.json` and this file then points to the 'main' tsConfig with `"extends": "../tsconfig.json"`. I tried all sorts of combinations. Running `ng add @angular/localize` adds the above mentioned `"types": ["@angular/localize"]` to `tsconfig.app.json`. I also tried having it in both tsConfig file and also just in the 'main' tsConfig one. All combinations result in the same error. – Recek Feb 09 '23 at 12:18
  • I'd clear any cache and rebuild. `.angular` directory and any other used by eventual tool if you're not calling ng-cli directly. – 4javier Feb 09 '23 at 13:49
  • 1
    Really appreciate your effort! But unfortunately no luck :/ I cleared `.angular` and `node_modules`, re-installed and re-run and still nothing. I'm using node v.16.15.1 if that helps, but according https://angular.io/guide/update-to-version-15#v15-bc-01 this should be a high enough version. I will try to go through the update steps again, maybe I did some mistake along the way... – Recek Feb 09 '23 at 14:42
  • The only thing I can think of, is to check installed version of `ng-cli` assuring it's latest available **15.1.5** – 4javier Feb 10 '23 at 17:01
  • It was on **15.1.3** but also changing it to **15.1.5** didn't change the outcome. – Recek Feb 13 '23 at 10:06
  • Since Angular v16 there is no need for the `polyfills.ts` file anymore. But adding the `import '@angular/localize/init';` adding to main.ts doesn't work? And without this import my `ng test` is actually failing (same error message as stated above). The workaround for me is adding this import line to the `jest.setup.ts` file. Hopefully this can be fixed within Angular 16 somehow, since this is the only reason I now need a jest.setup.ts file in Angular (for running Jest unit tests). – Melroy van den Berg May 26 '23 at 18:43
0

I got error with

last 5 Chrome versions
last 5 Firefox versions
last 5 Edge major versions
last 5 Safari major versions

but okay with

chrome > 60
last 4 Chrome versions
last 4 Firefox versions
last 4 Edge major versions
last 4 Safari major versions

I do have the @angular/localize installed and imported.

I tried number more than 5, it ends with failure.

xianshenglu
  • 4,943
  • 3
  • 17
  • 34