Loading HTML From A URL Endpoint In Aurelia Using Webpack

I recently switched over to using Webpack in my Aurelia application that I have been building at my day job. One of the caveats I encountered as a result of ditching Jspm/System.js is the ability of being able to supply a URL to getViewStrategy because Webpack requires knowing all paths at bundle time, this approach goes out the window.

But, I recently encountered something cool that allows you to request HTML from the server and then use it as a view within your current custom component or wherever using InlineViewStrategy. Essentially this gives you the ability to take arbitary HTML wrapped in <template></template> tags and use it as a view.

Firstly, why would I want to do this? I am working within the confines of a .NET application. Some parts of the Aurelia application are server-side generated .cshtml partials for reasons I will not go into. I need to get some HTML and then use it as a view within my application. Previously I could do the following.

Viewmodel:

export class MyCustomElement {
    view: any = '';

    constructor() {
        this.view = '/Controller/partialName';
    }
}

View:

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

But if you switch over to Webpack you lose the ability to dynamically load views from a .NET controller or whatever, but I came up with a way to do it using a standard XMLHttpRequest and InlineViewStrategy.

As you will see below, we make a simple HTTP request to our server which is sending back HTML wrapped in <template> tags.

I could have just created a custom loader for use with Webpack to handle loading dynamic content, but it seemed like just doing it using an InlineViewStrategy achieved the same thing and was more straightforward. If I do create a loader, you’ll hear about it.