Angular 7 - Only "dist" folder is rendering on browser but not "src" folder with nodejs

Question

Hi i am starting a project of nodejs app with angular7. This is my mail server.js file in nodejs

var express = require('express'); 
var mysql = require('mysql');
var bodyParser = require('body-parser')
var cookieParser = require('cookie-parser');
var router = express.Router();
var app = express();

app.use(cookieParser());
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
    extended: true
}));

app.set('view engine', 'pug');
app.set('views', __dirname + '/app/views');

app.use(express.static(__dirname + '/public'));
app.use('/', express.static(__dirname + '/angular/src'));

require('./app/routes')(router);

app.use(router);



app.listen(2233, function(){
    console.log('app started on 2233');
});

This line app.use('/', express.static(__dirname + '/angular/src')); indicates that i want to render src folder inside angular folder on nodejs app load but this is rendering blank screen. When i run ng build and change it to app.use('/', express.static(__dirname + '/angular/dist')); then start working.

All the tutorial showing to run ng build and run angular inside node but why can i use src folder inside nodejs.

Why would you need to use your src files though? Your built files are in the dist folder — wentjun
– wentjun, Commented Apr 13, 2019 at 6:39
@wentjun As per my knowledge (please corrent me if i am wrong) we use ng build to minify the files and use light weight app on production. When we create new project it opens on browser on http://localhost:4200/ but that works on src folder then on production we use ng build and serve dist folder. I am using src folder as its hard to run ng build after every small change. I will run ng build and change it to dist on production. And also there is little curiosity why its not working on src — Gaurav Aggarwal
– Gaurav Aggarwal, Commented Apr 13, 2019 at 6:42

Nandan · Accepted Answer · 2019-04-13 06:49:30Z

1

src folder is used during development. They are actual source files which has your programs in readable format.

dist is generated when you do ng build, it will have all your src files, assets and your node modules combined and minified into a small package.

So, there is no point of having src in your deployment

Updated: When you are in development as you said for every small change minfying the code and building whole code again takes lot of time. So, when we do ng serve it will just convert files to js but no minification or other things will happen.

Why src will not work if you copy it for deployment is, src contains .ts files if you are using latest Angular and you have to transpile it to JS with some modifications required in order for it to be understandable by browser.

answered Apr 13, 2019 at 6:49

Nandan

1828 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gaurav Aggarwal Over a year ago

Amazing catch. Any solution how can i do that without ng build ??

Nandan Over a year ago

You can use task runners like gulp or grunt to build pack on your own.

Gaurav Aggarwal Over a year ago

i am using pm2. so can i do define something so that ng build run internally when i use pm2 reload ??

Nandan Over a year ago

Yes, you can do that easily with task runners @Gaurav

Gaurav Aggarwal Over a year ago

task runners has nothing to do with pm2 reload

|

Collectives™ on Stack Overflow

Angular 7 - Only "dist" folder is rendering on browser but not "src" folder with nodejs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related