search

thardy / generator-ngbp

Yeoman generator based on the ngBoilerplate kickstarter, a best-practice boilerplate for any scale Angular project built on a highly modular, folder-by-feature structure.
100 stars 23 forks source link

Using angular-ui bootstrap components with fonts #22

Open deviantony opened 9 years ago

deviantony commented 9 years ago

When trying to use the datepicker component from the angular-ui bootstrap library, I got the following errors in Firefox:

NetworkError: 404 Not Found - http://localhost:9000/fonts/glyphicons-halflings-regular.woff

How can I link the fonts to my build? I've tried to add the vendor/bootstrap/dist/fonts* folder to the assets folder in the Gruntfile but with no success.

Is there any particular way of using these components? Can I easily replace these fonts by the one provided by Font Awesome?

thardy commented 9 years ago

I just got done fixing several other issues and don't have time to get to this tonight, but hopefully I'll have time to look at this over the weekend.

deviantony commented 9 years ago

The weird thing is that this error seems to happen on Firefox only, works fine in Chrome.

thardy commented 9 years ago

I fixed a similar issue this morning with vendorcss not being copied. I'm thinking vendor assets are not copied either. If you're adding that file to the vendor_files:assets variable in the gruntfile, I don't think there's a task setup to actually do anything with it.

Look at the one I just closed and see if that's the same scenario, just with assets instead of css - https://github.com/thardy/generator-ngbp/issues/23.

I'm going out of town this weekend, but I will look into it when I get a chance. If you want to tackle it sooner, look at my last commit for the pattern that may lead to your fix - https://github.com/thardy/generator-ngbp/commit/c345109e8cd0db302fbfed44e2799cf78b6209b5. We just need to do the same thing for assets that I did for css.

jluna79 commented 9 years ago

I've been taking a look to this. It seems that out of the box the copy:build_vendor_assets does work, you just have to add the files you want to be copied under vendor_files.assets.

However, the problem is that the actual 404 is being thrown because vendor assets are copied to the build/assets folder but the app looks for them in the build/fonts directory. Here is one of the errors I'm getting, started by a bootstrap's css:

Request URL:http://localhost:9000/fonts/glyphicons-halflings-regular.ttf Request Method:GET Status Code:404 Not Found

So, there are 2 solutions that I can think of:

  1. Create a new set name vendor_files.fonts and a new set of copy tasks that would copy the specified vendor fonts into build/fonts. This keeps automation and seems doable but something doesn't feel right for me, it is over-specific about having to create a lot of tasks for a very specifc thing (usually vendors do not need many fonts).
  2. Since we know that if you are using bootstrap you will need the glyphicons in the fonts folder why not create a task that will always copy all glyphs from the vendors/bootstrap folder into build/fonts?

@thardy which one (if any) would be the appropriate one?