A9 - IE11 mixes up i18n units when lazy loaded

🐞 bug report

Affected Package

@angular/localize? (still unclear what the culprit is)

Is this a regression?

Yes, this was working in A8

Description

We are experiencing a regression in IE11 after upgrade to A9. A somewhat complex page consisting of factoried components is showing completely-mixed-up i18n units. (This doesn’t happen in evergreen browsers). We have temporarily worked around it by turning off lazy-loading for this page (if anyone can suggest a way to conditionally eager-load only in es5 compilation and not for evergreen, that would serve as a workaround for our purposes).

We have seen several errors, all related to i18nStartFirstPass as seen here or getBindingMask (which errors on .length on undefined .values in this line for (var i = 0; i < icuExpression.values.length; i++) {)

Since the i18n compile goes fine, and this works in evergreen browsers, we’re not thinking there’s a problem with any of our ICUs?

Here are some screenshots of the real app, as well as the stack trace, relevant code and messages.xlf for the unit it’s currently choking on (which, as you can see, is uninteresting).

Chrome:

IE11:

Stack trace

"Error: Unable to parse ICU expression in "{VAR_SELECT, select, MIPS_GRP_113_overall {Screening for colorectal (colon or rectum) cancer}}" message.
   at i18nStartFirstPass (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:151562:17)
   at ɵɵi18nStart (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:151423:9)
   at ɵɵi18n (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:152485:7)
   at ProviderDetailsNursingHomeOverviewComponent_Template (http://10.0.0.132:8080/2-es5.e3644e6c21e2fdb0ea5c.js:12859:13)
   at executeTemplate (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:124580:9)
   at renderView (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:124289:11)
   at renderComponent (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:126255:7)
   at renderChildComponents (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:124023:9)
   at renderView (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:124327:11)
   at create (http://10.0.0.132:8080/main-es5.7959501"

Template code & messages.xlf

Template: (complete template available in real-problem-screenshots in repro repo)

<span
  content-type="measure-label"
  i18n="@@ProviderMeasuresGroupPracticePerformance__cancer-screening__measure-label"
>{measure.measureId, select,
  MIPS_GRP_113_overall {Screening for colorectal (colon or rectum) cancer}}</span
>

messages.xlf:

<trans-unit id="ProviderMeasuresGroupPracticePerformance__cancer-screening__measure-label" datatype="html">
<source>{VAR_SELECT, select, MIPS_GRP_113_overall {Screening for colorectal (colon or rectum) cancer} }</source>
<context-group purpose="location">
  <context context-type="sourcefile">../../libs/features/provider-measures/src/lib/components/group-practice/performance/performance.component.html</context>
  <context context-type="linenumber">128</context>
</context-group>
</trans-unit>

🔬 Minimal Reproduction

Unfortunately our efforts to create a minimal repro by throwing a large amount of factoried data components from multiple modules at the screen did not succeed; here is that code:

https://github.com/pburkindine/angular9-ie11-i18n

The real-problem-screenshots folder in the repo has all the real app details provided here

🔥 Exception or Error

"Error: Unable to parse ICU expression in "{VAR_SELECT, select, MIPS_GRP_113_overall {Screening for colorectal (colon or rectum) cancer}}" message.
   at i18nStartFirstPass (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:151562:17)
   at ɵɵi18nStart (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:151423:9)
   at ɵɵi18n (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:152485:7)
   at ProviderDetailsNursingHomeOverviewComponent_Template (http://10.0.0.132:8080/2-es5.e3644e6c21e2fdb0ea5c.js:12859:13)
   at executeTemplate (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:124580:9)
   at renderView (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:124289:11)
   at renderComponent (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:126255:7)
   at renderChildComponents (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:124023:9)
   at renderView (http://10.0.0.132:8080/main-es5.795950121ed4b72ff95a.js:124327:11)
   at create (http://10.0.0.132:8080/main-es5.7959501"

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.7
Node: 12.13.1
OS: darwin x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@angular/cdk                      9.1.3
@angular/material                 9.1.3
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[AndrewKushnir]

Hi @pburkindine, thanks for reporting the issue.

Based on the error message that you provided, it looks like the i18nPostProcess function (that is generated by the compiler and should be present in the compiled output) is not getting called in the scenario that you described, as a result, the runtime logic is not able to parse an ICU.

I looked at the repro repository and the template that causes the problem. The template is relatively big, so I’d like to ask if you could help find the minimum possible content in that template that would trigger the problem (for ex. by removing part of the template and checking if the problem still exists)?

Also, could you please let us know if you use some specific way of loading translations or the problem happens with bare templates (without actually loading translations)?

Thank you.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}