# AUR0767

## Error Message

`AUR0767: Aurelia.root was accessed without a valid root.`

## Description

This error occurs when code attempts to access the `root` property of an `Aurelia` instance (e.g., `aurelia.root`) before the application has been successfully started and a root component controller has been created and assigned. The `aurelia.root` property holds the controller for the top-level component of the application, which is only available after `aurelia.app(...).start()` has resolved.

## Cause

1. **Accessing `aurelia.root` Too Early:** Attempting to read `aurelia.root` immediately after creating the `Aurelia` instance but before calling `start()` or before the `start()` promise has resolved.
2. **Failed Startup:** The `aurelia.start()` method failed to complete successfully (possibly due to other configuration errors or issues resolving the root component), preventing the root controller from being set.
3. **Incorrect Aurelia Instance:** Accessing the `root` property on an `Aurelia` instance that was not the one used to actually start the application (less common).

## Solution

1. **Ensure Application is Started:** Only access `aurelia.root` *after* the promise returned by `aurelia.app(...).start()` has successfully resolved. Use `async/await` or `.then()` to sequence your code correctly.
2. **Check for Startup Errors:** Ensure that the `aurelia.start()` call completes without errors. Check the browser console for any other Aurelia errors that might indicate a problem during the startup phase.
3. **Verify Root Component Configuration:** Make sure the component specified in `aurelia.app({ host: ..., component: ... })` is correctly defined, registered, and can be resolved by the dependency injection container.

## Example

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

const host = document.querySelector('#app'); // Your host element

// Incorrect: Accessing root before start() completes
const aurelia = new Aurelia();
// console.log(aurelia.root); // This would throw AUR0767

aurelia
  .app({ host, component: MyApp })
  .start();

// Still potentially incorrect: Accessing immediately after calling start()
// The start() operation is asynchronous.
// console.log(aurelia.root); // This might still throw AUR0767

// Correct: Access root after start() promise resolves
async function initializeApp() {
  const aureliaInstance = new Aurelia();
  await aureliaInstance
    .app({ host, component: MyApp })
    .start();

  // Now it's safe to access the root controller
  const rootController = aureliaInstance.root;
  console.log('Aurelia application started with root:', rootController);
  // Access root controller properties or methods if needed
  // e.g., rootController.viewModel, rootController.scope
}

initializeApp().catch(err => console.error('App initialization failed:', err));

// Correct (using .then()):
const aureliaInstanceThen = new Aurelia();
aureliaInstanceThen
  .app({ host, component: MyApp })
  .start()
  .then(() => {
    // Safe to access root here
    const rootController = aureliaInstanceThen.root;
    console.log('Aurelia application started (then):', rootController);
  })
  .catch(err => console.error('App startup failed (then): ', err));
```

## Debugging Tips

* Place breakpoints or log messages *inside* the `.then()` callback or *after* the `await` on the `start()` call to inspect `aurelia.root`.
* Check the browser's developer console for any errors occurring during the `aurelia.start()` process. An earlier error might be preventing the root from being set up.
* Verify that the `host` element specified in `aurelia.app()` exists in your `index.html` before the script runs.
* Ensure your root `component` (e.g., `MyApp`) is a valid, registered custom element or view model.

\</rewritten\_file>