Images uploaded with Node server cannot be found by Angular 2 - node.js

Question

I have an app in Angular 2, decided to add real server, Node JS, to upload documents and do other things.
Browser => Angular [localhost:4200/api/documents] => Node [localhost:3000/documents]
This is how I start them together using scripts in package.json
"scripts": {
"server-start": "gulp",
"client-start": "ng serve --verbose --proxy-config server.conf.json",
"start": "npm-run-all -p client-start server-start"
}
So, when I run npm start it starts 2 parallel processes - Node JS using Gulp and Angular using ng serve. Angular is a front end, but all URLs that start with /api get redirected to Node. Here is how it's done with server.config.js
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
Node JS receives stream from Angular with image and saves it in Angular assets folder, so uploaded image should be available in Angular, but when I try to open uploaded image in browser it returns me 404, not found. Just in case, this is part of my .angular-cli.json
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico",
"service-worker.js"
],
"index": "index.html",
"main": "main.ts"
Example, I have existing image that was there before ng serve
F:\Node\cms\src\assets\uploads\1.jpg
available at, it works
http://localhost:4200/assets/uploads/1.jpg
I upload new one to the same location
F:\Node\cms\src\assets\uploads\5.jpg
but it's NOT available at
http://localhost:4200/assets/uploads/5.jpg
When I restart my servers image becomes available. According to this discussion ng serve performs deployment of Angular app in the background, and folder dist is empty, all images are taken from memory, and any new images dropped into assets won't be available, correct me if I am wronng.
Question #1: is built-in Angular server able to handle dynamic images if they were added when application is already running in memory?
Question #2: looks like in complex apps ng serve brings more troubles than benefits, is it worth to try to make it working or you'd recommend to start using ng build instead?

Answer 1

when running your application, everything points to build folder. Not "src"
You probably are wiping out the images each time you run my serve or need to store them in a different location.
You are technically storing images on a "server" so I recommend using node to retrieve the paths to these files.

Answer 2

You should use ng build instead of ng serve. ng serve is meant for dev purposes. See https://github.com/angular/angular-cli/wiki/serve
Additionally after running ng build you will need to have the dist folder on an actual server. Here's an example from the Angular wiki
https://github.com/angular/angular-cli/wiki/stories-disk-serve
ng build --watch
lite-server --baseDir="dist"
You could also have node serving the dist folder using the static method that is built into node.
The line to add would be either
app.use(express.static('dist'))
or
app.use(express.static(path.join(__dirname, 'dist')))
See https://expressjs.com/en/starter/static-files.html
I prefer to do ng build -aot to get the bundle size as small as possible and then serve the dist folder with nginx.