As all of us already know that Angular framework picks up assets like fonts, images, media ..etc from src/assets folder. I have created videos folder in asserts directory and placed video.mp4 media file there. From Angular project home directory here is the path of my video file src/assets/videos/video.mp4
When I tried to refer this video with the path assets/videos/video.mp4 from my Angular HTML file, the video failed to load. The network call to fetch the video file responded with “404 Not Found”. Surprisingly Angular code was fetching all the assets placed in sub folders of assets directory except this video file.
I have no clue why it failed to load my video file. After some clueless struggle and debugging I looked into .angular-cli.json file placed in project home folder.
There I noticed that assets array is holding the below content
assets”: [ “assets/fonts”, “assets/images”, “assets/js”, “assets/json”, “favicon.ico” ]
That means we are allowing Angular project to get assets from the above specified directories alone i.e. which are part of assets array alone.
Then I added “assets/videos” to this array and re-built Angular project, boom!! my video got loaded.
To conclude my new assets array looks like this
assets”: [ “assets/fonts”, “assets/images”, “assets/js”, “assets/json”, “assets/videos”, “favicon.ico” ]