Introduction
In this article, we will learn how to build Windows apps from non-Windows platforms using Angular 7 with Electron.
Prerequisites
- Node
- Npm
- Angular CLI
- TypeScript
- Visual Studio Code
- Electron
- Electron Packager
Description
We can create desktop applications with JavaScript by providing a Node.js runtime with native operating system APIs with the help of Electron. Electron implements web pages as its GUI which is controlled by JavaScript. Electron application is a Node.js application.
Note
Before going through this session, please visit my previous sessions related to Angular 7 application.
- Set Up ⚙️ Angular 7 Beta On Windows, Linux, And Mac 💻
- Steps To Add 🔗 ngx-bootstrap In Angular 7 (Beta)
These are the steps to be followed for setting up Electron and then to create an Angular 7 desktop app with Electron Packager.
Step 1
We should install Electron. The recommended way to install it is as a development dependency in your app, which allows us to implement on various apps with different Electron versions. To do so, run the following command from your app's directory.
npm install --save-dev electron
Then, after successful installation of Electron, we can see the Electron version, as shown below.
Step 2
Then, let us create a JavaScript file called "main.js" file, as shown below.
Next, we should put some code here to create a Windows app and handle all the system events of your application. We can see the code described in the comments.
- const { app, BrowserWindow } = require('electron')
- // Keep a global reference of the window object, if you don't, the window will
- // be closed automatically when the JavaScript object is garbage collected.
- let win
- function createWindow () {
- // Create the browser window.
- win = new BrowserWindow({ width: 800, height: 600 })
- // and load the index.html of the app.
- win.loadFile('dist/angular7app/index.html')
- // Open the DevTools.
- win.webContents.openDevTools()
- // Emitted when the window is closed.
- win.on('closed', () => {
- // Dereference the window object, usually you would store windows
- // in an array if your app supports multi windows, this is the time
- // when you should delete the corresponding element.
- win = null
- })
- }
- // This method will be called when Electron has finished
- // initialization and is ready to create browser windows.
- // Some APIs can only be used after this event occurs.
- app.on('ready', createWindow)
- // Quit when all windows are closed.
- app.on('window-all-closed', () => {
- // On macOS it is common for applications and their menu bar
- // to stay active until the user quits explicitly with Cmd + Q
- if (process.platform !== 'darwin') {
- app.quit()
- }
- })
- app.on('activate', () => {
- // On macOS it's common to re-create a window in the app when the
- // dock icon is clicked and there are no other windows open.
- if (win === null) {
- createWindow()
- }
- })
- // In this file, you can include the rest of your app's specific main process
- // code. You can also put them in separate files and require them here.
aruldass arulananduPosted Jun 30, 2020, 9:05 PM
Thanks.. it's woking for me..
Sachin SboaPosted Jul 27, 2019, 11:45 AM
Fantastic one.....
varun khambraPosted May 10, 2019, 9:00 AM
Thanks it was a great help
Rushi MehtaPosted Feb 25, 2019, 5:41 AM
Not getting exactly how to execute..
Rajesh SubbiahPosted Feb 25, 2019, 5:06 AM
Put detailed steps
Rajesh SubbiahPosted Feb 25, 2019, 5:06 AM
No Clear sir