Ngx-highlightjs con Angular SSR
En este proyecto vamos a instalar la libreria Ngx-highlightjs de forma compatible con Angular SSR tal y como avanzamos en el video https://www.youtube.com/watch?v=uwiHVmB3qw8
Nota 2026: ejemplo NgModule frente a Angular standalone
Este articulo conserva la configuracion original basada en NgModule porque sigue siendo util para mantener proyectos Angular Universal antiguos. En aplicaciones Angular modernas, sobre todo standalone, la misma idea suele moverse a app.config.ts o a la configuracion de providers de la aplicacion.
Para proyectos nuevos, prioriza la configuracion reducida: cargar el core de highlight.js y solo los lenguajes usados por la pagina. Si trabajas con APIs standalone estilo Angular 20, el articulo relacionado mas nuevo muestra la configuracion basada en providers.
Instalación
Cómo se ha visto en el video, la instalación básica se puede llevar a cabo con el siguiente cómando:
Adaptación para un entorno sin SEO
Una vez realizada está modificación, si queremos ejecutar una versión no adaptada al SEO de Angular únicamente deberemos aplicar las siguientes modificaciones al fichero app.module.ts:
Y también modificaremos el fichero angular.json:
Adaptacion para un entorno con SEO y SSR
En un entorno SSR la modificacion es un poco diferente. La importacion la realizaremos mediante una funcion, en este caso, la he llamado getHighlightLanguages():
Checklist para producción
En una web real conviene evitar importar todo highlight.js si solo necesitas unos pocos lenguajes. Cargar el core y registrar únicamente TypeScript, HTML, CSS, Bash o Python suele mantener el bundle más pequeño.
El código resaltado debe seguir siendo legible en el HTML renderizado por servidor. El coloreado mejora la experiencia hidratada, pero los crawlers y los usuarios sin JavaScript también necesitan código visible, encabezados y explicación alrededor.
Alternativas y trabajo relacionado en SEO Angular
Si la página tiene muchos bloques de código, combina el resaltado de sintaxis con componentes diferidos, canonical claros y enlaces internos hacia el resto de contenido Angular SSR.
Conclusión
ngx-highlightjs es útil cuando el tutorial depende de ejemplos de código legibles, pero la configuración SEO-friendly es la que limita lenguajes, evita cargar JavaScript innecesario y mantiene el artículo comprensible antes de la hidratación.