使用file://和aot在新窗口上进行深度链接

上下文

我正在创建angular应用程序的桌面版本,为此我使用了electron。

打开主窗口非常容易:

win = new BrowserWindow({
    width: 1280,
    height: 720,
    backgroundColor: '#ffffff',
    icon: `file://${__dirname}/dist/assets/logo.png`
});

win.loadURL(`file://${__dirname}/dist/index.html`);

这将打开一个新窗口,解析到基本href路径,一切正常。

在我的应用程序中,我想利用electron提供一些东西,比如覆盖窗口,以非常紧凑的方式向用户显示信息。

为了做到这一点,我有一个可以呈现为覆盖的页面( /alarms?overlay=true )多亏了路由器的queryParams绑定。

上面提到的一切都可以在浏览器上完美运行,覆盖层也可以,一切都很好。

问题

为了在electron上打开这个覆盖层,我提供了一个按钮来进行ipc调用:

showOverlay(): void {
    this.ipc.send('overlay', '/alarms');
}

以下是IpcService的发送方法(在上面的函数中命名为ipc):

public send(channel: string, ...args: any[]): void {
    if (this._ipc !== undefined) {
        return this._ipc.send(channel, ...args);
    }
}

另一面的代码是:

ipcMain.on('overlay', (event, url) => {
    const overlayWindowConfig = {
        height: 400,
        width: 280,
        resizable: true,
        frame: false,
        alwaysOnTop: true,
        autoHideMenuBar: true,
        webPreferences: {
            nodeIntegration: false
        }
    };
    const overlay = new BrowserWindow(overlayWindowConfig);
    overlay.loadURL(`file://${__dirname}/dist/index.html#${url}?overlay=true`);
    openedOverlays[url] = overlay;
});

如你所见,我正试图在给定的页面上直接打开一个新窗口,这样它就可以只加载覆盖,而不必加载主页,然后导航到报警(由于覆盖窗口的大小,这会很难看)。

配置

• 路由器基本href设置为 ./ .
• 路由器定位策略设置为 useHash: true 在电子版中,因为这就是我应该如何处理与 file:// .

已经试过了

Base Href

将base href设置为空(“”),正如我在 github issue 使用它应该有效。 *事实证明,这在没有aot的情况下非常有效,使用aot构建应用程序会在打开窗口时显示以下消息(在electron的devTools中):

错误:无法匹配任何路由。URL段:'索引。html'

这也破坏了我所有的资产链接,因为它们试图从 dist/index.html/assets/ 而不是 dist/assets/ .

链路修改

我试图更改打开的链接,方法是在 # ,没有任何改变。

目前,我正在构建没有aot的electron应用程序,但这不是我想在发布时使用的解决方案,能够从electron加载带有深度链接且启用aot的帧是我需要能够做到的事情。