使用 Electron 将 Angular 项目（进行 REST API 调用）转换为桌面应用程序答案

【问题标题】：Converting Angular Project (making RESP API calls) to Desktop app with Electron使用 Electron 将 Angular 项目（进行 REST API 调用）转换为桌面应用程序
【发布时间】：2020-09-02 22:41:30
【问题描述】：

我有一个功能齐全的 Angular 前端，它使 REST Api 调用在端口 8080 上运行的 Spring Boot 后端。我需要将此 Web 应用程序转换为桌面应用程序。我知道这很容易使用electron。我在这个问题下关注了几个主题，但找不到答案。我怎样才能通过修改这个 main.js 文件来实现这一点？或者我是否需要修改项目中进行 api 调用的每个地方？我已将应用程序加载到窗口，但它不与后端通信。

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

  let appWindow

function initWindow() {
appWindow = new BrowserWindow({
  width: 1000,
  height: 800,
  webPreferences: {
    nodeIntegration: true
  }
})

// Electron Build Path
appWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, `/dist/index.html`),
    protocol: "file:",
    slashes: true
  })
);

// Initialize the DevTools.
appWindow.webContents.openDevTools()

appWindow.on('closed', function () {
  appWindow = null
})}

app.on('ready', initWindow)

// Close when all windows are closed.
app.on('window-all-closed', function () {

// On macOS specific close process
if (process.platform !== 'darwin') {
  app.quit()
}
})

app.on('activate', function () {
if (win === null) {
  initWindow()
}
})

【问题讨论】：

标签： javascript angular typescript electron

【解决方案1】：

我认为转换 Angular 应用程序的最佳方法是使用 Angular-electron 样板，将内容从应用程序移动到电子应用程序并进行配置。我建议您为此使用 maximegris /angular-electron 样板。

对于 API 调用，你现在不需要弄乱main-process。 Angular 应用程序将在 renderer process 上运行，并将您的应用程序逻辑保留在那里。

【讨论】：