If you’re using the latest and greatest Webpack plugin for Aurelia, there is a possibility if you use the <compose>
element to dynamically render UI you will run into an issue where Webpack doesn’t know about the dynamic imports.
Specifically, I am talking about usage of <compose>
that might look like the following:
<template>
<compose view-model="./views/view-${viewTemplateName}"></compose>
</template>
This is due to the fact, they can’t be resolved beforehand and put into the bundle. Fortunately, there is an easy fix for all of this.
Newly introduced into the Webpack plugin, is support for PLATFORM.moduleName(file)
which tells Webpack where to find files in Aurelia. We can use this to tell Webpack about our dynamic files.
At the top of each dynamic file, simply add the following:
import {PLATFORM} from "aurelia-framework";
PLATFORM.moduleName("./my-dynamic-view");
export class MyDynamicView {
}
Using moduleName
helps Aurelia and Webpack see your dynamic files: that’s all you need to do.
Does this work if you use Aurelia to render (for example) MVC Partials?
There is another approach that I found useful. See this discussion: https://github.com/jods4/aurelia-webpack-build/issues/28
Instead of the PLATFORM.modulename in every file, I used the GlobDependenciesPlugin to locate all the components related to the component with the dynamic
This sounds very promising for creating micro-frontends!
https://www.thoughtworks.com/radar/techniques/micro-frontends
I tried this approach and it did not work. I have a viewmodel which uses “ to dynamically load the other view-models. I followed the instructions on this article but I am still getting the error. Unhandled rejection Error: Unable to find module with ID.