Angular 17 + Mathlive: как я решил ошибку загрузчика. Woff2
23 июля 2025 г.У одной была программа, которая была построена с Angular 17, но когда кто -то пытался запустить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...
Эта линия продолжала повторяться в консоли. Это вызвано библиотекой под названиемmathliveЭто привыкли, чтобы сделать математику. (Нет, не спрашивайте меня, почему никто не использует альтернативную библиотеку; есть причина, по которой я использую эту библиотеку вместо других библиотек рендеринга, и это не вдается в подробности). Один никогда не пытался бежатьng buildдо и сng serve, все прошло нормально. Так что теперь мы должны решить проблему.
Как вы заметили, если кто -то отказался установитьmathliveлокально на компьютере с помощьюnpm installи вместо этого получите их от CDN, все будет решено. Это простой способ. К сожалению, мой клиент отказался подключить свой компьютер к Интернету для проблем безопасности, поэтому все необходимо работать локально; и CDN стал нежизнеспособным вариантом. Это уже вызывает ваше творчество?
Если кто -то не использовал Angular 17, но использовал, скажем, ванильный Webpack или Esbuild для создания моего веб -приложения, можно было бы изменить webpack.config.json или эквивалент в Esbuild для настройки загрузки. Это решение, которое предложил ИИ. К сожалению, поскольку Angular 17 (или, может быть, раньше, нельзя правильно помнить), они больше не используют WebPack, изменились на Esbuild; и, что еще хуже, они спрятали конфигурацию Esbuildгде-то, поэтому нелегко или даже невозможно, изменить его самостоятельно. Кроме того, один отказывается изменять что -либо на случай, если это сломается. Итак, нам придется найти альтернативное решение.
Поскольку CDN может разместить сценарий онлайн для загрузки, почему вы не можете размещать его на месте? Так что это означает написание контроллера, где<link>тег (и<script>Тег, если это применимо) может быть ваш API локально, и ваша функция бэкэнд, вместо этого Overling Результат из базы данных (самая распространенная причина, по которой вам нужен бэкэнд -вызов), вы пересылаете файл CSS на фронт. Вот как вы можете это сделать: (это только для CSS. Если вам нужно использовать его для JS, вам нужно изменить“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}");
}
}
}
}
Если вы понимаете код, вы заметили, что кто -то скопировал папку MathLive в тот же каталог, что и мой контроллер. Итак, структура папок выглядит примерно так:
mathlive/*
MathliveFontsController.cs
(other controller files)
Внутри папки Mathlive не копировать все из моегоnode_modules/mathliveздесь. Один только скопировал необходимые файлы. Это:
- все
fontsпапка. (Так что нет большеnode_modules/mathlive/fonts- один удалил его после копирования). mathlive-fonts.css, иmathlive-static.css
Это еще не завершено. Нам все еще нужно исправить ошибку компиляции, вызванную беспорядком, в котором мы оставилиnode_modules/mathliveПолем Это из -за содержания вmathlive-fonts.cssиmathlive-static.cssСсылаясь наfontsПапка, но теперь вся папка исчезла, конечно, вы получаете ошибки, потому что она больше не может найти папку и файлы!
X [ERROR] Could not resolve "fonts/KaTeX_Caligraphic-Regular.woff2"
Один попытался удалить оба файла CSS, ноnode_modules/mathlive/package.jsonначинает жаловаться. Таким образом, нужно было добавить его обратно и отказаться от изменения в файле Package.json. Вместо этого, поскольку никто больше не нуждается в двух файлах CSS, один решил, что можно удалить их содержание и оставить их в качестве фиктивных файлов. И это решило проблему.
Чтобы подтвердить, убедитесь, что ваша программа успешно получает файлы CSS, проверив, что ваш сайт работает правильно, или открыть консоль отладки F12 в вашем браузере, и убедитесь, что он успешно получает. Хотя, заметил в своем случае,Даже без шрифтов математика успешно воспроизводитПолем Так что, возможно, в конце концов не нужны шрифты.
Оригинал