electron with angular desktop application

electron + angular-6 boilerplate

create native window

first we need to install node latest version, git cli. we are going to use electron angular6 pre coded boilerplate from github https://github.com/maximegris/angular-electron . you can download and extract to your project folder or use git clone method.

Bootstrap and package your project with Angular 6(+) and Electron (Typescript + SASS + Hot Reload) for creating Desktop applications.

after clone the repo, open the the project from your favourite code editor. i’m using vs code. open the console and install the dependencies as follows npm install

{
  "name": "tryndev angular-electron",
  "version": "4.1.0",
  "description": "Angular 6 with Electron (Typescript + SASS + Hot Reload)",
  "homepage": "https://github.com/maximegris/angular-electron",
  "author": kushan,
  "keywords": [
    "angular",
    "angular 6",
    "electron",
    "typescript",
    "sass"
  ],
  "main": "main.js",
  "private": true,
  "scripts": {
    "postinstall": "npm run postinstall:electron && npx electron-builder install-app-deps",
    "postinstall:web": "node postinstall-web",
    "postinstall:electron": "node postinstall",
    "ng": "ng",
    "start": "npm run postinstall:electron && npm-run-all -p ng:serve electron:serve",
    "build": "npm run postinstall:electron && npm run electron:tsc && ng build",
    "build:dev": "npm run build -- -c dev",
    "build:prod": "npm run build -- -c production",
    "ng:serve": "ng serve",
    "ng:serve:web": "npm run postinstall:web && ng serve -o",
    "electron:tsc": "tsc main.ts",
    "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:tsc && electron . --serve",
    "electron:local": "npm run build:prod && electron .",
    "electron:linux": "npm run build:prod && npx electron-builder build --linux",
    "electron:windows": "npm run build:prod && npx electron-builder build --windows",
    "electron:mac": "npm run build:prod && npx electron-builder build --mac",
    "test": "npm run postinstall:web && ng test",
    "e2e": "npm run postinstall:web && ng e2e"
  },
  "dependencies": {},
  "devDependencies": {
    "@angular-devkit/build-angular": "0.6.3",
    "@angular/cli": "6.0.5",
    "@angular/common": "6.0.5",
    "@angular/compiler": "6.0.5",
    "@angular/compiler-cli": "6.0.5",
    "@angular/core": "6.0.5",
    "@angular/forms": "6.0.5",
    "@angular/http": "6.0.5",
    "@angular/language-service": "6.0.5",
    "@angular/platform-browser": "6.0.5",
    "@angular/platform-browser-dynamic": "6.0.5",
    "@angular/router": "6.0.5",
    "@ngx-translate/core": "10.0.1",
    "@ngx-translate/http-loader": "3.0.1",
    "@types/jasmine": "2.8.7",
    "@types/jasminewd2": "2.0.3",
    "@types/node": "8.9.4",
    "codelyzer": "4.2.1",
    "core-js": "2.5.6",
    "electron": "2.0.3",
    "electron-builder": "20.14.7",
    "electron-reload": "1.2.2",
    "jasmine-core": "3.1.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "2.0.2",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.0",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "1.1.0",
    "npm-run-all": "4.1.3",
    "npx": "10.2.0",
    "protractor": "5.3.2",
    "rxjs": "6.1.0",
    "ts-node": "6.0.3",
    "tslint": "5.10.0",
    "typescript": "2.7.2",
    "wait-on": "2.1.0",
    "webdriver-manager": "12.0.6",
    "zone.js": "0.8.26"
  }
}

f you want to generate Angular components with Angular-cli , you MUST install @angular/cli in npm global context.
Please follow Angular-cli documentation if you had installed a previous version of angular-cli.
npm install -g @angular/cli

To build for development

in a terminal window -> npm start
yeah we done.. you can see the development window loaded.

now open the main.ts file and change following to open the window as our dimension size.i’m using following sizes and frame: false to remove default window frame.

  win = new BrowserWindow({
    x: 0,
    y: 0,
    width: 550,
    height: 300,
    frame: false
  });

now we have to create our own window header as we want. now we are going to care about src/app/components edit home.component.html file and add following html code

<div class="container">
 <header>
   <strong>Tryndev</strong>
   <nav>
    <ul>
      <li><img src="./assets/minimize.svg" id="min" (click)="minimizeWindow()" ></li>
      <li><img src="./assets/close.svg" (click)="closeWindow()"></li>
    </ul>
  </nav>
 </header>

</div>

also add the following css code to the home.component.scss

.container {
 display: grid;
 grid-template-rows: 34px auto auto;

 header {
   display: grid;
   grid-template-columns: 80% auto;
   background-color: #456;

   strong {
     -webkit-app-region: drag;
     color: white;
    margin: 6px;
   }
   nav {
     justify-self: right;
     ul {
      list-style-type: none;
      margin: 0;
      padding: 0;

      li {
        float: left;
        margin-left: 0px;
        padding: 6px;
        img {
          width: 12px;
          cursor: pointer;
        }
      }
     }
   }
 }
}

now our window look and feel ok. we need to add event minimize window and close window.following js update as following in home.component.ts

import { Component, OnInit } from '@angular/core';
import { ElectronService } from '../../providers/electron.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private electron: ElectronService) {}

  ngOnInit() {
  }

  closeWindow() {
    this.electron.window.close();
  }
  minimizeWindow() {
    this.electron.window.minimize();
  } 
  
}

by kushan


Leave a Reply

avatar
  Subscribe  
Notify of