How to Build Electron Desktop Application with Angular
Electron.js is a well known open-source platform developed by GitHub under the MIT license. It helps in building a robust cross-platform desktop application for various devices such as macOS, Linus, and Windows using HTML, JavaScript, and CSS. To know more about Electron.js you can visit their official site here.
Electron makes developers life easy by managing the hard work by itself. It uses Google Chromium and Node.js and allows you to build flexible and powerful apps using HTML, CSS, and JS. Electron also offers its own collection of APIs for building web apps.
In this tutorial, we will take a look at how to set up an Angular app from scratch and run within the Electron with the help of TypeScript and its own set of native APIs.
Let’s start building Electron and Angular.
Prerequisite
To understand this tutorial thoroughly, you must be aware of the following prerequisites:
- Must have experience with HTML, CSS, JavaScript and TypeScript.
- Node.js and NPM installed in your system, if not follow this tutorial to Set up Node JS Development Environment
Set up Angular CLI
Angular projects are developed using Angular CLI, it’s an official tool to work with Angular. Run command to install the Angular CLI, ignore this step if Angular CLI is already installed.
npm install @angular/cli -gBuilding Angular 8 Project
In this step, we are going to build Angular 8 project using Angular CLI from scratch. Run command to set up Angular project, Angular CLI will ask you few questions answer those questions as per your choice.
ng new electron-angular-app
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
# CREATE electron-angular-app/README.md (1035 bytes)
# CREATE electron-angular-app/.editorconfig (246 bytes)
# CREATE electron-angular-app/.gitignore (629 bytes)
# CREATE electron-angular-app/angular.json (3537 bytes)
# CREATE electron-angular-app/package.json (1293 bytes)
# CREATE electron-angular-app/tsconfig.json (435 bytes)
# CREATE electron-angular-app/tslint.json (1988 bytes)
# CREATE electron-angular-app/browserslist (429 bytes)
# CREATE electron-angular-app/karma.conf.js (1032 bytes)
# CREATE electron-angular-app/tsconfig.app.json (210 bytes)
............................................................
............................................................
............................................................Get inside the project directory by running the following command:
cd electron-angular-appInstall latest Electron Version in Angular 8 Project
In this step, we will install the latest version of Electron inside the root folder of the Angular 8 project.
Run the below command to set up Electron in Angular project:
npm install electron@latest --save-devAs you can see, we are installing Electron package as a dev dependency because we want to use this package during development phase. We don’t want this package to be included in the main application.
Once the electron is successfully installed, you can check out the electron version by running the given below command in the terminal:
electron --version
# v6.0.1We are using Electron v6.0.1 at the time of creating this tutorial.
Initialize Electron App
To configure electron inside Angular project, create a new file in the root of the Angular project. Name it app.js and keep all the Electron related code inside of it.
Run command to create an app.js file:
touch app.jsStart Building The Electron App
Go to app.js file and add the required dependencies to initialize the Electron in Angular 8 app:
const { app, BrowserWindow } = require('electron')
const url = require("url");
const path = require("path");Define a variable which will be referred to the appWindow, and This is the same window which Electron will open to host our Angular 8 app.
let appWindowSetting up the Electron Window
Declare initWindow function, and this function will create a new Electron window which will help Angular to host our electron application.
By using the BrowserWindow method, we declared the window dimensions for the electron window.
function initWindow() {
appWindow = new BrowserWindow({
width: 1000,
height: 800,
webPreferences: {
nodeIntegration: true
}
})
}You can also declare the fullscreen property inside the BrowserWindow method to show the full-screen electron app window.
function initWindow() {
appWindow = new BrowserWindow({
fullscreen: true
})
}Set up Electron Build Path
This function will define the Electron app build path.
function initWindow() {
appWindow.loadURL(
url.format({
pathname: path.join(__dirname, `/dist/index.html`),
protocol: "file:",
slashes: true
})
);
}Register Electron Listeners
Now register event listeners in electron object these listeners initialize electron app.
app.on('ready', initWindow)
app.on('activate', function () {
if (win === null) {
initWindow()
}
})Final app.js File
const {
app,
BrowserWindow
} = require('electron')
const url = require("url");
const path = require("path");
let appWindow
function initWindow() {
appWindow = new BrowserWindow({
width: 1000,
height: 800,
webPreferences: {
nodeIntegration: true
}
})
// Electron Build Path
appWindow.loadURL(
url.format({
pathname: path.join(__dirname, `/dist/index.html`),
protocol: "file:",
slashes: true
})
);
// Initialize the DevTools.
appWindow.webContents.openDevTools()
appWindow.on('closed', function () {
appWindow = null
})
}
app.on('ready', initWindow)
// Close when all windows are closed.
app.on('window-all-closed', function () {
// On macOS specific close process
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (win === null) {
initWindow()
}
})Configure app.js to Start Electron
In the next step, go to package.json file and include the main property along with app.js as an entry point.
{
"name": "electron-angular-app",
"version": "0.0.0",
"main": "app.js",
"scripts": {
[...]
[...]
[...]
},
}Then go to src => indext.html file and set the '.' dot before the forward slash in base url. It will help you to get rid from ‘Failed to load resource: net::ERR_FILE_NOT_FOUND’ error.
<base href="./">In the next step, we have to define the ng build for electron app this script will initialize the Electron app once the Angular build is completed.
{
"name": "electron-angular-app",
"version": "0.0.0",
"main": "app.js",
"scripts": {
"start:electron": "ng build --base-href ./ && electron ."
},
}In the above code, I have included the start:electron script which initialize the ng build --base-href ./ && electron ..
Got to angular.json file and head over to projects => architect => build => options => outputPath and remove the project name from the dist/electron-angular-app value and set it to only dist.
"projects": {
"electron-angular-app": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",Run the command from your terminal to start the Electron Angular app.
npm run start:electron
Handle Electron Failed to Load Module Script Errors
If you are getting the following errors when Electron window is launched:
- Failed to load module script: The server responded with a non-JavaScript MIME type of “”. Strict MIME type checking is enforced for module scripts per HTML spec.
- Failed to load module script: The server responded with a non-JavaScript MIME type of “”. Strict MIME type checking is enforced for module scripts per HTML spec.
- Failed to load module script: The server responded with a non-JavaScript MIME type of “”. Strict MIME type checking is enforced for module scripts per HTML spec.
Then, go to tsconfig.json and update the "target": "es2015" property to "target": "es5" and restart the electron project.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}Conclusion
Finally, we have finished learning how to build an Electron desktop app with Angular 8 from scratch. I hope you loved the way we learned to set up the Electron app in Angular and using Electron API in this tutorial.
