More Premium Hugo Themes Premium Tailwind Themes

Angular Dream Stack

Example of running multiple Routers and Ngrx Instances for Complex Dashboards with Webpack Module Federation

Angular Dream Stack

Example of running multiple Routers and Ngrx Instances for Complex Dashboards with Webpack Module Federation

Author Avatar Theme by kylecannon
Github Stars Github Stars: 62
Last Commit Last Commit: Apr 19, 2021 -
First Commit Created: Aug 8, 2025 -
Angular Dream Stack screenshot

Overview

The Angular DREAM Stack offers an innovative approach to building enterprise-level applications that require a desktop-like environment in a web browser. By leveraging a DOM-less routing engine, it addresses the need for more complex and rich user interfaces, particularly in scenarios such as dashboards filled with various interactive widgets. Unlike traditional routing mechanisms that bind the displayed content directly to the browser’s location, this framework permits greater flexibility, enabling multiple instances of similar widgets to coexist without route conflicts.

This platform is especially beneficial for developers aiming to create single-page applications (SPAs) that also serve as micro-frontend (MFE) architectures. By introducing sandboxing techniques through Angular’s Dependency Injection, developers can design widgets that maintain autonomy while still being part of a larger application framework.

Features

  • DOM-less Routing Engine: Allows multiple routing instances for complex widgets, enhancing user experience in dashboards.

  • Custom Service for Code-Splitting: Ensures efficient loading of widget components by creating isolated injectors for each widget.

  • Sandboxing via Injector: Utilizes Angular’s Dependency Injection to create independent environments for each widget, reducing conflicts.

  • Multiple Routers Support: Overriding the default PlatformLocation at the widget level allows for in-memory URL management, facilitating simultaneous routing.

  • Dual Distribution Models: Supports the release of applications as both SPAs and MFEs, allowing for versatile deployment options.

  • Centralized Application Bootstrapping: The core functionality is encapsulated in a library, streamlining the bootstrap process for different distribution styles.

  • In-App Rendering: Capable of rendering a new instance of the application within itself, promoting dynamic content generation.

This innovative approach not only enhances the development workflow but also significantly improves user interactions with complex applications.