Angular-Electron 项目结构完整指南：从新手到专家的快速成长路径

想要快速构建跨平台桌面应用程序？Angular-Electron 结合了 Angular 20 的前端开发体验和 Electron 39 的桌面应用能力，为你提供终极解决方案！✨

项目概述与核心架构

Angular-Electron 项目采用双 package.json 结构，这是 Electron Builder 推荐的最佳实践。这种架构将主进程和渲染进程的依赖分离，优化最终打包体积。

核心架构亮点：

• 主进程：位于 app/ 目录，运行 NodeJS 环境
• 渲染进程：位于 src/ 目录，运行 Angular Web 应用
• 热重载：仅渲染进程支持热重载，提升开发效率

快速启动：一键搭建开发环境

克隆项目并安装依赖

git clone https://gitcode.com/gh_mirrors/an/angular-electron
cd angular-electron
npm install
cd app && npm install

开发环境启动

运行 npm start 命令即可在本地开发环境中启动应用，享受热重载带来的便利！🚀

项目目录结构深度解析

主进程目录 (app/)

• main.ts - Electron 主进程入口文件
• package.json - 主进程依赖管理

渲染进程目录 (src/)

• app/ - Angular 应用主体
  • core/ - 核心模块和服务
  • home/, detail/ - 功能组件模块
  • shared/ - 共享组件和指令

配置文件详解

• angular.json - Angular 项目配置
• electron-builder.json - Electron 打包配置
• tsconfig.json - TypeScript 编译配置

关键配置文件深度理解

主进程配置 app/main.ts

这是 Electron 应用的大脑，负责创建窗口、处理系统事件和管理应用生命周期。

渲染进程入口 src/main.ts

Angular 应用的启动入口，负责引导整个前端应用。

开发技巧与最佳实践

第三方库导入策略

项目支持在两种环境中运行，因此需要正确导入依赖：

NodeJS 库：添加到 app/package.json 和根目录 package.json 的 dependencies Web 库：仅添加到根目录 package.json 的 dependencies

测试策略

• 单元测试：使用 Jest 框架
• 端到端测试：使用 Playwright 在 e2e/ 目录中

构建与打包完整流程

开发构建

npm run electron:local

生产构建

npm run electron:build

版本兼容性与升级指南

项目支持多个 Angular 和 Electron 版本组合，当前主分支使用：

• Angular 20.3.15
• Electron 39.2.5

调试与问题排查

VSCode 调试配置

项目已预配置 VSCode 调试环境，支持断点调试和变量监控。

总结：成为 Angular-Electron 专家的成长路径

通过理解项目结构、掌握开发流程和遵循最佳实践，你可以快速从新手成长为桌面应用开发专家！🎯 记住：主进程负责系统级功能，渲染进程提供用户界面，两者协同工作才能构建出优秀的跨平台应用。

关键要点回顾：

• 双 package.json 架构优化依赖管理
• 热重载提升开发效率
• 完整的测试覆盖确保代码质量
• 灵活的构建配置支持多平台部署

现在就开始你的 Angular-Electron 开发之旅吧！💪