将Angular 7与ElectronJS集成

Electron是一个基于Node.js和Chromium的框架，允许开发者使用Web技术（HTML，CSS，JS）构建跨平台的桌面应用程序，同时Angular是一个广泛应用于构建现代Web应用程序的前端框架。将它们结合可以为您提供开发桌面应用程序的全新体验，并提高您的生产力。

创建Angular项目

首先，我们需要创建一个Angular项目。如果您已经拥有一个现有的Angular项目，则可以跳过这一步骤。

要创建一个Angular项目，请使用以下命令：

ng new my-app

这将创建一个新的Angular项目，并生成基本的项目文件。接下来，我们需要通过命令行进入到这个新的项目目录中。

cd my-app

添加Electron

接下来，我们需要将Electron添加到我们的Angular项目中。首先，我们需要安装electron和electron-builder这两个包。

npm install electron --save-dev
npm install electron-builder --save-dev

这将安装electron和electron-builder这两个包到我们的应用程序中的开发依赖中。接下来，我们需要在主目录中创建两个文件夹src和main来存放我们的Electron代码。

创建src和main文件夹后，我们需要在main文件夹中创建一个名为main.js的文件。

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载应用的 index.html
  win.loadFile('dist/my-app/index.html')

  // 在开发者工具中打开
  win.webContents.openDevTools()
}

// 当 Electron 结束时，关闭所有窗口
app.on('window-all-closed', () => {
  // 在 macOS 除非用户用 Cmd + Q 确定地退出
  // 否则绝大部分应用及其菜单栏会保持激活状态
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在 macOS 中，当点击 dock 图标的时候，如果没有其他窗口打开，则创建一个新的
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// Electron 初始化之后调用这个函数
app.on('ready', createWindow)

在index.html文件被加载时，它将加载我们的Angular应用程序。

现在我们已经为Electron创建了一个基本的框架，接下来我们需要在package.json中更新我们的启动脚本，以便它可以启动Electron。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod && electron .",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

我们添加了一个新的启动脚本build，它首先构建了Angular应用程序，然后启动Electron。

打包

现在，我们已经完成了与Angular和Electron的集成，我们可以使用electron-builder来打包我们的应用程序。electron-builder可以将我们的应用程序打包成适用于Windows，macOS和Linux的安装程序。

首先，我们需要在项目根目录中创建一个builder.json文件来描述我们打包应用程序的配置。

{
  "appId": "com.example.app",
  "productName": "MyApp",
  "directories": {
    "output": "dist"
  },
  "files": [
    "dist/**/*",
    "package.json"
  ],
  "mac": {
    "category": "your.app.category.type",
    "icon": "build/icon.icns"
  },
  "nsis": {
    "oneClick": false,
    "allowElevation": true,
    "perMachine": true
  }
}

此配置文件描述了我们的应用程序ID，产品名称和输出目录。它还指定了我们需要打包的文件，我们需要包括我们之前创建的main.js文件和package.json文件。最后，它还包括用于生成macOS应用程序图标的图标文件。

接下来，我们可以运行以下命令：

npm run build
npx electron-builder --mac

这将打包我们的应用程序并生成一个macOS安装包。

结论

通过两个步骤的简单向导，我们已经将Angular 7与ElectronJS集成了起来。接下来您可以通过学习更多有关Angular和Electron的知识来扩展和完善您的应用程序。