Ngx-highlightjs en Angular Universal

En este proyecto vamos a instalar la libreria Ngx-highlightjs en Angular Universal tal y como avanzamos en el video https://www.youtube.com/watch?v=uwiHVmB3qw8

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:

 npm i ngx-highlightjs

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 deveremos aplicar las siguientes modificaciones al fichero app.module.ts:

 import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';

@NgModule({
  imports: [
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        fullLibraryLoader: () => import('highlight.js'),
        lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers

      }
    }
  ],
})
export class AppModule { }

Y también modificaremos el fichero angular.json:

  "styles": [
    "styles.css",
    "../node_modules/highlight.js/styles/github.css",
  ]

Adaptación para un entorno con SEO (Angular Universal)

En el caso de Angualar Universal la modificación es un poco diferente. La importación la realizaremos mediante una función, en este caso, la he llamado getHighlightLanguages():

 import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';

export function getHighlightLanguages() {
  return {
    useValue: {
      coreLibraryLoader: () => import('highlight.js/lib/core'),
      lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers
      languages: {
        typescript: () => import('highlight.js/lib/languages/typescript'),
        css: () => import('highlight.js/lib/languages/css'),
        xml: () => import('highlight.js/lib/languages/xml'),
        python: () => import('highlight.js/lib/languages/python'),
        bash: () => import('highlight.js/lib/languages/bash'),
      }
    }
  };
}

@NgModule({
  imports: [
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: getHighlightLanguages()
    }
  ],
})
export class AppModule { }