This content originally appeared on HackerNoon and was authored by Wabinab
One had a program that was built with Angular 17, but when one tried to run ng build, it had a problem.
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.
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?
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.
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”)
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)
Inside mathlive folder, One don't copy everything from my node_modules/mathlive to here. One only copied the necessary files. These are:
- the entire
fontsfolder. (So there's no morenode_modules/mathlive/fonts-- one'd deleted it after copying it out). mathlive-fonts.css, andmathlive-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!
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.
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.
This content originally appeared on HackerNoon and was authored by Wabinab
Wabinab | Sciencx (2025-07-23T05:50:22+00:00) Angular 17 + Mathlive: How I Solved the .woff2 Loader Error. Retrieved from https://www.scien.cx/2025/07/23/angular-17-mathlive-how-i-solved-the-woff2-loader-error/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.