IE 11 testing/serving fails with i18n in es5 JIT mode with 9.0.0-rc.4

[maxokorokov]

🐞 bug report

Affected Package

Not sure, but looks like @angular/localization or compiler doesn't play well with JIT and target: es5 (see below)

Is this a regression?

Yes, latest Angular 8 works fine.

Description

Testing and serving fails in IE 11 with es5 target in JIT mode with i18n

🔬 Minimal Reproduction

Steps:

• create a new cli project with 9.0.0-rc4
• add a i18n attribute anywhere in a component template
• add i18n polyfills with ng add @angular/localize
• change target to es5
• run ng test or ng serve (in JIT mode with aot: 'false')

Repo to clone with the steps above → https://github.com/maxokorokov/ie-i18n-test-fail

🔥 Exception or Error

IE 11.0.0 (Windows 10.0.0) AppComponent should create the app FAILED
	SyntaxError: Invalid character
	error properties: Object({ number: -2146827274 })
	    at 
	   at JitEvaluator.prototype.evaluateCode (http://172.16.220.123:9876/_karma_webpack_/vendor.js:13583:9)
	   at JitEvaluator.prototype.evaluateStatements (http://172.16.220.123:9876/_karma_webpack_/vendor.js:13553:9)
	   at CompilerFacadeImpl.prototype.jitExpression (http://172.16.220.123:9876/_karma_webpack_/vendor.js:25858:9)
	   at CompilerFacadeImpl.prototype.compileComponent (http://172.16.220.123:9876/_karma_webpack_/vendor.js:25824:9)
	   at ɵcmp.get (http://172.16.220.123:9876/_karma_webpack_/vendor.js:62429:17)
	   at getComponentDef (http://172.16.220.123:9876/_karma_webpack_/vendor.js:37783:5)
	   at verifyDeclarationsHaveDefinitions (http://172.16.220.123:9876/_karma_webpack_/vendor.js:62105:9)
	   at verifySemanticsOfNgModuleDef (http://172.16.220.123:9876/_karma_webpack_/vendor.js:62080:5)
	   at ɵinj.get (http://172.16.220.123:9876/_karma_webpack_/vendor.js:62038:30)
	   at R3TestBedCompiler.prototype.applyProviderOverridesToModule (http://172.16.220.123:9876/_karma_webpack_/vendor.js:69322:9)

If you dig deeper it fails here:

and component code looks like this:

"use strict";'use strict';
var I18N_0;
if (ngI18nClosureMode) {
  var MSG_EXTERNAL_2023484548631819319$$_1 = goog.getMsg('Hello world');
  I18N_0 = MSG_EXTERNAL_2023484548631819319$$_1;
} else {
  I18N_0 = $localize `Hello world`;
}
var $def = jit___defineComponent_0({type:jit_AppComponent_1,selectors:[['app-root']],
    decls:2,vars:0,template:function AppComponent_Template(rf,ctx) {
      if (rf & 1) {
        jit___elementStart_2(0,'div');
        jit___i18n_3(1,I18N_0);
        jit___elementEnd_4();
      }
    },encapsulation:2});
return {$def:$def};
//# sourceURL=ng:///AppComponent.js
//# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoibmc6Ly8vQXBwQ29tcG9uZW50LmpzIiwidmVyc2lvbiI6Mywic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsibmc6Ly8vQXBwQ29tcG9uZW50LmpzIiwibmc6Ly8vQXBwQ29tcG9uZW50L3RlbXBsYXRlLmh0bWwiXSwic291cmNlc0NvbnRlbnQiOlsiICIsIjxkaXYgaTE4bj5IZWxsbyB3b3JsZDwvZGl2PiJdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7Ozs7OztRQ0FBO1FBQUE7UUFBcUI7OzsifQ=="

---

To me looks like the reason is back quotes in I18N_0 = $localize ... call
Haven't checked IE 10 and 9

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.0-rc.4
Node: 12.12.0
OS: darwin x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.4
@angular-devkit/build-angular     0.900.0-rc.4
@angular-devkit/build-optimizer   0.900.0-rc.4
@angular-devkit/build-webpack     0.900.0-rc.4
@angular-devkit/core              9.0.0-rc.4
@angular-devkit/schematics        9.0.0-rc.4
@angular/localize                 9.0.0-rc.0
@ngtools/webpack                  9.0.0-rc.4
@schematics/angular               9.0.0-rc.4
@schematics/update                0.900.0-rc.4
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

[petebacondarwin]

I suspect the problem is this line here

angular/packages/compiler/src/output/abstract_emitter.ts

Line 365 in a6247aa

ctx.print(ast, '$localize `' + head.raw);

In JIT mode this is being output for evaluation.

[angular-automatic-lock-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.}