Unable to inline fonts from npm modules

Question

I am running Angular 8 with the Custom Webpack builder.

"builder": "@angular-builders/custom-webpack:browser",

I have a reference to the ngx-datatable, and I reference the css as follows:

@import '~@swimlane/ngx-datatable/release/assets/icons.css';

That referenced css file has a font-face like so:

@font-face {
  font-family: "data-table";
  src:url("fonts/data-table.eot");
  src:url("fonts/data-table.eot?#iefix") format("embedded-opentype"),
    url("fonts/data-table.woff") format("woff"),
    url("fonts/data-table.ttf") format("truetype"),
    url("fonts/data-table.svg#data-table") format("svg");
  font-weight: normal;
  font-style: normal;

What I want to do is inline the data-table font file into my webpack'd build. My understanding is that, after installing the base64-inline-loader, I should be able to have a custom webpack config that looks like this:

module.exports = {
  module: {
    rules: [
 {
   test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
   use: 'base64-inline-loader'
 }
    ]
  }
};

However, after running the build, nothing gets inlined, and I can see the browser is making a request to

http://localhost:4200/data-table.woff

It's not clear to me how to fix this. My understanding is that for files like .png, .woff, .eot, etc, the default Angular webpack configuration will use the file-loader, which will spit out a hashed version of the file in the dist directory. However even after adding the base64-inline-loader, I am still seeing the files get copied and hashed, instead of inlined.

Edit

I believe my problem is related to Angular 7, svg and sass how to set relative path, but I'm still not sure how to fix it.

Related post: https://stackoverflow.com/questions/41657087/webpack-inline-font-with-url-loader — B--rian, Sep 23 '19 at 14:42
Could you please share you complete `webpack.config` plus the full command line with which you are calling it? What is the output of `npm ls webpack`? — B--rian, Sep 23 '19 at 15:12

B--rian · Answer 1 · 2019-09-23T20:50:53.430

Could it be that your Webpack.config.js might need some tweaking?

I prefer to keep the command line clean (here: webpack --config Webpack.config.js) and put everything into the configuration file. Assuming that you are using a newer version of Webpack, I suggest a configuration file similar to this this

var path = require('path'); // this is essential for path.resolve()

module.exports = {
  mode: 'development',
  entry: './yourEntryPage.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // specifies the output
    filename: 'bundle.js'
  },
 devtool: "source-map", // for debugging webpack's output.
  module: {
    rules: [
        {   test: /\.jsx$|\.es6$|\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['react'],
                }
            },
            exclude: /node_modules/
        },
        {   test: /\.(png|jpg|gif)$/,
            use: {  
                loader: 'file-loader',
                options: { 
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            }
        },
        {   test: /\.(ttf|eot|woff(2)?)$/, // modified regex matching files with font extension
            use: 'base64-inline-loader'
        }           
    ]
  }
};

You cannot directly use this configuration file, but I hope my suggestion gives you an idea on what a not-so-minimal configuration for Webpack could look like. The Webpack.config.js you suggested might not only have a path problem, but might also miss to specify the hierarchy of the different loaders. It could well be that your inline-loader case-statement is never reached.

Note: I do not know @angular-builders/custom-webpack:browser, but I hope it helps anyhow if that package does not interfere too much with Webpack.config.js. My experience tells me that in 95% of the cases the cuplrit is a webpack configuration issue. A --verbose, --progress or -d might become handy, see Webpack's CLI documentation.

Thanks for your help. I've been getting closer to a workable solution. The problem seems Angular specific. As mentioned here - https://stackoverflow.com/questions/53590073/angular-7-svg-and-sass-how-to-set-relative-path, the postcssPluginCreator seems to override any other settings. — user981225, Sep 25 '19 at 20:08

score 0 · Answer 2 · answered Sep 30 '19 at 13:17

The webpack will inline the font into your output .js file (or .woff file) but will not serve it. This means that you have to manually add this font in your static assets in angular.json:

"assets": [
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/swimlane_or_whatever/assets/",
                "output": "my-assets"
              },

The code above means that after you run the development server, the resource /my-assets/fonts.woff will be resolved and passed to the client.

Unable to inline fonts from npm modules

2 Answers2