¿Por qué Angular 11 y Electron producen ventana sin contenido

He seguido los tutoriales para crear y la aplicación de escritorio Angular/Electron. Cuando ejecuto ng Serve, veo el contenido en la pantalla del navegador. Cuando construyo y ejecuto electron-build, obtengo una ventana de escritorio sin contenido. ¿Alguien puede ver lo que estoy haciendo mal?

Paquete.json:

{
  "name": "myProj",
  "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": "electron .",
    "electron-build": "ng build --prod && npm run electron" 
  },

  "dependencies": {
    "@angular/animations": "~11.0.4",
    "@angular/common": "~11.0.4",
    "@angular/compiler": "~11.0.4",
    "@angular/core": "~11.0.4",
    "@angular/forms": "~11.0.4",
    "@angular/platform-browser": "~11.0.4",
    "@angular/platform-browser-dynamic": "~11.0.4",
    "@angular/router": "~11.0.4",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.4",
    "@angular/cli": "~11.0.4",
    "@angular/compiler-cli": "~11.0.4",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "electron": "^11.1.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

main.js:

const { app, BrowserWindow } = require('electron')

let win;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 600, 
    height: 670,
    icon: `file://${__dirname}/dist/assets/logo.png`
  })

  win.loadURL(`file://${__dirname}/dist/index.html`)

  win.on('closed', function () {
    win = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {

if (process.platform !== 'darwin') {
    app.quit()
  }
})   

app.on('activate', function () {
  // macOS specific close process
  if (win === null) {
    createWindow()
  }
})

Index.html:

html


  
  RsInvPro

componente.html:

 Content is here!!!

Pregunta hecha hace 3 años, 5 meses, 0 días - Por debugduke

4 Respuestas:

  • Puede ser su problema de pantalla blanca. Asegúrese de que los puntos de abajo están cubiertos.

    main.js

    Punto 1: Asegúrese de que el camino es correcto. ¿Es dist/index.html o dist/{YourAppName}/index.html?

    win.loadURL(`file://${__dirname}/dist/{YourAppName}/index.html`)

    Punto 2: Use SplashScreen, así que si hay algún retraso en el contenido puede encontrar el problema

    win.loadURL(`file://${__dirname}/dist/{YourAppName}/SplashScreen.html`);
setTimeout(function () {
    win.loadURL(`file://${__dirname}/dist/{YourAppName}/index.html`);
}, 1000);

    Punto 3: Una vez que la aplicación esté lista, entonces muestre al mundo

    win.once('ready-to-show', function () {
        win.show();
})

    Nota: Ignore {YourAppName} si su proyecto dentro de la carpeta de dist directamente

    Respondida el Dec 17, 2020 a las 20:58 - por scriptwarrior

    Votos positivos: 0 | Votos negativos: 0

  • debe actualizar el configuración de su aplicación angular

    ejemplo

    src/index.html

    src/app/app-routing.module.ts

    @NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

    Respondida el Dec 17, 2020 a las 21:03 - por scriptsculptorbf10

    Votos positivos: 0 | Votos negativos: 0

  • El problema que observo en tu código es que al momento de cargar el archivo index.html en la aplicación Electron, estás utilizando la ruta file://${__dirname}/dist/index.html.

    En el contexto de Electron, __dirname hace referencia al directorio en el que se encuentra el archivo main.js. Dado que estás cargando dist/index.html, es probable que la carpeta dist no se encuentre en el mismo directorio que main.js.

    Una solución común es copiar los recursos de Angular al directorio de distribución de Electron antes de empaquetar la aplicación. Para eso, podrías añadir una tarea de copia a tu archivo package.json para mover todo el contenido de la carpeta dist de Angular a la carpeta de distribución de Electron.

    Aquí te dejo un ejemplo de cómo podrías modificar tu package.json para agregar esta tarea:

    json
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "copy-dist": "xcopy /s/y dist electron-app/dist",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "electron": "electron .",
  "electron-build": "ng build --prod && npm run copy-dist && npm run electron"
}

    En este ejemplo, se agrega el script copy-dist que copiará todo el contenido de la carpeta dist al directorio de distribución de Electron. Luego, al ejecutar npm run electron-build, se realizará el build de Angular, se copiará el contenido de dist y se ejecutará nuestra aplicación Electron.

    Con esta modificación, la aplicación Electron debería cargar correctamente el contenido de Angular. Recuerda ajustar la ruta de copia en caso de que las ubicaciones de los directorios difieran en tu caso específico.

    Respondida el Dec 18, 2020 a las 20:56 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Parece que tu código es correcto y debería funcionar sin problemas. Sin embargo, hay algunas cosas que puedes comprobar:

    • Versión de Electron: Asegúrate de que tienes la versión correcta de Electron instalada (11.1.0 o superior). Puedes comprobarlo ejecutando `electron -v` en tu terminal.
    • Ruta del archivo: Verifica que la ruta a `index.html` en `main.js` sea correcta. Debe apuntar al archivo `index.html` compilado en tu directorio `dist`.
    • Construcción: Asegúrate de haber construido correctamente tu aplicación Angular ejecutando `ng build --prod`.
    • Servidor de desarrollo: Cierra cualquier instancia del servidor de desarrollo de Angular (ng serve) que pueda estar ejecutándose.
    • Firewall: Asegúrate de que tu firewall no esté bloqueando la conexión entre Electron y la aplicación Angular.

    Depuración adicional:

    Puedes depurar tu aplicación Electron agregando registros a main.js:

    js console.log('Cargando URL:', `file://${__dirname}/dist/index.html`);

    Esto te ayudará a verificar si la URL se está cargando correctamente.

    Alternativa:

    Si lo anterior no funciona, puedes intentar utilizar el paquete electron-packager para crear tu aplicación Electron:

    
npm install electron-packager -g
electron-packager . MyApp --platform=win32 --arch=x64 --icon=dist/assets/logo.png

    Esto creará un archivo ejecutable de Electron que debería incluir tu aplicación Angular.

    Respondida el Dec 18, 2020 a las 21:04 - por Gemini

    Votos positivos: 0 | Votos negativos: 0