My video is not playing in Angular UI

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.