Angular和Electron入门

Electron 是一个流行的框架，可以使用熟悉的 Web 技术（HTML、JavaScript 和 CSS）轻松构建适用于 macOS、Linux 或 Windows 的桌面应用程序。一些非常流行的桌面应用程序，例如 Visual Studio Code 和 Slack，是使用 Electron 构建的。在幕后，Electron 使用 Chromium 进行 UI 渲染，使用 Node.js 进行文件系统访问。由于 Electron 为我们提供了 Web 应用程序的桌面外壳，我们可以使用任何类型的前端 JavaScript 框架来开发桌面应用程序。

在这个简短的指南中，我们将创建一个新的 Angular 应用程序，我们可以使用 Electron 在桌面上启动它。

安装

打开您的终端并在全局范围内安装最新版本的 Angular CLI：

npm i -g @angular/cli

导航到您的工作文件夹，让我们创建我们的新 Angular 应用程序，称为 my-app：

ng new my-app
cd my-app
npm i -D electron@latest

上面注释的行将安装最新版本的 Electron 作为开发依赖项。

设置和电子输入文件

现在让我们在项目目录的根目录中创建一个 main.js 文件。该文件将成为我们 Electron 应用程序的入口点，并将包含桌面应用程序的主要 API：

main.js

const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");

let win;
function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });
  // load the dist folder from Angular
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, "/dist/index.html"),
      protocol: "file:",
      slashes: true
    })
  );
  // The following is optional and will open the DevTools:
  // win.webContents.openDevTools()
  win.on("closed", () => {
    win = null;
  });
}
app.on("ready", createWindow);
// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

请注意，以上内容基于官方的 electron-quick-start 项目，主要区别在于它正确加载了我们的 Angular 应用程序的入口点。您可能想要坚持使用 TypeScript，如果是这样，您会在此处找到等效的 TypeScript 快速入门。

关于 Electron 和 TypeScript 的说明

由于您将使用 TypeScript 开发 Angular 应用程序，因此您当然也可以选择使用 TypeScript 作为主电子入口文件（main.ts）。请注意，尽管项目的 package.json 中的 main 键仍应指向相同的 main.js。

只需在启动应用程序之前添加 tsc 命令将其编译为 JavaScript。这样的事情应该可以解决问题：

"electron-tsc": "tsc main.ts && ng build --base-href ./ && electron ."

接下来，更新项目的 package.json 文件，以便它可以查找我们的 Electron 文件作为主要入口点。

包.json

{
  "name": "my-app",
  "version": "0.0.0",
  "main": "main.js", 
  ...

在这里，让我们添加一个 npm 脚本来构建 Angular 应用程序，然后启动 Electron 应用程序：

包.json

"scripts": {
   "electron": "ng build --base-href ./ && electron .",
   ...

–base-href 标志在这里很重要，它向 Angular CLI 指示，在 index.html 文件中，base 标签的 href 属性应该具有的值。 /。

让我们从 Angular 项目的输出路径中删除名称，以便它反映我们在 main.js 文件中的内容：

角.json

...,
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist",

如果您使用的是 v6 之前的 Angular 版本，您将希望在 outDir 键下对项目的 angular-cli.json 进行更改。

运行应用程序

您的应用程序现已准备就绪！您可以使用我们创建的 electron npm 脚本启动应用程序：

npm run electron

您应该会看到一个窗口出现，其中包含您的 Angular 应用程序！

这应该足以让您启动并运行。请继续关注直接从我们的 Angular 应用程序中更深入地使用 Electron API，以及设置热模块重新加载！