Angular CLI outputs the font-awesome font files the dist root

Question

Do you have to eject your angular-cli and override the webpack configuration in order to place the font-awesome fonts into the assets/fonts folder? I have this angular-cli and I include the font-awesome this way in my angular-cli.json:

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css"
      ],

but when I do ng build --prod I get everything built correctly however all font-awesome fonts are located in the root (where the styles.css is).

Can you configure this through angular-cli.json or do you have to do it via scripting in the packages.json?

Looking at the wiki for assets management (https://github.com/angular/angular-cli/wiki/stories-asset-configuration), I tried this:

  "assets": [
    { "glob": "**/*", "input": "./assets/", "output": "./assets/" },
    { "glob": "favicon.ico", "input": "./", "output": "./" },
    { "glob": "**/*", "input": "../node_modules/font-awesome/fonts/*", "output": "./assets/fonts/" }
  ]

But that didn't work.

UPDATE:

Looks like is not possible? --> https://github.com/angular/angular-cli/issues/6637

angularrocks.com angularrocks.com · Accepted Answer · 2017-10-05T23:32:10

I think you just followed http://github.com/angular/angular-cli/blob/master/docs/documentation/stories/include-font-awesome.md during ng serve/build once cli seeing you referencing the font-awesome it is just copying the fonts files like it is in to the root.

Seems like it is similar issue How can i place all the glyphicons to one folder while building in angular4? angular cli just handling the fonts referenced by font-awesome.css this way so it is just affecting the output/dist folder that client browser does not care about so it is should not hurt.

Angular CLI outputs the font-awesome font files the dist root

1 Answers