"ng serve - o" Not Working, but "ng serve" Works

Question

I have Problem with Angular,that after I configure the Micro frontend Framework (module federation) for the remote and the host (the remote and the host not in the same workspace). when I run the App(remote) with "ng serve - o" it shows me this error "Uncaught TypeError: The specifier “module” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”." in the Console, but when I run the app(remote) with "ng serve" it works without any Problem and the host shows the remote too. I open the Generated js Files: http://localhost:4201/src_app_esg_esg_module_ts-_d58a1.js and http://localhost:4201/src_app_esg_esg_module_ts-_d58a0.js. this 2 Files have in the not working version an extra Line "import { createRequire as __WEBPACK_EXTERNAL_createRequire } from "module";" in the top of the File. but in the working version, they have not this line. it is so Confusing and i want to know where can be the Problem. Thx in Advance

I tried to update all the Dependences, Node version, Angular Version, but nothings works

----I tried somthing but it makes the "ng serve" and "ng serve -o" both of them not working: -I remove the node_module and package-lock.json -I run npm Update -then I run npm install after that the nothing works.... that made it worst

Answer 1

In my case that was @microsoft/signalr which caused the issue. Webpack picked esm version by resolving "module" property from its package.json. The package itself contains browser version as well but it's just not in the list of package.json properties. For the moment the only solution I managed to come up is to add @microsoft/signalr to resolve.alias and point it to a "@microsoft/signalr/dist/browser/signalr.js" + add some polyfills for node:

resolve.fallback = {
        "url": require.resolve("url"),
        "https": require.resolve("https-browserify"),
        "http": require.resolve("stream-http"),
        "util": require.resolve("util")
    },