$localize is not a function with Angular 14 build

Bug description:

After upgrading to Angular 14, the Ngb Pagination component breaks with the error TypeError: $localize is not a function, but only in production build, it works in dev-mode.

This seems to be cause by some incompatibility of the @angular/localize library between the main build and this third party component build.

It’s like this polyfill doesn’t have any affect anymore: import '@angular/localize/init';

Versions of Angular, ng-bootstrap and Bootstrap:

Tried with ng-bootstrap 13.0.0-beta.1 and 12.x

Angular: 14.0.5 ng-bootstrap: 13.0.0-beta.1 Bootstrap: 4.5

[St1c]

Following discussions here: https://github.com/angular/angular-cli/issues/23781 on the same issue:

It seems that if you put “not ios_saf 12.2-12.6” to the end of .browserlistrc , then Angular compiles just fine.

I spent quite some time debugging it, the problem seems to be, that for legacy browsers compiler creates this compiled javascript code:

const i18n_1 = $localize(_t2 || (_t2 = _2``:@@ngb.alert.close:Close``));

In the compiled code _2 is defined as:

let _2 => t => t;

which causes problems, as $localize function should be used as tag function for template literals, where it expects messageParts: TemplateStringsArray as argument, but here it receives plain string. Removing " ios_saf 12.2-12.6" from browser compatibility list translates all custom IDs just fine.

[St1c]

I don’t think that’s the solution .browserlistrc is essential file for angular compiler. It says to the compiler which browsers should be supported, and then the compiler compiles Javascript files in compliance with that configuration.