使用 Angular 17 和 Electron 构建高性能跨平台桌面应用：从零到一

2026-02-07 06:36:02 0条评论 4次阅读 0人点赞

在当今的前端开发领域，我们已经非常习惯使用 Angular 这样强大的框架来构建复杂、交互性强的单页应用（SPA）。但是，有时候我们的需求并不止步于浏览器——用户可能需要更原生的体验，比如在系统托盘中运行、直接操作本地文件系统，或者是离线使用。这时，Electron 就成为了我们手中的利器。它允许我们使用熟悉的 Web 技术（HTML、CSS、JavaScript）来构建跨平台的桌面应用程序。

在本文中，我们将深入探讨如何将 Angular 17 与 Electron 进行深度集成。这不仅是一次简单的代码拼接，更是一个让我们能够利用现有的 Angular 技能栈，瞬间转型为桌面应用开发者的绝佳机会。我们将从环境搭建开始，一步步构建一个功能完整的桌面应用，并在这个过程中分享很多实战中的“坑”与最佳实践，帮助你避开那些常见的陷阱。

为什么选择 Angular 17 与 Electron？

在我们开始写代码之前，不妨先思考一下这个组合的优势。Angular 17 带来了如 standalone components（独立组件）、改进的构建性能以及更现代的响应式编程体验。而 Electron 则是 GitHub 上最流行的跨平台框架之一，Atom、VS Code 和 Discord 等知名应用都是基于它构建的。

将这两者结合，意味着我们可以直接将企业级的 Angular 业务逻辑复用到桌面端，无需学习 C++ 或 C# 等原生语言。这大大降低了开发成本和维护难度。

步骤 1：环境准备与 Angular CLI 安装

首先，我们需要确保机器上已经安装了 Node.js 和 npm。Angular CLI 是我们快速搭建项目的脚手架。虽然你可以选择局部安装，但为了方便全局调用，我们通常会选择全局安装。

请在终端中运行以下命令：

# 使用 npm 全局安装 Angular CLI
npm install -g @angular/cli

实用见解： 如果你在中国大陆地区，或者网络环境不稳定，安装过程可能会很慢。你可以考虑使用 INLINECODE12602a89 或者配置 INLINECODE2ce90d3b 文件来使用淘宝镜像源，这能显著提升依赖下载的速度。

步骤 2：初始化 Angular 17 项目

安装好 CLI 后，让我们创建一个新的 Angular 项目。在 Angular 17 中，默认的配置已经非常现代化，包含了路由和样式的选择。

运行以下命令来创建项目（我们将项目命名为 electron-angular-app）：

# 创建新项目，需要注意这里会自动询问是否需要路由和样式语言
ng new electron-angular-app

创建完成后，我们需要进入项目目录：

cd electron-angular-app

项目结构简析： 在这个阶段，你的项目结构是一个标准的 Angular 应用。你会看到 INLINECODE50c7378a 目录、INLINECODEb048dd54 配置文件等。接下来，我们的工作就是在这个 Web 应用外壳内，嵌入 Electron 的核心能力。

步骤 3：安装并配置 Electron

现在，让我们为这个 Web 应用安上“桌面”的翅膀。我们需要安装 Electron 作为项目的开发依赖。

# 安装最新的 Electron 版本
npm install --save-dev electron@latest

安装完成后，我们可以检查 INLINECODE385b8fd7 文件，确保 INLINECODE76278932 已经出现在 devDependencies 列表中。这一步至关重要，因为它确保了项目依赖的完整性。

步骤 4：深入理解 Electron 主进程

这是整个集成过程中最核心的一步。在 Electron 中，我们需要区分“主进程”和“渲染进程”。

主进程：运行在 Node.js 环境中，负责管理应用的生命周期、创建窗口以及与系统底层交互。
渲染进程：其实就是我们的 Angular 应用运行的环境，类似于浏览器窗口。

我们需要在项目的根目录下创建一个名为 app.js 的文件。这个文件将作为我们 Electron 应用的入口点。

注意： 在之前的开发习惯中，大家常把主进程文件命名为 INLINECODE5e59c9d9。但在与 Angular 集成时，为了避免与某些构建工具生成的文件混淆，或者仅仅是为了区分，使用 INLINECODE734f5736 是一个清晰的选择。当然，名字并不重要，重要的是它所承载的逻辑。

以下是 app.js 的完整代码示例，其中包含了详细的中文注释，解释了每一部分的作用：

// app.js - Electron 主进程入口文件

const { app, BrowserWindow } = require("electron");
const path = require("path");

// 定义一个全局变量引用主窗口，防止被 JavaScript 的垃圾回收机制自动回收
let mainWindow;

/**
 * 创建应用窗口的函数
 * 在这里配置窗口的大小、图标以及加载的内容
 */
function createWindow() {
    mainWindow = new BrowserWindow({
        width: 1200,          // 窗口宽度，我们可以根据应用需求调整
        height: 800,          // 窗口高度
        resizable: true,      // 允许用户调整窗口大小
        webPreferences: {
            // 这里的配置对于安全性非常重要，我们在后文会详细讨论
            nodeIntegration: true, 
            contextIsolation: false,
            enableRemoteModule: true 
        },
    });

    // 加载 Angular 应用构建后的 index.html 文件
    // 注意：这里指向的是 Angular 构建输出目录，而不是源代码目录
    mainWindow.loadURL(
        // Angular 17 构建后的默认输出路径通常包含 /browser/ 子目录
        path.join(__dirname, `/dist/electron-angular-app/browser/index.html`)
    );

    // 可选：打开开发者工具，方便调试
    // mainWindow.webContents.openDevTools();

    // 当窗口被关闭时触发
    mainWindow.on("closed", function () {
        // 解除对窗口对象的引用
        mainWindow = null;
    });
}

/**
 * Electron 生命周期事件监听
 */

// 当 Electron 完成初始化时触发，准备创建浏览器窗口
app.on("ready", createWindow);

// 当所有窗口都被关闭时退出应用（macOS 除外）
app.on("window-all-closed", function () {
    // 在 macOS 上，除非用户使用 Cmd + Q 明确退出，
    // 否则应用和菜单栏会保持活动状态
    if (process.platform !== "darwin") {
        app.quit();
    }
});

// 当应用被激活时（macOS 特有，比如点击 Dock 图标）
app.on("activate", function () {
    // 如果没有其他窗口打开，则重新创建一个窗口
    if (mainWindow === null) {
        createWindow();
    }
});

代码深入讲解：

INLINECODEe5931bb5：这里我们使用了 Node.js 的 INLINECODEcbe17a91 模块。请特别注意路径中的 INLINECODE0d92b0b7。Angular 应用在开发时运行在内存或开发服务器中，但在 Electron 中，我们需要加载的是经过 INLINECODEdbe83edb 编译后的静态文件。Angular 17 默认的构建输出结构更加扁平化，通常包含一个 browser 文件夹，确保你的路径与此一致。

INLINECODEfccb4e96：代码中我们开启了 INLINECODE2372c059。这允许我们在 Angular 的渲染进程中直接使用 Node.js 的 API（如 INLINECODE467948d0）。虽然这在开发阶段很方便，但在生产环境中，为了防止恶意代码注入，通常建议关闭它并使用 INLINECODE654236c6 脚本来安全地暴露接口。

步骤 5：修改 Angular 构建配置与 Package.json

为了让我们能够一键启动应用，我们需要修改 INLINECODE0c206a0b 中的 INLINECODE53681f7f 部分。我们需要定义一个脚本，先执行 Angular 的构建，然后启动 Electron。

打开 INLINECODE9a7e0078，找到 INLINECODE04e3f33a 字段并修改如下：

"scripts": {
    "ng": "ng",
    // 核心修改点：先构建项目，再启动 Electron
    "start": "ng build --base-href ./ && electron .",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

同时，不要忘了在 INLINECODE077a4863 的根级别添加 INLINECODEe02052d1 字段，告诉 Electron 我们的入口文件是谁：

{
  "name": "electron-angular-app",
  "version": "0.0.0",
  "main": "app.js", // 指向主进程文件
  // ...
}

关于 base-href 的重要说明：

你在 INLINECODE861d89d8 脚本中看到了 INLINECODEbb3ac0c1。这是一个非常关键的参数。当 Angular 应用运行在根路径下时（例如 INLINECODEfb54be08），这通常不是问题。但在 Electron 中，它是通过 INLINECODE430d0f80 协议加载本地文件的。如果没有设置 INLINECODE8c55a87b，Angular 会尝试从根目录加载资源，导致页面空白或资源 404。设置 INLINECODE3cc13982 告诉 Angular 所有资源的加载都是相对于当前 index.html 的路径，这对于本地文件系统运行至关重要。

步骤 6：优化界面与数据交互

现在，让我们稍微修改一下 Angular 的组件，让它看起来更像一个桌面应用。我们将修改 INLINECODE0d4a25f8 和 INLINECODEd9bfc7b5。

HTML 模板 (app.component.html):


    🚀 我的 Electron + Angular 17 应用
    这不仅是一个网页，而是一个真正的桌面程序！
    
    
        系统信息
        当前平台: {{ platform }}
        Node 版本: {{ nodeVersion }}

组件逻辑 (app.component.ts):

import { Component, OnInit } from ‘@angular/core‘;
import { Router } from ‘@angular/router‘;

// 声明 Node.js 的 process 类型， TypeScript 才不会报错
declare const process: any;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent implements OnInit {
  platform: string = ‘Unknown‘;
  nodeVersion: string = ‘Unknown‘;

  constructor() {}

  ngOnInit(): void {
    // 因为我们在 Electron 配置中开启了 nodeIntegration
    // 所以这里可以直接访问 Node.js 的全局对象
    if (typeof process !== ‘undefined‘) {
      this.platform = process.platform;
      this.nodeVersion = process.versions.node;
    }
  }

  showAlert(): void {
    alert(‘你成功在 Angular 中调用了桌面交互！‘);
  }
}

步骤 7：运行与测试

万事俱备，只欠东风。让我们运行这个应用吧。

npm start

这个命令会首先执行 INLINECODE6efcb58a。你会看到终端中输出构建日志，生成了 INLINECODE0195bbf5 目录。紧接着，Electron 会启动，加载刚刚生成的文件。几秒钟后，你应该能看到一个独立的桌面窗口弹出来，显示着你刚才编写的 Angular 界面，并且正确展示了当前的 Node.js 版本号。

常见问题与解决方案

在集成的过程中，你可能会遇到以下几个棘手的问题，这里我们提前给出解决方案：

白屏问题：这是最常见的问题，通常由两个原因导致。

* 路径错误：检查 INLINECODEf4e7659c 中的 INLINECODEe548c5e8 路径是否正确指向了 dist/项目名/browser/index.html。

* Base Href：确认你在 INLINECODE71ea6209 的 INLINECODE7f278edc 脚本中添加了 INLINECODE9d1da88e。这是由于 INLINECODEd3ad3d96 协议的路径解析机制导致的。

INLINECODEe142baeb：如果在浏览器控制台看到这个错误，说明 INLINECODEa520ed9b 没有正确开启，或者你在渲染进程的 TypeScript 文件中使用了 INLINECODE041f3b35 却没有声明类型。请检查 INLINECODEf7b5c68c 中的 INLINECODEff26f47c 设置，或者在 TypeScript 文件顶部添加 INLINECODE92cbbe91。

构建体积过大：Electron 应用打包后通常体积较大（通常 > 100MB），这是因为它打包了整个 Chromium 内核和 Node.js 运行时。这是正常现象，但你可以通过排除不必要的 npm 包来稍微减小体积。

性能优化与安全建议

虽然我们现在可以顺利运行应用，但在实际发布产品前，有两点建议需要记住：

安全性强化：在 INLINECODE1b41ecbf 中，我们将 INLINECODEff122cce 设置为了 INLINECODE0eb9961a。这在开发时很方便，但在生产环境中非常危险，因为它赋予了网页操作系统的全部权限。更安全的做法是将其设为 INLINECODE4460c008，然后使用 INLINECODEc19a16e4 和 INLINECODE5a34829b 来 selectively 暴露特定的 API 给渲染进程。

热重载（HMR）：目前我们每次修改代码都需要手动运行 INLINECODEd3bd0f39 重新构建。为了提高开发效率，我们可以让 Angular 的开发服务器运行，并让 Electron 加载开发服务器的 URL（INLINECODEb806adb4）。这样我们就可以利用 Angular 强大的热重载功能了。只需修改 loadURL 为开发服务器地址即可。

结语

通过这篇文章，我们不仅仅学会了如何敲击几行命令将两个技术“粘”在一起，更重要的是，我们理解了 Electron 的主进程与渲染进程架构，以及如何处理本地文件系统加载的路径问题。你现在拥有了将任何 Angular 网页应用转化为桌面应用的能力。

这仅仅是一个开始。你可以继续探索如何给应用添加系统托盘图标、如何处理应用更新、以及如何使用 INLINECODEc0579bf3 将你的项目打包成 INLINECODE907bc5d4 或 .dmg 安装包分发给用户。希望这篇文章能成为你桌面开发之旅的一个坚实起点。

投稿给我们	如何建站？
vps是什么？	如何安装宝塔？
如何通过博客赚钱？	便宜wordpress托管方案
免费wordpress主题	这些都是免费方案

豆丁博客