$localize runtime error with special .browserslistrc file

This issue has been created since 2022-11-21.

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

JoostK wrote this answer on 2022-11-21

Only the latest two majors of Safari are officially supported; so Safari 15 and 16 for Angular 15.

javiermarinros wrote this answer on 2022-11-21

It was the same for Angular 14, but it worked anyway for iOS 12 and 13 if configured using .browserslistrc to emit es6 code.

In Angular 15 trying to emit es6 compatible code ends up with this runtime error.

JoostK wrote this answer on 2022-11-21

ES6 (=ES2015), or ES5?

javiermarinros wrote this answer on 2022-11-21

ES2015

javiermarinros wrote this answer on 2022-11-21

We are having issues with our Angular 15 builds because the generated bundles use ES2020 features, like the Nullish Coalescing operator.

We were using this .browserslistrc

> 0.5%
last 2 versions
Firefox ESR
not dead
android > 5.0
last 5 iOS major versions
not IE > 0
not IE_Mob > 0

And it used to work just fine with Angular 14 builds, but with v15 builds are broken and the TypeError: $localize is not a function error is thrown. To fix it, we have to change iOS targeting to last 4 iOS major versions, but then the bundles use ES2020 features and break in some older devices.

alan-agius4 wrote this answer on 2022-11-21

@javiermarinros, I did try to replicate using the steps provided but I was not able.

ng b --configuration=development --localize
One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 
output is not supported by the Angular CLI.
Ignored browsers: kaios 2.5, op_mini all
✔ Browser application bundle generation complete.
✔ Localized bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files | Names         |  Raw Size
vendor.js           | vendor        |   2.16 MB | 
polyfills.js        | polyfills     | 109.00 kB | 
main.js             | main          |  52.54 kB | 
runtime.js          | runtime       |   6.38 kB | 
styles.css          | styles        |   1.10 kB | 

                    | Initial Total |   2.33 MB

Build at: 2022-11-21T13:10:44.604Z - Hash: 374c759f1542ce5f - Time: 19458ms

Your browserslist configuration is very inclusive which includes a number of browsers that are not officially supported. And it also some browsers which are not supported at all such as Opera Mini All and Kaios 2.5.

Regarding the Nullish Coalescing operator, this is down-levelled to a ternary operator when Nullish Coalescing is not supported by one of more browsers listed in the browserlist configuration. In your cases the downlevelling is happening even when replacing the iOS statement with last 4 iOS major versions, as there are a number of browsers in your config which do not support this feature example: iOS Safari 13.0-13.1 and QQ Browser 13.1.

I suggest that you setup a minimal repro that demonstrates the problem.

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

javiermarinros wrote this answer on 2022-11-21

@alan-agius4 I tried to replicate it on StackBlitz, but I was not able because it seems to ignore the localize config in the angular.json file.

You can reproduce the issue with this repo: https://github.com/javiermarinros/angular-i18n-error

Note that this is a runtime issue, this is what I get after running ng serve on the above repo:

image

Besides that, running ng build in that repo code generates bundles containing the Nullish Coalescing operator, that shouldn't be there because the .browserslistrc config.

alan-agius4 wrote this answer on 2022-11-23

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.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-12-01
Star Count 85220
Watcher Count 3042
Fork Count 22607
Issue Count 1316

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Converting draft to issue does not generate new issue notification 1 2022-05-30 2022-11-19
add an option to disable text drag and drop 2 2022-08-05 2022-11-14
Broken Liquidity Bonding Prompt 4 2022-09-20 2022-11-08
Closing when Maximized results in fake maximized window 17 2022-03-26 2022-11-13
Does not work with custom titlebar (appWindow.close) 3 2021-10-06 2022-11-13
Compile fails with tauri-1.0.0-rc.5. 2 2022-03-28 2022-11-13
RUSTSEC-2020-0159: Potential segfault in `localtime_r` invocations 1 2021-10-19 2022-11-13
Update the FastAPI dependency 3 2021-10-02 2022-11-10
Device id dont update, when delete another device 5 2022-11-22 2022-11-19
Send tasmota commands to all devices 5 2022-11-22 2022-11-19
Problem with automatically update status from Gosund P1 and Nous A5T 1 2022-11-22 2022-11-19
R-Z coordinates with partial assembly 1 2020-10-22 2022-10-21
ReferenceError: regeneratorRuntime is not defined 0 2021-01-07 2022-11-13
[BUG] Landing Gear Does Not Come Up 1 2021-03-11 2022-11-04
参考文献中会议文献标识是[C]//而不是[C]. 5 2021-01-21 2022-10-29
Very long phone number is accepted 1 2021-04-16 2022-08-07
Add support for .NET 6 0 2021-10-25 2022-10-23
China.list 会导致微信公众号评论出现问题 1 2022-09-17 2022-11-16
Plan migration to Vue 3 1 2020-11-04 2022-01-21
RDB Loader: add no-op schedule 1 2021-10-16 2022-09-30
Export new settings for `IborCoupon` and `Money` classes 1 2021-09-29 2022-10-03
WikiExport header 13 2021-03-22 2021-12-30
Sampling_jax and Timeseries AR on pymc 1 2021-12-14 2022-09-24
__init__() missing 1 required positional argument: 'as_while' when sampling with jax 4 2021-12-29 2022-09-27
JPEG poster labeling 3 2017-11-14 2022-11-28
Display album artist instead of artist 3 2022-05-14 2022-11-22
yum updates for ec2 instances 2 2021-04-27 2022-11-20
Pikmin 3 Multiplayer Crash 3 2021-11-03 2022-11-02
Set modify the center when scaling as default and the default behaviour as secondary option? [ol.interaction.Transform] 1 2021-11-26 2022-11-03
Knapper for kommune- og fylkes-sidene får uønsket hovering 0 2021-10-06 2022-10-13
Hangs on the first query after databend-query start up 3 2022-10-13 2022-10-18
Progress bar panic in Yocto 1 2021-11-03 2022-11-16
Unnecessary retry in failed routine load scanning 0 2022-07-06 2022-10-28
hitkino.org 0 2021-10-29 2021-11-15
Browser compatibility table has invisible tab stops 4 2022-03-03 2022-11-13
SSL certificate problem with armv6 using buster 2 2021-03-16 2022-11-02
Working on Higher dimensions? 0 2021-10-27 2022-11-13
Example codes cannot be compiled 2 2021-03-07 2022-11-17
ConditionalFields not working with List or group fields 2 2022-04-19 2022-11-22
Docview查看Office文档失败。 2 2022-09-23 2022-11-19
The automated release is failing 🚨 0 2022-11-25 2022-11-20
使用 `toPNG` 导出的图片比较模糊 1 2022-11-24 2022-11-20
[Camera Support]: Unifi G3 Instant / JPEG snapshot / What settings for detect/recording? 30 2022-04-25 2022-11-14
When use with `create_list`, `build` method returns same instance every time 3 2021-06-17 2022-11-30
GRPC build fail for version 1.43.0 2 2022-01-10 2022-11-23
PathMarkerLayer has incorrectly positioned arrows 0 2022-02-23 2022-11-18
Automate pushing staging artifacts to production during release 2 2021-11-29 2022-10-18
Remove the constraint on substitutions not being applied if the first character is an escaped single quote on attribute list enclosed in single quotes 0 2022-08-29 2022-11-23
Unable to capture DecoderException (`TooLongHttpLineException`) 6 2022-09-02 2022-11-15
[Bug] show load AND should not allow the same column name in CompoundPredicate 0 2021-12-29 2021-12-28