MANUAL ELECTRÓN CON ANGULAR

Instalamos angular-cli
npm install -g @angular/cli

Creamos nuestro proyecto de angular con el comando

ng new angular-electron

Instalamos electrón en nuestro proyecto

npm i -D electron

Agregamos los types de electrón para no tener problemas con los typescript
de angular.
npm i -D @types/electron

Creamos una carpeta llamada electrón en nuestro directorio raíz, y dentro

creamos una carpeta llamada main.ts, que es donde tendremos toda la
lógica de electrón, dentro de este mismo directorio creamos un archivo
llamado tsconfig.json con el siguiente contenido.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist",
"sourceMap": true,
"declaration": false,
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom"]
}
}
Dentro de nuestro archivo main.ts de la carpeta de electrón podremos el
siguiente contenido.
import { app, BrowserWindow, ipcMain } from "electron";
import * as path from "path";
import * as url from "url";
import * as fs from "fs";

let win: BrowserWindow;

app.on("ready", createWindow);

app.on("activate", () => {
if (win === null) {
createWindow();
}
});

function createWindow() {
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: { nodeIntegration: true }
});

win.loadURL(
url.format({
pathname: path.join(__dirname, `/../../dist/angular-
electron/index.html`),
protocol: "file:",
slashes: true
})
);

win.webContents.openDevTools();

win.on("closed", () => {
win = null;
});
}

ipcMain.on("getFiles", (event, arg) => {

const files = fs.readdirSync(__dirname);
win.webContents.send("getFilesResponse", files);
});
Modificamos nuestro package.json, para poder crear nuestra aplicación de
electrón y poder correrla, además de compilar todo los .ts de nuestra
aplicación.
{
"name": "angular-electron",
"version": "0.0.0",
"main": "electron/dist/main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "ng build --base-href ./ && tsc --p electron && electron ."
},

Con este comando lo corremos para observar nuestro trabajo

"electron": "ng build --base-href ./ && tsc --p electron && electron ."

Con este comando lo compilamos en un .exe

"electron": "ng build --base-href ./ && tsc --p electron && build"