多个Aurelia实例 - Aurelia Webpack插件 - aureliaApp选项 - “找不到模块”

Question

我正在将我的网络应用程序编写为许多Aurelia“功能”应用程序 - 尽管我没有使用Aurelia功能。因此，在我的html标记中，我有两个指向不同应用程序的入口点：

<!-- Top Navigation Bar --> 
<div aurelia-app="topnav"></div>

<!-- Main App--> 
<div aurelia-app="main"></div>

我正在使用webpack，一切都使用单个“主”应用程序完美。 Webpack生成一个JS文件“main.bundle.js”，我将其包含在src标记中。

当我添加“topnav”应用程序时，事情并不那么简单。在webpack中，我告诉插件使用不同的aureliaApp名称：

 new AureliaPlugin({ aureliaApp: "topnav"}),

并且，正如您所看到的，我的HTML入口点也称为“topnav”。 Webpack生成一个JS文件“topnav.bundle.js”，我也包括它。我有一个名为“topnav.ts”的文件，其中包含aurelia Cionfigure函数，该函数结束：

     aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("nav")));

还有一对文件“nav.ts”，“nav.html”构成了我的viewmodel和view。

当我运行app aurelia加载并执行“nav”模块代码。但我得到一个错误 - 见下文。

报告无法找到的模块是输入HTML标记的模块。

这有用吗？我错过了什么吗？

我应该补充说，一切似乎都有效。我可以在viewmodel中创建和更新属性，这些属性绑定到视图。只是抛出了这个错误。

Answer 1

你没有做错任何事，只是不支持的场景。根据官方doc-wiki：https://github.com/aurelia/webpack-plugin/wiki/AureliaPlugin-options#aureliaapp

您只能拥有一个带aureliaApp配置的自动输入模块。要解决这个问题，您只需要将PLATFORM.moduleName('topnav')添加到main.ts（并将其置于根级别）

另一种方法是手动引导：

// in your index.ts
import { bootstrap } from 'aurelia-bootstrapper';

// bootstrap top nav application, with one instance of Aurelia
bootstrap(aurelia => {
  // do your configuration
  aurelia
    .start()
    .then(() => aurelia.setRoot(
      PLATFORM.moduleName('topnav'),
      document.querySelector('#topnav')
    );
});

// bootstrap main application, with another instance of Aurelia
bootstrap(aurelia => {
  // aurelia.use.standardConfiguration();
  // ...
  aurelia
    .start()
    .then(() => aurelia.setRoot(
      PLATFORM.moduleName('app'),
      document.querySelector('app')
    )
});