angular封装exe

在本文中，我们将详细介绍如何将基于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文件时，他们将看到完整的桌面应用程序。