I've created an web app using Node + Express on server side and Angular 4 on client side.
I'm able to build this app locally using angular-cli (ng build --aot -prod) and everything works fine: a dist folder is created with all the css/jss bundles, index.html, favicon.ico and the assets folder is copied into this dist folder.
Now, I'm trying to host this app on Heroku using git push, and building it directly on Heroku using a NPM postinstall script on package.json:
...
"scripts": {
...
"postinstall": "ng build --aot -prod"
},
...
Everything seems to work fine, and the build process succeed, but the issue is that the assets folder is NOT copied into the dist folder, and so there are no assets available to my app (which means no images are served/shown on my app).
Folder structure I'm using:
node_modules
server
dist // created on build process
src
-- app
-- assets
-- favicon.ico
-- index.html
-- styles.css
server.js
.angular-cli.json
package.json
package-lock.json
After struggling around for some time, I finally solved this issue, and so I'm posting it here so that it may help someone.
It was kind of a silly mistake, which took long to figure out.
The issue was that I've removed the images from my main git repo (using .gitignore file) since the begin of development, as I was moving in and out a lot of assets and didn't want to keep track of them on git.
In this way, when pushing files to heroku using git, these were not copied, as were not included on the repo. And although there was a assets folder there, it was empty.
So, I've just included the images on the repo (removed the rules from .gitignore) and everything is working fine now.