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).
- Clone the project.
- Install dependencies with
npm i
.
- Run the project with
npm start
.
- 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 . 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 . 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