Highlight.js library was not imported!

[Suhail KC]

- [x] bug report 
- [ ] feature request
- [ ] question

OS and Version?

OS: macOS Catalina

Versions

npm version: 6.13.4
Node Version: 12.14.0

Angular CLI: 10.0.5
Node: 12.14.0
OS: darwin x64

Angular: 10.0.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace:

Package Version

@angular-devkit/architect 0.1000.5
@angular-devkit/build-angular 0.1000.5
@angular-devkit/build-optimizer 0.1000.5
@angular-devkit/build-webpack 0.1000.5
@angular-devkit/core 10.0.5
@angular-devkit/schematics 10.0.5
@angular/cli 10.0.5
@ngtools/webpack 10.0.5
@schematics/angular 10.0.5
@schematics/update 0.1000.5
rxjs 6.6.2
typescript 3.9.7
webpack 4.43.0

Repro steps

module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { myComponent } from './my.component';

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

@NgModule({
  declarations: [myComponent],
  imports: [
    CommonModule,
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/highlight'),
        languages: {
          xml: () => import('highlight.js/lib/languages/xml'),
          typescript: () => import('highlight.js/lib/languages/typescript'),
          scss: () => import('highlight.js/lib/languages/scss'),
        }
      }
    }
  ],
})
export class myModule { }

componet
<pre><code [highlight]="myCode"></code></pre>

The log given by the failure

I have getting the error in the console:
[HLJS] Highlight.js library was not imported! ngx-highlightjs.js:36

Mention any other details that might be useful

I can't figure out this issue. I have tried many times.

[jiayi]

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { myComponent } from './my.component';

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

@NgModule({
  declarations: [myComponent],
  imports: [
    CommonModule,
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        languages: {
          xml: () => import('highlight.js/lib/languages/xml'),
          typescript: () => import('highlight.js/lib/languages/typescript'),
          scss: () => import('highlight.js/lib/languages/scss'),
        }
      }
    }
  ],
})
export class myModule { }

highlight.js@10.x

@suhailkc highlight to core work ok!

[Murhaf Sousli]

Because you can import the highlight options token only in the root module

{
    provide: HIGHLIGHT_OPTIONS,
    useValue: {
      coreLibraryLoader: () => import('highlight.js/lib/highlight'),
      languages: {
        xml: () => import('highlight.js/lib/languages/xml'), 
        typescript: () => import('highlight.js/lib/languages/typescript'),
        scss: () => import('highlight.js/lib/languages/scss'),
      }
   }
}

Then HighlightModule can be imported in any child module

[Suhail KC]

@MurhafSousli
Thank you.
It's working fine now.

I have moved the highlight options to the AppModule and changed highlight.js/lib/highlight to highlight.js/lib/core