Electron le permite crear aplicaciones de escritorio para Windows, Mac y Linux. Cuando crea una aplicación con Electron, puede obtener una vista previa y ejecutar la aplicación a través de una ventana de aplicación de escritorio.

Puede usar Electron para configurar una aplicación Angular para que se inicie en una ventana de escritorio, en lugar del navegador web habitual. Puede hacerlo usando un archivo JavaScript dentro de la propia aplicación.

Una vez que configure Electron, puede continuar con el desarrollo como lo haría en una aplicación Angular normal. Las partes principales de la aplicación seguirán la misma estructura Angular estándar.

Cómo instalar Electron como parte de su aplicación

Para usar Electron, debe descargar e instalar node.js y usar npm install para agregar Electron a su aplicación.

  1. Descargar e instalar nodo.js. Puede confirmar que lo ha instalado correctamente comprobando la versión:
    nodo -v
    El nodo también incluye npm, el administrador de paquetes de JavaScript. Puede confirmar que tiene instalado npm comprobando la versión de npm:
    npm-v
    2. instagram viewer
  2. Cree una nueva aplicación Angular usando el nuevo dominio. Esto creará una carpeta que contiene todo lo necesario archivos requeridos para un proyecto Angular trabajar.
    ng nuevo aplicación de electrones
  3. En la carpeta raíz de su aplicación, use npm para instalar Electron.
    npm Instalar en pc--save-dev electrón
  4. Esto creará una nueva carpeta para Electron en la carpeta node_modules de la aplicación.
  5. También puede instalar Electron globalmente en su computadora.
    npm Instalar en pc -g electrón

La estructura de archivos de la aplicación de electrones angulares

Electron requerirá un archivo JavaScript principal para crear y administrar la ventana del escritorio. Esta ventana mostrará el contenido de su aplicación dentro de ella. El archivo JavaScript también contendrá otros eventos que pueden ocurrir, como si el usuario cierra la ventana.

En tiempo de ejecución, el contenido que se muestra provendrá del archivo index.html. De forma predeterminada, puede encontrar el archivo index.html dentro del origen carpeta, y en tiempo de ejecución se crea automáticamente una copia integrada dentro del dist carpeta.

El archivo index.html generalmente se ve así:

<!doctype html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="utf-8">
<título> ElectronApp </title>
<base href="./">
<metanombre="mirador" contenido="ancho = ancho del dispositivo, escala inicial = 1">
<enlace rel="icono" tipo ="imagen/icono x" href="favicon.ico">
</head>
<cuerpo>
<raíz de la aplicación></app-root>
</body>
</html>

Dentro de la etiqueta del cuerpo hay un etiqueta. Esto mostrará el componente principal de la aplicación para la aplicación Angular. Puede encontrar el componente principal de la aplicación en el origen/aplicación carpeta.

Cómo usar Electron para abrir una aplicación angular en una ventana de escritorio

Cree el archivo main.js y configúrelo para abrir el contenido de la aplicación dentro de una ventana del escritorio.

  1. Cree un archivo en la raíz de su proyecto llamado principal.js. En este archivo, inicialice Electron para que pueda usarlo para crear la ventana de la aplicación.
    constante {aplicación, ventana del navegador} = requerir('electrón');
  2. Cree una nueva ventana de escritorio de cierto ancho y alto. Cargue el archivo de índice como contenido para mostrar en la ventana. Asegúrese de que la ruta al archivo de índice coincida con el nombre de su aplicación. Por ejemplo, si nombró a su aplicación "electron-app", la ruta será "dist/electron-app/index.html".
    funciónCrear ventana() {
     ganar = nuevo ventana del navegador ({ancho: 800, altura: 800});
     ganar.loadFile('dist/electron-app/index.html');
    }
  3. Cuando la aplicación esté lista, llama a la función createWindow(). Esto creará la ventana de la aplicación para su aplicación.
    aplicación.cuandoListo().entonces(() => {
     crearVentana()
    })
  4. En el src/index.html archivo, en el base etiqueta, cambie el atributo href a "./".
    <base href="./">
  5. En paquete.json, Agrega un principal e incluya el archivo main.js como valor. Este será el punto de entrada para la aplicación, de modo que la aplicación ejecute el archivo main.js cuando inicie la aplicación.
    {
    "nombre": "aplicación de electrones",
    "versión": "0.0.0",
    "principal": "principal.js",
     ...
    }
  6. En el .browserslistrc archivo, modifique la lista para eliminar las versiones de safari de iOS 15.2-15.3. Esto evitará que se muestren errores de compatibilidad en la consola al compilar.
    última 1 versión de Chrome
    última 1 versión de Firefox
    últimas 2 versiones principales de Edge
    últimas 2 versiones principales de Safari
    últimas 2 versiones principales de iOS
    ESR de Firefox
    noios_saf 15.2-15.3
    nosafari 15.2-15.3
  7. Eliminar el contenido predeterminado en el src/app/app.component.html expediente. Reemplácelo con algún contenido nuevo.
    <clase div="contenido">
    <clase div="tarjeta">
    <h2> Hogar </h2>
    <pags>
     ¡Bienvenido a mi aplicación Angular Electron!
    </pags>
    </div>
    </div>
  8. Agregue algo de estilo para el contenido en el src/app/app.component.css expediente.
    .contenido {
     altura de línea: 2rem;
    tamaño de fuente: 1.2em;
     margen: 48px 10%;
     familia tipográfica: Arial, sans-serif
    }
    .tarjeta {
    sombra de la caja: 0 4píxeles 8píxeles 0 rgb(0, 0, 0, 0.2);
     ancho: 85%;
     relleno: 16px 48px;
     margen: 24px 0px;
     color de fondo: humo blanco;
     familia tipográfica: sans-serif;
    }
  9. Agregue un poco de estilo general a la src/estilos.css para eliminar los márgenes y rellenos predeterminados.
    html {
     margen: 0;
     relleno: 0;
    }

Cómo ejecutar una aplicación electrónica

Para ejecutar su aplicación en una ventana, configure un comando en la matriz de scripts de package.json. Luego, ejecute su aplicación usando el comando en la terminal.

  1. En paquete.json, dentro de la matriz de scripts, agregue un comando para compilar la aplicación Angular y ejecutar Electron. Asegúrese de agregar una coma después de la entrada anterior en la matriz Scripts.
    "guiones": {
     ...
    "electrón": "construir && electrón"
    },
  2. Para ejecutar su nueva aplicación Angular en una ventana de escritorio, ejecute lo siguiente en la línea de comando, en la carpeta raíz de su proyecto:
    npm ejecutar electrones
  3. Espere a que su aplicación se compile. Una vez completada, en lugar de abrir su aplicación Angular en el navegador web, se abrirá una ventana de escritorio. La ventana del escritorio mostrará el contenido de su aplicación Angular.
  4. Si aún desea ver su aplicación en el navegador web, aún puede ejecutar el comando ng serve.
    ng servir
  5. Si está utilizando el ng servir comando, el contenido de su aplicación aún se mostrará en un navegador web en servidor local: 4200.

Creación de aplicaciones de escritorio con Electron

Puede usar Electron para crear aplicaciones de escritorio en Windows, Mac y Linux. De manera predeterminada, puede probar una aplicación Angular usando un navegador web a través del comando ng serve. Puede configurar su aplicación Angular para que también se abra en una ventana de escritorio en lugar de un navegador web.

Puede hacer esto usando un archivo JavaScript. También deberá configurar sus archivos index.html y package.json. La aplicación general seguirá la misma estructura que una aplicación Angular regular.

Si desea obtener más información sobre cómo crear aplicaciones de escritorio, también puede explorar las aplicaciones de Windows Forms. Las aplicaciones de Windows Forms le permiten hacer clic y arrastrar elementos de la interfaz de usuario a un lienzo y, al mismo tiempo, agregar cualquier lógica de codificación a los archivos de C#.