How can I allow access outside the localhost at Angular2? I can navigate at localhost:3030/panel
easily but I can not navigate when I write my IP such as 10.123.14.12:3030/panel/
.
Could you please allow me how to fix it? I am not using npm
(node project manage - node install/node start ) to install and run the project.
If you want, I can provide my package.json
and index.html
.
This question is related to
angular
typescript
ng-build
run command
ng serve --host=0.0.0.0 --disable-host-check
this will disable host check and allow to access from outside(instead of localhost) with IP address
Mac users:
ng serve --host 192.168.1.x
Then you must be able to see your page on other devices through 192.168.1.x:4200
.
for me it works using "ng serve --open --host 0.0.0.0" but there is a warning
WARNING: This is a simple server for use in testing or debugging Angular applications locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or computer. Using a different host than the one passed to the "--host" flag might result in websocket connection issues. You might need to use "--disableHostCheck" if that's the case.
For the people who are using node project manager, also this line adding to package.json will be enough. For angular CLI users, mast3rd3mon's answer is true.
You can add
"server": "webpack-dev-server --inline --progress --host 0.0.0.0 --port 3000"
to package.json
you can also introspect all HTTP traffic running over your tunnels using ngrok
, then you can expose using ngrok http --host-header=rewrite 4200
A quick solution that might help someone :
Add this line as value for start ng serve --host 0.0.0.0 --disable-host-check
in your package.json
ex:
{
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --disable-host-check",
"build": "ng build",
}
And then simply do start
or npm run start
you will be able to access your project from other local IPs.
Create proxy.conf.json
and paste this configuration
{
"/api/*":
{
"target": "http://localhost:7070/your api project name/",
"secure": false,
"pathRewrite": {"^/api" : ""}
}
}
Replace:
let url = 'api/'+ your path;
Run from CLI:
ng serve --host port.number —-proxy-config proxy.conf.json
Use ng serve --host<Your IP> --port<Required if any>
.
ng serve --host=192.111.1.11 --port=4545.
You can now see the below line at the end of compilation.
Angular Live Development Server is listening on 192.111.1.11:4545, open your browser on
http://192.111.1.11:4545/
**.
Open cmd and navigate to project location i.e. where you run npm install or ng serve for the project.
and then run the command - ng serve --host 10.202.32.45
where 10.202.32.45
is your IP address.
You will be able to access your page at 10.202.32.45:4200
where 4200 is your port number.
Note: If you serve your app using this command then you won't be able to access localhost:4200
No package.json is necessery to change.
For me it works using:
ng serve --host=0.0.0.0 --port=5999 --disable-host-check
Host: http://localhost:5999/
You can use the following command to access with your ip.
ng serve --host 0.0.0.0 --disable-host-check
If you are using npm and want to avoid running the command every time, we can add the following line to the package.json file in the scripts section.
"scripts": {
...
"start": "ng serve --host 0.0.0.0 --disable-host-check"
...
}
Then you can run you app using the below command to be accessed from the other system in the same network.
npm start
I just edit angular.json
file in my project as below and it works
...
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "project:build",
"host": "0.0.0.0"
},
...
If you facing same problem inside Docker, then you can use below CMD
in Dockerfile.
CMD ["ng", "serve", "--host", "0.0.0.0"]
Or complete Dockerfile
FROM node:alpine
WORKDIR app
RUN npm install -g @angular/cli
COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]
Source: Stackoverflow.com