maximegris/angular-electron
Angular Electron
Angular Electron is a project scaffolding tool that generates a preconfigured desktop application template combining Angular's web framework with Electron's native runtime. It produces cross-platform executables for Windows, macOS, and Linux from a single codebase, while providing a development server with hot reload that automatically refreshes the Electron renderer process when Angular source files change.
The project handles the architectural complexity of running Angular inside Electron by separately bundling Node.js modules for the main process and Angular modules for the renderer process using distinct webpack configurations. It includes runtime guards that conditionally import Node.js core modules only when running inside Electron, and supports attaching the Chrome DevTools Protocol debugger from VS Code for breakpoint-based inspection. A hot-reload bridge relays file-change events from the Angular dev server to the Electron renderer process, triggering automatic page reloads during development.
The tooling supports building the same Angular codebase into multiple output formats: platform-specific executables (AppImage, Flatpak, or OS-native formats), optimized production bundles, and static web files for browser distribution. Developers can run the application in browser mode to bypass the Electron shell for quick frontend testing, execute end-to-end tests against the running Electron application, and integrate Angular Material by temporarily swapping custom webpack builders. The project manages dependency declarations across both Electron processes, allowing npm packages to be imported in the main thread and Node.js native modules to be loaded conditionally in the renderer.
Features
- Angular Desktop Scaffolders - Scaffolds a preconfigured Angular+Electron desktop application template with hot reload and cross-platform builds.
- Angular - Provides the core scaffolding that bundles Angular into Electron for desktop-native execution.
- Desktop Hot Reloaders - Starts a local development environment that reloads the renderer process on code changes.
- Angular Renderer Bridges - Bridges Angular's dev server to the Electron renderer for automatic page reloads on file changes.
- Electron Renderer Hot Reloaders - Offers a development server that automatically refreshes the Electron renderer process when Angular source files change.
- Hot-Reloading Servers - Starts a local development server that automatically refreshes the application when source files change.
- Electron Process Bundling - Separately bundles Node.js modules for Electron's main process and Angular modules for the renderer process.
- Cross-Platform Executable Packagers - Creates platform-specific installable binaries for Linux, Windows, and Mac.
- Desktop Application Installers - Packages the application into platform-specific executables like AppImage and Flatpak for end-user installation.
- Angular Electron Boilerplates - Provides a preconfigured project template combining Angular's web framework with Electron's desktop runtime.
- Web Technology Desktop Scaffolders - Generates a ready-to-develop project structure for building native desktop applications with web technologies.
- Cross-Platform Desktop Frameworks - Bundles Angular and Electron to produce installable executables for Windows, macOS, and Linux from a single codebase.
- Angular CLI Builder Overrides - Overrides Angular CLI's default webpack builders to support Electron-specific module resolution and bundling.
- Angular Desktop Build Targets - Compiles the same Angular codebase into Electron executables, web bundles, and static files.
- Production Build & Deployment - Compiles the application into an optimized bundle ready for distribution.
- Electron Runtime Guards - Implements runtime guards to conditionally load Node.js modules only within the Electron environment.
- Static Web Applications - Compiles the application into static files that can be served directly in a web browser.
- Desktop Frameworks - Provides fast bootstrapping for Electron-based applications.
- Application Boilerplates - Angular and TypeScript based bootstrapping.
- Desktop Application Frameworks - Provides fast bootstrapping for Electron applications.
