angular2 webpack not loading font-awesome

1
votes

I am trying to test scss in angular2-seed provided by angular community.

Everything is working fine except font-awesome package.

Following is my package.json

    "devDependencies": {
 "angular2-template-loader": "^0.4.0",
 "awesome-typescript-loader": "^1.1.1",
 "bootstrap-sass": "^3.3.7",
 "css-loader": "^0.23.1",
 "font-awesome": "^4.6.3",
 "node-sass": "^3.8.0",
 "raw-loader": "^0.5.1",
 "sass-loader": "^4.0.0",
 "to-string-loader": "^1.1.4",
 "typescript": "~1.8.9",
 "typings": "~1.0.3",
 "webpack": "^1.12.9",
 "webpack-dev-server": "^1.14.0",
 "webpack-merge": "^0.8.4"
},

   "dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"core-js": "^2.2.0",
"ie-shim": "^0.1.0",
"rxjs": "5.0.0-beta.6",
"zone.js": "~0.6.12"
}

Following is my webpack.config.js loader part.

    module: {
loaders: [
  // .ts files for TypeScript
    { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
    { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
    { test: /\.html$/, loader: 'raw-loader' },
    { test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] },// sass-loader not scss-loader
    {test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loader: 'file?name=fonts/[name].[hash].[ext]?'},

]
}

in my app.component.ts, I have included the main.scss as following:

        styles:  [require("./res/scss/main.scss")],

Following is the snippet written to call font-awesome package:

    @import "~bootstrap-sass/assets/stylesheets/_bootstrap";
    @import "~font-awesome/scss/font-awesome";
    @font-face {
      font-family: 'FontAwesome';
      font-weight: normal;
      font-style: normal;
    }

Now the problem I am facing is that webpack fails to load font-awesome files. Following errors are shown in inspect element console

    GET http://localhost:3000/fonts/fontawesome-webfont.woff2?v=4.6.3 localhost/:1 
    GET http://localhost:3000/fonts/fontawesome-webfont.woff?v=4.6.3 localhost/:1 
    GET http://localhost:3000/fonts/fontawesome-webfont.ttf?v=4.6.3 localhost/:1
2
angularjsangularsasswebpack

2 Answers

0
votes

It is a known bug and the Angular team is currently working on it (priority = urgent ;) ).

Here is the link to the issue on GitHub: https://github.com/angular/angular-cli/issues/1463

0
votes

I see 2 problems with your code:

  1. convert your scss file to css and then to string by doing: 

    { test: /\.scss$/, exclude: /node_modules/, loaders: ['css-to-string-loader', 'css-loader', 'sass-loader'] },// sass-loader not scss-loader

  2. You did great by placing loaders for your font files but notice that font-awesome fonts has extension with version. so your loader testing /.woff$/ won't catch the extension: fontawesome-webfont.woff2?v=4.6.3 Try to add the following extensions it your loaders:

{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },