如何从电子窗口正确加载角度分量答案

【问题标题】：How to load properly angular component from electron window如何从电子窗口正确加载角度分量
【发布时间】：2020-09-12 04:04:57
【问题描述】：

您好，我正在尝试使用带 Angular 的电子构建桌面应用程序，主要问题是我无法在用户登录后找到正确加载主要组件的方法。正如您在 main.js 中看到的，这是我创建两个窗口（1 个用于登录的子窗口）和 1 个（主窗口）的主进程，我首先显示子窗口并隐藏主窗口，直到用户从子窗口登录并将以下命令发送到main.js 显示主窗口，因为用户已成功登录。

this.electronService.ipcRenderer.send("entry-accepted", "ping")

main.js 中的代码

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

let win
let child

function createWindows() {

  win = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    },
    show: false
  })

  win.loadURL(url.format({
    pathname: path.join(__dirname, `./src/app/main-nav/main-nav.component.html`),
    protocol: 'file',
    slashes: true
  }))

  child = new BrowserWindow({
    parent: win,
    width: 600,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    },
    frame: false
  })

  child.loadURL(url.format({
    pathname: path.join(__dirname, `./dist/index.html`),
    protocol: 'file',
    slashes: true
  }))

  child.openDevTools()
}

ipcMain.on('entry-accepted', (event, arg) => {
  if (arg == 'ping') {
    win.show()
    child.hide()
  }
})

app.on('ready', createWindows)

index.html 中的代码

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>AngElectron</title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
</head>

<body>
  <app-root></app-root>
</body>

</html>

app.component.html 中的代码

<app-sign-in></app-sign-in>

正如您在图片中看到的，渲染进程与 main 通信的主要功能正在工作，但是没有 CSS 和其他必要的文件，因为我没有使用 dist 作为路径并且文件没有被编译。抱歉，我对带角度的电子完全陌生。

main page

【问题讨论】：

您需要在 main.js 中引导 Angular。见angular.io/guide/bootstrapping。从新的 Angular cli 项目中查看“main.ts”，例如这个codesandbox.io/s/affectionate-darkness-o7n3w?file=/src/main.ts
@phip1611 my main.ts 与您提供的示例完全相同。

标签： angular web electron desktop-application

【解决方案1】：

组件 A：

  login(): void {
    this.model = this.loginForm.value;
    this.authService.login(this.model).subscribe(
      response => {
        this.electronService.ipcRenderer.send('navigateToMain', '/dist/index.html#/main-nav');
      },
      error => {
        console.log(error);
      }
    );
  }

Main.js

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

function createWindow() {
  mainWindow = new BrowserWindow({
      width: 1300,
      height: 800,
      maxHeight: 800,
      maxWidth: 1300,
      useHash: true,
      maximizable: false,
      webPreferences: {
        nodeIntegration: true
      },
      show: false
    }),

    signInSignUpWindow = new BrowserWindow({
      width: 500,
      height: 600,
      useHash: true,
      frame: false,
      maximizable: false,
      resizable: false,
      parent: mainWindow,
      webPreferences: {
        nodeIntegration: true
      },
      show: true
    }),

    signInSignUpWindow.loadURL(`file://${__dirname}` + '/dist/index.html#/init-form')
  signInSignUpWindow.setIcon(path.join(__dirname, '/src/assets/appicon1.png'));


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

  signInSignUpWindow.on('closed', function () {
    app.quit()
  })

}


  ipcMain.on('navigateToMain', (event, data) => {
    signInSignUpWindow.hide();
    mainWindow.loadURL(`file://${__dirname}` + data);
    mainWindow.setIcon(path.join(__dirname, '/src/assets/appicon1.png'));
    mainWindow.setMenuBarVisibility(false);
    mainWindow.show();
  })

App.routing.module.ts

添加使用哈希导入：[RouterModule.forRoot(routes, { useHash: true })]

【讨论】：