多个Aurelia实例-Aurelia Webpack插件-aureliaApp选项-“未找到模块" [英] Multiple Aurelia Instances - Aurelia Webpack Plugin - aureliaApp option - "module not found"

问题描述

我正在将我的Web应用程序构成为许多Aurelia功能"应用程序-尽管我没有像这样使用Aurelia功能.因此，在我的html标记中，我有两个指向不同应用程序的入口点:

I am composing my web app as a number of Aurelia "feature" apps - although I'm not using Aurelia features as such. Consequently in my html markup I have two entry points pointing to different apps:

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

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

我正在使用webpack，并且使用单个主"应用程序即可正常运行. Webpack生成一个JS文件"main.bundle.js"，该文件包含在src标记中.

I am using webpack and everything works perfectly using the single "main" app. Webpack generates a JS file "main.bundle.js" which I include in the src tag.

当我添加"topnav"应用程序时，事情并不是那么简单.在webpack中，我告诉插件使用其他aureliaApp名称:

Things are not so straightforward when I added the "topnav" app. In webpack I tell the plugin to use a different aureliaApp name:

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

，并且，正如您所看到的，我的HTML入口点也称为"topnav". Webpack生成一个JS文件"topnav.bundle.js"，我也将其包括在内.我有一个名为"topnav.ts"的文件，其中包含aurelia Cionfigure函数，其结尾为:

and, as you can see my HTML entrypoint also calls "topnav". Webpack generates a JS file "topnav.bundle.js" which I also include. I have a file called "topnav.ts" which contains the aurelia Cionfigure function which ends:

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

还有一对构成我的视图模型和视图的文件"nav.ts"，"nav.html".

And a pair of files "nav.ts", "nav.html" which constitute my viewmodel and view.

当我运行应用程序时，aurelia将加载并执行"nav"模块代码.但是然后我得到一个错误-见下文.

When I run the app aurelia loads and the "nav" module code executes. But I then get an error - see below.

它报告无法找到的模块是输入到HTML标记中的模块.

The module which it reports that it cannot find is the one entered into the HTML markup.

这行得通吗?我错过了什么吗?

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

I should add, everything seems to work. I can create and update properties in the viewmodel and these are bound to the view. It's just that this error is thrown.

推荐答案

您没有做错任何事情，只是不受支持的情况.每个官方文档Wiki: https://github.com/aurelia/webpack-plugin/wiki/AureliaPlugin-options#aureliaapp

You are doing nothing wrong, just unsupported scenario. Per official doc-wiki: https://github.com/aurelia/webpack-plugin/wiki/AureliaPlugin-options#aureliaapp

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

You can have only 1 auto entry module with aureliaApp configuration. To solve this, you just need to add PLATFORM.moduleName('topnav') to your main.ts (and put it on root level)

另一种方法是手动引导:

Another way to do is to bootstrap manually:

// 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选项-“未找到模块"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！