Cómo importar electron en angular 2 usando cli angular

Estoy intentando crear un prototipo de una aplicación Electron utilizando Angular 2 (configurado con el último cli angular basado en webpack) para la interfaz gráfica de usuario, pero estoy atascado porque no entiendo cómo importar Electron api en mis componentes angular2. Específicamente, quiero poder abrir un nuevo BrowserWindow al hacer clic en un botón en la interfaz de usuario … así que:

 

y en mi componente:

 openNewWindow() { let appWindow = new BrowserWindow({width: 800, height: 600}); appWindow.loadUrl('http://www.google.com'); } 

pero … ¿cómo puedo importar BrowserWindow?

Mediante el uso:

 import { BrowserWindow } from 'electron'; 

Recibo un “no hay error de módulo” y al responder a esta pregunta: Webpack no puede encontrar el módulo ‘electron’ que recibo:

 syntax error near unexpected token ( var electron = require('./') 

¿Qué tengo que hacer?

PD. ejecutando ” electron . ” sin la importación de BrowserWindow la aplicación funciona correctamente

Ejecute el comando npm install electron @types/electron Luego, impórtelo normalmente usando

import { ipcRenderer } from 'electron' .

Si tiene algún problema, intente ejecutar npm eject eject, se generará un webpack.config.js, agregue “target”: “electron-renderer” en la parte superior de module.exports

Establecer esto en index.html

  

Añadir esta línea en el archivo typings.d.ts

 declare var electron: any; 

Use dentro del componente como este ejemplo:

 const {ipcRenderer, clipboard} = electron; clipboard.writeText('Electron is ready!!'); 

Intenté trabajar con angular-cli y Electron y no pude hacer que trabajaran juntos. Es la razón por la que comencé el siguiente proyecto: https://github.com/osechet/angular-tour-of-heroes-webpack Integra Angular 2 con webpack y Electron. Está basado en el tutorial de Angular 2 (con pruebas unitarias). Cuando se ejecuta Electron en modo dev ( npm run start.desktop ), el servidor carga las fonts.

Para completar la respuesta dada por chaouechi souhail.

Según tengo entendido, su respuesta apunta a resolver la situación en la que la aplicación angular está directamente integrada en la aplicación electrónica. Si, por algún motivo, está utilizando dos proyectos separados, uno de ellos es la aplicación electrónica que integra el otro como aplicación web utilizando uno de los componentes de webview de electrón, también puede ser útil el siguiente enfoque.

  1. En tu aplicación electrónica tendrás algo como

  1. En tu proyecto angular tu

    1. Instalar el módulo electron nodejs, es decir, npm install electron . El módulo de tipos mencionado por chaouechi podría ser suficiente, no lo sé.
    2. Expulsas la configuración del webpack mediante ng eject eject.
    3. en la configuración de webpack.config.js ( webpack.config.js ) usted define electron como un módulo externo de tal manera que webpack no intente integrarlo en la aplicación ng, extienda las exportaciones de la siguiente manera

    module.exports = {// … externals: {electron: “require (‘electron’)”, // dice a webpack cómo importar el módulo de electron dentro de su aplicación angular después de ser empaquetado // …}, // …}

    1. Ahora, en sus componentes ng, debería ser posible incluir las clases de electrones de la siguiente manera: import { remote } from "electron";