Несколько экземпляров Aurelia - плагин Aurelia Webpack - опция aureliaApp - «модуль не найден» - PullRequest
Новая
       44

Несколько экземпляров Aurelia - плагин Aurelia Webpack - опция aureliaApp - «модуль не найден»

0 голосов
/ 23 февраля 2019

Я составляю свое веб-приложение как набор «функциональных» приложений Aurelia, хотя я не использую функции Aurelia как таковые.Следовательно, в моей HTML-разметке у меня есть две точки входа, указывающие на разные приложения: 

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

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

Я использую веб-пакет, и все отлично работает с помощью одного «основного» приложения.Webpack генерирует файл JS "main.bundle.js", который я включаю в тег src.

Когда я добавил приложение "topnav", все было не так просто.В веб-пакете я говорю плагину использовать другое имя aureliaApp: 

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

и, как вы можете видеть, моя точка входа в HTML также вызывает "topnav".Webpack генерирует файл JS "topnav.bundle.js", который я также включаю.У меня есть файл с именем "topnav.ts", который содержит функцию Cionfigure aurelia, которая заканчивается: 

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

и пару файлов "nav.ts", "nav.html", которые составляют мою viewmodel и представление.

Когда я запускаю приложение, aurelia загружается и выполняется код модуля "nav".Но затем я получаю сообщение об ошибке - см. Ниже.

Error after aurelia module executes

Модуль, который сообщает, что не может найти, - это модуль, введенный в разметку HTML.

Должно ли это работать?Я что-то пропустил?

Надо добавить, все вроде работает.Я могу создавать и обновлять свойства в viewmodel, и они привязаны к представлению.Просто эта ошибка выдается.

1 Ответ

0 голосов
/ 24 февраля 2019

Вы не делаете ничего плохого, просто неподдерживаемый сценарий.В официальном doc-wiki: https://github.com/aurelia/webpack-plugin/wiki/AureliaPlugin-options#aureliaapp

У вас может быть только 1 модуль автоматического ввода с конфигурацией 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')
    )
});
...