<require> wewnątrz komponentu globalResource wywoływanego z ulepszeniem w Aurelia

Question

Próbuję więc skonfigurować Aurelię w mojej aplikacji internetowej Angular 1, aby móc ją powoli aktualizować. Muszę to zrobić, ponieważ aplikacja jest zbyt duża i migracja wszystkiego na raz byłaby niemożliwa.

Tak, w moim folderze Aurelia Stworzyłem folder komponentu z dwóch komponentów (aurelia-component.js i another-component.js z ich poglądów aurelia-component.html i another-component.html), nie będę umieścić javascript, ponieważ są tylko dwie klasy z jednej nieruchomości, HTML oba są takie same, jedyną rzeczą, która zmienia się wartość właściwości tekstu, więc można je odróżnić:

<template> 
    <div>${text}</div> 
</template> 

Mój punkt wejścia main.js wygląda następująco:

export function configure(aurelia) { 
    aurelia.use 
     .basicConfiguration() 
     .developmentLogging() 
     .globalResources('components/aurelia-component') 
     .globalResources('components/another-component'); 

     //window.aurelia = aurelia; 
    aurelia.start() 
     .then(a => { 
      window.aurelia = a; 
     }); 
} 

Jak widać, umieszcza to Aurelia w obiekcie okna, więc mogę uzyskać do niego dostęp z mojej aplikacji Angular, poprawię to później. W moim kątowej aplikacji mam niniejszej dyrektywy:

'use strict'; 

function AureliaContainer() { 
    function Link($scope, element, attrs) { 
     window.aurelia.enhance(element[0]); 
    } 
    // 
    return { 
     restrict: 'A', 
     link: Link 
    }; 
} 

module.exports = AureliaContainer; 

I to ustawić w moim app korzenia z:

app.directive('aureliaContainer', require('./directives/aurelia.container')); 

I w moim Kątowymi View mam te DIV z moim dyrektywy, która wywołuje enhance funkcja z Aurelia:

<div aurelia-container> 
    <aurelia-component></aurelia-component> 
</div> 
<div aurelia-container> 
    <another-component></another-component> 
</div> 

powodem mam dwa aurelia-container w html jest to, że wiem, że będę mieć więcej niż jeden kiedy jestem migra aplikacji. To działa dobrze, oba komponenty ładują się normalnie na ekranie. Problem polega na tym, że próbuję wywołać inny komponent z jednego z tych składników. Co zrobiłem, stworzyłem nowy komponent o nazwie test-component.js z jego widokiem test-component.html. Kod HTML jest to po prostu:

<template> 
    <h1>Header</h1> 
</template> 

A potem, z aurelia-component.html nazwałem go za pomocą:

<template> 
    <require from="./test-component"></require> 
    <div>${text}</div> 
    <test-component></test-component> 
</template> 

Teraz, kiedy załadować strony, test-component rzeczywiście ładuje ale <div>${text}</div część aurelia-component nie i otrzymuję ten błąd w konsoli:

Uncaught (in promise) TypeError: Cannot read property 'behaviorInstructions' of undefined 

Naprawdę nie rozumiem, dlaczego ten błąd się dzieje, powinienem b e potrafisz załadować niestandardowy element z innego normalnie, czy nie powinienem. Czy istnieje ograniczenie w korzystaniu z enhance?

Próbowałem również użyć setRoot w obu działach bez powodzenia, tylko jeden z nich jest załadowany.

Być może istnieje lepsze podejście do tego? Ponownie, nie mogę migrować całej aplikacji na raz, to po prostu niemożliwe.

Z góry dziękujemy za pomoc.

Answer 1

Po pierwsze, nic nie wiem o stopniowym ulepszaniu w Aurelii. I nie mogę komentować jego przydatności do twojego scenariusza.

Ale zastanawiam się, czy może przegapiłeś jakieś zależności Au (jak wiązanie lub szablonów?)

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/app-configuration-and-startup/8

aurelia.use 
    .defaultBindingLanguage() 
    .defaultResources() 
    .developmentLogging() 
    .globalResources('resources/my-component'); 

To może wyjaśniać, dlaczego to się nie powiedzie, jeśli chcesz to uczynić szablon?