My inquiry pertains to the process of aliasing custom elements and integrating them into aurelia's html-templates. To set the scene, I am utilizing the latest webpack typescript skeleton available at https://github.com/aurelia/skeleton-navigation and here are my configurations:
webpack.config.a.js
...
resolve: {
extensions: ['.ts', '.js'],
modules: [srcDir, 'node_modules'],
alias: {
"component-alias": path.resolve(__dirname, "./src/component-a")
}
},
...
app.html
<template>
<require from="component-alias/component"></require>
<require from="./nav-bar.html"></require>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
<component></component>
</template>
file structure:
src
|----component-a
| |----component.html
| |----component.ts
|
|----component-b
| |----component.html
| |----component.ts
|
|----app.html
|----app.ts
|
|...
|
webpack.config.a.js
webpack.config.b.js
Depending on different configurations (
webpack.config.a.js, webpack.config.b.jsError: Unable to find module with ID: component-alias/component.html
Is there a way to instantiate these components within the html-templates or are there alternative methods to determine which component to utilize at build time?
Thank you in advance