How to allow public access to the Angular Dev Server during the development

You are developing a beautiful app and you want to share the access to it to a colleague from another computer in the same network.

You give the ip/name of your machine (x.x.x.x:4200), but he cannot access it, what happened?

As many server, typically databases, Angular blocks, by default, the access to your development instance from other machines.
This is a security good practice that protects your computer from possible external attacks and security exploits that could compromise your computer and your company.

In the case of Angular, the security practices of Webpack are applied because Angular is using the Development Server of Webpack.

You can see in the Angular CLI codebase that to your local server used for development is the Dev Server of Webpack: here the link to dev-server.ts

The documentation for these options for Angular can be found here: documentation for ng serve

If you want to open your server to the rest of the world you can configure ng serve to run using the port 0.0.0.0 in place of localhost.

When you start from the command line with

ng serve --host 0.0.0.0 

your server, if there are no other problems, will show the following message:

** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ ** 

with the default configuration the message shows that you are using localhost and not 0.0.0.0:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** 

as a reminder, before the successful message Angular will warn you that your computer could be exploited by external attackers:

 
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 "--disable-host-check" if that's the 
case. 

Just be sure that you are compliant with you company policy and that you have other network protections.

If you want to add this change in your configuration you can modify your angular.json configuration file and add the host option under serve -> development:

"serve": { 
  "builder": "@angular-devkit/build-angular:dev-server", 
  "configurations": { 
    "production": { 
      "browserTarget": "..." 
    }, 
    "development": { 
      "host": "0.0.0.0", // <-- add this 
      "browserTarget": "..." 
    } 
  },