Electron是一个实时框架，允许您使用HTML5，CSS和JavaScript创建桌面应用程序。Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。编写第一个electron应用程序
可以理解为electron是一个桌面应用的壳，装的内容是web页面。构建页面的各种框架，如angular, vue等，都可以与electron配合使用。
Angular2 是一款开源JavaScript库，由Google维护，用来协助单一页面应用程序运行。Angular2.x与Angular1.x 的区别类似 Java 和 JavaScript 或者说是雷锋与雷峰塔的区别，所以在学习Angular2.x时大家需要做好重新学习一门语言的心里准备。Angular2以后的版本与Angular2基本类似。Angular2教程。 Angular2使用TypeScript语言，教程见此。
ng new first-electron-angular --style=scss
ng命令会使用npm来作为第三方包管理工具。npm的源慢，国内可设置为使用淘宝的镜像。建议安装cnpm。
cd first-electron-angular cnpm i
ng serve
可以看到，命令启动了一个web服务，地址为：http://localhost:4200。
以下为修改点：
{
"name": "first-ng-electron",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "npm-run-all -p electron:serve ng:serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"ng:serve": "ng serve",
"electron:serve-tsc": "tsc -p tsconfig.json",
"electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve"
},
"main": "main.js",
"private": true,
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.24",
"@angular/cli": "~8.3.24",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"electron": "^8.0.0",
"electron-reload": "^1.5.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3",
"npm-run-all": "4.1.5",
"wait-on": "4.0.0"
}
}
在文件夹first-ng-electron下新建main.ts文件。文件内容如下：
const {
app, // 控制应用生命周期的模块。
BrowserWindow, // 创建原生浏览器窗口的模块
} = require(‘electron‘);
require(‘electron-reload‘)(__dirname, {
electron: require(`${__dirname}/node_modules/electron`)
});
import * as path from ‘path‘;
import * as url from ‘url‘;
// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，window 会被自动地关闭
let win;
const createWindow = ()=> {
// Create the browser window.
win = new BrowserWindow({
width: 1200,
height: 800,
defaultFontSize: 16,
defaultMonospaceFontSize: 16,
defaultEncoding: "utf-8",
webPreferences: {
plugins: true
}
});
win.loadURL(‘http://localhost:4200‘);
// 加载应用的 index.html
// win.loadURL(`file://${__dirname}/dist/index.html`);
// 打开开发工具
win.webContents.openDevTools();
// 当 window 被关闭，这个事件会被发出
win.on(‘closed‘, () => win = null);
win.on(‘ready-to-show‘, () => {
})
};
// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候这个方法就被调用
app.on(‘ready‘, createWindow);
// 当所有窗口被关闭时，退出程序
app.on(‘window-all-closed‘, () => {
// 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前应用会保持活动状态
process.platform !== ‘darwin‘ && app.quit();
});
app.on(‘activate‘, () => {
// On OS X it‘s common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
win === null && createWindow();
});
cnpm i npm start
cnpm 安装新增的应用包，使用npm start来启动electron应用。记得在起electron应用前，保证4200端口未被占用。
原文：https://www.cnblogs.com/sunada2005/p/12291798.html