Angular 17 two files sharing same path using flag-icon library

Question

I npm install flag-icons library within Angular 17 ssr project and get a list of error by serving the app:

...

✘ [ERROR] Two output files share the same path but have different contents: media/sh-ta.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

The library comes with two sets of flags in different folders: node_modules/flag-icons/flags/1x1, and node_modules/flag-icons/flags/4x3. The filenames are the same in both directories. It seems they were "cached" into same directory (media/xx.svg) during serve process.

How to make the path unique or resolve the issue without modifying the flag-icon library?

Here comes a minimal setup with:

$ ng version
Angular CLI: 17.3.8
Node: 20.11.1
Package Manager: npm 10.2.4

$ ng new test --ssr --no-standalone
$ cd test
$ npm install flag-icons

Modify your angular.json:

      ...
      "styles": [
        "src/styles.css",
        "flag-icons/css/flag-icons.min.css"
      ],
      ...
      "styles": [
        "src/styles.css",
        "flag-icons/css/flag-icons.min.css"
      ],
      ...

Include a flag into your app.component.html:

<span class="fi fi-gr"></span>

Then run your app ng serve.

Answer 1

In Tech overflow may be a solution for this problem (link), basically this happen during development and not in production, can be solved adding outputHashing: "media" option into development build options, like this in angular.json file

{
  "projects": {
    "angular_project": {
      "architect": {
        "build": {
          "configurations": {
            "development": {
              "outputHashing": "media"
            }
          }
        }
      }
    }
  }
}