# AUR0813

## Error Message

`AUR0813: Invalid [pending]/[then]/[catch] usage. The parent [promise].resolve not found; only "*[promise.resolve] > *[pending|then|catch]" relation is supported.`

## Description

This error occurs during template compilation/linking when an element uses one of the promise state template controller attributes (`pending`, `then`, or `catch`) but is not a direct child of an element with the `promise.resolve` attribute.

## Cause

The `pending`, `then`, and `catch` attributes are designed to work exclusively as direct children of an element managed by `promise.resolve`. They represent the different states of the promise bound to `promise.resolve`. This error indicates that this required parent-child relationship is broken in the template structure.

Common causes:

1. **Incorrect Nesting:** The element with `pending`, `then`, or `catch` is not directly nested inside the element with `promise.resolve`. There might be intermediate elements, or it might be placed elsewhere entirely.
2. **Missing `promise.resolve`:** The `promise.resolve` attribute is missing from the intended parent element.
3. **Typo:** A typo in `promise.resolve`, `pending`, `then`, or `catch`.

## Solution

Ensure that any element using `pending`, `then`, or `catch` is a direct child of the element using `promise.resolve`.

1. **Restructure HTML:** Adjust the HTML structure so that the `pending`/`then`/`catch` elements are immediate children of the `promise.resolve` element.
2. **Add `promise.resolve`:** Ensure the parent element has the `promise.resolve.bind="yourPromise"` attribute correctly applied.
3. **Check Spelling:** Verify the spelling of all related attributes.

## Example

```html
<!-- Incorrect: 'pending', 'then', 'catch' are not direct children -->
<div promise.resolve.bind="myPromise">
  <div>
    <div pending>Loading...</div>
    <div then="result">Data: ${result}</div>
    <div catch="err">Error: ${err.message}</div>
  </div>
</div>

<!-- Incorrect: Missing promise.resolve on parent -->
<div>
  <div pending>Loading...</div>
  <div then="result">Data: ${result}</div>
  <div catch="err">Error: ${err.message}</div>
</div>

<!-- Correct: 'pending', 'then', 'catch' are direct children -->
<div promise.resolve.bind="myPromise">
  <div pending>Loading...</div>
  <div then="result">Data: ${result}</div>
  <div catch="err">Error: ${err.message}</div>
</div>

<!-- Correct: Using <template> as direct children -->
<div promise.resolve.bind="myPromise">
  <template pending>
    <p>Please wait...</p>
  </template>
  <template then="data">
    <h1>${data.title}</h1>
  </template>
  <template catch="errorInfo">
    <p class="error">Failed to load: ${errorInfo.message}</p>
  </template>
</div>
```

```typescript
// View Model Example
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class MyComponent {
  myPromise: Promise<any>;

  constructor() {
    // Example promise
    this.myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() > 0.5) {
          resolve({ title: 'Data Loaded Successfully' });
        } else {
          reject(new Error('Failed to fetch data'));
        }
      }, 1500);
    });
  }
}
```

## Debugging Tips

* Carefully examine the HTML structure in your template where the `promise.resolve`, `pending`, `then`, and `catch` attributes are used.
* Ensure there are no intervening elements between the `promise.resolve` element and its state elements (`pending`/`then`/`catch`).
* Use the browser's element inspector to verify the final rendered structure, although this error often occurs during compilation/linking before full rendering.
* Check for typos in the attribute names.