${InfoId}: 595${InfoCatId}: 65${InfoCatTitle}: ʾ������${InfoCatPath}: liunx-desktop${Title}: ʾ������${TitleEn}: shi-li-biao-ti${
2023-06-29
中文化、本土化、云端化的在线跨平台软件开发工具，支持APP、电脑端、小程序、IOS免签等等
在本文中，我们将详细介绍如何将基于Angular的Web应用程序封装为可执行文件（exe）。这对于需要将Web应用作为桌面应用程序分发的场景非常有用。
Angular是一个流行的Web应用开发框架，它主要用于构建高效且易于维护的单页面应用程序（SPA）。将Angular应用程序封装为exe文件的核心原理是使用一个名为Electron的框架。Electron是一个基于Chromium和Node.js的跨平台框架，它允许开发人员使用Web技术构建桌面应用程序。
接下来我们将详细介绍如何将Angular应用封装为exe文件。
### 步骤1：安装Angular CLI和创建一个新的Angular项目
确保您已经安装了Node.js和npm（Node包管理器）。在此之后，使用以下命令安装Angular CLI：
```bash
npm install -g @angular/cli
```
安装完成后，创建一个新的Angular项目：
```bash
ng new my-angular-electron-app
```
按照提示选择所需的选项。之后，将会自动创建一个新的Angular应用程序。
### 步骤2：将Electron添加到Angular项目
进入您刚刚创建的Angular项目文件夹：
```bash
cd my-angular-electron-app
```
安装Electron依赖：
```bash
npm install electron --save-dev
```
### 步骤3：创建Electron主文件
在项目根目录下，创建名为“main.js”的新文件：
```bash
touch main.js
```
在创建的main.js文件中，粘贴以下代码：
```javascript
const { app, BrowserWindow } = require("electron");
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadFile("dist/my-angular-electron-app/index.html");
mainWindow.on("closed", function () {
mainWindow = null;
});
}
app.on("ready", createWindow);
app.on("window-all-closed", function () {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", function () {
if (mainWindow === null) {
createWindow();
}
});
```
这段代码主要实现了以下功能：
- 导入Electron模块，并定义了一个名为`BrowserWindow`的`electron.Window`类
- 创建一个800x600像素的新应用窗口，并加载Angular应用程序文件
- 当所有窗口关闭时，退出应用程序（当运行在macOS上时，不立即退出应用程序）
### 步骤4：修改Angular项目的配置
将以下扩展名从`browserlist`文件中排除：
```bash
not dead
not IE 9-11 # IE 9-11 requires all of the following polyfills
IE 9-11
```
然后，打开`tsconfig.json`文件，添加ELECTRON 选项：
```json
"compilerOptions": {
"target": "es2018",
"types": ["node"],
...
}
```
### 步骤5：构建并运行Electron应用程序
在Angular项目的根目录下，执行以下命令：
```bash
ng build --base-href=./
```
这个命令将生成一个名为“dist”的文件夹，其中包含了构建好的Angular应用程序。
接下来，运行以下命令启动Electron应用程序：
```bash
npx electron .
```
现在，您应该可以看到一个新的应用程序窗口，其中显示了您的Angular应用程序。
### 步骤6：将应用程序封装为exe文件
我们将使用一个名为electron-packager的工具来实现这一目标。执行以下命令安装此工具：
```bash
npm install electron-packager --save-dev
```
安装完成后，运行以下命令：
```bash
npx electron-packager . --platform=win32 --arch=x64 --out=release
```
此命令将生成一个名为“release”的文件夹，其中包含了一个exe文件。这个exe文件就是我们封装好的应用程序。
现在，您已经成功地将基于Angular开发的应用程序封装为exe文件。发布时，将“release”文件夹中的所有内容打包即可。当用户运行exe文件时，他们将看到完整的桌面应用程序。
