Electron + TypeScript + Angular 20 Boilerplate

A modern, lightweight, and type-safe boilerplate for building desktop applications using Electron, Angular 20, and TypeScript.

Features

• ⚡ Angular 20: Built with standalone components, Angular Signals, and modern Angular architecture.
• 🛡️ End-to-End Type Safety: Strongly typed IPC communication between Electron main process, preload script, and Angular frontend.
• 🔒 Security Hardened: Enforces contextIsolation: true and nodeIntegration: false with secure preload bridge context exposure.
• 🚀 Concurrent Dev Workflow: Single command npm start handles running Angular dev server and launching Electron automatically.
• 📦 Packaging Ready: Pre-configured with electron-builder for multi-platform distribution.

Tech Stack

• Desktop Framework: Electron 32
• Frontend Framework: Angular 20
• Language: TypeScript 5
• Build Tooling: Angular CLI, tsc, electron-builder, concurrently, wait-on

---

Project Structure

electron-typescript-angular/
├── src/
│   ├── app/                    # Angular Frontend
│   │   ├── core/
│   │   │   └── services/       # ElectronService abstraction
│   │   ├── home/               # Home component (Angular Signals)
│   │   ├── update-window/      # Sample multi-window / route component
│   │   ├── app.config.ts       # Application providers & Hash routing
│   │   └── app.routes.ts       # Router routes configuration
│   ├── electron/               # Electron Main Process
│   │   ├── main.ts             # Window management & IPC handlers
│   │   └── preload.ts          # Safe contextBridge exposing Window.api
│   └── types/
│       └── electron.d.ts       # Shared TypeScript IPC interfaces
├── tsconfig.json               # Root TypeScript configuration
├── tsconfig.electron.json      # Electron TypeScript compilation spec
├── angular.json                # Angular CLI workspace configuration
└── package.json                # NPM dependencies & build scripts

---

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm

Installation

git clone https://github.com/supersu-man/electron-typescript-angular.git
cd electron-typescript-angular
npm install

---

Available Scripts

Development

npm start

Runs ng serve and waits for http://localhost:4200 to become ready, then automatically compiles and launches Electron in dev mode. Angular HMR / Live Reload works out-of-the-box.

Note: If you edit src/electron/* main process files, re-run npm run electron-build or restart npm start.

Build Commands

• Compile Electron Main Process:

  npm run electron-build

  Compiles src/electron/ into the build/ directory via tsconfig.electron.json.

• Build Angular App:

  npm run angular-build

  Compiles Angular production bundle into build/browser/.

• Package Desktop Application:

  npm run electron-package

  Builds both Angular frontend and Electron backend, then packages the application into executable installers via electron-builder.

---

Customization & Packaging

Before distributing your application, update the build section in package.json:

"build": {
  "appId": "com.yourcompany.yourapp",
  "productName": "Your App Name",
  "files": [
    "build/**/*"
  ]
}

---

License

This project is licensed under the MIT License - see the LICENSE file for details.