style cannot load font awesome font file in Angular2SPA #1361

New Issue

fergalmoran · 2025-08-09T17:19:51Z

fergalmoran commented

2025-08-09 17:19:51 +00:00

Originally created by @nklt on 9/27/2016

While trying to use one of PrimeNg's sample, in Angular2SPA template, which required to add font-awesome to the Component style's path to load font awesome's CSS file. The URL loader has trouble handling the font file called within one of font awesome's CSS, and showed the following error:

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3
Module parse failed: C:\workspace10\Angular2Spa\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.6.3 Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

The sample code is tested in counter.component.ts, and is based on PrimeNg's official sample code.
http://www.primefaces.org/primeng/#/setup

import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {AccordionModule} from 'primeng/components/accordion/accordion';
import {MenuItem} from 'primeng/components/common/api';
import {InputTextModule} from 'primeng/primeng';

@Component({
    selector: 'counter',
    styles: [
        require('../../../../node_modules/primeng/resources/themes/omega/theme.css'),
        require('../../../../node_modules/font-awesome/css/font-awesome.min.css'),
        require('../../../../node_modules/primeng/resources/primeng.min.css')],
    template: require('./counter.component.html')
})
export class CounterComponent {
    public currentCount = 0;

    public incrementCounter() {
        this.currentCount++;
    }
}

the WebPack file is modified to use url-loader to handle .eot file, but did not work.

var path = require('path');
var webpack = require('webpack');

var isDevBuild = process.env.ASPNETCORE_ENVIRONMENT === 'Development';

module.exports = {
    devtool: isDevBuild ? 'inline-source-map' : null,
    resolve: { extensions: [ '', '.js', '.ts' ] },
    entry: { main: ['./ClientApp/boot-client.ts'] },
    module: {
        loaders: [
            { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
            { test: /\.html$/, loader: 'raw' },
            { test: /\.css/, loader: 'to-string!css' },
            { test: /\.(eot|woff|woff2|ttf|png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
        ]
    },
    output: {
        path: path.join(__dirname, 'wwwroot', 'dist'),
        filename: '[name].js',
        publicPath: '/dist/'
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        })
    ].concat(isDevBuild ? [] : [
        // Plugins that apply in production builds only
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ])
};

*Originally created by @nklt on 9/27/2016* While trying to use one of PrimeNg's sample, in Angular2SPA template, which required to add font-awesome to the Component style's path to load font awesome's CSS file. The URL loader has trouble handling the font file called within one of font awesome's CSS, and showed the following error: ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3 Module parse failed: C:\workspace10\Angular2Spa\node_modules\font-awesome\fonts\fontawesome-webfont.eot?v=4.6.3 Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type. The sample code is tested in counter.component.ts, and is based on PrimeNg's official sample code. http://www.primefaces.org/primeng/#/setup ``` import { Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {AccordionModule} from 'primeng/components/accordion/accordion'; import {MenuItem} from 'primeng/components/common/api'; import {InputTextModule} from 'primeng/primeng'; @Component({ selector: 'counter', styles: [ require('../../../../node_modules/primeng/resources/themes/omega/theme.css'), require('../../../../node_modules/font-awesome/css/font-awesome.min.css'), require('../../../../node_modules/primeng/resources/primeng.min.css')], template: require('./counter.component.html') }) export class CounterComponent { public currentCount = 0; public incrementCounter() { this.currentCount++; } } ``` the WebPack file is modified to use url-loader to handle .eot file, but did not work. ``` var path = require('path'); var webpack = require('webpack'); var isDevBuild = process.env.ASPNETCORE_ENVIRONMENT === 'Development'; module.exports = { devtool: isDevBuild ? 'inline-source-map' : null, resolve: { extensions: [ '', '.js', '.ts' ] }, entry: { main: ['./ClientApp/boot-client.ts'] }, module: { loaders: [ { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, { test: /\.html$/, loader: 'raw' }, { test: /\.css/, loader: 'to-string!css' }, { test: /\.(eot|woff|woff2|ttf|png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } ] }, output: { path: path.join(__dirname, 'wwwroot', 'dist'), filename: '[name].js', publicPath: '/dist/' }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }) ].concat(isDevBuild ? [] : [ // Plugins that apply in production builds only new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin() ]) }; ```

fergalmoran closed this issue

2025-08-09 17:19:51 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1361