使用Angular4 CLI + Electron 编写桌面应用程序

起步—— 开发前的准备工作

(注意： 此时 @angular/cli 版本为 1.4.2， electron 版本为 1.7.6， 阅读时请注意版本)

前置

• Node.js 入门 之 安装
• 安装最新版 @angular/cli

准备

一 、electron 加载文件使用的是 file:// ,
原先使用@angular/cli 开发的 index.html 中的

在 electron 中 需要修改为

或者使用更通用的方法， 将这个 tag 替换成

解决方法原文

二、angular中用到了 net 、 fs 等模块，
但是 @angular/cli 打包的时候并没有把该模块打包进去，需要做下配置修改。
在项目根目录下打开命令提示符 执行

ng eject && npm install

修改弹出的 webpack.config.js, 在 module.exports = {...} 对象里添加

"externals": {
    "assert": "require('assert')",
    "child_process": "require('child_process')",
    "cluster": "require('cluster')",
    "crypto": "require('crypto')",
    "electron": "require('electron')",
    "fs": "require('fs')",
    "net": "require('net')",
    "stream": "require('stream')"
    // 其他模块自行添加 
  },
  "target": "electron-renderer"

这两项都是 webpack 的配置选项， 具体内容请查看 Webpack Configuration

解决方法来源：
HOW TO INCLUDE NODE MODULES WITH WEBPACK
webpack-require-is-not-a-function-when-using-babel-6

开发

这里提供一个 简单的 选择文件夹并获取文件夹绝对路径 的 demo，github地址

总结：

目前来说，如果 @angular/cli 开发 electron 用到 native nodejs module 的话，会非常不方便， 因为它没有针对electron的 hot reload 相关配置。

GitHub 上 发现了个 angular-electron, 这个 starter kit 已经配置好了hot reload，以及打包 native node modules 的相关webpack 配置， 相当方便， 建议用这个库来开发你自己的 angular + electron 桌面应用。

相关学习资料：

• Angular2 and Electron - The definitive guide
• Create-a-desktop-app-with-angular-2-and-electron