Я хочу запустить приложение Angular с Electron на основе этого примера на моем Raspberry Pi. Приложение хорошо работает на моем P C с npm start
, но оно не может разрешить ресурсы на Pi.
Активы определены в файле theme.scss
в каталоге src/
:
$body-background-color: white;
$body-background-image: url("/assets/images/bg-hexa-gray-flat.png");
$body-background-position: top left;
$body-background-repeat: repeat;
$sidepanel-background-color: white;
$sidepanel-background-image: url("/assets/images/bg-hexa-red-flat.png");
$sidepanel-background-position: top left;
$sidepanel-background-repeat: repeat;
$sidepanel-logo: url("/assets/svg/logo.svg");
$sidepanel-logo-white: url("/assets/svg/white.svg");
, и этот файл импортируется в большинство моих компонентов.
Мой main.ts
файл:
import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';
let win: BrowserWindow = null;
const serve = process.argv.slice(1).some(val => val === '--serve');
const createWindow = async () => {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 480,
icon: path.join(__dirname, 'src/assets/images/icon.png'),
webPreferences: {
nodeIntegration: true,
allowRunningInsecureContent: (serve) ? true : false,
},
});
if (serve) {
require('electron-reload')(__dirname, {
electron: require(`${__dirname}/node_modules/electron`)
});
win.loadURL('http://localhost:4200');
} else {
win.setFullScreen(true);
win.loadURL(url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: 'file:',
slashes: true
}));
}
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store window
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null;
});
return win;
};
try {
// 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', () => app.quit());
} catch (e) {
// Catch Error
// throw e;
}
Проблема в том, что с serve
на моем P C путь /assets
относится к root приложения (http://localhost: 4200 / assets /...) и работает нормально, но в результате я получаю ошибку file:///assets/...
не найдено. Если я изменю пути в CSS пакета на моем Pi с /assets/...
на assets/...
, это сработает. Если я изменю его соответственно в файле theme.scss
, он не скомпилируется, потому что путь относительный и theme.scss
импортируется во многие компоненты на разных уровнях дерева файлов.
Я уже пробовал пути вроде ~/assets/...
, но он скомпилирован как /./assets/...
, и это не имеет смысла для меня ...
Как я могу сделать /assets
стать assets/
в пакете CSS или сделать assets/
разрешаться относительно приложения root во время компиляции?
Редактировать:
Разрешение активов в url()
является старой проблемой Angular.