# AUR0156

## Error Message

`AUR0156: Expression error: unconsumed token: "{{token}}" at position {{position}} of "{{expression}}"`

Where:

* `{{token}}` is the leftover token that couldn't be parsed
* `{{position}}` is the character position in the expression
* `{{expression}}` is the full binding expression

## Description

This error occurs when the expression parser successfully parses part of an expression but encounters additional tokens that don't form a valid continuation of the expression. Essentially, there are "leftover" tokens that the parser doesn't know how to handle.

## Common Scenarios

### Multiple Statements

```html
<!-- ❌ Wrong: Multiple statements not allowed -->
<div textcontent.bind="value = 5; result = 10"></div>
<div click.trigger="doSomething(); doOther()"></div>
```

### Invalid Syntax Combinations

```html
<!-- ❌ Wrong: Invalid token combinations -->
<div textcontent.bind="user name"></div> <!-- Missing operator -->
<div textcontent.bind="value 5"></div> <!-- Missing operator -->
<div textcontent.bind="item.prop extra"></div> <!-- Unexpected token -->
```

### Misplaced Operators

```html
<!-- ❌ Wrong: Operators in wrong positions -->
<div textcontent.bind="value + + 5"></div>
<div textcontent.bind="user. .name"></div>
<div textcontent.bind="result &&"></div>
```

### Incomplete Expressions

```html
<!-- ❌ Wrong: Incomplete expressions with trailing tokens -->
<div textcontent.bind="getValue() extra"></div>
<div textcontent.bind="condition ? result"></div> <!-- Missing : else part -->
```

## Solutions

### 1. **Fix Multiple Statements**

```html
<!-- ✅ Correct: Single expressions only -->
<div textcontent.bind="getValue()"></div>
<div click.trigger="doSomething()"></div>

<!-- ✅ Correct: Use methods for complex logic -->
<div click.trigger="handleMultipleActions()"></div>
```

```typescript
export class MyComponent {
  handleMultipleActions() {
    this.doSomething();
    this.doOther();
  }
}
```

### 2. **Add Missing Operators**

```html
<!-- ✅ Correct: Proper operators -->
<div textcontent.bind="user + ' ' + name"></div>
<div textcontent.bind="value * 5"></div>
<div textcontent.bind="item.prop.extraProp"></div>
```

### 3. **Fix Operator Placement**

```html
<!-- ✅ Correct: Proper operator usage -->
<div textcontent.bind="value + 5"></div>
<div textcontent.bind="user.name"></div>
<div textcontent.bind="result && condition"></div>
```

### 4. **Complete Expressions**

```html
<!-- ✅ Correct: Complete ternary expressions -->
<div textcontent.bind="condition ? result : alternative"></div>
<div textcontent.bind="getValue()"></div>
<div class.bind="isActive ? 'active' : 'inactive'"></div>
```

## Example: Common Fixes

```html
<!-- Template with unconsumed token errors -->
<template>
  <!-- ❌ Problems -->
  <div textcontent.bind="first second"></div>
  <div textcontent.bind="value +"></div>
  <div textcontent.bind="user name age"></div>
  <div click.trigger="save(); close()"></div>
  
  <!-- ✅ Fixed -->
  <div textcontent.bind="first + ' ' + second"></div>
  <div textcontent.bind="value + defaultValue"></div>
  <div textcontent.bind="user.name + ' (' + user.age + ')'"></div>
  <div click.trigger="saveAndClose()"></div>
</template>
```

```typescript
export class MyComponent {
  first = 'John';
  second = 'Doe';
  value = 10;
  defaultValue = 0;
  user = { name: 'Jane', age: 30 };
  
  saveAndClose() {
    this.save();
    this.close();
  }
  
  save() {
    // Save logic
  }
  
  close() {
    // Close logic
  }
}
```

## Debugging Tips

1. **Check Expression Syntax**: Look for missing operators between values
2. **Verify Completeness**: Ensure expressions are complete (e.g., ternary operators have both branches)
3. **Split Complex Logic**: Move complex multi-step logic to component methods
4. **Use Console**: Test expression parts in browser console to identify issues
5. **Check Position**: The error shows exactly where the unconsumed token starts

## Related Errors

* [AUR0155](https://github.com/aurelia/aurelia/blob/master/docs/user-docs/developer-guides/error-messages/0151-to-0179/aur0155.md) - Unexpected end of expression
* [AUR0167](https://github.com/aurelia/aurelia/blob/master/docs/user-docs/developer-guides/error-messages/0151-to-0179/aur0167.md) - Missing expected token
* [AUR0168](https://github.com/aurelia/aurelia/blob/master/docs/user-docs/developer-guides/error-messages/0151-to-0179/aur0168.md) - Unexpected character