Dependency Injection using aurelia_router.esm.js

Help Requests
21

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

22

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

23

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

24

Okay, thanks! I appreciate it!

25

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.

26

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!

27

Something like this should work:

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

export class MyCustomElement {}

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

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

29

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!

30

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