在 Electron 中使用 Angular 路由答案

【问题标题】：Using Angular Routing with Electron在 Electron 中使用 Angular 路由
【发布时间】：2021-04-22 07:41:46
【问题描述】：

我无法让<router-outlet></router-outlet> 在我的角度电子应用程序中渲染任何内容。如果我运行 ng serve ，那么我可以看到路由器工作，但当我运行 electron . 时却看不到它是一个空白应用程序。我的 index.html 文件有<base href="./">，我的 main.js 文件在下面。我该怎么做才能使角度路由与电子配合得很好？感谢您的帮助！

main.js

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

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

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

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

【问题讨论】：

标签： angular electron

【解决方案1】：

您确定 Angular 应用程序甚至正在加载到浏览器中吗？ Electron docs 提到您需要在窗口准备好后显示它：

mainWindow.once('ready-to-show', () => {
   mainWindow.show();
}

其他一些调试技巧：

设置断点以确保您的代码正在运行
完全删除路由，以确保您可以只获得一个简单的 Angular app.component 来显示
如果您的路由由于某种原因不匹配，请确保您使用 Angular 路由器配置了一个找不到页面

【讨论】：