Angular assets building in /dist folder

Issue

I am using the flag-icon-css package that supplies you a css "font" file and all SVGs of flags. There was an issue with the package (4x3 flags not showing properly), so I pulled all of the files out of node_modules and fixed the issue.

I now have all of the css and flag icons under the src/assets/fonts folder. I updated my angular.json to reflect the changes and made sure the flag-icon-css folder in node_modules was deleted, but the flag icons are still saving in both the /dist and also assets/fonts folder.

Here is what my angular.json was changed to:

  "styles": [
    "src/assets/fonts/flags/flag-icon.min.css",
    "src/styles.scss"
  ],
  "assets": [
    "src/favicon.png",
    "src/assets",
  ],

I even tried adding the full path: src/assets/fonts/flags/icons, but it still builds them directly into the dist folder.

Solution

All files added to "styles": [] are always moved to the top level of the root '/dist' when builded. This is because they're global files. More info here under "styles".

You have multiple options to solve your problem:

Remove the "src/assets/fonts/flags/flag-icon.min.css" from the "styles": [..] array.

Option 1.

Import it into your styles.scss like:

@import('path/outside/assets/flag-icon.min.css')

Now they should be included in your /dist/styles.css after build. If you keep the icons inside the assets folder they will be imported to the styles.css and /dist/assets/.. folder

Option 2

Import the icon set from your index.html

<link href="assets/fonts/flags/flag-icon.min.css" rel="stylesheet">

Answered By - Sebastian Münster