# AUR0770

## Error Message

`AUR0770: Aurelia.start() was called without a composition root`

## Description

This error occurs when the `aurelia.start()` method is called before an application root component and host element have been defined using the `aurelia.app({ host, component })` method. Aurelia requires knowing what component to bootstrap and which DOM element to attach it to before it can start rendering the application.

## Cause

The direct cause is calling `aurelia.start()` without first calling `aurelia.app(...)` on the same `Aurelia` instance. This might happen due to:

1. **Missing `app()` call:** Forgetting to configure the root component and host element entirely.
2. **Incorrect Instance:** Calling `app()` on one `Aurelia` instance and `start()` on a different instance.
3. **Conditional Logic Error:** Application logic that conditionally calls `app()` might fail to do so before `start()` is invoked.

## Solution

1. **Call `app()` Before `start()`:** Ensure that you always call `aurelia.app({ host: <hostElement>, component: <RootComponent> })` before calling `aurelia.start()`.
2. **Use Consistent Instance:** Make sure both `app()` and `start()` are called on the same instance of the `Aurelia` class.
3. **Verify Logic:** Double-check any conditional logic around your Aurelia initialization sequence to ensure `app()` is always called with valid parameters prior to `start()`.

## Example

```typescript
// main.ts
import Aurelia from 'aurelia';
import { MyApp } from './my-app'; // Your root component

const hostElement = document.querySelector('#app'); // Your host element in index.html

// Incorrect: Calling start() before app()
const aureliaIncorrect = new Aurelia();
try {
  // This will throw AUR0770
  aureliaIncorrect.start();
} catch (e) {
  console.error(e.message);
}


// Correct: Calling app() before start()
const aureliaCorrect = new Aurelia();
aureliaCorrect
  .app({ host: hostElement, component: MyApp }) // Configure the root
  .start() // Start the application
  .then(() => console.log('Aurelia started successfully.'))
  .catch(err => console.error('Aurelia failed to start:', err));

```

## Debugging Tips

* Verify the order of operations in your application's entry point (e.g., `main.ts`). Ensure `aurelia.app()` is called before `aurelia.start()`.
* Check that the `hostElement` provided to `app()` is a valid DOM element and exists when the code runs.
* Check that the `RootComponent` provided to `app()` is a valid, registered Aurelia component (Custom Element or ViewModel class).
* If you are managing the `Aurelia` instance manually, ensure you aren't accidentally creating multiple instances and calling `start()` on one that hasn't had `app()` called on it.


---

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