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.<\/p>\n\n\n\n
\/src\n |-- \/app\n |-- \/assets\n |-- index.html\n |-- this_file.json<\/pre><\/div>\n\n\n\nThis means
http:\/\/example.com\/this_file.json<\/code> should be available to access after deployment and serve thethis_file.json<\/code> file as-is. <\/p>\n\n\n\nThis can be a
favicon.ico<\/code> file for bookmarks or amanifest.json<\/code> file for progressive web applications.<\/p>\n\n\n\nIn this case, you can easily do this with a basic angular configuration via editing
angular.json<\/code> file.<\/p>\n\n\n\nWhat is angular.json?<\/h2>\n\n\n\n
A file named
angular.json<\/code> 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.<\/p>\n\n\n\nAt the top level of\u00a0
angular.json<\/code>, a few properties configure the workspace, and a\u00a0projects<\/code>\u00a0section 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.<\/p>\n\n\n\nIn this file, it is possible to manage assets to be included in application. Each\u00a0
build<\/code>\u00a0target configuration can include an\u00a0assets<\/code>\u00a0array that lists files or folders you want to copy as-is when building your project. By default, the\u00a0src\/assets\/<\/code>\u00a0folder and\u00a0src\/favicon.ico<\/code>\u00a0are copied over.<\/p>\n\n\n\n"assets": [\n "src\/assets",\n "src\/favicon.ico"\n]<\/pre><\/div>\n\n\n\nYou can further configure assets to be copied by specifying assets as objects, rather than as simple paths relative to the workspace root.<\/p>\n\n\n\n
"assets": [\n { "glob": "**\/*", "input": "src\/assets\/", "output": "\/assets\/" },\n { "glob": "favicon.ico", "input": "src\/", "output": "\/" }\n]<\/pre><\/div>\n\n\n\nAny files or directories you include in the asset value array will be served statically. <\/p>\n\n\n\n
Serving Static File with Angular Application<\/h2>\n\n\n\n
Let’s use this configuration technique to serve the JSON file. <\/p>\n\n\n\n