Pantalla en blanco al navegar por rutas angulares dentro de la aplicación Electron

Actualmente estoy escribiendo una aplicación híbrida de escritorio con integración de Electron con AngularJS para enrutamiento, etc., consulte la siguiente configuración angular:

app.config(function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: 'partials/dashboard.html', controller: 'dashboardController' }) .when('/sites', { templateUrl: 'partials/sites.html', controller: 'sitesController' }) .when('/sites/:site', { templateUrl: 'partials/site.html', controller: 'siteController' }) .when('/sites/:site/content', { templateUrl: 'partials/site_content.html', controller: 'contentController' }) .when('/sites/:site/content/create', { templateUrl: 'partials/site_content_create.html', controller: 'createController' }) .when('/sites/:site/content/:contentId/edit', { templateUrl: 'partials/site_content_edit.html', controller: 'editController' }) .when('/user', { templateUrl: 'patials/user.html', controller: 'userController' }) .when('/user/edit', { templateUrl: 'partials/user_edit.html', controller: 'userEditController' }) .when('/login', { templateUrl: 'partials/login.html', controller: 'loginController' }) .when('/register', { templateUrl: 'partials/register.html', controller: 'registerController' }); $routeProvider.otherwise({ redirectTo: '/' }); 

});

La aplicación se carga bien, y el ‘dashboard.html’ inicial se inyecta en ng-view perfectamente bien.

El problema surge cuando hago clic en una etiqueta para cargar en otra vista, como sites.html, por ejemplo. Obtengo una pantalla blanca completa sin errores en la consola, ni errores provenientes de node.js.

Me pregunto si este es un problema conocido o si he hecho algo mal en mi configuración.

Encontré esto recientemente y pensé que la respuesta aceptada era demasiado complicada. Simplemente modificar

 href="#/about" to href="#!/about" 

y todo funciona como se espera.

Esto se debe a un cambio en AngularJS no Electron. Otra solución si no desea incluir el #! es modificar el hashPrfix en app.config agregando esto

 $locationProvider.hashPrefix(''); 

Aquí hay un enlace a los documentos angulares para referencia.

Espero que esto le salve a alguien más un dolor de cabeza.

He logrado superar este problema, por fin.

Al final, parece que fue causado por el hecho de que AngularJS fuera un poco “gracioso” sobre el funcionamiento correcto solo cuando lo servía un servidor web.

Teniendo eso en cuenta, he implementado un servidor Express en un puerto específico durante la fase de ‘crear ventana’ de mi aplicación electrónica. Luego apunto la ventana a la URL localhost, que ahora es técnicamente una aplicación rápida que se ejecuta dentro de una aplicación electrónica, que ejecuta AngularJS.

Me confundió por un tiempo poner la configuración en línea, pero ahora parece estar funcionando perfectamente y muy rápido, también.

EDIT: ¡Aquí está el código para eso!

main.js:

 const electron = require('electron'); const server = require("./server"); const sqlite3 = require('sqlite3'); // Module to control application life. const app = electron.app; // Module to create native browser window. const BrowserWindow = electron.BrowserWindow; // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let mainWindow; function createWindow () { // Create the browser window. mainWindow = new BrowserWindow({width: 1000, height: 700}); // and load the index.html of the app. //mainWindow.loadURL(`file://${__dirname}/index.html`); mainWindow.loadURL(`http://localhost:3333`); // Open the DevTools. mainWindow.webContents.openDevTools(); // Emitted when the window is closed. mainWindow.on('closed', function () { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. mainWindow = null }) } // 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. app.on('ready', createWindow); // Quit when all windows are closed. app.on('window-all-closed', function () { // On OS X 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', function () { // On OS X 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 (mainWindow === null) { createWindow() } }); process.on('uncaughtException', function (err) { console.log(err); }); // 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. 

server.js:

 var path = require('path'); var express = require('express'); var app = express(); app.use(express.static(__dirname)); app.get('/', function (req, res) { res.sendfile(__dirname + 'index.html'); }); app.listen(3333);