Geek Answers Handbook

<require> inside the globalResource component called with amplification in Aurelia

So, I'm trying to configure Aurelia in my Angular 1 web application so that I can update slowly. I need to do this because the application is too large, and the migration of everything at once will be impossible.

So, in my Aurelia folder, I created a component folder with two components ( aurelia-component.js and another-component.js with their representations aurelia-component.html and another-component.html ), I will not become javascript, since they are only two of a class with one property, html is the same for both, the only thing that changes is the value of the text property so that I can distinguish between them:

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

My main.js entry main.js looks like this:

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

As you can see, this puts Aurelia in the window object, so I can access it from my Angular application, I will improve this later. In my Angular app, I have this directive:

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

I installed this in my application root with:

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

And in my Angular view, I have these divs with my directive that calls the enhance function from Aurelia:

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

The reason I have two aurelia-container in html is because I know that when porting the application I will have to have more than one. And it works great, both components usually load on the screen. The problem is that I'm trying to call another component from one of these components. What I did, I created a new component called test-component.js with its view test-component.html . The html for this is simple:

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

And then, from aurelia-component.html , I called it using:

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

Now, when I load the page, test-component loads, but the <div>${text}</div aurelia-component does not work, and I get this error in the console:

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

I really don’t understand why this error occurs, I should be able to load a user element from another, as a rule, should not. Or is there a limitation when using enhance ?

I also tried to use setRoot in both divs without success, only one of them is loaded.

Maybe it’s better for this? Again, I can’t transfer all my application at once, it’s just not possible.

Thanks in advance for your help.

+5
source share
1 answer

Firstly, I do not know anything about the progressive improvement of Aurelia. And I can not comment on its suitability for your scenario.

But I'm wondering, maybe you missed some Au dependencies (like binding or patterns?)

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

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

This may explain why this fails if you want it to display a template?

0
source

More articles:


All Articles