如何在新的BrowserWindow(Electron)中加载Angular 2+路线? [英] How to Load Angular 2+ Routes in a New BrowserWindow (Electron)?

问题描述

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

So I have a finished Angular 5 app that I want to covert into an Electron app. I've gotten everything to work in the app as it did in its Web App form except for one thing. I cannot for the life of me figure out how to load Routes into a new BrowserWindow. Here is what I am working with and what I have tried so far:

我用这个加载mainWindow:

I load mainWindow with this:

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

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

I successfully navigate to Contact via routerLink in mainWindow and get this result:

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

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

Now instead of navigating to Contact inside of mainWindow, I want the Contact page opened inside of secondWindow via mainWindow:

index.html:

index.html:

<base href="./">

app.routes.ts:

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();

这将导致以下错误消息:

This results in this error message:

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

我没有运气尝试过的东西(也尝试过带useHash的哈希路由:true):

What I have tried with no luck (tried hash routes as well 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应用程序发布的唯一方法.

Any ideas? It's the only thing holding up the release of this Electron app.

推荐答案

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

Without seeing your code and Angular setup it's tricky to know why its not working. You should however be using the node.js path and url modules to build your url.

一个猜测，我想说的是您需要加载基本的html文件，而散列应该是您要加载的路由:

At a guess, I would say that you need to load your base html file and the hash should be the route you're wanting to load:

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

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

哪个会给出类似的内容:

Which would give something like:

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

这意味着您的最后一个示例是最接近的示例，但您自己手动构建了该网址，这意味着该网址无效:

That means your last example was the closest but manually building the url yourself means that it was not valid:

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

这篇关于如何在新的BrowserWindow(Electron)中加载Angular 2+路线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！