Webpack Loader does not account for compose view being rendered from server

[Vheissu]

I have a custom element which loads HTML from a server endpoint. In the standard es-2016 and TypeScript skeletons this functionality works fine. However, using the Webpack starter, specifically the loader, due to the way dependencies are resolved with a map, you can no longer do this.

HTML:

<template>
    <compose view.bind="viewUrl" containerless></compose>
</template>

Javascript:

import {inject, bindable, containerless, customElement, TaskQueue} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';

@customElement('top-bar')
@containerless()
@inject(TaskQueue, EventAggregator)
export class TopBar {
    @bindable router;

    ea: EventAggregator;
    taskQueue: TaskQueue;
    viewUrl = null;

    constructor(taskQueue, ea) {
        this.taskQueue = taskQueue;
        this.ea = ea;

        this.ea.subscribe('router:navigation:success', () => {
            this.updateViewUrl();
        });
    }

    updateViewUrl() {
        this.taskQueue.queueMicroTask(() => {
            this.viewUrl = `/Utility/TopBarTemplate?url=${window.location.href}`;
        });
    }
}

The offending part of the loader appears to be this:

function webpackContextResolve(req) {
    return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
};

It assumes if it is not in the dependency map (and being a remote resource it would not be) then it should throw an error. This is completely different to how the standard loader handles these kind of things.

[EisenbergEffect]

@Vheissu Has this been addressed with the latest webpack setups?

[Vheissu]

@EisenbergEffect The issue is that Webpack can't work with dynamic imports. I actually wrote a solution using inlineViewStrategy which achieves dynamic loading without needing to define your imports upfront. http://ilikekillnerds.com/2016/04/loading-html-url-endpoint-aurelia-using-webpack/