The assets folder is a directory in the application 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 application structure

public/
src/
├── app/
│ ├── components/
│ ├── services/
│ ├── ...
│ ├── app.config.ts
│ ├── app.routes.ts
│ └── ...
├── assets/
│ ├── images/
│ │ └── logo.png
│ ├── data/
│ │ └── config.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 in your application settings, and append projects/<app_name>/ src/assets/ to the array.

Before:

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

After:

"assets": [
  {
	"glob": "**/*",
	"input": "public"
  },
  "projects/<app_name>/src/assets/"
],

Replace <app_name> with the name of your application. 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 a text file within the assets directory.

test.txt (src/assets/text.txt)

Assets works!

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/test.txt

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