Aurelia dialog not working when creating a custom aurelia plugin

I can’t get the aurelia dialog plugin to work properly in my custom aurelia plugin. The idea is to use my custom aurelia plugin for common modals that I can re-use for different aurelia projects.

I have setup a mininmal plugin project that gives me errors when opening a modal. See the screenshot below for the errors that you can reproduce in the example project when clicking the button (note: the second console error is delayed a bit when clicking the button).

  1. Clone the project.
  2. Install dependencies with npm i.
  3. Run the project with npm start.
  4. Navigate to http://localhost:9000 and click the button.

Also when I make changes to a typescript file that is located in the dev-app, and save the changes, I get a typescript error in my console which I don’t understand and don’t know how to solve.

Appreciate any help!

Instead of passing the class try configuring the Viewmodel/View this way

viewModel: PLATFORM.moduleName("your-dialog"),
      view: PLATFORM.moduleName("your-dialog.html"),

Thank you for the reply, I appreciate it! I’ve tried your solution, but sadly I am getting a script error in that case :thinking:. See attached images below:

1 Like

Oh hold on you’re using requirejs. In this case forget my approach, that was meant for webpack. Hmm i’ve seen that your devapp and tool are from different folders which is why TS complains about no common rootdir.

@huochunpeng is this your au v1 Plugin setup that his project is using?

1 Like

In fact, I am doing similar thing to wrap common dialogs in my private plugin.

You setup looks fine. I will have a play of your code tomorrow to see what went wrong.

1 Like

Yeah, the plugin dev-app doesn’t use webpack. My aurelia projects do though (the ones that I want use this plugin with) so indeed, I have to use PLATFORM for that. But first I wanted to make sure it works in the dev-app before trying it in my actual projects (using npm link).

I am having trouble using npm link though, when I want to test the plugin in the actual projects (the ones with webpack). I’ve tried this but couldn’t get it work properly and this is quite cumbersome to do every time I make a change. Do you guys have any experience with that @huochunpeng @zewa666?

In fact, I am doing similar thing to wrap common dialogs in my private plugin.
You setup looks fine. I will have a play of your code tomorrow to see what went wrong.

Sounds good :+1: . Looking forward to see your solution for it!

1 Like

As for link, I always used to npm install ../path/to/plugin/root which would install it like a normal nom dependency.

2 Likes

Oh nice. I’ll try that. Thanks!

1 Like

The MyDialog export seems confused Aurelia module loading. I guess because MyDialog looks like a VM (exported from src/index.ts), Aurelia somehow tries to load src/index.html.

Change

export {
  MyDialog,
  ModalService
};

To

export { ModalService };

solved the problem.

4 Likes

Yes, that worked for me too. Thanks for your effort!

1 Like