使用Electron JS，我们可以很容易地将现有的angular项目转换为桌面应用程序。在本文中，我们将创建一个示例Angular项目，并将其逐步转换为Desktop应用程序。
先决条件：
- NPM必须安装
环境设置：
-
安装Angular CLI：
npm install -g @angular/cli -
创建一个新的Angular项目。这里我们的项目名称是“电子样本”：
ng new electron-sample cd electron-sample -
现在运行该项目并打开http：// localhost：4200以检查安装是否成功。
ng serve -o -
安装Electron JS作为开发依赖项：
npm install electron --save-dev -
我们还需要一个称为电子包装器的包装。该软件包将捆绑我们的应用程序并生成桌面应用程序文件。全局安装：
npm install -g electron-packager
示例：在根目录中，创建一个文件main.js ，它将作为电子的入口点。在main.js内添加以下代码：
main.js
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");
let win;
function createWindow() {
win = new BrowserWindow({ width: 700, height: 700 });
// load the dist folder from Angular
win.loadURL(
url.format({
// compiled verion of our app
pathname: path.join(__dirname, '/dist/index.html'),
protocol: "file:",
slashes: true
})
);
win.on("closed", () => {
win = null;
});
}
app.on("ready", createWindow);
// If you are using MACOS, we have to quit the app manully
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});在上面的代码中，我们仅打开了dist /目录中存在的Angular应用程序的编译版本。请注意，我们直接提供了dist文件夹，因此此代码可在任何应用程序上使用。但是文件index.html位于子目录中。因此，在angular.json中，如下更改outputPath键中的值。
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
// Make changes in this line
"outputPath": "dist",
"index": "src/index.html",
....这会将编译后的文件保存到dist文件夹中，而不是子目录中。在src / index.html中，将
ElectronSample
现在，在package.json中，我们必须添加一些用于开发和测试应用程序的命令，并指向电子应用程序的起点。在package.json中添加以下行。
{
"name": "electron-sample",
"version": "0.0.0",
// This line will provide an entry
// point for the electron app
"main": "main.js",
"scripts": {
// Runs the app after compilation
"electron": "electron .",
// Compiles and runs the app
"electron-build": "ng build --prod && electron .",
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
...
...现在，我们可以通过运行它来测试该应用/
npm run electron-build请注意，如果我们在全球范围内安装了electronic，则可以直接运行命令。您应该看到以下输出：
输出：
对于已编译的应用程序，我们可以直接使用来运行该应用程序
npm run electron创建最终应用程序后，我们可以生成可直接在我们的系统上使用的编译文件，而无需安装依赖项。电子包装程序模块可帮助我们构建二进制文件。
electron-packager . --platform=linux在这里，我们可以从darwin，linux， mac和win32中选择平台。执行以上命令将创建一个具有应用程序和操作系统名称的新文件夹。在此目录中打开终端：
sudo chmod +x electron-sample
./electron-sample这将打开应用程序，您应该看到以下输出：
输出：
