Usando Electron JS, podemos convertir nuestro proyecto angular existente en una aplicación de escritorio muy fácilmente. En esta publicación, crearemos un proyecto Angular de muestra y lo convertiremos en una aplicación de escritorio paso a paso.
requisitos previos:
- NPM debe estar instalado
Configuración del entorno:
- Instalar CLI angular:
npm install -g @angular/cli
- Cree un nuevo proyecto angular. Aquí el nombre de nuestro proyecto es » electron-sample «:
ng new electron-sample cd electron-sample
- Ahora ejecute el proyecto y abra http://localhost:4200 para verificar si la instalación fue exitosa o no.
ng serve -o
- Instale Electron JS como una dependencia de desarrollo:
npm install electron --save-dev
- También necesitamos un paquete llamado electron-packager . Este paquete incluirá nuestra aplicación y producirá los archivos de la aplicación de escritorio. Instalarlo globalmente:
npm install -g electron-packager
Ejemplo: en el directorio raíz, cree un archivo main.js que será el punto de entrada para el electrón. Agregue el siguiente código dentro de main.js :
Javascript
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");
let win;
function createWindow() {
win = new BrowserWindow({ width: 700, height: 700 });
// load the dist folder from Angular
win.loadURL(
url.format({
// compiled version of our app
pathname: path.join(__dirname, '/dist/index.html'),
protocol: "file:",
slashes: true
})
);
win.on("closed", () => {
win = null;
});
}
app.on("ready", createWindow);
// If you are using MACOS, we have to quit the app manually
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
En el código anterior, simplemente abrimos la versión completa de nuestra aplicación Angular que está presente en el directorio dist/ . Tenga en cuenta que hemos proporcionado la carpeta dist directamente para que este código funcione en cualquier aplicación. Pero el archivo index.html se encuentra en un subdirectorio. Por lo tanto, en angular.json , cambie el valor en la clave outputPath de la siguiente manera.
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
// Make changes in this line
"outputPath": "dist",
"index": "src/index.html",
....
Esto guardará los archivos compilados en la carpeta dist en lugar de un subdirectorio. En src/index.html, cambie la línea <base href=”/”> a <base href=”./”> de la siguiente manera.
<head> <meta charset="utf-8"> <title>ElectronSample</title> <base href="./"> <!-- Change this line --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head>
Ahora, en package.json , tenemos que agregar algunos comandos para el desarrollo y prueba de nuestra aplicación, así como señalar el punto de inicio de la aplicación electrónica. Agregue las siguientes líneas en package.json.
{
"name": "electron-sample",
"version": "0.0.0",
// This line will provide an entry
// point for the electron app
"main": "main.js",
"scripts": {
// Runs the app after compilation
"electron": "electron .",
// Compiles and runs the app
"electron-build": "ng build --prod && electron .",
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
...
...
Ahora podemos probar la aplicación ejecutándola/
npm run electron-build
Tenga en cuenta que podemos ejecutar los comandos directamente si hubiéramos instalado electron globalmente. Debería ver el siguiente resultado:
Producción:
Para la aplicación compilada, podemos ejecutar la aplicación directamente usando
npm run electron
Cuando hayamos creado la aplicación final, podemos generar los archivos compilados que se pueden usar directamente en nuestro sistema sin instalar la dependencia. El módulo de empaquetador de electrones nos ayuda a construir los binarios.
electron-packager . --platform=linux
Aquí podemos elegir nuestra plataforma entre darwin, Linux, Mac y win32 . Ejecutar el comando anterior creará una nueva carpeta con la aplicación y el nombre del sistema operativo. En este directorio abre la terminal:
sudo chmod +x electron-sample ./electron-sample
Esto abrirá la aplicación y debería ver el siguiente resultado:
Producción:
Publicación traducida automáticamente
Artículo escrito por mukulbindal170299 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA