Loading Electron Modules in Angular 2 TypeScript Application

Question

My goal is to take Angular 2's 5 Minute Quickstart and turn it into an Electron app. Which I can do by adding "electron-prebuilt".

What I can't do is utilize any of Electron's extended captabilites - for example writing to the file system.

I can build and run "Electrogram", but when I try to utilize some of the basic functionality contained within it I get an error in the console of my Electron application:

Altered app.component.ts

import { Component } from '@angular/core';
import { remote, ipcRenderer } from 'electron';
import { writeFile } from 'fs';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1><button (click)="doSomething()">Do Something</button>'
})
export class AppComponent {

  doSomething() {
    writeFile("c:\temp\doSomething.txt", "some data");
  }
}

Error in DevTools Console

How can I configure the app to look for the Electron modules in their correct locations?

Answer 1

Due to differences between module loaders I've run into the same issue. I use different solutions based on how the app is being build.

Webpack:

Webpack bundles all modules and dependencies into a single resulting app.js (depending on config). In this case import { readFile } from 'fs', works fine. The demo app Electrogram is using webpack.

To me this is the most convenient and fastest way of building the app and the most performant at runtime.

SystemJs

In case SystemJS is used as module loader I have to use the following to load the FS module:

let remote = require('electron').remote;
let fs = remote.require('fs');
...
let data = fs.readFileSync(this.dbFilename);

Hope this helps.

(PS. Do I understand all of this? No, I don't...)