Angular configure or compile JSON asset

Question

Is it possible in Angular or via help of a custom-webpack plugin to transform a JSON asset before copying it to the assets folder. I have a JSON file in which I would like to transform some values before placing it into the assets folder. I have tried to use the CopyWebpackPlugin but it seems that it is not applicable to assets.

What I want to do is take a JSON from the src, replace some values in that JSON during compilation and then put it into the target location under dist/<...>/assets.

Answer 1

This problem can actually be solved by using the copy-webpack-plugin. The caveat is that the Angular compiler will copy assets after the copy-webpack-plugin has run. The problem I was observing was that the file copied by the copy-webpack-plugin was overwritten by the original asset file. To ensure that the original asset template file will not overwrite the file that was copied and transformed by the copy-webpack-plugin the following steps are necessary:

1. Use the asset configuration in angular.json to exclude the source file from the assets using the expanded asset form (optionally rename the source file to something like foo.tpl.json first):

   { "glob": "**/*", "input": "./assets", "output": "dist/assets",
     "ignore": [ "**/foo.json" ]
   }
   

2. Copy and transform the file via copy-webpack-plugin, this can be achieved using the custom-webpack plugin by adding the copy-webpack-plugin as additional plugin to the webpack configuration.

Answer 2

Use it

https://www.npmjs.com/package/json-server

download link and doc link are the same

[BTW, if you need very complex query - just use Golang with PostgreSQL. No limitation there (but you have to use postgreSQL database instead of .json file then) ]