[Solved] Aurelia Dialog not working when build in production


#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.


#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.