Do not include all languages

[Marvin Heilemann]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question

So I have followed the steps to configure the plugin but my bundle stats tell me that all languages are bundled, am I missing something?

import { HighlightOptions } from 'ngx-highlightjs'

const highlightLanguages = () => ({
  typescript: () => import('highlight.js/lib/languages/typescript'),
  scss: () => import('highlight.js/lib/languages/scss'),
  json: () => import('highlight.js/lib/languages/json'),
  text: () => import('highlight.js/lib/languages/plaintext'),
})

export const highlightOptions: HighlightOptions = {
  languages: highlightLanguages(),
  lineNumbers: true,
}

// ...
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: highlightOptions,
    },

OS and Version?

macOS 10.15.5 (19F101)

Versions

Angular CLI: 9.1.9
Node: 12.18.0
OS: darwin x64

Angular: 9.1.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.9
@angular-devkit/build-angular 0.901.9
@angular-devkit/build-optimizer 0.901.9
@angular-devkit/build-webpack 0.901.9
@angular-devkit/core 9.1.9
@angular-devkit/schematics 9.1.9
@angular/cdk 9.2.4
@angular/cli 9.1.9
@ngtools/webpack 9.1.9
@schematics/angular 9.1.9
@schematics/update 0.901.9
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

[Murhaf Sousli]

We don't include all languages, the script is only fetched when no specific languages are specified

[Marvin Heilemann]

This is what my production build shows. I expect it to just include languages I need and have specified.

[Marvin Heilemann]

Okay I now see why they are all included. I think you should consider taking another approach of loading optional stuff and by default not included everything but a small core. Take a look at dayjs how they did it with locales, much better for the bundle size: https://day.js.org/docs/en/i18n/loading-into-nodejs. Sorry, I need to remove highlightjs now since our customer and company has high standards and bundle checks.

ngx-highlightjs/projects/ngx-highlightjs/src/lib/highlight.loader.ts

Lines 72 to 98 in 8a8c06a

 function loadCoreLibrary(): Observable<HighlightLibrary> { 
   return importModule(import('highlight.js/lib/highlight')); 
 } 
  
 /** 
  * Import highlight.js library with all languages 
  */ 
 function loadAllLibrary(): Observable<HighlightLibrary> { 
   return importModule(import('highlight.js')); 
 } 
  
 /** 
  * Import line numbers library 
  */ 
 function loadLineNumbers(): Observable<any> { 
   return importModule(import('highlightjs-line-numbers.js')); 
 } 
  
 /** 
  * Map loader response to module object 
  */ 
 const importModule = (moduleLoader: Promise<any>): Observable<any> => { 
   return from(moduleLoader).pipe( 
     filter((module: any) => !!module && !!module.default), 
     map((module: any) => module.default) 
   ); 
 }; 

[Murhaf Sousli]

@muuvmuuv It doesn't load the whole script in your bundle, they are included in the bundle and only loaded if necessary, but they will never be loaded if you load the languages manually.

[Marvin Heilemann]

OK, I understand that but it will anyway increase the bundle size and therefore it is impossible to make proper code analyses or use budgets. I'm personally not a fan of having stuff on my server I don't need, no matter how small and because our CDN would need to replicate that stuff, which is unnecessary.

[Murhaf Sousli]

Fixed in 4.1.0