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