1

语境

我正在使用 Angular CLI 使用 Electron 和 Angular 2+ 编写应用程序。我已将电子 .js 文件设置为指向ng serve命令提供的 URL，通常是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时，.html 文件中的 node_modules 资源没有被加载，Chrome 控制台输出以下消息

在此处输入图像描述

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

在此处输入图像描述

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

4

2 回答 2

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"
  ]

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

于 2017-10-24T19:18:48.420 回答
0

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

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

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

node_modules/
src/

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

您应该在其他 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
于 2017-10-24T18:53:02.610 回答