One had a program that was built with Angular 17, but when one tried to run ng build, it had a problem. ng build No loader is configured for ".woff2" files: node_modules/mathlive/fonts/KaTeX_Caligraphic-Bold.woff2

    node_modules/mathlive/mathlive-fonts.css:1:254:
      1 │ ...ight:700;src:url(fonts/KaTeX_Caligraphic-Bold.woff2) format("wof... No loader is configured for ".woff2" files: node_modules/mathlive/fonts/KaTeX_Caligraphic-Bold.woff2

    node_modules/mathlive/mathlive-fonts.css:1:254:
      1 │ ...ight:700;src:url(fonts/KaTeX_Caligraphic-Bold.woff2) format("wof... This line kept repeating itself in the console. It's caused by a library called mathlive that one used to, well, render math. (No, don't ask me why one don't use alternative library; there's a reason why I use this library instead of other rendering libraries, and that one won't go into details). One never tried to run ng build before, and with ng serve, everything ran fine. So now we have to solve the problem. mathlive ng build ng serve As you've noticed, if one had refused to install mathlive locally on the computer using npm install, and instead get them from CDN instead, everything would be solved. That's the easy way. Unfortunately, my client refused to connect his/her computer to the internet for security issues, so everything needs to run locally; and CDN became a non-viable option. Does this already sparks your creativity? mathlive npm install If one hadn't used Angular 17, but used, say, vanilla Webpack or ESBuild to build my web application, one might be able to modify the webpack.config.json or the equivalent in ESBuild, to configure a loader. That's the solution that AI had suggested. Unfortunately, since Angular 17 (or maybe earlier, one can’t remember correctly), they no longer use webpack, changed to ESBuild; and worse, they hid the ESBuild configuration somewhere, so it's not easy, or even impossible, to modify it yourself. Plus, one refuse to modify anything in case it break. So, we'll have to find an alternative solution. somewhere Since CDN can host the script online for you to download, why can’t you host them locally? So that means writing a controller where the <link> tag (and the <script> tag, if applicable) could your api locally, and your backend function, instead o forwarding a result from a database (the most common reason you need a backend call for), you're forwarding the css file to the frontend. Here's how you can do it: (This is only for CSS. If you need to use it for JS, you need to modify the “text/css”) <link> <script> “text/css” using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace YourNamespace
{
    [Route("api/[controller]")]
    [ApiController]
    public class MathliveFontsController : ControllerBase
    {
        private readonly IWebHostEnvironment _environment;
        public MathliveFontsController(IWebHostEnvironment environment)
        {
            _environment = environment;
        }

        [HttpGet("{filename}")]
        public async Task<IActionResult> GetFonts(string filename)
        {
            try {
              // Define the path to your CSS files
              string cssFilePath = Path.Combine(_environment.ContentRootPath, "Controllers", "mathlive", filename);

              // Check if the file exists
              if (!System.IO.File.Exists(cssFilePath))
              {
                  return NotFound($"File {filename} not found.");
              }

              // Read the CSS file content
              string cssContent = await System.IO.File.ReadAllTextAsync(cssFilePath);
              return Content(cssContent, "text/css");
            } catch (Exception ex) {
              return BadRequest($"Error loading CSS file: {ex.Message}");
            }
        }
    }
} using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace YourNamespace
{
    [Route("api/[controller]")]
    [ApiController]
    public class MathliveFontsController : ControllerBase
    {
        private readonly IWebHostEnvironment _environment;
        public MathliveFontsController(IWebHostEnvironment environment)
        {
            _environment = environment;
        }

        [HttpGet("{filename}")]
        public async Task<IActionResult> GetFonts(string filename)
        {
            try {
              // Define the path to your CSS files
              string cssFilePath = Path.Combine(_environment.ContentRootPath, "Controllers", "mathlive", filename);

              // Check if the file exists
              if (!System.IO.File.Exists(cssFilePath))
              {
                  return NotFound($"File {filename} not found.");
              }

              // Read the CSS file content
              string cssContent = await System.IO.File.ReadAllTextAsync(cssFilePath);
              return Content(cssContent, "text/css");
            } catch (Exception ex) {
              return BadRequest($"Error loading CSS file: {ex.Message}");
            }
        }
    }
} If you understand the code, you'd noticed one’d copied the mathlive folder into the same directory as my controller. So the folder structure looks something like this: mathlive/*
MathliveFontsController.cs
(other controller files) mathlive/*
MathliveFontsController.cs
(other controller files) Inside mathlive folder, One don't copy everything from my node_modules/mathlive to here. One only copied the necessary files. These are: node_modules/mathlive the entire fonts folder. (So there's no more node_modules/mathlive/fonts -- one'd deleted it after copying it out).
mathlive-fonts.css, and
mathlive-static.css the entire fonts folder. (So there's no more node_modules/mathlive/fonts -- one'd deleted it after copying it out). fonts node_modules/mathlive/fonts mathlive-fonts.css, and mathlive-fonts.css mathlive-static.css mathlive-static.css That's not complete yet. We still need to fix the compilation error caused by the mess we left in node_modules/mathlive. That’s because of the contents in mathlive-fonts.css and mathlive-static.css referring to the fonts folder, but now the whole folder were gone, of course you get errors, because it could no longer find the folder and the files! node_modules/mathlive mathlive-fonts.css mathlive-static.css fonts X [ERROR] Could not resolve "fonts/KaTeX_Caligraphic-Regular.woff2" X [ERROR] Could not resolve "fonts/KaTeX_Caligraphic-Regular.woff2" One tried deleting both css files, but node_modules/mathlive/package.json starts to complain. So one had to add it back and refuse to modify anything in the package.json file. Instead, since one don’t need the 2 css files anymore, one figured that one could delete the content of them and leave them as dummy files. And that solved the issue. node_modules/mathlive/package.json To confirm, check that your program successfully fetch the css files by checking that your site runs correctly, or open F12 Debugging Console on your browser and check that it fetches  successfully. Though, one noticed in one's case, even without the fonts, the math renders successfully. So perhaps one don't need the fonts after all. even without the fonts, the math renders successfully

This story contains new, firsthand information uncovered by the writer.

Microsoft

Your AI Assistant Is Dumber Than You Think

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Angular 17 + Mathlive: How I Solved the .woff2 Loader Error

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Everyone’s an AI User Now—But No One Read the Manual

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Everyone’s an AI User Now—But No One Read the Manual

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps