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 the src directory called users and add the 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 the 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.

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.