$localize runtime error with special .browserslistrc file

Which @angular/* package(s) are the source of the bug?

localize

Is this a regression?

Yes

Description

Since Angular 15, targeting last 5 iOS major versions using .browserslistrc file breaks the generated bundle, throwing TypeError: $localize is not a function on runtime. Just changing .browserslistrc to last 4 iOS major versions generates valid bundles again.

To reproduce, follow this steps:

ng new ng add @angular/localize

Then update .browserslistrc with this content: last 5 iOS major versions

Add "localize": true in your angular.json file, under projects > yourProject > architect > build > options.

Add an i18n attribute to some HTML element to enable localization.

And then:

ng serve

Please provide a link to a minimal reproduction of the bug

I haven’t been able to reproduce on StackBlitz, it’s ignoring my angular.json file

Please provide the exception or error you saw

TypeError: $localize is not a function

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 15.0.0
Node: 18.12.1
Package Manager: npm 9.1.2
OS: win32 x64

Angular: 15.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0
@angular-devkit/schematics      15.0.0
@schematics/angular             15.0.0
rxjs                            7.5.7
typescript                      4.8.4

Anything else?

No response

[bravier]

Any updates on this issue? I face the exact same problem since upgrading from Angular 14 to 15. Thanks!

[alan-agius4]

It looks like the $localize is not being replaced when the component output is as follows:

class AppComponent {
  constructor() {
    this.title = 'angular-i18n-error';
  }
}
AppComponent.ɵfac = function AppComponent_Factory(t) {
  return new (t || AppComponent)();
};
AppComponent.ɵcmp = /*@__PURE__*/_angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵdefineComponent"]({
  type: AppComponent,
  selectors: [["app-root"]],
  decls: 2,
  vars: 0,
  consts: function () {
    let i18n_0;
    if (typeof ngI18nClosureMode !== "undefined" && ngI18nClosureMode) {
      /**
       * @suppress {msgDescriptions}
       */
      const MSG_EXTERNAL_2446117790692479672$$SRC_APP_APP_COMPONENT_TS_1 = goog.getMsg("Resources");
      i18n_0 = MSG_EXTERNAL_2446117790692479672$$SRC_APP_APP_COMPONENT_TS_1;
    } else {
      i18n_0 = $localize(_t || (_t = _`Resources`));
    }
    return [i18n_0];
  },
  template: function AppComponent_Template(rf, ctx) {
    if (rf & 1) {
      _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementStart"](0, "h2");
      _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵi18n"](1, 0);
      _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵelementEnd"]();
    }
  },
  styles: ["\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZVJvb3QiOiIifQ== */"]
});

Transferring back to the FW as this is not a CLI issue.