Aurelia dialog not getting the view easy-webpack skeleton - aurelia

Question

Somehow when I let the framework load dialog view automatically, it said:
Failed to load view exception
However, when using inlineView it works as expected.
How can I make it load the view ?

Answer 1

It's a little late, but it may be useful for other users.
This error is because Webpack loader.
More info where: https://github.com/aurelia/dialog/issues/127
I don't like using string to reference the dialog ViewModel, because this I suggest using the option to force the View in dialog ViewModel. I don't have to change anything else.
Example:
Dialog ViewModel:
import {autoinject, useView} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';
#autoinject()
#useView('./dialog-message.html') //This is the important line!!!!!
export class DialogMessage {
message: string = 'Default message for dialog';
constructor(private controller: DialogController){
controller.settings.centerHorizontalOnly = true;
}
activate(message) {
this.message = message;
}
}
Dialog View:
<template>
<ai-dialog>
<ai-dialog-body>
<h2>${message}</h2>
</ai-dialog-body>
<ai-dialog-footer>
<button click.trigger = "controller.cancel()">Cancel</button>
<button click.trigger = "controller.ok(message)">Ok</button>
</ai-dialog-footer>
</ai-dialog>
</template>
Method to show Dialog:
import {DialogMessage} from './dialog-message';
(...)
showDialog(){
this.dialogService.open({viewModel: DialogMessage, model: 'Hi, how are you?' }).then(response => {
if (!response.wasCancelled) {
console.log('good');
} else {
console.log('bad');
}
console.log(response.output);
});
}