title: How to load properly angular component from electron window
body: <p>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) &amp; 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.</p>
  
  <pre><code>this.electronService.ipcRenderer.send("entry-accepted", "ping")
  </code></pre>
  
  <p><strong>Code in main.js</strong></p>
  
  <pre><code>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) =&gt; {
    if (arg == 'ping') {
      win.show()
      child.hide()
    }
  })
  
  app.on('ready', createWindows)
  </code></pre>
  
  <p><strong>Code in index.html</strong></p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;AngElectron&lt;/title&gt;
    &lt;base href="./"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;script src="https://kit.fontawesome.com/b99e675b6e.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Code in app.component.html</strong> </p>
  
  <pre><code>&lt;app-sign-in&gt;&lt;/app-sign-in&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/aPKeQ.png" rel="nofollow noreferrer">login</a></p>
  
  <p><a href="https://i.stack.imgur.com/w4Y0I.png" rel="nofollow noreferrer">main page</a></p>