起步—— 開發前的準備工作
(注意： 此時 @angular/cli 版本為 1.4.2， electron 版本為 1.7.6， 閱讀時請注意版本)
前置
準備
一 、electron 加載文件使用的是 file:// ,
原先使用@angular/cli 開發的 index.html 中的
<base href="/">
在 electron 中 需要修改為
<base href="./">
或者使用更通用的方法， 將這個 tag 替換成
<script>document.write('<base href="' + document.location + '" />');</script>
二、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 桌面應用。
