Using Angular Routing with Electron

user_4350389 0
Viewed 179

I'm unable to get the <router-outlet></router-outlet> to render anything in my angular electron app. If I run ng serve then I can see the router working, but not when I run electron . It's a blank app. My index.html file has <base href="./"> and my main.js file is below. What do I have to do to make angular routing play nice with electron? I appreciate any help!

main.js

const { app, BrowserWindow } = require('electron')
const url = require("url");
const path = require("path");

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})
electron angular
1 Answers

Are you certain the angular application is even being loaded into the Browser? The Electron docs mention that you need to show the window once it's ready:

mainWindow.once('ready-to-show', () => {
   mainWindow.show();
}

A few other debugging tips:

  1. Set breakpoints to ensure your code is being run
  2. Remove routing altogether to make sure you can just get a simple angular app.component to show
  3. Make sure you have a page not found configured with your angular router to catch if your routes are not matching for some reason
user_113005650
Related