How to Create a Custom Assets Folder in Angular

Every Angular app generated with @angular/cli comes bundled with an assets folder located inside the src directory. And any file or folder created inside the assets folder becomes publicly accessible. However, your options are not limited to this folder. You can easily create more assets like folders by adding their paths in the angular.json file. Let's understand this in detail with an example.

Let's say I want to create another folder inside src directory called users and add following json file to this folder.

{
  "firstName": "John",
  "lastName": "Doe",
  "username": "rambo_was_real",
  "occupation": "Mall Santa"
}

We'll name the file profile.json.

Once you've created the folder and added the file, you need to make Angular aware of this folder.

This can be done by simply dropping following line of code in your angular.json file under the assets array key.

And that's it! After doing this you can simply restart your Angular application and try to access the file via the web browser. If you've done everything as expected, you'll see following output in the web browser.

You can also query the profile.json file using the HttpClient Service.

this.http
  .get('/users/profile.json')
  .subscribe((response) => console.log(response));

I hope you enjoyed this post. In case you've any queries or feedback, feel free to drop a comment or reach out to me on Twitter @harshalslimaye.

Also, I would like to recommend another article I've written which talks about the technique called Virtual Scrolling in Angular which allows the developers to display subset of large lists within small viewports and change the subset data as user continues to scroll through the list.