Enhancing with aurelia-cli (not jspm)

Following this example: http://aurelia.io/docs/fundamentals/app-configuration-and-startup#leveraging-progressive-enhancement

I need to enhance some html within the body element of lets say the index page. How can I achieve that? The example shows importing aurelia bootstrapper using SystemJS. Is that the same approach I would take when using aurelia-cli?

Thanks in advance =)

Assumming the default index.html generated by the CLI, in main.js add the global resources and then call aurelia.enhance:

    export function configure(aurelia) {
        aurelia.start().then(() => aurelia.enhance());

But what if I do not want to specify aurelia-app=“main”? The idea is that I need to manually bootstrap the app in a script tag and the actual html would be nested in the body tag. I need to bootstrap the app in the index.html without having to rely on a startup file (main.js)… Make sense? =/

Something like this:

In index.html

<\div id=“container”><\div>

bootstrap app
enhance div


When using aurelia.setRoot() you can pass your desired view model and host element as arguments:

setRoot(root: string = null, applicationHost: string | Element = null): Promise<Aurelia> {

aurelia.enhance() allows initialising specific element with a given view model.

enhance(bindingContext: Object = {}, applicationHost: string | Element = null): Promise<Aurelia> {

So you should be able to initialize everyting manually as shown in the examples you linked.

Thank you =)

One more thing, I couldnt get DI working for manual bootstrapping with enhance! I tried both @autoinject and @inject… The view model uses a service which requires HttpClient to talk to an API… Any suggestions?

I got it to work with something like this (Aurelia-cli - requirejs as loader)

<!DOCTYPE html>
<meta charset="utf-8">
 <button click.trigger="btnClick()">Click Me!</button>
<script src="scripts/vendor-bundle.js"></script>
 requirejs(['unindexed-upload-form'], function (form) {
  requirejs(['aurelia-bootstrapper', 'aurelia-event-aggregator'], function (bootstrapper, aggregator) {
    bootstrapper.bootstrap(function (aurelia) {

      var vm = new form.UnindexedUploadForm();

      aurelia.start().then(function () {
        aurelia.enhance(vm, document.body);


But I guess DI doenst work? I have to pass the aggregator as a param to the UnindexedUploadForm() constructor?

I was hoping require would satisfy the dependencies…

That was simple!

var vm = aurelia.container.get(demoModule.DemoViewModel);

Wow Aurelia is the bomb!

1 Like