极客教程如何用电子技术将angular 4应用程序转换为桌面应用程序
使用Electron JS，我们可以非常容易地将我们现有的Angular项目转换成桌面应用程序。在这篇文章中，我们将创建一个Angular项目样本，并逐步将其转换为一个桌面应用程序。
- 必须安装NPM
环境搭建:
- 安装Angular CLI。
npm install -g @angular/cli
- 创建一个新的Angular项目。这里我们的项目名称是 “electron-sample”。
ng new electron-sample
cd electron-sample
- 现在运行该项目并打开http://localhost:4200_，以检查安装是否成功。
ng serve -o
- 安装Electron JS作为开发依赖。
npm install electron --save-dev
- 我们还需要一个叫做electron-packager的包。这个包将捆绑我们的应用程序并生成桌面应用程序文件。在全局范围内安装它。
npm install -g electron-packager
例子：在根目录下，创建一个文件main.js，它将是电子的入口。在in.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 version 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 manually
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 中，将
<head>
<meta charset="utf-8">
<title>ElectronSample</title>
<base href="./"> _**<!-- Change this line -->**_
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
现在在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
注意，如果我们在全局范围内安装了electron，我们可以直接运行这些命令。你应该看到下面的输出。
输出:
对于已编译的应用程序，我们可以使用以下方法直接运行应用程序
npm run electron
当我们创建了最终的应用程序后，我们可以生成编译的文件，可以直接在我们的系统上使用，而不需要安装依赖性。electron-packager模块帮助我们建立二进制文件。
electron-packager . --platform=linux
在这里，我们可以在达尔文、Linux、Mac和win32中选择我们的平台。执行上述命令将创建一个带有应用程序和操作系统名称的新文件夹。在这个目录中打开终端。
sudo chmod +x electron-sample
./electron-sample
这将打开该应用程序，你应该看到以下输出。
输出:
