I have created multiple root components in Angular 17 and bootstrapped them in index.html
<body class="mat-typography parent">
<div class="right"><app-link-toggle/></div>
<app-root></app-root>
</body>
result is, my page is displayed with both the components correctly. Bootstrapping is as below:
const appref= bootstrapApplication(AppComponent, appConfig);
appref.then(ref=> bootstrapApplication(LinkToggleComponent,appConfig));
codebase is available here https://stackblitz.com/~/github.com/rachnasundriyal33/multi-app-angular
to manage navigation of data/events from app-root to link-toggle, I created a service in platform provider using providedIn: ‘platform’
I am able to get data to-and-fro but when it comes to routing, my router url changes on browser but page does not load.
When I click on side menu icon, page loads with the url in browser.
To share the app-root router in link-toggle component (in link toggle I use router.navigate), I set router object in platform scoped service. Routs are defined in app-root.
Can someone help why navigate function is not loading desired component automatically. It loads only when I click on a menu opening button (I just click the menu icon, not the menu item).
Link toggle component is recent addition, app-root works fine without side links panel.
I want to achieve below
By adding a separate angular application I get side tasks panel loaded separately. I am not sure how to achieve the same with mat-drawer-content having router-outlet at same level. I tried, but my component gets removed automatically.
I want side tasks panel available on all the routes.
I check lot of blogs and SO, but could not find all in one where multiple root components are bootstrapped in Angular 17 and routing is required from one component to another.
3