电子是一个流行的框架，它可以很容易地使用熟悉的网络技术(HTMLJAVASCRIPT和css)为MacOS、LINUX或WINDOWS构建桌面应用程序。一些非常流行的桌面应用程序，如Visual Studio Code和Slack，都是使用Electron构建的。在幕后，Electron使用Chromium呈现用户界面，使用Node.js访问文件系统。由于Electron为我们提供了Web应用程序的桌面外壳，我们可以使用任何类型的前端JavaScript框架来开发桌面应用程序。
在这个简短的指南中，我们将创建一个新的角度应用程序，我们可以使用Electron在桌面上启动它。
安装
打开您的终端并安装最新版本的Angular CLIGLOBAL：
1npm i -g @angular/cli
导航到您的工作文件夹，然后创建新的角度应用程序，名为my-app：
1ng new my-app
2cd my-app
3npm i -D electron@latest
上述带注释的行将安装最新版本的Electron作为开发依赖项。
设置和电子录入文件
现在让我们在项目目录的根目录下创建一个main.js文件。此文件将是我们的Electron应用程序的入口点，并将包含桌面应用程序的主API：
1[label main.js]
2const { app, BrowserWindow } = require("electron");
3const path = require("path");
4const url = require("url");
5
6let win;
7function createWindow() {
8 win = new BrowserWindow({ width: 800, height: 600 });
9 // load the dist folder from Angular
10 win.loadURL(
11 url.format({
12 pathname: path.join(__dirname, "/dist/index.html"),
13 protocol: "file:",
14 slashes: true
15 })
16 );
17 // The following is optional and will open the DevTools:
18 // win.webContents.openDevTools()
19 win.on("closed", () => {
20 win = null;
21 });
22}
23app.on("ready", createWindow);
24// on macOS, closing the window doesn't quit the app
25app.on("window-all-closed", () => {
26 if (process.platform !== "darwin") {
27 app.quit();
28 }
29});
请注意，上面是基于官方的electron-quick-start项目，主要区别在于它正确地加载了我们的角度应用程序的入口点。您可能想要坚持使用TypeScrip，如果是这样的话，您将找到等效的TypeScrip快速入门here.
关于电子和打字稿的说明
既然你将使用TypeScrip开发你的角度应用程序，你当然也可以选择在主电子条目文件(main.ts)中使用TypeScrip。但请注意，项目的Package.json中的main键应该仍然指向相同的main.js。
在启动应用之前，只需添加一个tsc命令将其编译为JavaScript即可。像这样的东西应该能起到作用：
1"electron-tsc": "tsc main.ts && ng build --base-href ./ && electron ."
接下来，更新项目的Package.json文件，以便它可以查找我们的电子文件作为主要入口点。
1[label package.json]
2{
3 "name": "my-app",
4 "version": "0.0.0",
5 "main": "main.js",
6 ...
在这里，让我们添加一个npm脚本来构建Angular应用程序，然后启动Electron应用程序：
1[label package.json]
2
3"scripts": {
4 "electron": "ng build --base-href ./ && electron .",
5 ...
<$>[注意]这里的--base-href标志很重要，它可以向有角度的CLI指出，在index.html文件中，基本标记的href属性应该具有./的值。<$>
让我们从Angular项目的输出路径中删除名称，以便它反映我们在main.js文件中的内容：
1[label angular.json]
2...,
3"architect": {
4 "build": {
5 "builder": "@angular-devkit/build-angular:browser",
6 "options": {
7 "outputPath": "dist",
如果您使用的是V6之前的ANGLE版本，则需要在您的项目的outDir键下的arting-cli.json中进行更改。
运行App
您的应用程序现在已准备就绪！您可以使用我们创建的电子NPM脚本启动应用程序：
1npm run electron
您应该会看到一个窗口出现，其中包含您的角度应用程序！
这应该足以让您启动并运行。敬请关注直接从我们的角度应用程序使用Electron API以及设置热模块重新加载的更深入内容！