Making the eventaggregator global across enhanced aurelia roots

vNext
1

I’ve started looking a Au2 from the perspective of an Aurelia 1 application that relies heavily on the “enhance” feature of Aurelia.

I noticed in the docs that each enhanced element now gets its own DI container and I noticed that when using the EventAggregator a subscription created in one container would not fire when the event is published from another container (ie in an enhanced element).

To revert back to the more global behavior I have in the Aurelia 1 application I did the following in my main startup, where au is the “main” aurelia instance and registrations is an array where I store all global registrations (such as custom elements etc):

let globalEventAggregator = au.container.get(EventAggregator);
registrations.push(Registration.instance(EventAggregator, globalEventAggregator));

The registrations collection is then reused each time I enhance any other element within the application, so now my event publishing across different aurelia instances/DI containers works as I need it.

Is this a fine way to do it or am I doing something crazy here?

1 Like
2

The enhance story is incomplete at the moment in v2, as it works as if it’s a whole new app. We will bring back the v1 behavior, and existing container can be reused for view enhancement.

1 Like
3

Ok, good to know. Perhaps I should await that before I continue my investigations further. Do you have any ETA for when enhance will be more “as intended” or should I just follow the blog? :slight_smile:

1 Like
4

We are at alpha 10, and about to get to alpha 11. It probably will be in around ~13 (~2 weeks from now)

1 Like
5

It should be covered by this PR https://github.com/aurelia/aurelia/pull/1247
The usage would be similar to v1:

aureliaInstance.enhance({
  host: someElement,
  component: someObject_or_someConstructor,
  container: container_for_the_custom_element_of_the_enhancement
})
1 Like
6

@bigopon
I’m trying it out but it seems to cause some problems with the routing giving me this error message;

A root RouteContext is already registered. A possible cause is the RouterConfiguration being registered more than once in the same container tree. If you have a multi-rooted app, make sure you register RouterConfiguration only in the “forked” containers and not in the common root.

I’m not really sure how to set up the routing and where to put the au-viewport if I can’t do it in the component sent to “app” in my main startup.

Also, the container option in your example above is not allowed with the current type definitions, but forcing it to be set anyway does not seem to solve the above issue. What is it set to if omitted, would it be aureliaInstance.container, given your example?

(Perhaps it’s a bit uncommon with routing and usage of enhance in the same app, but for my case the “routing components” I have actually fetches server side generated html from the server, that is then enhanced.)

1 Like
7

normally you wouldn’t need to give a container yourself, since a new one will be created if no container given. If you do specify one, it’s preferably a new container. Can you show some example code of what you are doing?

8

Here is the repo for my Aurelia 2 Proof Of Concept-app;

This PR contains the changes I tried with today;

If it’s to much to digest, just say so and I’ll try to explain it further.

1 Like
9

In the package-lock, it seems the version of Aurelia is resolved to alpha-10. Can you update it to latest, which is alpha-13? The “new” enhance API is only out in alpha-13.
I’ve also added a comment in the PR above.

Here’s the doc for our enhance API App configuration and startup - The Aurelia Docs

Can you have a check?

10

Yeah, that was weird with the versioning stuff, i got 12 when I did npm update.

Anyway, after ensuring alpha 13, my routing is still broken so I can’t really verify if enhance works or not. When I click a navigation link I get;
image

When I try to look att controller.ts:204, I get

image
image1356×55 6.69 KB

It’s as if the controller.ts file hasn’t been included in the entry-bundle…?

1 Like
11

That means sourcemap isn’t working for your local development. I’m not sure why. For your error, can you show the code of how you are hooking into canLoad?

12

I have no canLoad implementation, this is the router component for the single generic route rule set up;

1 Like
13

I’m not sure about this issue. I’ll try to replicate it or if you could help create a small repro, it would be of great help!

14

Vacation times are here for me so I’ll have to pause it for now, will get back to you here later on if needed. Thanks for all the help.

1 Like
16

Sorry, I made a mistake when posting here.

The routing issues seems resolved when using aurelia@2.0.0-alpha.25.

The event aggregator issues is resolved by using the aurelia instance returned from Aurelia.register when doing enhance.

2 Likes