how to open angular app on mobile device with same network-CodePudding

I have an Angular App I am trying to open it on mobile with the same network I try ng serve --host <my IP> or ng serve --host 0.0.0.0 this is working fine but the problem is this application is making a request to Nodejs API which is running on a different port (3000) and when I run this app on the desktop it works fine but on mobile API data is not showing only the angular part is visible

CodePudding user response：

I hope you are talking about just development configuration, because these tools aren't supposed to be used on production.

to easilly bound together FE and BE on dev configuration I would propose to add API_URL to environment.ts

// environment.ts
export const environment = {
  API_URL: '/api'
}

use this prefix for your calls

export class MyService {
 ...
 getData() {
   return this.http.get<Data>(`${API_URL}/data`)
 }
}

and setup a development proxy onfiguration with content

// proxy.conf.json
{
 "/api/*": {
   "target": "http://localhost:3000/"
   "pathRewrite": {
     "^/api": ""
   }
 }
}

and add "proxyConfig": "proxy.conf.json" to angular.json serve -> development configuration

CodePudding user response：

ng serve --YOUR_IPV4_IP_ADDRESS

Ex: 192.168.12.2.1233:4200

And open link in your mobile...