What is the difference between "@angular-devkit/build-angular:browser" and "@angular-devkit/build-angular:dev-server"

Question

I have an app which works with outside ressources like InboxSdk and MsGraph.I was working with ng serve and everything was good.

But when I tried to make my ng build instance ,I discovered that the functionnality of outside ressources only works from localhost:4200 (ng serve shoud be used). I think it's the difference between "@angular-devkit/build-angular:browser" and "@angular-devkit/build-angular:dev-server" builders in angular.json .

Do you guys have any idea why does it work like that and how can I figure it out?

Answer 1

Browser

As in the source code of the browser builder, this builder uses the webpack package bundler to create a minified and agulified angular app for production. Webpack bundles the application modules and all their dependencies and put them in separat files in the specified dist folder. It also does extra work based on the configuration like tree shaking etc.

You should use this builder when you want to bundle minfiy (deploy) your angular application for production/staging or other deployment phases.

Dev-Server

As mentioned in angular deployment guide angular uses webpack to build and serve the application using a node server with a specified port to create an angular app with mapped ts files for easier debugging. It also provides live reload on change. The application code will be compiled and the app files will be copied to the heap memory and opens.

You should use this builder only during development phase.