0

I have a problem developing (creating the environment of) a desktop application using Electron and Angular. This app, at some point, has to fire a showOpenDialog which is specific to Electron in order to select a directory from the File System. Let's say I have the following angular component: 

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <button (click)="openDirectory()">Open directory</button>
        <p> {{selectedDirectory}} </p>
    `
})

export class AppComponent {

    selectedDirectory: string = "None";
    openDirectory() {
        // Here I need to call the 'showOpenDialog' from electron
        // and update the selectedDirectory property
    }

}

... but calling showOpenDialog in openDirectory won't work and it will return a compilation error because Angular doesn't have a clue who showOpenDialog really is. In a tipical Electron application you will write something like: 

const {dialog} = require('electron').remote;

var path = dialog.showOpenDialog({
    properties: ['openDirectory']
});

Now I have to build the Angular project, modify the bundle.js file and finally add the electron functionalities like showOpenDialog and so on. After that I need to copy the distribution files into Electron project. I know, this is a really mess.
Q: What would be a better way to develop this kind of application? Like both Angular and Electron environments in the same project.

Dani Grosu
  • 544
  • 1
  • 4
  • 22

1 Answers1

1

You simply need to install electron (and its types) within your angular app, then import your dependency

Installation:

npm install electron @types/electron

usage: 

import { remote } from 'electron';


openDirectory() {
    remote.showOpenDialog();
}
Deblaton Jean-Philippe
  • 11,188
  • 3
  • 49
  • 66