Angular 中的 Electron 和实时模式未加载 node_module 资源

Question

上下文

我正在使用 Electron 和 Angular 2+ 使用 Angular CLI 编写应用程序。我已经将我的电子 .js 文件设置为指向 ng serve 命令提供的 URL，通常是 localhost:4200，以便捕获代码更改。一些注意事项：

地址localhost:4200指向index.html；
index.js 是我的 Electron 入口点脚本

这是我的 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 时，.html 文件中的 node_modules 资源未被加载并且 Chrome 控制台输出以下消息

我知道资源的路径是正确的，因为我使用的是 WebStorm IDE，我可以通过 link 转到引用的元素，如下图所示。

为什么当我在 Angular 实时模式下运行时我的资源没有被加载？

Answer 1

我假设您在浏览器中访问 localhost:4200 时也遇到了同样的问题？

在您的 index.html 中，您引用的 ../node_modules/ ... 在您的 IDE 中有效，因为这就是文件夹结构的样子。

假设您的文件夹结构如下所示：

node_modules/
src/

并且 src 是您的服务器用作根目录的文件夹。然后服务器将无法从 .. 检索文件（因为根目录没有父目录）。

与其在 index.html 中引用 JS 文件，不如在其他 JS 文件中 import/require 引用它们。具体怎么做取决于你的 building/bundling 工具（例如 Webpack and/or 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

Answer 2

对于遇到同样问题的每个人，我刚刚找到了解决方案。我没有通过 index.html 文件加载我的资源，而是将它们放在 .angular-cli.json 中。基本上，Angular 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"
  ]

希望此信息对其他人有所帮助。对我来说一切都很好。

Angular 中的 Electron 和实时模式未加载 node_module 资源

Electron together with live mode in Angular isn't loading node_module resources

javascript

electron

angular-cli

angular

vmware-clarity

上下文

我的问题