As all of us already know that the Angular framework picks up assets like fonts, images, media ..etc from src/assets folder. I have created a video folder in the asserts directory and placed the video.mp4 media file there. From the 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 subfolders of the 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 the project home folder.
There I noticed that the assets array is holding the below content
assets”: [ “assets/fonts”, “assets/images”, “assets/js”, “assets/json”, “favicon.ico” ]
That means we are allowing the project to get assets from the above-specified directories alone i.e. which are part of the assets array alone.
Then I added “assets/videos” to this array and re-built the 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” ]
For more such insights, check out the Divami Blog page.
COMMENTS 
1 Comment
Leave a Comment
Author
Recent Articles
I was stuck in adding video in my angular component and tried searching on internet but i wasnt able to find the solution but here i got the solution. Thank You so much Mr. Author 🙂