CODEWITHSUNDEEP
angularwebelectrondesktop-application
azizmaiden
azizmaiden

Reputation: 13

How to load properly angular component from electron window

Hello i am trying to build a desktop application using electron with angular, the main problem is that i cannot find a properly way to load the main component after user login. As you can see in main.js which is the main process i create two windows (1 child for login) & 1 (main), i show the child first and hide the main until user login from child window and send the following command to main.js to show the main window because user has logged in successfully.

this.electronService.ipcRenderer.send("entry-accepted", "ping")

Code in main.js

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

let win
let child

function createWindows() {

  win = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    },
    show: false
  })

  win.loadURL(url.format({
    pathname: path.join(__dirname, `./src/app/main-nav/main-nav.component.html`),
    protocol: 'file',
    slashes: true
  }))

  child = new BrowserWindow({
    parent: win,
    width: 600,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    },
    frame: false
  })

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

  child.openDevTools()
}

ipcMain.on('entry-accepted', (event, arg) => {
  if (arg == 'ping') {
    win.show()
    child.hide()
  }
})

app.on('ready', createWindows)

Code in index.html

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>AngElectron</title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
</head>

<body>
  <app-root></app-root>
</body>

</html>

Code in app.component.html 

<app-sign-in></app-sign-in>

As you can see in the pictures the main functionality of communication of render process with main is working, but there is no CSS and other necessary files cause i'm not using dist as path and the files are not compiled. Sorry i'm totally new to electron with angular.

login

main page

Upvotes: 0

Views: 2097

Answers (1)

azizmaiden
azizmaiden

Reputation: 13

Component A:

  login(): void {
    this.model = this.loginForm.value;
    this.authService.login(this.model).subscribe(
      response => {
        this.electronService.ipcRenderer.send('navigateToMain', '/dist/index.html#/main-nav');
      },
      error => {
        console.log(error);
      }
    );
  }

Main.js

const {
  app,
  BrowserWindow,
  ipcMain,
  dialog
} = require('electron')

function createWindow() {
  mainWindow = new BrowserWindow({
      width: 1300,
      height: 800,
      maxHeight: 800,
      maxWidth: 1300,
      useHash: true,
      maximizable: false,
      webPreferences: {
        nodeIntegration: true
      },
      show: false
    }),

    signInSignUpWindow = new BrowserWindow({
      width: 500,
      height: 600,
      useHash: true,
      frame: false,
      maximizable: false,
      resizable: false,
      parent: mainWindow,
      webPreferences: {
        nodeIntegration: true
      },
      show: true
    }),

    signInSignUpWindow.loadURL(`file://${__dirname}` + '/dist/index.html#/init-form')
  signInSignUpWindow.setIcon(path.join(__dirname, '/src/assets/appicon1.png'));


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

  signInSignUpWindow.on('closed', function () {
    app.quit()
  })

}


  ipcMain.on('navigateToMain', (event, data) => {
    signInSignUpWindow.hide();
    mainWindow.loadURL(`file://${__dirname}` + data);
    mainWindow.setIcon(path.join(__dirname, '/src/assets/appicon1.png'));
    mainWindow.setMenuBarVisibility(false);
    mainWindow.show();
  })

App.routing.module.ts

add usehash imports: [RouterModule.forRoot(routes, { useHash: true })]

Upvotes: 1

Related Questions