Use Font-awesome in angluar2 webpack

Question

I've been struggling all day to install font-awesome in an angular2 application that uses webpack.

updated my webpack.config.js to include loading font files:

 module: {
loaders: [
  { test: /\.ts$/,   loader: 'awesome-typescript-loader' },
  { test: /\.json$/, loader: 'json-loader' },
  { test: /\.html/,  loader: 'raw-loader' },
  { test: /\.css$/,  loader: 'to-string-loader!css-loader' },
  // For font-awesome
  {test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file?name=fonts/[name].[hash].[ext]?'}
]

},

Installed font-awesome using:

npm install font-awesome

Added require to ts file require('../node_modules/font-awesome/css/font-awesome.css');

And I keep on getting this error:

ERROR in ./~/font-awesome/css/font-awesome.css Module build failed: Error: Cannot find module '../fonts/fontawesome-webfont.eot?v=4.6.3'

Any ideas how to fix this ?.

There is a plugin link, however it has not been updated since 2 months ago and i don't know if it supports newer versions of angular — mpilliador

yurzui yurzui · Accepted Answer · 2016-09-14T11:52:33

I guess you should use style-loader instead of to-string-loader:

{ test: /\.css$/,  loader: 'style!css' },

Use Font-awesome in angluar2 webpack

1 Answers