ngx-highlightjs: Unable to load hljs library TypeError: hljs.registerLanguage is not a function

Bug Report or Feature Request (mark with an `x`)

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

OS and Version?

MacOS Catalina version 10.15.3

Versions

Angular CLI: 9.1.4 Node: 12.16.1 OS: darwin x64

Repro steps

I just followed the steps given in the documentation https://www.npmjs.com/package/ngx-highlightjs#import-highlighting-languages

Below is my app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NoInternetComponent } from './components/no-internet/no-internet.component';
import { HomeComponent } from './components/home/home.component';
import { DateExtensionComponent } from './components/date-extension/date-extension.component';

/**
 * Import specific languages to avoid importing everything
 * The following will lazy load highlight.js core script (~9.6KB) + the selected languages bundle (each lang. ~1kb)
 */
export function getHighlightLanguages() {
  return {
    typescript: () => import('highlight.js/lib/languages/typescript'),
    css: () => import('highlight.js/lib/languages/css'),
  };
}

@NgModule({
  declarations: [
    AppComponent,
    NoInternetComponent,
    HomeComponent,
    DateExtensionComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        languages: getHighlightLanguages()
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

The log given by the failure

Screenshot 2020-05-02 at 3 36 02 PM

Desired functionality

I should not see the above-shown error in the browser console and the library should work properly.

Mention any other details that might be useful

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 7
Comments: 19 (3 by maintainers)

Commits related to this issue

Fix highlight.js verson 10+ import location Solution by @MurhafSousli can be found here: https://github.com/MurhafSousli/ngx-highlightjs/issues/126#issuecomment-704618161 — committed to vvmk/jigsaw-blog-template by deleted user 3 years ago

Most upvoted comments

Guys, I just noticed a change in highlight.js@10.x.x, if you are using the latest version of highlight.js, use highlight.js/lib/core instead of highlight.js/lib/highlight

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

I will update the docs!

+13

MurhafSousli on Oct 7, 2020

So the issue is closed because there is workaround? is it possible to fix the issue before finally closing this?

cmer4 on Jul 28, 2020

import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 
@NgModule({
  imports: [
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        languages: {
          typescript: () => import('highlight.js/lib/languages/typescript')
        }
      }
    }
  ],
})
export class AppModule { }

work ok!

jiayisheji on Aug 4, 2020

To workaround the issue you can use version 9 of highlight.js:

{
  "dependencies": {
    "highlight.js": "~9.18.1",
    "ngx-highlightjs": "^4.0.2",
  }
}

albyrock87 on May 4, 2020

Don’t understand why this has been closed, because the issue definitely still exists. The downgrading to highlight.js 9.18.1 workaround worked for me. So I’m good, but I hate hacky workarounds. 😦

mdg1019 on Sep 15, 2020

I agree with @cmer4. It should automatically resolve and install the correct dependencies.

whizkidwwe1217 on Jul 29, 2020

I was facing the same issue when I visited the stackblitz demo here https://stackblitz.com/edit/ngx-highlightjs?file=src%2Fapp%2Fapp.module.ts they are using the latest beta version and it’s working fine.

see the app.module.ts how they have used with some extra packages

package.json

"highlight.js": "^9.18.1",
"ngx-highlightjs": "4.1.0-beta",

app.module.ts

import * as hljs from 'highlight.js'; (document.defaultView as any).hljs = hljs;

it has fixed my issue. Hope it will be helpful.

kiran-bobade on Jun 28, 2020