Serving Static Files in Angular Projects

Let’s say you have a JSON file in the root directory that you don’t want to be included in the compilation but copied over to distribution. In other words, you would not want this file to be combined with another file, modified or reduced in any way, but still included and presented in the angular application.

/src
  |-- /app
  |-- /assets
  |-- index.html
  |-- this_file.json

This means http://example.com/this_file.json should be available to access after deployment and serve the this_file.json file as-is.

This can be a favicon.ico file for bookmarks or a manifest.json file for progressive web applications.

In this case, you can easily do this with a basic angular configuration via editing angular.json file.

What is angular.json?

A file named angular.json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI.

At the top level of angular.json, a few properties configure the workspace, and a projects section contains the remaining per-project configuration options. CLI defaults set at the workspace level can be overridden by defaults set at the project level, and defaults set at the project level can be overridden on the command line.

In this file, it is possible to manage assets to be included in application. Each build target configuration can include an assets array that lists files or folders you want to copy as-is when building your project. By default, the src/assets/ folder and src/favicon.ico are copied over.

"assets": [
  "src/assets",
  "src/favicon.ico"
]

You can further configure assets to be copied by specifying assets as objects, rather than as simple paths relative to the workspace root.

"assets": [
  { "glob": "**/*", "input": "src/assets/", "output": "/assets/" },
  { "glob": "favicon.ico", "input": "src/", "output": "/" }
]

Any files or directories you include in the asset value array will be served statically.

Serving Static File with Angular Application

Let’s use this configuration technique to serve the JSON file.

"projects": {
  "YourProject": {
      "root": "",
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "assets": [
              ...
              {
                "glob": "this_file.json",
                "input": "src/",
                "output": "/"
              },
              ...
            ]
...

Here is a page for more information; https://angular.io/guide/workspace-config#asset-config