Kvarzsiev
commented
1 month ago It was pretty silly actually, I've forgot to change my environments to reflect a valid host for the mobile emulator.
So what I've done is:
- reconfigured everything to point to 127.0.0.1 (serve options and configs in angular.json, devServer in webpack.config.js)
- changed my URLs in the project env file to 10.0.2.2 instead of 127.0.0.1 (so android studio emulator tries to connect to the machine host instead of its own)
- also, changed webpack devserver config for websocket connection url
moduleFederationConfig.devServer = { ... client: { webSocketURL: "ws://10.0.2.2:4202/ws", }, };
Because 10.0.2.2 in the Android Studio emulator maps to the machine 127.0.0.1, so the angular server itself works, the problem was that other requests that depended on env URLs were being made to 127.0.0.1 from inside the application running on the emulator, and that would give a connection refused error (as it was supposed to, knowing that the target of the requests was on my machine and not the emulator).
This is useful to understand how the emulator works.
I need to implement a webview on a mobile application that uses one of our micro front-ends.
I am running the emulator and the MFE, it starts a connection but something errors in between.
Pc Browser
Mobile Browser
When I try to open it on my Flutter mobile application as a Webview, it continuously logs this:
Performing hot reload... Reloaded 0 libraries in 111ms (compile: 32 ms, reload: 0 ms, reassemble: 53 ms). I/PlatformViewsController(11380): Hosting view in view hierarchy for platform view: 2 E/OpenGLRenderer(11380): Unable to match the desired swap behavior. E/FrameEvents(11380): updateAcquireFence: Did not find frame. D/EGL_emulation(11380): app_time_stats: avg=7697.36ms min=32.33ms max=61311.30ms count=8 E/FrameEvents(11380): updateAcquireFence: Did not find frame. I/chromium(11380): [INFO:CONSOLE(6188)] "[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.", source: http://ip:4202/polyfills.js (6188) D/EGL_emulation(11380): app_time_stats: avg=4102.44ms min=7.00ms max=61337.04ms count=15 E/FrameEvents(11380): updateAcquireFence: Did not find frame. I/chromium(11380): [INFO:CONSOLE(6127)] "[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.", source: http://ip:4202/styles.js (6127) I/chromium(11380): [INFO:CONSOLE(6127)] "[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.", source: http://ip:4202/vendor.js (6127) I/chromium(11380): [INFO:CONSOLE(10)] "ChunkLoadError: Loading chunk src_bootstrap_ts failed. I/chromium(11380): (error: http://0.0.0.0:4202/src_bootstrap_ts.js)", source: http://ip:4202/main.js (10) I/chromium(11380): [INFO:CONSOLE(6135)] "[webpack-dev-server] [object Event]", source: http://ip:4202/styles.js (6135) I/chromium(11380): [INFO:CONSOLE(6127)] "[webpack-dev-server] Trying to reconnect...", source: http://ip:4202/styles.js (6127) E/FrameEvents(11380): updateAcquireFence: Did not find frame. I/chromium(11380): [INFO:CONSOLE(6135)] "[webpack-dev-server] [object Event]", source: http://ip:4202/styles.js (6135) I/chromium(11380): [INFO:CONSOLE(6127)] "[webpack-dev-server] Disconnected!", source: http://ip:4202/styles.js (6127) I/chromium(11380): [INFO:CONSOLE(6127)] "[webpack-dev-server] Trying to reconnect...", source: http://ip:4202/styles.js (6127) E/FrameEvents(11380): updateAcquireFence: Did not find frame. D/EGL_emulation(11380): app_time_stats: avg=304.75ms min=12.60ms max=681.17ms count=4 E/FrameEvents(11380): updateAcquireFence: Did not find frame. I/chromium(11380): [INFO:CONSOLE(6196)] "[webpack-dev-server] [object Event]", source: http://ip:4202/polyfills.js (6196) I/chromium(11380): [INFO:CONSOLE(6188)] "[webpack-dev-server] Disconnected!", source: http://ip:4202/polyfills.js (6188) I/chromium(11380): [INFO:CONSOLE(6188)] "[webpack-dev-server] Trying to reconnect...", source: http://ip:4202/polyfills.js (6188)But when I try to load other MFE we already deployed in our staging environment, it works just fine. Is it I am missing some configuration?
Running MFE with
ng serve --port 4202 --host 0.0.0.0angular.json has
... "architects": { "serve": { "builder": "ngx-build-plus:dev-server", "options": { "allowedHosts": ["0.0.0.0"], "browserTarget": "mfe-dados:build", "extraWebpackConfig": "webpack.config.js", "port": 4202, "publicHost": "http://localhost:4202" }, ...