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
.
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:
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" ]
}
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.