Integrar Angular 7 con ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

Electron se puede combinar con varios marcos potentes como Angular 4+ , AngularJS 1.x , React , etc. para crear aplicaciones complejas y proporcionar una funcionalidad mejorada. Electron en esencia es una aplicación NodeJS que puede interactuar con el entorno del sistema operativo nativo. Con la integración de NodeJS podemos acceder a varias API de bajo nivel que, de otro modo, no serían accesibles en un entorno de Sandbox Browser. Con la integración angular, obtenemos acceso a varias ventajas y características, como la arquitectura MVC (Model-View-Controller), módulos y directivas personalizadas. Este tutorial demostrará cómo integrar Angular 7 con ElectronJS y también acceder a las API de Electron desde Angular.

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron y Angular funcionen, node y npm deben estar preinstalados en el sistema.

Nota: este tutorial también es aplicable para trabajar con versiones de Angular 5+.

Ejemplo: siga los pasos dados para integrar Angular 7 con Electron.

Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando,
```
npm install -g @angular/cli
```
Para instalar Angular CLI globalmente. La herramienta Angular CLI se usa para crear proyectos, realizar tareas como pruebas e implementación, y generar varios componentes del código. Cree un nuevo proyecto Angular ejecutando el siguiente comando y proporcione el nombre del proyecto que elija,
```
ng new ang-electron
```
Este comando le solicita que proporcione información sobre las características que se incluirán en el proyecto. Elija el apropiado presionando la tecla Enter .

Esto también instalará las dependencias angulares requeridas y los paquetes en node_modules . Una vez hecho esto, instale Electron usando npm y guárdelo como una dependencia de desarrollo.
```
npm install electron --save-dev
```
En este punto, la aplicación Angular está lista y se puede servir localmente. Para servir la aplicación en localhost, ejecute los siguientes comandos,
```
cd ang-electron
ng serve
```

Paso 2: Conectaremos ambos marcos a través de un código para iniciar la aplicación Electron y hacer que use Angular. Como con cualquier proyecto de Electron, necesitamos crear un punto de entrada a la aplicación. Cree el archivo main.js en nuestra carpeta de proyecto base. Este archivo será nuestro punto de entrada a la aplicación.

principal.js:

const { app, BrowserWindow } = require('electron')
  
function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  
  // Load the index.html of the app
  // From the dist folder which is created 
  // After running the build command
  win.loadFile('dist/ang-electron/index.html')
  
  // Open the DevTools.
  win.webContents.openDevTools()
}
  
// 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.
// This method is equivalent to 'app.on('ready', function())'
app.whenReady().then(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 (BrowserWindow.getAllWindows().length === 0) {
    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.

Para obtener el código estándar del archivo main.js , consulte este vínculo . Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto. Una vez que ejecutamos el comando de compilación, creará una distribución de nuestro proyecto angular en la carpeta dist . Vamos a referir el archivo index.html de esta carpeta.

Paso 3: Se requiere un pequeño cambio en el archivo index.html ubicado en la carpeta src . Reemplace el siguiente código.
```
<base href="/">
```
con
```
&lt'base href="./">
```
Este cambio es importante; de lo contrario, no podrá encontrar ni consultar los archivos necesarios para ejecutar la aplicación desde la carpeta dist . También debemos realizar algunos cambios en el archivo package.json .

paquete.json:
```
{
  "name": "ang-electron",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "ng build && electron ."
  },
// ...
```
Hemos especificado el archivo main.js según lo requiera Electron. También hemos introducido un nuevo comando electrónico personalizado en la etiqueta de secuencias de comandos para crear y ejecutar la aplicación. El comando ng build se usa para compilar la aplicación Angular e implementar los artefactos de compilación. Escribe artefactos de compilación generados en la carpeta de salida. De forma predeterminada, la carpeta de salida es dist/ .

Salida: Una vez realizados los cambios respectivos, estamos listos para lanzar la aplicación Electron. Para iniciar la aplicación, ejecute el comando,
```
npm run electron
```

Paso 4: En este punto, hemos integrado con éxito Angular con Electron. Para usar las API de Electron dentro de Angular, podemos seguir cualquiera de los dos enfoques:

Enfoque 1: uso de un paquete externo para acceder a las API de Electron. Usaremos el paquete ngx-electron npm para este propósito. Podemos usar este paquete como un servicio angular simple para acceder a las API de Electron. Para obtener información más detallada, consulte este enlace . Para instalar este paquete, ejecute el siguiente comando:

npm install ngx-electron --save

Una vez que se haya instalado correctamente, lo importaremos en nuestro archivo app.module.ts para que se use en toda la aplicación.

aplicación.módulo.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxElectronModule } from 'ngx-electron';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxElectronModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Para obtener la lista de las API de Electron compatibles con este paquete, consulte https://www.npmjs.com/package/ngx-electron#properties . Usaremos la API de shell Electron del paquete ngx-electron .

aplicación.componente.html:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
  
<button (click)="openWindow()">
   Click here to Access GeeksForGeeks
</button>
  
<router-outlet></router-outlet>

El botón Haga clic aquí para acceder a GeeksForGeeks no tiene ninguna funcionalidad asociada. Para cambiar esto, realice los siguientes cambios en el archivo app.component.ts .

aplicación.componente.ts:

import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ang-electron';
  
  constructor(private electronService: ElectronService) {}
  
  openWindow() {
    // Accessing the Shell API from ngx-electron 
    this.electronService
          .shell.openExternal('https://www.geeksforgeeks.org/');
  }
}

Expone todas las ElectronServiceAPI de Electron accesibles desde dentro del proceso Renderer . Crearemos una Instancia de ElectronService en el constructor a través de Inyección de Dependencia .

Producción:

Enfoque 2: mediante la creación de un componente de servicio de Electron y compartiéndolo en la aplicación para usar las API de Electron. Generaremos el Servicio Electron ejecutando el siguiente comando CLI:

ng generate service elec --skipTests=true

El –skipTests=true no crea los archivos de prueba spec.ts para nuevos servicios. Este comando generará un nuevo archivo elec.service.ts dentro de la carpeta src/app . En este archivo, declararemos y agregaremos todas las importaciones de electrones que luego se pueden usar en toda la aplicación. Usaremos la API de shell de Electron del proceso principal .

servicio.elec.ts:

import { Injectable } from '@angular/core';
import { shell } from 'electron';
  
@Injectable({
  providedIn: 'root'
})
export class ElecService {
  shell: typeof shell;
  
  constructor() { 
    this.shell = (<any>window).require("electron").shell;
  }
}

La palabra clave any es para la aserción de tipo en el objeto de la ventana . La conversión de este objeto usando anyindica que el compilador ya no lo vincula a las propiedades predeterminadas del objeto de ventana . Esto se usa para evitar errores de tipo en tiempo de compilación cuando se usan módulos Electron. Si se ignora la conversión de tipo en el objeto de Windows , recibiremos el siguiente error:

ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs'

El operador typeof devuelve el tipo de datos de su operando en forma de string. En este caso, el operando es el módulo shell de Electron. El uso de este enfoque nos da acceso a todas las API de Electron en toda la aplicación. Para usar este servicio, agregue lo siguiente al archivo app.component.ts .

aplicación.componente.ts:

import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';
import { ElecService } from '../app/elec.service';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ang-electron';
    
  // Creating Instances through Dependency Injection
  constructor(private electronService: ElectronService,  
              private elecService: ElecService) {}
  
  openWindow() {
    // Accessing the Shell API from ngx-electron 
    // this.electronService
    // .shell.openExternal('https://www.geeksforgeeks.org/');
      
    // Accessing the Shell API from ElecService
    this.elecService.shell
             .openExternal('https://www.geeksforgeeks.org/');
  }
}

Producción:

Publicación traducida automáticamente

Artículo escrito por radheshkhanna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta