Uno tenía un programa construido con Angular 17, pero cuando uno intentó ejecutar ng construct
tenía un problema.
No loader is configured for ".woff2" recordsdata: node_modules/mathlive/fonts/KaTeX_Caligraphic-Daring.woff2
node_modules/mathlive/mathlive-fonts.css:1:254:
1 │ ...ight:700;src:url(fonts/KaTeX_Caligraphic-Daring.woff2) format("wof...
Esta línea se repitió en la consola. Es causado por una biblioteca llamada mathlive
Ese solía, bueno, representar matemáticas. (No, no me preguntes por qué uno no usa la biblioteca alternativa; hay una razón por la que uso esta biblioteca en lugar de otras bibliotecas de representación, y esa no entrará en detalles). Uno nunca intentó correr ng construct
antes y con ng serve
todo funcionó bien. Así que ahora tenemos que resolver el problema.
Como has notado, si uno se hubiera negado a instalar mathlive
localmente en la computadora usando npm set up
y en su lugar, obténlos de CDN, todo se resolvería. Esa es la manera fácil. Desafortunadamente, mi cliente se negó a conectar su computadora a Web para obtener problemas de seguridad, por lo que todo debe ejecutarse localmente; y CDN se convirtió en una opción no viable. ¿Esto ya provoca tu creatividad?
Si uno no hubiera usado Angular 17, pero se usara, digamos, Vanilla Webpack o EsBuild para construir mi aplicación net, podría modificar el webpack.config.json o el equivalente en Esbuild, para configurar un cargador. Esa es la solución que AI había sugerido. Desafortunadamente, dado que Angular 17 (o tal vez antes, uno no puede recordar correctamente), ya no usan Webpack, cambiado a ESBuild; Y peor, ocultaron la configuración de ESBuild en algún lugarpor lo que no es fácil, o incluso imposible, modificarlo usted mismo. Además, uno se niega a modificar cualquier cosa en caso de que se rompa. Entonces, tendremos que encontrar una solución alternativa.
Dado que CDN puede alojar el script en línea para que lo descargue, ¿por qué no puede alojarlo localmente? Eso significa escribir un controlador donde el etiqueta (y el
Etiqueta, si corresponde) podría su API localmente, y su función de backend, en su lugar, o reenvía un resultado de una base de datos (la razón más común por la que necesita una llamada de backend), está reenviando el archivo CSS al frontend. Así es como puede hacerlo: (esto es solo para CSS. Si necesita usarlo para JS, debe modificar el
“textual content/css”
)
utilizing System.Threading.Duties;
utilizing Microsoft.AspNetCore.Mvc;
namespace YourNamespace
{
[Route("api/[controller]")]
[ApiController]
public class MathliveFontsController : ControllerBase
{
personal readonly IWebHostEnvironment _environment;
public MathliveFontsController(IWebHostEnvironment atmosphere)
{
_environment = atmosphere;
}
[HttpGet("{filename}")]
public async Process GetFonts(string filename)
{
attempt {
// Outline the trail to your CSS recordsdata
string cssFilePath = Path.Mix(_environment.ContentRootPath, "Controllers", "mathlive", filename);
// Test if the file exists
if (!System.IO.File.Exists(cssFilePath))
{
return NotFound($"File {filename} not discovered.");
}
// Learn the CSS file content material
string cssContent = await System.IO.File.ReadAllTextAsync(cssFilePath);
return Content material(cssContent, "textual content/css");
} catch (Exception ex) {
return BadRequest($"Error loading CSS file: {ex.Message}");
}
}
}
}
Si comprende el código, había notado que había copiado la carpeta MathLive en el mismo directorio que mi controlador. Entonces la estructura de la carpeta se parece a esto:
mathlive/*
MathliveFontsController.cs
(different controller recordsdata)
Dentro de la carpeta de Mathlive, uno no copie todo de mi node_modules/mathlive
a aquí. Uno solo copió los archivos necesarios. Estos son:
- el conjunto
fonts
carpeta. (Entonces no hay masnode_modules/mathlive/fonts
– uno lo eliminó después de copiarlo). mathlive-fonts.css
ymathlive-static.css
Eso aún no está completo. Todavía necesitamos corregir el error de compilación causado por el desastre que dejamos node_modules/mathlive
. Eso se debe a los contenidos en mathlive-fonts.css
y mathlive-static.css
refiriéndose a la fonts
Carpeta, pero ahora toda la carpeta se había ido, por supuesto que recibe errores, ¡porque ya no podía encontrar la carpeta y los archivos!
X [ERROR] Couldn't resolve "fonts/KaTeX_Caligraphic-Common.woff2"
Uno intentó eliminar ambos archivos CSS, pero node_modules/mathlive/package deal.json
comienza a quejarse. Por lo tanto, uno tenía que agregarlo y negarse a modificar cualquier cosa en el archivo Packle.json. En cambio, dado que uno ya no necesita los 2 archivos CSS, uno pensó que uno podría eliminar el contenido de ellos y dejarlos como archivos ficticios. Y eso resolvió el problema.
Para confirmar, verifique que su programa obtenga con éxito los archivos CSS verificando que su sitio se ejecute correctamente, o abra la consola de depuración F12 en su navegador y verifique que obtenga con éxito. Sin embargo, uno notó en el caso de uno Incluso sin las fuentes, las matemáticas se presentan con éxito. Entonces, tal vez uno no necesite las fuentes después de todo.