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

Question

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

9

我是一名有用的助手，可以为您翻译文本。

所以我有一个完成的Angular 5应用程序，我想将其转换为Electron应用程序。我已经让应用程序中的所有内容像Web应用程序一样工作，除了一个问题。我无法想出如何将Routes加载到新的BrowserWindow中。以下是我正在使用和尝试过的内容：

我使用以下代码加载mainWindow：

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

我成功地通过mainWindow中的routerLink导航到联系人，并获得了以下结果：

console.log(mainWindow.webContents.getURL()); = file:///C:/Me/Project/dist/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

我尝试过以下方法，但都没有成功（包括使用哈希路由并设置 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应用的唯一障碍。

- RockGuitarist1

2个回答

8

除了目前已经被接受的答案之外，我还需要在AppRoutingModule中打开useHash。

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

- Rodrigo Sales

我之前没有设置任何路由，所以一直出现这个错误。不过现在问题已经解决了，谢谢。 - khollenbeck

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim · Accepted Answer

没有看到您的代码和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');