AngularCLIに基づいて、デバッグ/ライブリロードを使用してElectronプロジェクトを設定するにはどうすればよいですか？

Question

私はブラウザと電子で実行できるAngularCLIプロジェクトを設定しようとしています。

私は、このようなこの記事のように、そうするために、いくつかの良いチュートリアルを見つけた：

http://www.blog.bdauria.com/?p=806

しかし、私は見つけるか、電子プロジェクトでのライブリロードやデバッグを可能にし、セットアップを把握することはできません。あなたと仮定すると

Answer 1

は@angular/cliを使用している：

• は、フォルダを作成しelectron次のこのフォルダにフォルダ
• srcに、electron.js

がそれに次の内容を貼り付けたファイルを作成します。

を

const {app, BrowserWindow} = require('electron'); 

// keep a global reference of the window object, if you don't, the window will 
// be closed automatically when the JavaScript object is garbage collected 
let win; 

function createWindow() { 
    // create the browser window 
    win = new BrowserWindow(); 
    win.maximize(); 

    // and load the index.html of the app 
    win.loadURL(`file://${__dirname}/index.html`); 

    // ---------------------------------------------------------------- 
    //   THIS IS WHAT YOU'RE LOOKING FOR DEBUGGING 
    // open the DevTools 
    win.webContents.openDevTools() 
    // ---------------------------------------------------------------- 

    // emitted when the window is closed 
    win.on('closed',() => { 
    // fereference the window object, usually you would store windows 
    // in an array if your app supports multi windows, this is the time 
    // when you should delete the corresponding element 
    win = null; 
    }); 
}; 

// yhis method will be called when Electron has finished 
// initialization and is ready to create browser windows 
// some APIs can only be used after this event occurs 
app.on('ready', createWindow); 

// quit when all windows are closed 
app.on('window-all-closed',() => { 
    // on macOS it is common for applications and their menu bar 
    // to stay active until the user quits explicitly with Cmd + Q 
    if (process.platform !== 'darwin') { 
    app.quit(); 
    } 
}); 

app.on('activate',() => { 
    // on macOS it's common to re-create a window in the app when the 
    // dock icon is clicked and there are no other windows open 
    if (win === null) { 
    createWindow(); 
    } 
}); 

• 同じフォルダにファイルgenerate-package-json.jsonを作成します。

ファイル：あなたのpackage.jsonで次に

const fs = require('fs'); 

const package = `{ "name": "${ require('../package.json').name}", "version": "${ require('../package.json').version}", "main": "electron.js" }`; 

fs.writeFile('./dist/package.json', package, err => { 
    if (err) { 
    return console.log(err); 
    } 
}); 

：最後に

{ 
    ... 
    scripts: { 
    "build-electron": "npm run build -- -bh='./'; node ./electron/generate-package-json.js; cp ./electron/electron.js dist/", 
    "electron": "npm run build-electron; electron dist/" 
    } 
    ... 
} 

、実行npm run electron

我々は自動的にそのような私たちの電子アプリケーションのためのパッケージを生成することができますこの方法