angular - 如何在新的 BrowserWindow (Electron) 中加载 Angular 2+ 路由？

Question

所以我有一个完成的 Angular 5 应用程序，我想将其转换为 Electron 应用程序。除了一件事之外，我已经让应用程序中的所有内容都像在其 Web 应用程序表单中一样工作。我一辈子都想不出如何将路由加载到新的 BrowserWindow 中。这是我正在使用的以及到目前为止我已经尝试过的:

我用这个加载主窗口:

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 { }

主要.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

我尝试过但没有成功的方法(也尝试过使用 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');