angularwebpackangular-compiler

Angular configure or compile JSON asset


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.


Solution

  • 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.