# Enhance in Aurelia 2

**URL:** <https://discourse.aurelia.io/t/enhance-in-aurelia-2/3726>\
**Category:** Uncategorized\
**Created:** [August 21, 2020, 11:15am UTC](https://discourse.aurelia.io/t/enhance-in-aurelia-2/3726 "2020-08-21T11:15:46Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![aGustafson](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@aGustafson](https://discourse.aurelia.io/u/aGustafson)\
**Post date:** [August 21, 2020, 11:15am UTC](https://discourse.aurelia.io/t/enhance-in-aurelia-2/3726/1 "2020-08-21T11:15:46Z")

</div>

Hi,

I’m trying test some thing in Aurelia 2 and I am having trouble recreating some things that I like to do in Aurelia 1.

I like to globally enhance existing web pages with aurelia like this:

```
import {Aurelia} from 'aurelia-framework'

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  aurelia.start().then(() => aurelia.enhance());
}

```

In Aurelia 2 I saw in github I can do something like this?

```
import Aurelia from 'aurelia';
import { MyApp } from './my-app';

const au = new Aurelia()

au.enhance({
    host: document.querySelector('body'),
    component: MyApp
})

au.start();

```

But I’m getting an error: “Attempted to jitRegister an interface: IDOMInitializer”

Has anybody used the Enhance API in Aurelia 2?

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [August 21, 2020, 12:38pm UTC](https://discourse.aurelia.io/t/enhance-in-aurelia-2/3726/2 "2020-08-21T12:38:38Z")

</div>

@aGustafson Thank you for reporting this. It seems that some of the registrations are missing. I will try to take a look.

---

<div class="post-metadata">

**Author:** ![aGustafson](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@aGustafson](https://discourse.aurelia.io/u/aGustafson)\
**Post date:** [August 21, 2020, 1:49pm UTC](https://discourse.aurelia.io/t/enhance-in-aurelia-2/3726/3 "2020-08-21T13:49:04Z")

</div>

Hi @Sayan751 , i didnt mean to report a bug. I am pretty sure I am doing something wrong. I was more looking for an example of how to use the enhance api. If I am doing it correctly and there is a bug, then it’s just a coincidence.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [August 21, 2020, 6:22pm UTC](https://discourse.aurelia.io/t/enhance-in-aurelia-2/3726/4 "2020-08-21T18:22:12Z")

</div>

You can enhance like this:

```auto
Aurelia
  .enhance({
    host: document.querySelector('body'),
    component: MyApp
  })
  .start();

```

The static `Aurelia.enhance` method does the necessary registrations. On the other hand, when you do `new Aurelia().enhance(...)`, you need to do the needed registrations yourself which can be done like this:

```auto
import Aurelia, { JitHtmlBrowserConfiguration } from 'aurelia';

new Aurelia()
  .register(JitHtmlBrowserConfiguration)
  .enhance({
    host: document.querySelector('body'),
    component: MyApp
  })
  .start();

```

Have fun with Au2 🙂

---

<div class="post-metadata">

**Author:** ![aGustafson](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@aGustafson](https://discourse.aurelia.io/u/aGustafson)\
**Post date:** [August 28, 2021, 8:46am UTC](https://discourse.aurelia.io/t/enhance-in-aurelia-2/3726/5 "2021-08-28T08:46:21Z")

</div>

So, v2 is coming along nicely it appears. I wanted to try out the Enhnace features of Alpha 16.

I am doing this:

```auto
const au = new Aurelia();
await au.enhance({ host, component: MyApp });

```

but the CLI ( dumber ) is telling me:

```auto
[dumber] SyntaxError: [12:5]: Await is only valid in async functions

```

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [August 28, 2021, 12:11pm UTC](https://discourse.aurelia.io/t/enhance-in-aurelia-2/3726/6 "2021-08-28T12:11:41Z")

</div>

As the Error suggest you need to invoke this from a method with async keyword. Otherwise use .then promise callbacks instead of await

---

<div class="post-metadata">

**Author:** ![aGustafson](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@aGustafson](https://discourse.aurelia.io/u/aGustafson)\
**Post date:** [August 28, 2021, 12:51pm UTC](https://discourse.aurelia.io/t/enhance-in-aurelia-2/3726/7 "2021-08-28T12:51:46Z")

</div>

ahh, ok. Do i have to do something in the .then() callback to get aurelia started?

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [August 28, 2021, 3:34pm UTC](https://discourse.aurelia.io/t/enhance-in-aurelia-2/3726/8 "2021-08-28T15:34:54Z")

</div>

Looking at your sample I’d say no, so just drop the await keyword. What you would want to do though typically is the aurelia.start () call within the then

---

<div class="post-metadata">

**Author:** ![aGustafson](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@aGustafson](https://discourse.aurelia.io/u/aGustafson)\
**Post date:** [August 29, 2021, 9:30am UTC](https://discourse.aurelia.io/t/enhance-in-aurelia-2/3726/9 "2021-08-29T09:30:49Z")

</div>

I was trying to follow the Enhanced example in the **App configuration and startup** chapter:

> **[App configuration and startup](https://docs.aurelia.io/getting-to-know-aurelia/app-configuration-and-startup)**

I was confused by the await term and lack of registration in the enhance example code.  
For anyone else landing here, this is the code in my main.ts that works for me:

```auto
import Aurelia from 'aurelia';

import { MyComponent } from "./my-component";
import { App } from './app';

const au = new Aurelia();
au.register(<any>MyComponent)
au.enhance({
    host: document.querySelector('body'),
    component: App,
})

```

This is to get Aurelia to **enhance** a page where the DOM might be rendered by another framework ( In my case Django ).