Separate Router Outlet within Angular Element

Question

I'm currently having a go at Angular Elements to make micro-apps. This all works fine and the process of including my micro-app into the container application works fine, but I'm having trouble when trying to increase the complexity of my micro apps to allow them to have their own router outlet.

I have added a router outlet into the main component of my Element and it does route through the components I have created but it changes the top level URL of the hosting application.

I was wanting to have this application route independently of the main application, and I tried this by using a named router outlet in my extension app and adding that name to the routes, but this resulted in an error saying the path could not be found.

Is there something obvious I am missing here, or is what I'm trying to do not yet supported by Angular Elements? All of the articles I have found online do not mention the router at all when showing how to make Angular Elements.

Thanks!

Answer 1

For anyone who comes to this question - I found a great article that I managed to follow to get what I needed from this.

https://medium.com/@timon.grassl/how-to-use-routing-in-angular-web-components-c6a76449cdb

The gist of the article is that you can use a named router outlet inside the element app. You then choose either to use the RouterTestingModule to handle routes and not have the overall application URL change on nevigate, or do some poking around to get the named router outlet to affect the URL. Well worth a read.