single-spa-angular: Live Reload for Angular Frontend (configuration.entry['main'] should not contain the item '[...]sockjs-node' twice)

Hi, I’ve created an Angular frontend, if I run:

npm run serve:single-spa:example

This script uses:

--live-reload false

Instead If I set:

--live-reload true

I get this error:

An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry['main'] should not contain the item 'C:\Workspace\example\project-example\node_modules\webpack-dev-server\client\index.js?http://0.0.0.0:0&sockPath=/sockjs-node' twice.
   -> A non-empty array of non-empty strings
See "C:\Users\user\AppData\Local\Temp\ng-pDaMMT\angular-errors.log" for further details.

Why? I can serve the Angular frontend with “live reload”? Thank you

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 20 (4 by maintainers)

Most upvoted comments

This seems to be resolved with the latest published version. I’ve just checked it with our integration apps that we have, I’ve run them with live-reload enabled and I didn’t encounter any error.

arturovt on Mar 16, 2022

Finally was able to fix that doing this change in extra-webpack.config.js With this I was able to run ng12 app with live-reload true

module.exports = (config, options) => {
  const defaultConfig = singleSpaAngularWebpack(config, options);
  defaultConfig.entry.main = [...new Set(defaultConfig.entry.main)];
  return defaultConfig
};

tscislo on Oct 15, 2021

@joeldenning , @filoxo,

We’re sorry to bother. The issue prevents us from moving on. Would you mind giving us a clue?

I fixed it by add “–live-reload false” to the start script “scripts”: { “ng”: “ng”, “start”: “ng serve --port 4201 --live-reload false”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e”, “build:single-spa:category”: “ng build category --prod --deploy-url http://localhost:4200/”, “serve:single-spa:category”: “ng s --project category --disable-host-check --port 4200 --deploy-url http://localhost:4200/ --live-reload false” },

khoapham-prive on Mar 22, 2021

Add this to extra-webpack.config.js to fix for now:

  // temp fix for
  // An unhandled exception occurred: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 // - configuration.entry['main'] should not contain the item '\node_modules\webpack-dev-server\client\index.js?http://0.0.0.0:0&sockPath=/sockjs-node' twice.
 let removeDup = {};
 singleSpaWebpackConfig.entry.main = singleSpaWebpackConfig.entry.main.filter((item) => {
  if(!removeDup[item]) {
    removeDup[item] = true;
    return true;
  }
  return false;
 });

swaheed2 on May 25, 2021

The single-spa-angular project does not have many active maintainers and we welcome community contributions to help fix this.

joeldenning on Sep 20, 2021

I am facing similar issue after I upgraded my micro-apps to angular v12. Please provide a permanent fix.

tchopra91 on Sep 8, 2021

Thanks, @khoapham-prive , I’m going to try that. Did not add it to the start srcipt.

Update: works fine now. Thanks!

I need dev live reload , but I’ll cope with it by the time the issue get adressed properly.

exaucae on Mar 22, 2021

You can use this link instead: Slack join link (Slack now expires links after 30 days so we have to manually re-generate them)

filoxo on Jan 19, 2021