机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

介绍

使用 Angular 22 和 Electron 44（Typescript SASS 热重载）启动并打包您的项目，以创建桌面应用程序。

当前运行环境：

• Angular v22.1.4
• Electron v44.1.1

使用此示例，您可以：

• 在本地开发环境中使用 Electron 和热重载运行您的应用程序
• 在生产环境中运行您的应用程序
• 使用 Vitest 和 Playwright 执行测试（端到端）
• 将您的应用程序打包为 Linux、Windows 和 Mac 的可执行文件

/!\ 热重载仅适用于渲染进程。主 Electron 进程无法进行热重载，只能重启。

入门

在本地克隆此存储库：

git clone https://github.com/belnadris/angular-electron.git

使用 npm 安装依赖项（由 Electron 渲染器进程使用）：

npm install

当应用程序由打包器构建时，yarn 和 node_modules 会出现问题。请使用 npm 作为依赖管理器。

如果您想使用 Angular-cli 生成 Angular 组件，您必须在 npm 全局环境中安装 @angular/cli。如果之前安装过 angular-cli，请参阅 Angular-cli 文档 。

npm install -g @angular/cli

使用 npm 安装 NodeJS 依赖（由 Electron 主进程使用）：

cd app/
npm install

为什么有两个 package.json？这个项目遵循 Electron Builder 两个 package.json 结构，以优化最终包，同时仍然能够使用 Angular ng add 功能。

开发构建

• 在终端窗口中 -> npm start

瞧！你可以在本地开发环境中使用带有热重载的 Angular Electron 应用!

应用程序代码由 app/main.ts 管理。在此示例中，应用程序运行一个简单的 Angular 应用 (http://localhost:4200) 和一个 Electron 窗口。\ Angular 组件包含 Electron 和 NodeJS 本地库导入的示例。\ 你可以通过在 app/main.ts 中注释 win.webContents.openDevTools(); 来禁用“开发者工具”。

项目结构

如何导入第三方库

这个示例项目可以在两种模式下运行（网页和 Electron）。为了使其工作，你必须以正确的方式导入你的依赖。

有两种第三方库：

• NodeJS 的库 - 使用 NodeJS 核心模块（crypto、fs、util...）
  • I suggest you add this kind of 3rd party library in dependencies of both app/package.json and package.json (root folder) in order to make it work in both Electron's Main process (app folder) and Electron's Renderer process (src folder).

请查看 providers/electron.service.ts 以了解在渲染器环境中（例如 Angular）使用 NodeJS / 第三方库时如何进行条件导入。

• Web 的库（例如 bootstrap、material、tailwind...）
  • It have to be added in dependencies of package.json (root folder)

使用 ng-add 添加依赖

你可能会在 ng-add 遇到一些困难，因为此项目没有使用默认的 @angular-builders 。例如，你可以在这里找到如何使用 ng-add 安装 Angular-Material。

浏览器模式

也许你只是想在浏览器中执行应用程序并启用热重载？只需运行 npm run ng:serve:web。

包含的命令

你的应用程序已优化。最终包中只包含 /dist 文件夹和 NodeJS 依赖项。

构建 Flatpak（Linux）

在 Linux 上， npm run electron:build 生成 AppImage 和 Flatpak。Flatpak 构建需要额外的工具：

# Install flatpak and flatpak-builder
sudo apt install flatpak flatpak-builder

# Add the Flathub remote
flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo

# Install the required runtimes
flatpak install flathub org.freedesktop.Platform//25.08
flatpak install flathub org.freedesktop.Sdk//25.08
flatpak install flathub org.electronjs.Electron2.BaseApp//25.08

一旦运行时安装完成，npm run electron:build 将在 release/ 文件夹中生成 Flatpak 包以及 AppImage。

你想在 Electron 主线程中使用特定的库（如 rxjs）吗？

是的！你可以做到！只需在 app/package.json 的 npm 依赖部分导入你的库，并使用 npm install --save XXXXX。它将在构建阶段由 electron 加载，并添加到你的最终包中。然后在 app/main.ts 文件中导入它来使用你的库。相当简单，不是吗？

端到端测试

端到端测试脚本可以在 e2e 文件夹中找到。

注意：若要在代理后使用，需要在终端中添加此代理例外 export {no_proxy,NO_PROXY}="127.0.0.1,localhost"

使用 VsCode 调试

VsCode 调试配置可用！要使用它，你需要安装扩展 Chrome 调试器。

然后在你的应用程序源代码中设置一些断点。

最后在 VsCode 中按 Ctrl Shift D，选择 应用调试 并按 F5。

请注意，热重载仅在渲染器进程中可用。

想使用 Angular Material 吗？Ngx-Bootstrap？

请参阅 HOW_TO 文件