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

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