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


---

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