Наложение пользовательских элементов в шаблонах aurelia

Question

Мой вопрос касается наложения пользовательских элементов и их использования в html-шаблонах aurelia.
В качестве настройки я использую новейший скелет машинописи веб-пакетов https://github.com/aurelia/skeleton-navigation и это мои конфиги:

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>

структура файла:

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

В зависимости от разных конфигов (webpack.config.a.js, webpack.config.b.js), веб-пакет должен решить во время сборки, является ли компонент -a или компонент-b частью пакета. В веб-пакете configs компилируется, но во время выполнения выдается исключение:

Error: Unable to find module with ID: component-alias/component.html

Можно ли создать экземпляры этих компонентов в HTML-шаблонах? Или, может быть, есть другие подходы, как решить во время сборки, какой компонент использовать?

заранее спасибо

Answer 1

Я нашел решение для моей проблемы. Используя встроенную Аурелию compose элемент делает свое дело.

app.html

<template>    
  <require from="./nav-bar.html"></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view></router-view>
  </div>
  <compose view-model.bind="componentPath"
           view.bind="componentTemplatePath"></compose>
</template>

app.ts

import { PLATFORM } from "aurelia-pal";
...
public bind() {
  this.componentPath = PLATFORM.moduleName("component-alias/component");
  this.componentTemplatePath = PLATFORM.moduleName("component-alias/component.html");
}

Я думаю, что это не лучшее решение, но оно работает. Если у вас есть альтернативные подходы, пожалуйста, дайте мне знать.

Answer 2

У меня есть подозрение, что просто PLATFORM.moduleName("component-alias/component.html") где-то в коде будет достаточно и compose не нужен