[Solved] Aurelia Dialog not working when build in production

Help Requests
1

I have a problem with Aurelia Dialog when building in production. I am using WebPack and TypeScript. When I build in developer mode it works fine. Is anyone having this issue?

2

I just tried a production and development webpack build and both builds worked fine. It would help to know more about the error.

3

Thank you for your time.

This is the error when building: au build --env prod. It is something when minify or uglify files for production. I have not problem when building: au build --env dev.

Unhandled rejection Error: Can not resolve “moduleId” of “t”.
at e.ensureViewModel (http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:306249)
at e.open (http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:307634)
at t.openMyDialog (http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:353424)
at e.evaluate (http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:223617)
at t.callSource (http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:289885)
at t.handleEvent (http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:290046)
at HTMLDocument.On (http://localhost:81/app.4e2f374b4b8585018424.bundle.js:1:246044)

I have a simple app like in Aurelia Docs. Aurelia: Basics

file: app.ts

import { inject } from ‘aurelia-framework’;
import { DialogService } from ‘aurelia-dialog’;
import { MyDialog } from ‘./myDialog’;

@inject(DialogService)
export class App {
message = ‘Hello World!’;
dialogService: DialogService;

constructor(dialogService: DialogService) {
this.dialogService = dialogService;
}

person = { firstName: ‘Wade’, middleName: ‘Owen’, lastName: ‘Watts’ };
openMyDialog() {
this.dialogService.open({ viewModel: MyDialog, model: this.person, lock: false }).whenClosed(response => {
if (!response.wasCancelled) {
console.log(‘good’);
this.person = response.output;
} else {
console.log(‘bad’);
}
console.log(response.output);
});
}
}

file: myDialog.ts

import { DialogController } from ‘aurelia-dialog’;

export class MyDialog{
static inject = [DialogController];
controller: DialogController;
person = { firstName: ‘’ };
constructor(controller){
this.controller=controller;
this.controller.settings.lock = true;
}
attached(param){
this.person=param;
}
}

Thanks again for your time.

Carlos

5

It’s because WebPack doesn’t know your MyDialog module exists. I have no idea how it ever works, even in dev mode, but the fix is to use the PLATFORM.moduleName feature.

So change
this.dialogService.open({ viewModel: MyDialog, model: this.person, lock: false })
to
this.dialogService.open({ viewModel: PLATFORM.moduleName('MyDialog'), model: this.person, lock: false })
Explanation is here: https://github.com/aurelia/webpack-plugin/wiki/Managing-dependencies

I understand there’s a new release of the Dialog pending release that will enable WebPack to detect the dependency.

3 Likes
6

I am bit confused about your answer. I didn’t see anything wrong to directly reference a class for webpack to pick it up?

Update: just read dialog doc. It confused me even more. I didn’t use webpack anyway, you can ignore me :slight_smile:

7

[SOLVED]. Thanks a lot. It is working great now. I had no idea because that detail was not clear on docs. I really appreciate you all for your time.

1 Like
8

Glad I found this.
Should be noted that this still is an issue it appears. Solved my production only issue.

1 Like
9

Not sure if it’s ok to use this thread for my problem, but since I’d give it the exact same title, it seems like the best place to put my problem.

I have a very simple dialog like so:

@useView(PLATFORM.moduleName('path/to/my-dialog.html'))
@autoinject
export class MyDialog {
    constructor (readonly controller: DialogController) { }
}

It gets used like this:

this.dialogService.open({viewModel: MyDialog});

So I’m referencing the class directly, I believe that’s possible, well, in general it works
 I’m using webpack. It works fine in dev mode, however, in the prod (minified) version, I get

Can not resolve "moduleId" of "e".

From what I read here and here I cannot figure out what to do. Any advice what I’m doing wrong here?

1 Like
10

Your issue comes from a typo: this.dialogService.open({MyDialog}); -> this.dialogService.open({ viewModel: MyDialog});

11

Oops, sorry, that happended when copying the code from my project. Fixed the example.

12

Maybe I just confused everybody. My problem still exists. Does anybody have a hint for me?

1 Like
13

I’ll try to reproduce it and get back to you. I think it should work, but let’s see.

14

Thank you so much. I’m just trying to create an MCVE, will send to you asap

1 Like
15

Hi, here is a complete project (without node_modules, with an already built prod version in dist): https://www.dropbox.com/s/14hxp754769x13p/diapack.zip?dl=0

1 Like
16

Is there a reason you’re using an old aurelia-dialog version? If you update to v2 you won’t have this issue.

2 Likes
17

Oh, well, I did npm update which didn’t help. Moving to the next major version worked. Thanks for the hint. It kinda broke the webpack bundling, but well, that’s a different thing :slight_smile:

1 Like