Enhance in Aurelia 2

1

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?

1 Like
2

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

1 Like
3

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.

1 Like
4

You can enhance like this:

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:

import Aurelia, { JitHtmlBrowserConfiguration } from 'aurelia';

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

Have fun with Au2 :slight_smile:

1 Like
5

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

I am doing this:

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

but the CLI ( dumber ) is telling me:

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

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

7

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

8

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

9

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

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:

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