dist folder used for deploying angular app in production , because dist folder consists of files compiled from angular(typescript).
In Development, The Angular app runs on the port 4200 with the help of a webpack dev server.(webpack used only in dev, in production only js engine is used it understand only js file not typescript files). This is not the case for running in production. We have to build the Angular project and load those static assets with the node server.
dist folder consists of plain js files compiled from angular and other angular asset files. Let express know there is a dist folder and assets of Angular build
In nodejs index/server.js
app.use(express.static(__dirname + '/dist/proj_name'))
Now angular and nodejs can run on same port in production, In development you can choose to use different server for node and angular.
References
- https://www.geeksforgeeks.org/how-to-bundle-an-angular-app-for-production/
- https://medium.com/bb-tutorials-and-thoughts/how-to-develop-and-build-angular-app-with-nodejs-e24c40444421
