Aurelia webpack: compose gives module not found

1

Hi!
Is there someone who could help me with the following?
i have a compose in my view that binds to a view i said in my model.
The view is build as follow:

private baseWizardSummariesPath: string = 'components/clients/wizard/summaries/';
private baseTargetPath: string = 'components/clients/wizard/dialogs/';
private baseIconPath: string = 'shared/resources/elements/svg/';
private stepSummaryTemplatePath: string = "scope-summary/scope-summary.html";

//components/clients/wizard/summaries/scope-summary/scope-summary.html
let summaryTemplatePath: string = PLATFORM.moduleName(this.baseWizardSummariesPath + stepSummaryTemplatePath);

view with compose: shared/components/wizard/sub-wizard-step-component.html
Compose:
<compose view.bind="subWizardStep.stepSummaryTemplatePath"></compose>

the error i’m getting:

Unhandled rejection Error: Unable to find module with ID: components/clients/wizard/summaries/scope-summary/scope-summary.html

am i missing something.?

1 Like
2

It’s not possible for webpack to know what module to add to the bundle with this:

//components/clients/wizard/summaries/scope-summary/scope-summary.html
let summaryTemplatePath: string = PLATFORM.moduleName(this.baseWizardSummariesPath + stepSummaryTemplatePath);

What you want to do is to have string literal like following:

PLATFORM.moduleName('components/clients/wizard/summaries/scope-summary/scope-summary.html')
// ....
// then you can do

private baseWizardSummariesPath: string = 'components/clients/wizard/summaries/';
private baseTargetPath: string = 'components/clients/wizard/dialogs/';
private baseIconPath: string = 'shared/resources/elements/svg/';
private stepSummaryTemplatePath: string = "scope-summary/scope-summary.html";

//components/clients/wizard/summaries/scope-summary/scope-summary.html
let summaryTemplatePath: string = PLATFORM.moduleName(this.baseWizardSummariesPath + stepSummaryTemplatePath);
3

Thnx!
although after changing this i’m running against the following:
No view model found in module "components/clients/wizard/dialogs/scope-dialog/scope-dialog.html".

not sure why since the scope-dialog folder contains a scope-dialog.ts

1 Like
4

We have perhaps 100 view models that are looked up dynamically and we didn’t want to list them all in a single place that would get forgotten when adding new ones.

require.context(path, deep, regex) to the rescue!

Our components are all organised into directories which are located using the following compose paths in ./devices/list.html:

view-model="./${device.type}/components/list-item"
view-model="./${device.type}/components/${channel.type}-edit"

All the view models could be found using a glob like:

./devices/**/components/*.ts

At the top of ./devices/list.ts I added the following:

require.context('./', true, /\/components\/.*.ts$/)

If you’re using TypeScript, you can add @types/webpack-env to your devDependencies for require.context typings.

Now Webpack picks up all our viewModels (and corresponding views) without having to reference each one manually.

1 Like
5

Thnx! @timfish
i’ll try and see if this is workable in the project i’m working on.

Quick question about the device/list part. Is this just a component in your aurelia/ webpack project?
And how does this work in the following situation?

components/clients/wizard/wizard.html
components/clients/wizard/dialogs/scope-dialog/scope-dialog.html

Where scope-dialog is part of the wizard.

We always keep parts that belong together within the same base dir like my example above.

Edit:
I currently fixed my problem in a other way by setting the viewmodel within the dialogservice with PLATFORM.moduleName() instead of what i first had(setting a string with moduleName and passing it to a method that calls dialogService).