Aurelia dialog not getting the view easy-webpack skeleton

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);
    });
  }