Angular2: Promise Rejection: Quotes cannot be used for evaluation in this component

Question

Angular2: Promise Rejection: Quotes cannot be used for evaluation in this component

I'm currently working on a component in Angular that includes 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 = "";
}

In the parent component, I passed an image path to it like this:

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

However, when I run it, it gives me an error message:

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

Any suggestions on how to resolve this issue?

Update: Removing [imageURI]='image_path' in the parent component solved the problem and displayed the rest of the component perfectly.

angular typescript

Answer 1

Answer №1

To make the necessary changes in your parent component, update the comment tag as follows:

<comment [imagePath]="image_source"></comment>

Remember to avoid using single quotes for template bindings. Save them for string formatting only, like so:

<comment [imagePath]="'path/to/image.png'"></comment>

Answer 2

To make the necessary changes in your parent component, update the comment tag as follows:

<comment [imagePath]="image_source"></comment>

Remember to avoid using single quotes for template bindings. Save them for string formatting only, like so:

<comment [imagePath]="'path/to/image.png'"></comment>

Answer 3

Answer №2

If you happen to come across this error while searching on Google, know that it lacks any useful information and can be triggered for various reasons. I encountered a similar issue where deciphering the problem solely through the HTML was challenging. However, by setting a breakpoint in the angular file being loaded in your browser (specifically compiler.umd.js, at line 11702), as highlighted in expression_converter.ts within the @angular/compiler module, at line 395, within the visitQuote() function which is responsible for throwing the exception, you can delve into the ast parameter. This parameter contains crucial properties like location and uninterpretedExpression, aiding in pinpointing the component and expression causing the error. In my case, the culprit was missing curly braces around an ngClass parameter.

Answer 4

If you happen to come across this error while searching on Google, know that it lacks any useful information and can be triggered for various reasons. I encountered a similar issue where deciphering the problem solely through the HTML was challenging. However, by setting a breakpoint in the angular file being loaded in your browser (specifically compiler.umd.js, at line 11702), as highlighted in expression_converter.ts within the @angular/compiler module, at line 395, within the visitQuote() function which is responsible for throwing the exception, you can delve into the ast parameter. This parameter contains crucial properties like location and uninterpretedExpression, aiding in pinpointing the component and expression causing the error. In my case, the culprit was missing curly braces around an ngClass parameter.

Answer 5

Answer №3

After searching for the solution, I have found it within my parent component: The correct structure to use is

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

export class SinglePictureComponent{
    username='Salman kkk';
    profile_pic="https://scontent-arn2-1.cdninstagram.com/t51.2885-19/s150x150/13743117_1060048037418472_411027981_a.jpg";
    comment="I love you";
}

Next step is to assign the properties like this:

 <comment [username]=username   [comment]=comment [imageURI]=profile_pic></comment>

Answer 6

After searching for the solution, I have found it within my parent component: The correct structure to use is

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

export class SinglePictureComponent{
    username='Salman kkk';
    profile_pic="https://scontent-arn2-1.cdninstagram.com/t51.2885-19/s150x150/13743117_1060048037418472_411027981_a.jpg";
    comment="I love you";
}

Next step is to assign the properties like this:

 <comment [username]=username   [comment]=comment [imageURI]=profile_pic></comment>

Answer 7

Answer №4

Recently, I encountered a similar error that looked like this:

https://i.sstatic.net/KeOt2.jpg

The faulty HTML code was:

<div class="container">
  <span class="value">{{action.progress}}</span>
   <div class="wrap">
    <div class="bar" style="{{width:action.progress}}"></div>
  </div>
</div>

After some troubleshooting, I found the solution below fixed the issue for me. The action is retrieved from a .ts file and since it should be styled using [ngStyle], we can directly pass the item value.

<div class="container">
  <span class="value">{{action.progress}}</span>
  <div class="wrap">
    <div class="bar" [ngStyle]="{width:action.progress}"></div>
  </div>
</div>

Answer 8

Recently, I encountered a similar error that looked like this:

https://i.sstatic.net/KeOt2.jpg

The faulty HTML code was:

<div class="container">
  <span class="value">{{action.progress}}</span>
   <div class="wrap">
    <div class="bar" style="{{width:action.progress}}"></div>
  </div>
</div>

After some troubleshooting, I found the solution below fixed the issue for me. The action is retrieved from a .ts file and since it should be styled using [ngStyle], we can directly pass the item value.

<div class="container">
  <span class="value">{{action.progress}}</span>
  <div class="wrap">
    <div class="bar" [ngStyle]="{width:action.progress}"></div>
  </div>
</div>

Angular2: Promise Rejection: Quotes cannot be used for evaluation in this component

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Implementing a Delay in an Angular 4+ AsyncValidator with the Use of RxJS 6

Get the dynamic type as the return value in a TypeScript abstract class method with generic type T

Dealing with a series of challenging npm problems consecutively

Discovering identical objects in two arrays in Angular using TypeScript is a breeze

How to refresh a page in Angular Typescript to wait for HTTP calls from the backend

What is the process for interpreting the status code retrieved from an HTTP Post request?

Transform Loopback 4 filter into a SQL WHERE condition

Please optimize this method to decrease its Cognitive Complexity from 21 to the maximum allowed limit of 15. What are some strategies for refactoring and simplifying the

Encountering a problem with indexing when attempting to include dynamic input text within a form in Angular 6

Verify the anticipated URL and showcase the real URL

"Encountering issues with the production build of angular2-flash-messages

Enhancing Apollo Cache Updates using TypeScript null checks

Managing Geolocation in Ionic2 presenting challenges

Injecting Dependencies into an Angular 6 Service

Insert an ellipsis within the ngFor iteration

Steps to add annotations to a class descriptor:

Encountering an error in an Angular 4 application when running in Internet Explorer 11: "Unable to execute code from a script that has been freed

End the pipeline execution in a chain of RxJS observables

A more concise validation function for mandatory fields

What is the best way to execute operations on two distinct datasets within a single function using RxJS?