一：先决条件
检查Node和npm的版本，是否同时符合Angular和electron的最低要求
node -v
npm -v
二：开始工程
第一步，安装angular，然后安装electron
我们将使用Angular-cli工具创建一个新的Angular工程
首先安装工具，然后创建新的工程，最后跳转进工程目录
$ npm install -g @angular/cli
$ ng new ang-electron
$ cd ang-electron
接下来，在当前的工程目录中安装electron
$ npm install electron --save-dev
三：将Electron和Angular整合起来
此时，我们的工程还只是一个Angular工程，我们需要做一些调整，让Electron应用使用Angular框架
首先，作为一个Electron应用，我们需要创建一个带有默认配置的main.js文件，来让我们的Electron应用跑起来
在项目根目录，创建main.js文件，并将以下内容粘贴进去（注意：内容来自Electron的官方文档QuickStart Doc，但是我做了一些修改）
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
let win
function createWindow () {
win = new BrowserWindow({width: 800, height: 600})
// 加载Angular的dist目录，注意，如果你是高版本的angular和cli的工程的话，那么这里的路径需要加上项目名称，即index.html的路径需要写成：'dist/ang-electron/index.html'
win.loadURL(url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: 'file:',
slashes: true
}))
// 是否默认打开开发者工具：
// win.webContents.openDevTools()
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
Angular执行构建之后，加载dist/index.html的地方必须修改，上文已经修改完了
修改后保存文件，然后继续修改 /src/index.html 文件:
<!-- 修改此处： -->
<base href="/">
<!-- 修改成: -->
<base href="./">
如果不这样修改，Electron应用是找不到Angular的文件的
最后，我们还要对/package.json文件做一些如下的微调：
{
// 为了方便阅读，多余内容忽略不显示
"main": "main.js", // 添加此行
"scripts": {
// 为了方便阅读，多余内容忽略不显示
"electron": "ng build && electron .",
"electron-aot": "ng build --prod && electron .",
},
// 为了方便阅读，多余内容忽略不显示
}
首先我们添加了一个叫做main的新属性，来指明Electron的main.js文件
然后我们添加了一个叫做electron的新npm脚本命令，此命令会执行Angular的构建命令，然后执行Electron的运行命令
相信你也注意到了electron-aot这个脚本命令，这个命令给Angular构建指令添加了--prod标志，用来构建正式生产环境下的应用，这个指令会增强性能，但是会让加长打包构建的时间。
注意：当你准备上线你的应用时，确保你使用的是electron-aot命令
四：启动工程
如果一切顺利，你这个整合了Angular的Electron桌面应用就可以启动了
注意:如果你使用的是高版本的angular和cli，那么在main.js中的dist加载路径应该为全路径，即包含了项目名称：dist/ang-electron/index.html
五：通过Angular来访问Electron API
此时，你可能需要也可能不需要访问Electron API，这取决于你的程序的功能，如果你的程序要创建一些复杂的功能，那么你可能需要访问Electron的API才能实现。这将使您能够访问Electron允许的本地桌面应用功能。
这里有一个比较方便的方式，来访问那些API，通过一个叫做ngx-electron的包依赖：
首先，我们先来安装它
$ npm install ngx-electron --save
然后，像其他被引用的模块一样，我们需要把它引用到/src/app/app.module.ts中的引用标识中：
// 其他引用忽略不显示
import { NgxElectronModule } from 'ngx-electron';
@NgModule({
...
imports: [
BrowserModule,
NgxElectronModule // 添加到这里
],
...
})
export class AppModule { }
为了使用，我们需要在/src/app/app.component.ts文件中添加如下引用：
import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';
然后我们在组建中，通过依赖注入创建一个它的实例，通过这个实例将使我们能够访问Electron允许的本地桌面应用的API：
export class AppComponent {
constructor(private _electronService: ElectronService) {} // DI
launchWindow() {
this._electronService.shell.openExternal('https://www.jianshu.com');
}
}
我已经创建了一个叫做launchWindow()的方法，当按钮被点击的时候，它将启动一个新的浏览器窗口来访问我们设置的网站地址，这个例子只是为了证明ngx-electron是否起作用了
ngx-electron还提供了其他非常多的功能，具体详情请访问它的github主页:Ngx-electron的github传送门
<div style="text-align:center">
<h1>
Welcome!
</h1>
<button (click)="launchWindow()">Launch a Window</button>
</div>
打开/src/app/app.component.html 文件，并将相关模板内容替换如下：
<div style="text-align:center">
<h1>
Welcome!
</h1>
<button (click)="launchWindow()">Launch a Window</button>
</div>
最后的最后：启动工程
现在，用如下的命令来启动你的应用吧：
$ npm run electron
点击按钮，它将使用你默认的浏览器来访问我们设置的网站地址！
下篇文章我们将介绍如何使用Electron Forge来构建Electron工程
并集成阿里巴巴的AntDesign的Angular版本：NG-ZORRO
