# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur0813.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.