Angular elements routing issue

[Nishi Ajmera]

Hi 

I have two angular applications(parent, child). I am creating a custom element (using angular elements) from the child application and injecting it into the parent application. The child application has two forms. First form routes to the second one on button click. 

The issue that I am facing is with the routing of the child application which is explained below with the example.

Parent application calls the child application on button click (button - custom element) through the .js file.

HTML below the custom element button is from the child application

First time when i click test, it navigates to Form2

If I click custom element again, it navigates to the Form1 but the route on click of test button (route to form2) stops working. If you see the link gets changed but the Form doesn't get rendered.

Please help.

[Sander Elias]

Hi Nishi,

I'm fairly sure the router can't be active in multiple applications in the same page. Move your routing to a single app, and use angular elements inside the routes that should come from the other app.

Regards

Sander 

[Nishi Ajmera]

Hi Sander, 

Thanks for the reply. The routes work when i navigate from a different component to the elements component. It is only when i try to navigate within the same component it stop working. 

What i have noticed is when the component gets destroyed completely and then created again, everything works fine.

Thanks

Nishi