{"repo":"kylecannon/angular-dream-stack","free":true,"listed":false,"github":"https://github.com/kylecannon/angular-dream-stack","clone":"git clone https://github.com/kylecannon/angular-dream-stack.git","description":"Example of running multiple Routers and Ngrx Instances for Complex Dashboards with Webpack Module Federation","language":"TypeScript","stars":62,"topics":["mfe","dashboard","ngrx","angular","module-federation"],"license":"MIT","category":"dashboards-admin","readme_excerpt":"Angular DREAM Stack D OM-less R outing E ngine A llowing M adness. Demo Motivation This work was derived from a need for large enterprise internal facing applications to co-exist in a desktop like environment in the browser. The Angular Router was designed specifically for tying what is shown on the page to the location in the Browser. However, in some instances this can be behavior that is not desired. A good example of this is a dashboard with complex and rich widgets (charting, single metric, session tracing tools, etc). The default routing solution works really well until a widget such as a graph (with multiple routes) needs to be rendered multiple times on the page for different metrics. Quick Start Run yarn run-all to get all MFEs running, Navigate to all below locally to see each application is able to open separately. http://localhost:4001 - Counter http://localhost:4002 - Scoreboard http://localhost:4003 - Tour of Heroes After verifying, navigate to http://localhost:4004 to play around with the Dashboard The Solution Sandboxing via Injector Due to the power of Angular's Dependency Injection, we can create an isolated injector per widget. We can accomplish this by creating a custom service that provides code-splitting for each widget. This is accomplished by using the widget host component as the parent injector for each widget. Allowing for Multiple Routers and Ngrx Stores When we create our sandbox, we will also need to provide our own \"override\" for Router and Stor","default_branch":null,"files":null,"tree":[],"storefront":"/r/kylecannon","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/kylecannon/angular-dream-stack/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}