How to Load Angular 2+ Routes in a New BrowserWindow (Electron)?

Question

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:

I load mainWindow with this:

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

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

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

Now instead of navigating to Contact inside of mainWindow, I want the Contact page opened inside of secondWindow via 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();

This results in this error message:

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

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

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

Answer 1

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.

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

Answer 2

In addition to the currently accepted answer, I also needed to turn on useHash in AppRoutingModule.

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