In an Angular project, the assets folder is a directory in the project structure used to store static files. Files at the top level of the src/ directory support running the application. Subfolders within src/ contain the application source code and application-specific configuration. The assets folder can contain images, fonts, data files, and other resources (asset files) that need to be served as static files by the development server and copied as-is when you build the application.

Example of the project structure

src/
├── app/
│   ├── components/
│   ├── services/
│   ├── app.config.ts
│   └── app.routes.ts
├── assets/
│   ├── images/
│   │   └── logo.png
│   ├── data/
│   │   └── sample-data.json
│   ├── fonts/
│   │   └── custom-font.ttf
│   ├── i18n/
│   │   └── en.json
│   └── ...
├── index.html
└── styles.css

Adding assets folder

To add an assets folder to your project, you need to follow these steps:

Create assets folder

Open a terminal or command prompt and go to the root directory of the Angular project. Type the following command to create a new directory named “assets”.

mkdir src/assets

Update angular.json file

To include the newly created assets folder in your Angular project, open the angular.json file, locate the “assets” property, and append “src/assets/” to the array.

Before:

"assets": [
  {
	"glob": "**/*",
	"input": "public"
  }
],

After:

"assets": [
  {
	"glob": "**/*",
	"input": "public"
  },
  "src/assets/"
],

Verify that you have applied this modification to all occurrences of the ‘assets’ property within the file.

Once you’ve made the changes to the angular.json file, you’ll need to restart the development server for the changes to take effect. To do this, stop the development server by pressing Ctrl + C in the terminal where it’s running and then restart it using the npm start command.

Test assets folder

Create an “i18n” folder within the assets directory, and inside it, create a JSON file named en.json containing the following data:

en.json (src/assets/i18n/en.json)

{ "HELLO": "Hello!" }

Stop the development server by pressing Ctrl + C in the terminal where it’s running and then restart it using the npm start command. Open your web browser and enter the following URL into the address bar:

http://localhost:4200/assets/i18n/en.json

If everything is set up correctly, you should see the contents of the en.json file displayed in the browser window.