Search code examples
javascriptangularelectronangular-clivmware-clarity

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

Context

I'm writing an application with Electron and Angular 2+ using Angular CLI. I've set up my electron .js file to point to the URL provided by the ng serve command, that usually is localhost:4200, in order to capture the code changes. Some considerations:

  • The address localhost:4200 points to index.html;
  • index.js is my Electron entry point script

Here is my index.js file used as an entry point for the electron module.

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();
  }
});

And my index.html file:

<!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>

My Problem

When I run ng serve, the node_modules resources inside the .html file are not being loaded and the Chrome console outputs the following messages

enter image description here

I know that the path to the resources are correct because I'm using WebStorm IDE and I can go to the referenced element through a link like this image below.

enter image description here

Why my resources are not being loaded when I'm running in Angular live mode?

Solution

  • For everyone that is having this same problem, I just found a solution. Instead of loading my resources through the index.html file, I've placed them in the .angular-cli.json. Basically, Angular 2+ has the own way of importing resources and seems that is not correct loading resources from the main .html file.

    Well, for scripts (I mean, .js files), I'm placing it in the scripts array and styles inside the styles array. The .angular-cli.json file section that I've changed looks like this:

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

    Hope that this information will help someone else. For me everything is working just fine.