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

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