How to add awesome on angular2 webpack

Question

I use angular2 webpack ,bootstrap 4, and want to include awesome font

'Package.json':

"font-awesome": "^4.6.3", "font-awesome-loader": "1.0.0",
"awesome-typescript-loader": "^2.2.1",

'webpack.common.js'

module: {
          postcss: [autoprefixer],  
          preLoaders: [
            {
              test: /\.ts$/,
              loader: 'string-replace-loader',
              query: {
                search: '(System|SystemJS)(.*[\\n\\r]\\s*\\.|\\.)import\\((.+)\\)',
                replace: '$1.import($3).then(mod => (mod.__esModule && mod.default) ? mod.default : mod)',
                flags: 'g'
              },
              include: [helpers.root('src')]
            },

          ],
          loaders: [
            {
              test: /\.ts$/,
              loaders: [
                '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
                'awesome-typescript-loader',
                'angular2-template-loader'
              ],
              exclude: [/\.(spec|e2e)\.ts$/]
            },


            {
              test: /\.json$/,
              loader: 'json-loader'
            },
            { test: /\.css$/, loader: 'raw' },

            {
              test: /\.html$/,
              loader: 'raw-loader',
            },

            { test: /\.(jpg|png|gif)$/, loader: 'file' },
            { test: /\.scss$/, loaders: ['raw', 'postcss?sourceMap', 'sass?sourceMap'] },
            { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' },

            { test: /bootstrap\/dist\/js\//, loader: 'imports?jQuery=jquery' }
          ],

          postLoaders: [
            {
              test: /\.js$/,
              loader: 'string-replace-loader',
              query: {
                search: 'var sourceMappingUrl = extractSourceMappingUrl\\(cssText\\);',
                replace: 'var sourceMappingUrl = "";',
                flags: 'g'
              }
            }
          ]

'vendor.js'

import 'bootstrap-loader';
import 'font-awesome-loader';

when i use in home.component.ts

 <button type="submit" name="search" >
      <i class="fa fa-search"></i>
    </button>

there is en err:

./~/css-loader!./~/raw-loader!./~/font-awesome/css/font-awesome.css?
  Module build failed: Unknown word (1:1)

   @ ./~/style-loader!./~/css-loader!./~/font-awesome/css/font-awesome.css?
4:14-102
    @ ./src/vendor.browser.ts
  @ multi vendor

Answer 1

try using this

    { 
 test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
          {
            test: /\.(woff|woff2|eot|ttf)(\?.*$|$)/,
            loader: 'url-loader?importLoaders=1&limit=100000'
          }

for import bootstrap use this line

import 'bootstrap/dist/css/bootstrap.css' 

and for importing font use this line in your css file

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i); 

these are worked for me hope it will help to you