angular: Internal compiler error on style interpolation `style="{{exp}}"` with Ivy

🐞 bug report

Affected Package

@angular/compiler

Is this a regression?

Yes, works without ivy

Description

Interpolating the style of a component with

style = {{style}}

Throws error in ivy

🔬 Minimal Reproduction

https://github.com/EmaGht/angularStyleInterpolation

instructions in README

🌍 Your Environment

Angular Version: 9.0.0-rc0

Anything else relevant? Could you also, please, give a couple informations more when something like this happens?

When ivy crashes during template compilation it doesn’t give any pointer to which file is actually affected by the error. It took me 5 hours of commenting out components to find this bug.

Next time this happens, my sanity is on your conscience! 😭

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 8
  • Comments: 19 (7 by maintainers)

Commits related to this issue

Most upvoted comments

Just as an aside a big problem with this particular bug is that it isn’t reporting the source. Fixing the style issue is great, but the underlying problem of some sort of compilation error in a template not pointing back to the template is really the bigger problem here I think.

Is there a particular reason this has been pushed away from blockers? 😟

This broken “common use-case” is gonna cause me major problems on updating my company’s applications and i was eager to try the new version of Angular when it came out 😭😭

The culprit in question: https://github.com/EmaGht/angularStyleInterpolation/blob/master/src/app/test-comp/test-comp.component.html

The compiler should definitely give you info about the file location of the error. I’m sorry that you wasted so much time on this. We’ll need to investigate.

I’m still getting the same error with Angular 9.0.4 😦

ERROR in Error: Internal Error: Unexpected interpolation
    at error (C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:2721:15)
    at _AstToIrVisitor.interpolationFunction (C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:17867:179)
    at _AstToIrVisitor.visitInterpolation (C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:8517:29)
    at Interpolation.visit (C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:7590:28)
    at convertPropertyBinding (C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:8292:52)
    at TemplateDefinitionBuilder.convertPropertyBinding (C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:17867:44)
    at Object.value (C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:17756:63)
    at C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:17817:42
    at Array.map (<anonymous>)
    at C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:17816:38
    at C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:17094:83
    at Array.map (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:17094:56)
    at C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:17636:60
    at C:\Users\mbi\source\repos\NemexFrontend\Nemex\node_modules\@angular\compiler\bundles\compiler.umd.js:17070:81
    at Array.forEach (<anonymous>)

I’m blocked for that too 😦 when you have 100k line of code, you can’t try to find where is the problem without more information 😦

Having the same issue, im posting here the easiest way I found to debug it

disable ivy in tsconfig.json

you’ll at least then get a sensible error message for tracking down the culprit, solve the issue, then re-enable, hopefully in a near-future release IVY will be able to produce more helpful error messages during template compilation

This is an Ivy-specific error tho. If you disable it, compilation will work.

For other kind of errors your suggestion may work

I have the same error, at least the compiler should point to the files that contain errors.

ERROR in Error: Internal Error: Unexpected interpolation
    at error (/../node_modules/@angular/compiler/bundles/compiler.umd.js:2721:15)
    at _AstToIrVisitor.interpolationFunction (/../node_modules/@angular/compiler/bundles/compiler.umd.js:17810:179)
    at _AstToIrVisitor.visitInterpolation (/../node_modules/@angular/compiler/bundles/compiler.umd.js:8498:29)
    at Interpolation.visit (/../node_modules/@angular/compiler/bundles/compiler.umd.js:7572:28)
    at convertPropertyBinding (/../node_modules/@angular/compiler/bundles/compiler.umd.js:8274:52)
    at TemplateDefinitionBuilder.convertPropertyBinding (/../node_modules/@angular/compiler/bundles/compiler.umd.js:17810:44)
    at /../node_modules/@angular/compiler/bundles/compiler.umd.js:17732:39
    at Object.params (/../node_modules/@angular/compiler/bundles/compiler.umd.js:13700:49)
    at Object.value (/../node_modules/@angular/compiler/bundles/compiler.umd.js:17730:34)
    at /../node_modules/@angular/compiler/bundles/compiler.umd.js:17760:42
    at Array.map (<anonymous>)
    at /../node_modules/@angular/compiler/bundles/compiler.umd.js:17759:38
    at /../node_modules/@angular/compiler/bundles/compiler.umd.js:17037:83
    at Array.map (<anonymous>)
    at TemplateDefinitionBuilder.buildTemplateFunction (/../node_modules/@angular/compiler/bundles/compiler.umd.js:17037:56)
    at Object.compileComponentFromMetadata (/../node_modules/@angular/compiler/bundles/compiler.umd.js:18664:58)

Version:


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.2
Node: 12.13.1
OS: darwin x64

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.2
@angular-devkit/build-angular      0.900.2
@angular-devkit/build-optimizer    0.900.2
@angular-devkit/core               9.0.2
@angular-devkit/schematics         9.0.2
@angular/cdk                       9.0.0
@angular/cli                       9.0.2
@angular/material                  9.0.0
@angular/material-moment-adapter   9.0.0
@schematics/angular                9.0.2
@schematics/update                 0.900.2
rxjs                               6.5.4
typescript                         3.7.5
webpack                            4.41.6

Currently this is not supported because <div style="{{exp1}}" [style.width]="exp1"> requires that we parse the exp1 to see if it has width so that exp2 can overwrite it.

Turns out that @matsko had to add parser for other reasons so now we should be able to support it.