Angular2: Uncaught (in promise): Quotes are not supported for evaluation! in the component

Question

I have a component which has an input parameter:

import {Component,Input} from '@angular/core';  @Component({     selector: 'comment' ,     template: `             <div class="col-lg-6 col-md-6 col-xs-6 thumb">             <div class="post-owner">                 <div class="media">                     <div class="media-left">                         <a href="#">                           <img class="media-object rounder" src=imageURI >                         </a>                     </div>                 </div>             </div>         </div>` })  export class CommentCompoent{     @Input() imageURI=""; } 

And in the parent component I have passed a image path to it like this:

<comment [imageURI]='image_path'></comment> 

The problem is, when I run it, it complains with:

EXCEPTION: Error: Uncaught (in promise): Quotes are not supported for evaluation!

So what should I do?

Update: It works fine when I remove [imageURI]='image_path' in the parent component, and it shows the rest of component perfectly

Answer 1

You should change your comment tag in the parent component to this:

<comment [imageURI]="image_path"></comment> 

Don't use single quotes when assigning a template binding. Only use them to format strings, like this:

<comment [imageURI]="'path/to/image.jpg'"></comment> 

Answer 2

Anyone googling this error: the error contains no useful information and could be thrown for many different reasons so in my case it was impossible to figure out by just looking at the HTML. However if you put a breakpoint in the angular file loaded in your browser (in my case compiler.umd.js, line 11702, see expression_converter.ts in the @angular/compiler module, line 395, function visitQuote() which is what throws the exception) you can drill into the ast parameter which has properties called location and uninterpretedExpression that help you narrow down which component and expression are causing this. In my case it was missing curly braces around an ngClass parameter.