Angular Elements / router outlet

Question

Can an Angular Element use the router outlet?

And, if so, will that router outlet interfere with (interact with) the parent router outlet?

Rhodium

Answer 1

No and yes at the same time.

Angular elements are designed for external world and not for the internal angular application. So if you have CMS application or some big application and many teams are working in the application they post there codes and it may be in different language and they all should work together in the same page.

So angular element exports custom element which will directly injected to DOM and can talk to others.

Now answer to your questions. If you want to load a component dynamically you can do that by loading cheldren and it will load the code and inject.

  {
    path: 'data-entities',
    loadChildren: 'app/somemodule/somemodule.module#myModule'
  }

As your app is angular and your component is also angular you can directly use that in your route, in this case also you don't need to use custom element.

One use case is strong where you need custom element is, some other develop it and you want to route to that component using route. in that case you can import that angular module and use in your project.

Angular team might review in there test cases and see more if they need to use it as an option to do it but as of now there is not available.

Turpin

thanks. in my case, I do not want the element's router outer to interact with the parent's router outlet. i gather, from your answer, that this is the default case? – Rhodium

I believe each element is it's own angular application at this point, with it's own zones router etc. So the router outlet should be separate as well, unless there's conflicting routes maybe Same route names? – Pyrophosphate