1

I'm creating an angular2 application and I'm trying to use font-awesome with the package font-awesome-webpack. Bottom line, currently, I just see a little square appearing. Moreover, in the "Google Developer Toolbar", I can see this:

Failed to decode downloaded font: http://dev-sp-build.sfpd.fgov.be:3000/af7ae505a9eed503f8b8e6982036873e.woff2 releases:1 OTS parsing error: invalid version tag releases:1 Failed to decode downloaded font: http://dev-sp-build.sfpd.fgov.be:3000/fee66e712a8a08eef5805a46892932ad.woff releases:1 OTS parsing error: invalid version tag releases:1 Failed to decode downloaded font: http://dev-sp-build.sfpd.fgov.be:3000/b06871f281fee6b241d60582ae9369b9.ttf releases:1 OTS parsing error: invalid version tag

So I guess the issue related to the font files.

My folders structure is the following one:

/
   /dist
   /src
      /app
   /webpack
   index.html

Here is my webpack configuration:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },

    resolve: {
        extensions: ['', '.ts', '.js']
    },

    output: {
        path: helpers.root('dist'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    module: {
        loaders: [
          {
              test: /\.ts$/,
              loaders: ['awesome-typescript-loader', 'angular2-template-loader']
          },
          {
              test: /\.html$/,
              loader: 'html'
          },
          {
              test: /\.(png|jpe?g|gif|ico)$/,
              loader: 'file?name=assets/[name].[hash].[ext]'
          },
          {
              test: /\.css$/,
              exclude: helpers.root('src', 'app'),
              loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
          },
          {
              test: /\.css$/,
              include: helpers.root('src', 'app'),
              loader: 'raw'
          },
          {
              test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
              loader: "url-loader?limit=10000&mimetype=application/font-woff"
          },
          {
              test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
              loader: "file-loader"
          }
        ]
    },

    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          name: ['app', 'vendor', 'polyfills']
      }),
      new ExtractTextPlugin('[name].css')
    ]
};

And my "index.html" is the following:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Administration</title>

        <base href="/">
    </head>
    <body>
        <app-admin></app-admin>

        <script src="/dist/polyfills.js"></script>
        <script src="/dist/vendor.js"></script>
        <script src="/dist/app.js"></script>
    </body>
</html>

And finally, the "main.ts" file contains this line:

require('font-awesome-webpack');

Note that when I click on the URL in the warning message in the "Google Developer toolbar", Chrome shows the font correctly, so I don't really get it how come it can't load it.

Note also that I don't want to use "webpack-dev-server", which is why I put the "index.html" at that level (the project also contains a WCF web service).

ssougnez
  • 5,315
  • 11
  • 46
  • 79
  • Ok, I finally solved my issue and as I had an upvote, here is the solution: http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts. The answer is correct but in my case, "publicPath" had to be set on "/dist" and not the full URL. Also another remark: I'm using IIS, so I followed this post: https://weblog.west-wind.com/posts/2016/jan/25/fontawesome-fonts-and-mime-types-in-iis-and-other-web-servers to enable it to load WOFF2 files. – ssougnez Nov 24 '16 at 08:29

0 Answers0