Help wanted on getting an angular project to work on mobile webview

[Kvarzsiev]

Trying to run the project on an Android Studio emulator, but I couldn't make it work. I've connected Chrome Dev Tools to the emulator browser to try to get more logs on what is really happening:

I've tried both http://my-ip:4202 and http://10.0.2.2:4202 (and both land on the same error)

My dev-server config on webpack.config.js file is

moduleFederationConfig.devServer = {
  host: "0.0.0.0",
  allowedHosts: "all",
  headers: {
    "Access-Control-Allow-Origin": "*",
  },
};

My angular.json file has

"serve": {
          "builder": "ngx-build-plus:dev-server",
          "options": {
            "browserTarget": "mfe:build",
            "extraWebpackConfig": "webpack.config.js",
            "port": 4202,
            "publicHost": "http://localhost:4202",
            "allowedHosts": ["0.0.0.0", "127.0.0.1"]
          },
          "configurations": {
            "production": {
              "browserTarget": "mfe:build:production",
              "extraWebpackConfig": "webpack.prod.config.js"
            },
            "local": {
              "port": 4202,
              "allowedHosts": ["0.0.0.0", "127.0.0.1"],
              "publicHost": "http://localhost:4202",
              "browserTarget": "mfe:build",
              "extraWebpackConfig": "webpack.config.js"
            }
          }
        },

and I'm running the project with ng serve --port 4202

What can I try?

[Kvarzsiev]

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.