angular - 使用文件 ://with aot 在新窗口上进行深度链接

Question

语境

我正在创建一个 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 提供诸如覆盖窗口之类的东西，以非常紧凑的方式向用户显示信息。

为此，由于路由器的 queryParams 绑定(bind)，我有一个可以呈现为覆盖 ( /alarms?overlay=true) 的页面。

上面提到的一切都可以使用浏览器完美运行，覆盖还可以，一切都很好。

问题

为了在 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;
});

如您所见，我正在尝试直接在给定页面上打开一个新窗口，因此它可以仅加载叠加层，而无需加载主页然后导航到警报(由于叠加层的大小，这将很难看 window )。

配置

路由器基本 href 设置为 ./ .

路由器定位策略设置为 useHash: true在 Electron 版中，因为这就是我应该能够处理与 file:// 的深度链接的方式.

已经试过了

基础引用

正如我在 github issue 上看到的那样，将基本 href 设置为空 ("")它应该可以使用它。
* 事实证明，这在没有 aot 的情况下可以完美运行，使用 aot 构建应用程序会在窗口打开时打破窗口，并显示以下消息(在 Electron 的 devTools 中):

Error: Cannot match any routes. URL Segment: 'index.html'

这也破坏了我所有的 Assets 链接，因为它们试图从 dist/index.html/assets/ 加载而不是 dist/assets/ .

链接修改

我试图通过在 # 之前添加斜杠来更改打开的链接。 ，没有改变任何东西。

现在，我正在构建没有 aot 的 Electron 应用程序，但这不是我想用于发布的解决方案，能够通过深度链接从 Electron 加载帧并启用 aot 是我需要能够做到的做。

Answer 1

我不确定我是否完全理解问题出在哪里，但我认为您可以尝试实现 UrlSerializer兼容 file:///协议(protocol)和文件名或至少检查 DefaultUrlSerializer执行。