Electron вместе с живым режимом в Angular не загружает ресурсы node_module

1

контекст

Я пишу приложение с помощью Electron и Angular 2+ с использованием Angular CLI. Я установил свой электронный файл.js, чтобы указать URL-адрес, предоставленный командой ng serve, которая обычно является localhost:4200, чтобы зафиксировать изменения кода. Некоторые соображения:

  • Адрес localhost:4200 указывает на index.html;
  • index.js - мой сценарий точки входа в электронную систему

Вот мой файл index.js используемый в качестве точки входа для электронного модуля.

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

let win = null;

function createWindow() {
  win = new BrowserWindow({width: 1000, height: 600, show: false});
  win.loadURL('http://localhost:4200');

  win.maximize();
  win.on('closed', () => {
    win = null;
  });
  win.on('ready-to-show', () => {
    win.show();
  });
  win.webContents.openDevTools();
}

app.on('ready', () => {
  createWindow();
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

И мой файл index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>BRISA Carbon</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!--Clarity Design Elements-->
  <link rel="stylesheet" href="../node_modules/clarity-icons/clarity-icons.min.css">
  <script type="text/javascript" src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
  <script type="text/javascript" src="../node_modules/clarity-icons/clarity-icons.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Моя проблема

Когда я запускаю ng serve, ресурсы node_modules внутри.html файла не загружаются, а консоль Chrome выводит следующие сообщения:

Изображение 174551

Я знаю, что путь к ресурсам правильный, потому что я использую WebStorm IDE, и я могу перейти к ссылочному элементу через ссылку, подобную приведенному ниже.

Изображение 174551

Почему мои ресурсы не загружаются, когда я работаю в режиме Angular live?

Теги:
angular
angular-cli
electron
vmware-clarity

2 ответа

2
Лучший ответ

Для всех, у кого такая же проблема, я нашел решение. Вместо того, чтобы загружать мои ресурсы через файл index.html, я поместил их в .angular-cli.json. В принципе, Угловой 2+ имеет собственный способ импорта ресурсов и, похоже, не является правильным загрузкой ресурсов из основного.html файла.

Ну, для скриптов (я имею в виду файлы.js), я помещаю его в массив scripts и стили внутри массива styles. Раздел .angular-cli.json который я изменил, выглядит следующим образом:

  "styles": [
    "styles.css",
    "../node_modules/clarity-icons/clarity-icons.min.css",
    "../node_modules/clarity-ui/clarity-ui.min.css"
  ],
  "scripts": [
    "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
    "../node_modules/clarity-icons/clarity-icons.min.js"
  ]

Надеюсь, что эта информация поможет кому-то другому. Для меня все работает нормально.

Поделиться
  • 0
    Добавление таблиц стилей и скриптов в файл .angular-cli.json является правильным способом добавления внешних зависимостей в ваше приложение angular-cli.
0

Я предполагаю, что у вас такая же проблема, когда вы посещаете localhost:4200 в вашем браузере?

В вашем index.html вы ссылаетесь на ../node_modules/... который работает в вашей среде IDE, потому что это похоже на структуру папок.

Скажем, ваша структура папок выглядит так:

node_modules/
src/

И src - это папка, которую ваш сервер использует как root. Тогда сервер не сможет извлекать файлы из .. (поскольку корневой каталог не имеет родительского каталога).

Вместо того, чтобы ссылаться на файлы JS в вашем index.html, вы должны импортировать/требовать их в других JS файлах. Точно как вы делаете это на ваших инструментах построения/комплектации (например, Webpack и/или Babel).

import '@webcomponents/custom-elements/custom-elements.min.js'
import 'clarity-icons/clarity-icons.min.js'
import 'clarity-icons/clarity-icons.min.css' // Assumes that you use webpack and webpack-css-loader, for example
Поделиться
  • 0
    Спасибо за ваш ответ @kontrollanten. Однако я не проверял ваше решение, потому что я не работаю с Webpack, поскольку Angular CLI имеет свой собственный процесс сборки. Кстати, я нашел решение. Смотри мой ответ.
  • 0
    Angular CLI также использует Webpack, поэтому он должен работать просто отлично :) Я предпочитаю это решение, чтобы хранить все зависимости кода в одном месте. Я рад, что ты решил свою проблему.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню