1

I am using Dynamic Components and I am re-writing this to try to better explain.

AppModule

My App Module contains an entryComponents array which contains these 2 things

  • ContainerComponent
  • TextComponent

Now I can go crazy until my heart is content

enter image description here

GameModule

However, now I have a problem. Some of my Components are Games and they are heavy and indeed they may never be used. Therefore, I have to have Lazy Loaded routes. GameModule has the following

  • GameContainer
  • GameComponent

So now I am in this place:

enter image description here

And what I am actually aiming for is this:

enter image description here

My problem is with that GameContainer. Originally it was a DynamicComponentService but I couldn't use this because of circular dependencies with nested containers. See my recent question where I moved this out of a service and back into Container.

The problem is that I can't seem to successfully extend Container. I was hoping I could do this:

protected constructComponent(config: IThing){  
       switch (config.selector){
           default: 
              // `app-text` will be handled
              return super.constructComponent(config);
              // my module extends with this new capability
           case `app-game-component`:
              return this.createGameComponent(config);
       }
}

But that doesn't work, my overrided constructComponent never appears to be called on my GameContainer. So that idea went out of the window.

Will Angular Elements help me?

My biggest problem at the moment is figuring out how to correctly deal with these 2 sets of entryComponents. I have ran out of options or strategy.

Then I read an article about AngularElements and what I am really wondering is if this may aid me here? When I use AngularElements is it possible to register all my components at the App level so that my single Container has access to all "Factories" but yet still benefit from lazy loading?

Angular is saying "Look man, I don't know what app-game is" and this is causing me all kinds of nightmares since even when I load it, I now have some injector in some other place and I can't seem to deal with it.

Improve this question
2
  • I read that Decorators are not included by way of inheritance so later when my Container is a Screen it will contain Decorators and appears to become mirky Commented Jul 24, 2018 at 13:31
  • I think that is why Extension isn't really my preference. The fact that I have to duplicate my template and then remember to copy and paste Decorators... It isn't really viable just like all my other attempts aren't viable so far. Hence Elements and there is no where I can find that describes exactly how they operate at runtime or with AOT. The documentation says it makes Dynamic Elements much easier to work with and that right now is killing me. Commented Jul 24, 2018 at 13:43

1 Answer 1

Reset to default
1

This suggestion is too long to put in a comment, and although it's not a very detailed answer (no code), it may be of use:

You could have a parent component, that has both the dynamic components, and the lazy loaded module

This can be achieved using named router outlets to load the lazy loaded modules from within the parent component. Here is an example app of lazy loading with named outlets (you can run this on StackBlitz using the GitHub address)

Note: Lazy loading does not work by default in named router outlets, so you need to use the workaround in that app (see more details Angular Issue #12842)

You could handle communication between the components using a shared service (keep in mind that services provided in lazy loaded modules, or provided in modules imported into lazy loaded modules, create new instances - see shared modules and DI - also detailed in the Angular docs)

I would suggest building a demo app to test this this approach, rather than trying to edit your current app

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.