Angular 2 without 'dist' in nodejs

Question

Is it possible to run angular2 with node js without the given code in nodejs? What if i don't want to use dist folder in nodejs?

app.use('/', express.static('dist'));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});

The dist folder is typescript compiled to ```javascript``` as browser's don't understand typescript. Also can you please state the reason for removing the above nodejs code — Dhyey, Jun 25 '17 at 08:17
@Dhyey because i have to run `ng build` everytime i make changes and i'm not able to tun through `ng serve` — Rajat Gupta, Jun 25 '17 at 08:40

score 0 · Accepted Answer · answered Jun 25 '17 at 07:50

0

IMO, dist is basically the compiled angular code, You will still need the angular code somewhere to be served by the node server. From the express server's point of view, it doesn't matter whether its a compiled code (dist) or the uncompiled one.

Note: By compiling I mean build tasks which are performed over the Front End Code, Tasks like minification, uglifications, cdn'ing and many more.

answered Jun 25 '17 at 07:50

Shivam

3,462
1
15
20

but @shivam, i need to run `ng build` again and when if i make a single comma change. Is there any way to run changes without ng build? – Rajat Gupta Jun 25 '17 at 08:39
Unfortunately no, Since you are using typescript (guessing from the use of ng2). You will have to trigger the build, to compile it down to js – Shivam Jun 25 '17 at 08:41
Yes, because ngserve does not save it to disk.. as I read from the documentation https://github.com/angular/angular-cli/wiki/serve – Shivam Jun 25 '17 at 08:54
i have a last doubt, if i upload my complete folder to server so i'll call everything from `dist` folder. So what if i make some changes and again want to update my server code – Rajat Gupta Jun 25 '17 at 09:00
Yes you will have to update the server code. There are couple of ways to do it. 1. Creating the new dist file locally and pushing it over to your server as a tarball. This approach has lots of limitations, but is good if its something not changing very regularly. 2. You can set up a deployment pipeline (or CI pipeline) with [Jenkins](https://jenkins.io/) and pushing the not compiled code to github or any other web based VCS. With Jenkins pulling from github and compiling the code, creating the dist. And hence automating the flow – Shivam Jun 25 '17 at 09:10
yes i'll do that. Thnx @shivam!! but if i upload a media file directly to `dist/assets` folder it'll show me the preview but once i run ng build it goes from there and 404 error comes. why so? – Rajat Gupta Jun 25 '17 at 09:16
Yes, You should not add the assets directly to dist. Since its a compiled directory and it replaces everything. I would suggest either putting all the asserts in src/assets or adding a new symlinked folder, though I haven't tried the symlink with ng2. This should shed more light https://stackoverflow.com/questions/39538464/how-to-include-custom-files-with-angular-cli-build – Shivam Jun 25 '17 at 09:21
i wan uploading the files in `src\assets` only, but the problem was, if i upload the file and want to play the video file or media file, it was showing 404 not found error because for now file is not updated in `dist/assets` folder. so for that i need to run `ng build`. – Rajat Gupta Jun 25 '17 at 09:30
Now suppose my code running in server and upload a new file then it'll show 404 not found bause i'll have to run `ng build` then – Rajat Gupta Jun 25 '17 at 09:31
Yes. its the ng-build which copies the files to dist. So post every change, you can check how it works/looks using ng-serve. But to publish it over to your server, you will need to create a new build (which updates the dist with new files) using ng-build – Shivam Jun 25 '17 at 09:33

score 0 · Answer 2 · answered Nov 05 '18 at 13:37

The main problem of the asker is that he/she does not want to waste precious time calling ng build every time a change is made.

The solution is to use ng build --watch, which builds the files and saves them in the "dist" directory immediately, and every time you change any file, the "dist" directory is updated at once.

Angular 2 without 'dist' in nodejs

2 Answers2