Electron에서 Angular를 움직입니다.

node.js가 설치되어 있다고 가정합니다.

@angular/cli를 설치하지 않은 분은 여기 명령에서.
(자세한 내용은 생략합니다.)

npm install -g @angular/cli

Angular 프로젝트 만들기

ng new angular-with-electron

대체로 이런 것이 완성된다고 생각합니다.



아래 파일을 편집합니다.

angular-with-electron/src/index.html

<base href="/">

에서

angular-with-electron/src/index.html

<base href="./">

로 수정합니다.
(이렇게하지 않으면 잘 일어나지 않는 것 같습니다)

Electron 설치

cd angular-with-electron
npm install electron --save-dev

설치가 완료되면 main.js를 만듭니다.
이하, 괜찮습니다. (잘 모르겠습니다)

angular-with-electron/main.js

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

let win;

function createWindow () {
  // 新規ウインドウ生成
  win = new BrowserWindow({
    width: 800, 
    height: 700
  })


  win.loadURL(`file://${__dirname}/dist/angular-with-electron/index.html`)

  //// 起動時に開発者ツールを開く　（コメントアウトしてます）
  // win.webContents.openDevTools()

  // ウインドウが閉じたときのイベント
  win.on('closed', function () {
    win = null
  })
}

// Electron初期化時にウィンドウ生成
app.on('ready', createWindow)

// すべてのウインドウが閉じたときにElectronを終了する。
app.on('window-all-closed', function () {

  // macOSの場合
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // macOSの場合
  if (win === null) {
    createWindow()
  }
})

시작 명령을 입력합니다.

package.json

{
// 中略
  "main": "main.js", // 追加
  "scripts": {
// 中略
    "electron": "electron .", // Electronを起動
    "electron-build": "ng build --prod && electron ." // ビルドしてからElectronを起動
  },
//  略
}

여기까지 할 수 있으면

npm run electron-build

안전하게 시작할 수있었습니다.

그리고는 평소대로 Angular를 이용할 수 있다고 생각합니다.

이상, 첫 투고였습니다.