如何在新的 BrowserWindow（电子）中加载 Angular 2+ 路由？答案

【问题标题】：How to Load Angular 2+ Routes in a New BrowserWindow (Electron)?如何在新的 BrowserWindow（电子）中加载 Angular 2+ 路由？
【发布时间】：2018-06-26 18:19:31
【问题描述】：

所以我有一个完成的 Angular 5 应用程序，我想将它转换成一个 Electron 应用程序。除了一件事之外，我已经让应用程序中的所有内容都像在其 Web 应用程序表单中一样工作。我一生都无法弄清楚如何将路由加载到新的 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 在 secondWindow 内打开联系人页面，而不是导航到 mainWindow 内的联系人：

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 应用发布的原因。

【问题讨论】：

标签： angular electron

【解决方案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');

【讨论】：

啊，我不知道 hash 属性。我试图提供尽可能多的代码，因为这是我一直在研究的公司代码。对于此示例，我只是尝试在启动时直接加载路由，而不是遍历应用程序到路由位置。一旦我开始工作并回复你，我将试一试。谢谢！
我只是以各种方式尝试了这一点，但没有任何运气。它基本上将我重定向回我的主页，或者抛出一个错误，说我不允许加载本地资源。您还需要什么其他信息？
好的，所以我记录了 url.format 正在创建的内容，这是我得到的 url：file:///C:\full-path\app-root\dist\index.html#/contact。这似乎不对。
我们的 Electron 应用（在开发模式下）中的 url 看起来像：file:///C:\Users\tim\Documents\Repos\AppName\index.html
是的，这就是我的联系方式。每当我尝试在新的 BrowserWindow 中打开联系人路由时，它都会将我重定向回我的主页。

【解决方案2】：

除了目前接受的答案，我还需要在AppRoutingModule中开启useHash。

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

【讨论】：

我没有任何路线，我收到了这个错误。这解决了我的问题。谢谢。