How to fix Angular & flag-icons: Two output files share the same path but have different contents: media/...svg

Problem

You are using the flag-icons package in your Angular app, and you get the following error when building your app using ng build or ng serve:

[...]

✘ [ERROR] Two output files share the same path but have different contents: media/ic.svg

✘ [ERROR] Two output files share the same path but have different contents: media/un.svg


✘ [ERROR] Two output files share the same path but have different contents: media/xk.svg

Solution

This only affects a development build, since the development build, by default, only has outputHashing: "none".

Therefore, add outputHashing: "media" to your development build options in angular.json. You can also set outputHashing: "all" if you want to hash all files, but I recommend to use outputHashing: "media" for development builds.

This is what your development build options should look like:

  "development": {
    "optimization": false,
    "extractLicenses": false,
    "sourceMap": true,
    "outputHashing": "all"
  }

Don’t forget to add the comma at the end of the line before the new line.

Original source: GitHub issue tracker for flag-icons