如何在新的BrowserWindow（Electron）中加载Angular 2+路线？

Question

所以我有一个完整的Angular 5应用程序，我想将该应用程序隐藏到Electron应用程序中。除了一件事情，我已经像在Web App表单中一样使该应用程序中的所有内容都能正常工作。我一辈子都无法弄清楚如何将Routes加载到新的BrowserWindow中。这是我正在使用的内容以及到目前为止我已经尝试过的内容：

我用这个加载mainWindow：

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

我成功地通过mainWindow中的routerLink导航到Contact，并得到以下结果：

console.log(mainWindow.webContents.getURL()); = file:///C:/Me/Project/dist/contact

现在，我不想导航到mainWindow内部的Contact，而是希望通过mainWindow在secondWindow内部打开Contact页面：

index.html：

<base href="./">

app.routes.ts：

export const routes: Routes = [{
    path: 'contact', data: { sectionTitle: 'Contact' },
    loadChildren: 'contact/contact.module#ContactModule'
}]

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: false })
  ],
  exports: [RouterModule],
  declarations: [],
  providers: [],
})
export class AppRoutingModule { }

main.js：

secondWindow = new BrowserWindow({
    parent: mainWindow,
    width: 1024,
    height: 768,
    frame: false,
    minWidth: 1024,
    minHeight: 768,
    show: false
  });

secondWindow.loadURL('file://' + __dirname + 'dist/contact');
secondWindow.show();

这导致此错误消息：

Not allowed to load local resource: file:///C:/Me/Project/dist/contact

我没有运气尝试过的东西（尝试过的哈希路由以及w / useHash：true）：

secondWindow.loadURL('file://' + __dirname + '/dist/contact');
secondWindow.loadURL('file:' + __dirname + '/dist/contact');
secondWindow.loadURL('file:' + __dirname + 'dist/contact');
secondWindow.loadURL('file:' + __dirname + 'dist/index.html#/contact');

有任何想法吗？这是阻止此Electron应用程序发布的唯一方法。

Answer 1

没有看到您的代码和Angular设置，很难知道为什么它不起作用。但是，您应该使用node.js path和url模块来构建URL。

猜测一下，我会说您需要加载基本的html文件，而哈希应该是您要加载的路由：

const path = require('path');
const url = require('url');

window.loadURL(url.format({
  pathname: path.join(__dirname, './index.html'),
  protocol: 'file:',
  slashes: true,
  hash: '/contact'
}));

这将给像：

file:///full-path/to-your/app-root/index.html#/contact"

这意味着您的最后一个示例是最接近的示例，但是您自己手动构建url意味着它无效：

secondWindow.loadURL('file:' + __dirname + 'dist/index.html#/contact');

Answer 2

除了当前接受的答案外，我还需要useHash在AppRoutingModule.

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})