Dependency Injection using aurelia_router.esm.js

Oh I see, not sure about that one, have you tried PLATFORM.moduleId?

So how are you doing it? Also, can you do features that reference all of your custom elements and attributes, etc.?

I have not used the dialog yet, I ll expand on the super simple demo app to see how to get it working. Im not sure about the features either, i ll play around with it and let you know what I come up with =)

Okay, thanks! I appreciate it!

OK since its using esm (script =“module”) you have to pass the fully qualified url of the CustomDialog class like so:

this.dialogService.open({ viewModel: './src/dialogs/confirm-dialog.js' });

Also, make sure you have the confirm-dialog.html define. The catch here is that the css resources are not being loaded for the dialog plugin so youll have to use your own. I use bulma css. Thier modal is very nice and simple to use.

Hi Alberto,

That works! I found a way to keep my code the same so that I don’t have to change anything in my home.js file. I am able to do this by updating my main.js file as such:

import {Aurelia} from '../lib/aurelia.full.esm.js';
(async () => {
  const aurelia = new Aurelia();
  aurelia
    .use
      .standardConfiguration()
      .developmentLogging()
      .dialog(cfg => {})
      .feature('./src/dialogs/confirm-dialog.js');

  aurelia
    .start()
    .then(() => {
      aurelia.setRoot('src/app.js', document.body);
    })
    .catch(ex => {
      document.body.textContent = `Bootstrap error: ${ex}`;
    });
})();

By adding the feature entry, it registers it properly and everything else works. I am trying to minimize the differences in my code so that when I try to use CircleCi, there is minimal effort/change necessary.

Here is the home.js file again:

import {DialogService} from '../../../lib/aurelia.full.esm.js';
import {ConfirmDialog} from '../../dialogs/confirm-dialog.js';

export class Home {
  static inject() {
    return [DialogService];
  }
  constructor(dialogSvc) {
    this.dialogSvc = dialogSvc;
  }
  showDialog() {
    let model = {};
    this.dialogSvc.open({ viewModel: ConfirmDialog, model: model, lock: false });
  }
}

Thanks again. Now, if you figure out how to register custom-elements let me know!

Something like this should work:

import  { customElement } from '../../../lib/aurelia.full.esm.js';

export class MyCustomElement {}

customElement('my-custom-element')(MyCustomElement );

How would you go about registering it as a global resource?

I finally got it working! It required a little more work as I am using Frontend Creator to do all of my development and it host the project on GitHub Pages. I have to ensure that application doesn’t just default to the domain <user-or-organization>.github.io when I really want the following: <user-or-organization>.github.io/my-project

Now that I have figured out what is happening, I have an easy working model to support both cloud development as well as desktop or automated builds using Aurelia CLI.

Now, I need to figure out if I can use Rollup to bundle HTML so that I can test a plugin!!

Thanks again for everything!

So glad you got it working! Aurelia is the bomb!!!