Angular-cli- Unable to bundle font-awesome

Question

I have built my Angular2 app and everything is working fine. Now I included font-awesome and when I bundled the app it gives the error shown in the picture. It is unable to load woff and woff2 files. My styles look like below -

            "styles": [
        "styles.css",
          "../node_modules/font-awesome/css/font-awesome.css",
          "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
  "../node_modules/fullcalendar/dist/fullcalendar.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

You must include in your question how you're importing it in your module or people can't help. — developer033, Apr 12 '17 at 18:51
As suggested, I am including it in my "styles":[ "../node_modules/font-awesome/css/font-awesome.css",]. It is working fine when I do ng serve. No error is thrown in console. It gives error only when I do ng build and manually deploy on IIS. — indra257, Apr 12 '17 at 18:54
Updated the question with my angular-cli.json - Styles property. — indra257, Apr 12 '17 at 18:59
@Aravind The project is created through Angular-cli. So it has the same folder structure. It works fine when I run my app. I tried Alon answer(http://stackoverflow.com/questions/38796541/how-to-add-font-awesome-to-angular-2-cli-project) but it seems outdated because "addons" is not allowed now. So steps I followed, i) run npm install - save font-awesome ii) included the css in my Styles. iii) ng build .. Do I have to follow any other steps. — indra257, Apr 12 '17 at 19:30
Try adding those paths to the assets section of the angular-cli.json instead, and see if that works better. I have had some luck with that. — R. Richards, Apr 12 '17 at 19:32
@R.Richards Which paths? all the css references I showed above? — indra257, Apr 12 '17 at 19:39
@R.Richards After doing that, number of files in my dist folder got reduced. There are no more .tff, woff, woff2 files. The issue still exist. Previously there are many .tff, woff, woff2 files. ( but the six files shown in the above picture doesn't exist). — indra257, Apr 12 '17 at 19:50
Hello, did you find a solution to your problem ? If yes, can you post your answer ? — Neyt, Nov 16 '17 at 13:43

score 0 · Answer 1 · answered Apr 12 '17 at 19:36

0

AS the folder structures are changed in angular recent version you should be referring to a wrong path fix it by

"styles": [
    "styles.css",
      "node_modules/font-awesome/css/font-awesome.css",
      "node_modules/primeng/resources/primeng.min.css",
      "node_modules/primeng/resources/themes/omega/theme.css",
      "node_modules/fullcalendar/dist/fullcalendar.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],

answered Apr 12 '17 at 19:36

Aravind

40,391
16
91
110

But it works fine when I do ng serve and all the icons are displayed properly, also the console is empty. The issue is only when I do ng build. – indra257 Apr 12 '17 at 19:41
did you try this answer? – Aravind Apr 12 '17 at 19:55
Yes. It throws error. because it couldn't able to resolve the relative path. Also I added Project structure screenshot to the question for your reference. – indra257 Apr 12 '17 at 20:01
Where is your config file for your app? – Aravind Apr 12 '17 at 20:03
That very kind of you Aravind. Unfortunately I can't come to teamviewer now. Did you include font-awesome and Primeng in our project and bundle it properly without any errors in console. – indra257 Apr 12 '17 at 20:10
please edit the above comment. this issue fixed? or need more help. after that will help on the left menu post – Aravind Apr 12 '17 at 20:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/141586/discussion-between-indra257-and-aravind). – indra257 Apr 12 '17 at 20:23

Angular-cli- Unable to bundle font-awesome

1 Answers1