多个 Aurelia 实例 - Aurelia Webpack 插件 - aureliaApp 选项 - "module not found"

Question

我正在将我的 Web 应用程序组合成多个 Aurelia "feature" 应用程序 - 虽然我没有使用 Aurelia 功能本身。因此，在我的 html 标记中，我有两个指向不同应用程序的入口点：

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

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

我正在使用 webpack，并且使用单个 "main" 应用程序一切正常。 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" 构成了我的视图模型和视图。

当我运行应用 aurelia 加载并执行 "nav" 模块代码时。但我随后收到一个错误 - 见下文。

它报告找不到的模块是输入到 HTML 标记中的模块。

这应该行得通吗？我错过了什么吗？

我应该补充一点，似乎一切正常。我可以在视图模型中创建和更新属性，这些属性绑定到视图。只是抛出这个错误。

Answer 1

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

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

另一种方法是手动bootstrap：

// 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')
    )
});

多个 Aurelia 实例 - Aurelia Webpack 插件 - aureliaApp 选项 - "module not found"

Multiple Aurelia Instances - Aurelia Webpack Plugin - aureliaApp option - "module not found"

aurelia