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

fix(ivy): Add `style="{{exp}}"` based interpolation Fixes #33575 Add support for interpolation in styles as shown: ``` <div style="color: {{exp1}}; width: {{exp2}};"> ``` — committed to mhevery/angular by mhevery 5 years ago
fix(ivy): Add `style="{{exp}}"` based interpolation Fixes #33575 Add support for interpolation in styles as shown: ``` <div style="color: {{exp1}}; width: {{exp2}};"> ``` — committed to mhevery/angular by mhevery 5 years ago
fix(ivy): Add `style="{{exp}}"` based interpolation (#34202) Fixes #33575 Add support for interpolation in styles as shown: ``` <div style="color: {{exp1}}; width: {{exp2}};"> ``` PR Close #34202 — committed to angular/angular by mhevery 5 years ago

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.

RickStrahl on Feb 24, 2020

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 😭😭

EmaGht on Dec 12, 2019

WIP: https://github.com/angular/angular/pull/34202

mhevery on Jan 27, 2020

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.

IgorMinar on Nov 6, 2019

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>)

SkrupSulten on Feb 28, 2020

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 😦

JulienBourgain on Jan 9, 2020

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

EmaGht on Mar 2, 2020

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

AliYusuf95 on Feb 18, 2020

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.

mhevery on Nov 12, 2019