Highlight.js library was not imported!

[suhailkc]

- [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.

[jiayisheji]

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!

[MurhafSousli]

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

[suhailkc]

@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