Electron 中使用Angular做UI
- 只打包angular编译后的
- 环境
- win10 64x
- 版本
- electron 3.0.5
- angular 6.x
- ng-alain 2.0.0-beta.5
- 调试使用两个进程
- 只打包编译后的 angular 代码
- windows下的安装，升级
- 打包与升级 参考： https://segmentfault.com/a/1190000010271226
创建 angular项目
- 创建angular项目
- 创建完成最后运行一下确认项目没有问题
// 因为使用 ng-alain 所有选用 less 做 css 预编译
ng new electron-ng-alain --style less
- 添加ng-alain
- 创建完成最后运行一下确认项目没有问题
// 这里我选用最新的ng-alain（我创建的时候 "ng-alain": "^2.0.0-beta.5"）
ng add ng-alain@next
我在运行的时候出现了一些问题
这里我选择直接注释掉这段代码
编译出错
这个错误我选择删除这个错误管道
浏览器报错
缺少一个管道
因为是beta版本的关系，正版应该会解决
我也刚遇到了ng-zorro的图标不显示的问题 在项目下运行一下 ng g ng-zorro-antd:fix-icon （参考：http://ng.ant.design/components/icon/zh
确保ng-alain能正常运行
添加Electron
- 添加一个app目录（这个目录很重要）
- 在app目录中创建electron 的程序文件（mian.js 和 package.json)
添加根目录 npm 包
// 添加electron必须的 【"electron": "^3.0.5"】
npm install --save-dev electron
// 打包这里使用 electron-builder 【"electron-builder": "^20.28.4"】
npm install --save-dev electron-builder
// angular 中与electron主进程通信依赖包
npm install --save ngx-electron
添加app目录中的 npm包 (这里当然要切换到app目录下）
- app/package.json (先编写这个文件保存，不然添加npm包会报错）
{
"name": "electron-ng-alain",
"version": "1.0.0",
"main": "main.js",
"dependencies": {
}
}
// 升级依赖 electron-updater
npm install --save electron-updater
编写electron 入口文件
- main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const url = require('url')
// 注意这个autoUpdater不是electron中的autoUpdater
const { autoUpdater } = require("electron-updater")
// 运行环境判断
var args = process.argv.slice(1);
dev = args.some(function (val) { return val === '--dev'; });
console.log(dev);
// 设置调试环境和运行环境 的渲染进程路径
const winURL = dev ? 'http://localhost:4200' :
`file://${__dirname}/dist/index.html`;
let win
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 })
// load the dist folder from Angular
win.loadURL(winURL);
// Open the DevTools optionally:
// 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', () => {
console.log(__static)
if (win === null) {
createWindow()
}
})
// 主进程监听渲染进程传来的信息
ipcMain.on('update', (e, arg) => {
console.log("update");
updateHandle();
});
// 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
function updateHandle() {
let message = {
error: '检查更新出错',
checking: '正在检查更新……',
updateAva: '检测到新版本，正在下载……',
updateNotAva: '现在使用的就是最新版本，不用更新',
};
const os = require('os');
// http://localhost:5500/up/ 更新文件所在服务器地址
autoUpdater.setFeedURL('http://localhost:5500/up/');
autoUpdater.on('error', function (error) {
sendUpdateMessage(message.error)
});
autoUpdater.on('checking-for-update', function () {
sendUpdateMessage(message.checking)
});
autoUpdater.on('update-available', function (info) {
sendUpdateMessage(message.updateAva)
});
autoUpdater.on('update-not-available', function (info) {
sendUpdateMessage(message.updateNotAva)
});
// 更新下载进度事件
autoUpdater.on('download-progress', (progressObj) => {
win.webContents.send('downloadProgress', progressObj)
})
// 下载完成事件
autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {
ipcMain.on('isUpdateNow', (e, arg) => {
// 关闭程序安装新的软件
autoUpdater.quitAndInstall();
})
win.webContents.send('isUpdateNow')
});
//执行自动更新检查
autoUpdater.checkForUpdates();
}
// 通过main进程发送事件给renderer进程，提示更新信息
// win = new BrowserWindow()
function sendUpdateMessage(text) {
win.webContents.send('message', text)
}
渲染进程
- angular 与 electron通信 用到前面我们安装的ngx-electron
- app.module.ts
- 添加 NgxElectronModule
import { NgxElectronModule } from 'ngx-electron';
@NgModule({
...
imports: [
...
NgxElectronModule
],
})
- 在组件中使用
import { ElectronService } from 'ngx-electron';
export class DashboardComponent implements OnInit {
constructor(
private _e: ElectronService,
) { }
ngOnInit() {
// 监听主进程
this._e.ipcRenderer.on('message', (event, message) => {
alert(message);
});
this._e.ipcRenderer.on('isUpdateNow', (event, message) => {
this.s1 = '下载完成';
alert('下载完成');
this._e.ipcRenderer.send('isUpdateNow');
});
this._e.ipcRenderer.on('downloadProgress', (event, message) => {
this.s2 = message;
});
}
upData() {
// 向主进程发送请求
this._e.ipcRenderer.send('update');
}
}
配置 angular.json文件
- 修改 编译输出目录
- 这个要对应着 main.js中的运行环境目录
"outputPath": "app/dist",
配置根目录下的 package.json文件
- 配置运行命令方便运行
- concurrently 这个命令是同时运行两条 node 命令
- npm i -g concurrently (我这里全局安装了）（详细用法百度一下）
- concurrently 这个命令是同时运行两条 node 命令
- build 打包配置项 参考 https://www.electron.build/configuration/configuration
- keywords 打包需要的目录 （具体我也不是很懂怎么用）
- 如果你复制使用请去掉注释
"scripts": {
...
// 调试
"dev": "concurrently \"ng serve\" \"electron . --dev\"",
// 打包
"win-pack": "ng build --prod --build-optimizer && electron-builder -w"
},
// 打包配置项
"build": {
// 应用id
"appId": "con.Tast.app",
// 应用名称
"productName": "Tast",
// 打包输目录
"directories": {
"output": "win"
},
// 更新配置项 参考 https://www.electron.build/auto-update
"publish": [
{
"provider": "generic",
"url": "http://localhost:5500/up/"
}
],
"win": {
"target": [
"nsis"
]
},
"nsis": {
"oneClick": false,
"perMachine": true,
"allowToChangeInstallationDirectory": true
}
},
// 打包渲染进程的所在文件
"keywords": [
"dist"
]
修改 html模板文件
- src\index.html
<base href="./">
全部完成
// 运行调试
npm run dev
// 打包
npm run win-pack
打包&更新
- 打包完成双击.exe 文件就可以安装了
- 更新只要修改app/package.json 文件中的版本号，然后重新打包即可
- 把打包好将 4个文件放到服务器中
-
我这里需要用管理员运行才能更新（打包配置中应该可以修改）
只需要这个4个
如果你也使用windows 那么你也可以使用 iis创建测试服务器
- iis的安装 略过
-
我遇到了问题说一下
网友评论