[Angular 9 - i18n] Cannot use empty strings as translations anymore

🐞 bug report

Affected Package

The issue is caused by package @angular/localize and/or Ivy (not sure). The crash happens here: https://github.com/angular/angular/blob/416c786774dccc20d824737207be4e55cb53c9cc/packages/core/src/render3/hooks.ts#L74

Is this a regression?

Yes, the last previous version in which this bug was not present was: Angular 8.2.14.

Description

When translating an app in different locales, it may be wanted to translate some strings to "". With Angular 8, it was possible to let some translation <target status="final"> with empty value in XLIFF 1.2 files. The result would be an empty HTML element. But with Angular 9, it seems not possible anymore. When a <target> is left empty and the corresponding bundle generated, the app crashes at this line when the page containing the empty target is rendered:

TypeError: Cannot read property 'directiveStart' of null

Please note that this crash only happens when the empty <target> concerns an HTML tag content. When the empty <target> concerns an HTML attribute translation, the app won’t crash.

🔬 Minimal Reproduction

Minimal reproduction available at: https://github.com/bravier/ng9-i18n-empty-xliff-target

I’ve generated this example using ng new myapp and added @angular/localize using the official documentation. The i18n tagged span is here.

Build steps:

• npm install
• npm run build
• http-serve dist/myapp
• Navigate to the /fr/ build and look at the console.

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.0
Node: 10.15.0
OS: linux x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.0
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

[bravier]

Hi @AndrewKushnir,

I was able to test your fix using @adrienverge’s patch (I am still on 9.0.7) and I have the exact same results: no more crash and generated HTML looks as it was before in Angular 8.

Thank you for fixing it so quickly.

[adrienverge]

Hello @AndrewKushnir, thanks for the rapid answer.

I couldn’t test your change using the proposed method, because my app is not on 9.1.1 (I have to stay on 9.0 for other reasons). So I made the following patch from your PR (only the relevant parts), and applied it to my node_modules: handle-empty-translations-correctly-pr36499-angular9.0.7.patch.txt For users that have the same problem, you can apply it directly for Angular 9.0 using:

patch -p0 < handle-empty-translations-correctly-pr36499-angular9.0.7.patch.txt

Result: it works 🎉 No more crash, and generated HTML is fine (no tags being closed prematurely). Thanks @AndrewKushnir!