Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
maxokorokov opened this issue Dec 5, 2019 · 2 comments
Closed

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

maxokorokov opened this issue Dec 5, 2019 · 2 comments

Comments

@maxokorokov
Copy link

@maxokorokov maxokorokov commented Dec 5, 2019

馃悶 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:

Screen Shot 2019-12-05 at 10 06 47

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
@maxokorokov maxokorokov mentioned this issue Dec 5, 2019
9 of 11 tasks complete
@petebacondarwin

This comment has been minimized.

Copy link
Member

@petebacondarwin petebacondarwin commented Dec 5, 2019

I suspect the problem is this line here

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

In JIT mode this is being output for evaluation.

@ngbot ngbot bot modified the milestone: needsTriage Dec 5, 2019
petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Dec 6, 2019
Previously the JIT evaluated code for ivy localized strings included
backtick tagged template strings, which are not compatible with ES5
in legacy browsers such as IE 11.

Now the generated code is ES5 compatible.

Fixes angular#34246
petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Dec 6, 2019
Previously the JIT evaluated code for ivy localized strings included
backtick tagged template strings, which are not compatible with ES5
in legacy browsers such as IE 11.

Now the generated code is ES5 compatible.

Fixes angular#34246
gkalpak added a commit to gkalpak/angular that referenced this issue Dec 6, 2019
Previously the JIT evaluated code for ivy localized strings included
backtick tagged template strings, which are not compatible with ES5
in legacy browsers such as IE 11.

Now the generated code is ES5 compatible.

Fixes angular#34246
petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Dec 6, 2019
Previously the JIT evaluated code for ivy localized strings included
backtick tagged template strings, which are not compatible with ES5
in legacy browsers such as IE 11.

Now the generated code is ES5 compatible.

Fixes angular#34246
petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Dec 6, 2019
Previously the JIT evaluated code for ivy localized strings included
backtick tagged template strings, which are not compatible with ES5
in legacy browsers such as IE 11.

Now the generated code is ES5 compatible.

Fixes angular#34246
AndrewKushnir added a commit that referenced this issue Dec 6, 2019
鈥e (#34265)

Previously the JIT evaluated code for ivy localized strings included
backtick tagged template strings, which are not compatible with ES5
in legacy browsers such as IE 11.

Now the generated code is ES5 compatible.

Fixes #34246

PR Close #34265
josephperrott added a commit to josephperrott/angular that referenced this issue Dec 11, 2019
鈥e (angular#34265)

Previously the JIT evaluated code for ivy localized strings included
backtick tagged template strings, which are not compatible with ES5
in legacy browsers such as IE 11.

Now the generated code is ES5 compatible.

Fixes angular#34246

PR Close angular#34265
@angular-automatic-lock-bot

This comment has been minimized.

Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Jan 6, 2020

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 6, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
3 participants
You can鈥檛 perform that action at this time.