In an Aurelia Dialog, how to create routes for the viewModel?

Question

When opening an Aurelia Dialog you usually pass it a viewModel.

This is how I'm currently doing this but it would be better if the path wasn't hard-coded here.

            let lookupResponse = await this.dialogService.open(
            {
                model:
                {
                    configuration: this.LookupConfiguration
                    caption: 'Select an item'
                },
                viewModel: 'App/Components/Lookup/LookupDialog'
            });

I'd rather be able to reference the viewModel path like a route

            let lookupResponse = await this.dialogService.open(
            {
                model:
                {
                    configuration: this.LookupConfiguration
                    caption: 'Select an item'
                },
                viewModel: App.routes.components.lookupdialog
            });

If you just add a Routes.js for the components and try to use it you get this error:

Uncaught (in promise) Error: Cannot determine default view strategy for object.

So what needs to be added for this to work? A custom view strategy of some kind?

Answer 1

You can import the dialogs into your class and use them like this:

import { LookupDialog } from "app/components/lookup/lookup-dialog.ts";

export class Foo {
  bar() {
    let lookupResponse = await this.dialogService.open(
       {
         model:
         {
           configuration: this.LookupConfiguration
           caption: 'Select an item'
         },
         viewModel: LookupDialog
       });
  }
}