Configuring the electron app

For now, we will leave the angular app as it is and focus on starting it inside of electron.

To do that, create a new directory called electron inside of the projects root directory. We will use that folder to place all electron-related files inside.

Afterward, make a new file and call it “main.ts” inside of the electron folder. This file will be the main starting point of our electron application.

Finally, create a new tsconfig.json file inside of the directory. We need that file to compile the TypeScript file into JavaScript one.

The content of that file looks quite similar to the one used in the angular application. In fact, I did copy it from there…

The only thing we need to change is the module property. It has to be “commonjs” instead of “es2015”. For simplicity, I have also changed the ourDir to just dist. The whole file looks like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist",
    "sourceMap": true,
    "declaration": false,
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"]
  }
}

Fire up the application

Now it’s time to fill the main.ts with some code.

First, we import the required dependencies:

TS	electron/main.ts

import { app, BrowserWindow } from 'electron'
import * as path from 'path'
import * as url from 'url'

Afterward, we create a variable that will hold a reference to the browser window. This is the window electron spawns to host our angular application.

TS	electron/main.ts

 let win: BrowserWindow

Next, we register some listeners on the app object we imported above. These listeners will let us know when the application is ready to go.

TS	electron/main.ts

app.on('ready', createWindow)

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

The second listener for the “activate”-event is only required for macOS applications, as these behave a little bit differently.

The application window

Now we need to implement the createWindow function we called before.

This function will create a new electron window to host our angular application. In the background, this window is just a chrome-tab. This is why the class to create a new window is called BrowserWindow.

TS	electron/main.ts

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 })
}

Inside of the BrowserWindow constructor, we define the dimensions of the new window. You can also start the application in fullscreen-mode like this:

TS	electron/main.ts

function createWindow() {
  win = new BrowserWindow({ fullscreen: true })
}

Spawning the angular application in electron

Next, we need to fill our new browser window with content: Our angular app.

To do that the browser window provides a method called loadUrl.

We use this method to load the index.html of our (already build) angular application. The build output (when we call ng build) typically is located in a directory called dist in the project root.

Since angular 6 there is an additional sub-folder called like the project itself. In this case, it is “angular-electron”.

TS	electron/main.ts

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 })

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

  win.webContents.openDevTools()

  win.on('closed', () => {
    win = null
  })
}

We also add a function call to open the chrome dev-tools at the start. It’s up to you if you want that and you definitely want to remove that when you ship the application.

Also, we added an event listener to the window close event. Again, this is a special case required for macOS applications.