Unable to load hljs library TypeError: hljs.registerLanguage is not a function
sukheja-varun opened this issue · comments
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
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
Also seeing the same issue with Angular 9.1.4 + 4.1.0-beta when explicitly specifying languages to import, even in most basic example. Seems like when the module is trying to load languages, the underlying hljs is set to a blank object.
ngx-highlightjs.js:37 Unable to load hljs library TypeError: hljs.registerLanguage is not a function
at TapSubscriber._tapNext (ngx-highlightjs.js:54)
at TapSubscriber._next (tap.js:40)
at TapSubscriber.next (Subscriber.js:49)
at MapSubscriber._next (map.js:35)
at MapSubscriber.next (Subscriber.js:49)
at FilterSubscriber._next (filter.js:33)
at FilterSubscriber.next (Subscriber.js:49)
at subscribeToPromise.js:5
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Object.onInvoke (core.js:41836)
app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {HIGHLIGHT_OPTIONS, HighlightModule} from "ngx-highlightjs";
export function getHighlightLanguages() {
return {
javascript: () => import('highlight.js/lib/languages/javascript'),
};
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HighlightModule
],
providers: [
{
provide: HIGHLIGHT_OPTIONS,
useValue: {
languages: getHighlightLanguages()
}
}
],
bootstrap: [AppComponent]
})
export class AppModule {
}app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: []
})
export class AppComponent {
title = 'highlighter';
code = `function myFunction() {
document.getElementById("demo1").innerHTML = "Hello there!";
document.getElementById("demo2").innerHTML = "How are you?";
}`
}app.component.html
<pre><code [highlight]="code"></code></pre>
Hi, maybe it's related to version 10 of Highlight.js:
highlightjs/highlight.js#2505
I am having the same issue.
To workaround the issue you can use version 9 of highlight.js:
{
"dependencies": {
"highlight.js": "~9.18.1",
"ngx-highlightjs": "^4.0.2",
}
}
Using highlight.js 9.x working for me as well. 10.x apparently has some breaking changes that must be causing the issue https://github.com/highlightjs/highlight.js/blob/master/VERSION_10_UPGRADE.md
Hi, I have used highlight.js 9.x and still not be able to load it with steps in readme. I looked dipper and I was trying to understand why this happens to me, and founded that you tried to load highlight.js like this
This will try to load chunk with
highlight.js for angular and webpack, but default angular configuration is not create separate chunk for this and I didn't investigate the way how I can to do this.The solution that work for me is imported
highlight.js in my app.main.ts file and set document.defaultView.hljs = hljs;Is anybody know better way for this?
I also encountered this error when I upgraded from 4.0.2 to 4.1.0-beta
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.
I guess this can be closed now! Use the latest version 4.1.1
So the issue is closed because there is workaround? is it possible to fix the issue before finally closing this?
In my case just installing highlight.js@9 as a dependency fixes the issue.
I agree with @cmer4. It should automatically resolve and install the correct dependencies.
@cmer4 I don't understand what is the problem? I have the latest version ngx-highlightjs@4.1.1 with highlight.js@10.1.2 and it works without any errors or warning! here is a working stackblitz https://stackblitz.com/edit/ngx-highlightjs
Dont know about everyone else but I'm still seeing this problem. Only solution is downgrading to highlight.js@9. This is using the exact same config as the example..
import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
@NgModule({
imports: [
HighlightModule
],
providers: [
{
provide: HIGHLIGHT_OPTIONS,
useValue: {
coreLibraryLoader: () => import('highlight.js/lib/highlight'),
languages: {
typescript: () => import('highlight.js/lib/languages/typescript')
}
}
}
],
})
export class AppModule { }[HLJS] TypeError: hljs.registerLanguage is not a function
at TapSubscriber._tapNext (ngx-highlightjs.js:71)
at TapSubscriber._next (tap.js:40)
at TapSubscriber.next (Subscriber.js:49)
at MapSubscriber._next (map.js:35)
at MapSubscriber.next (Subscriber.js:49)
at FilterSubscriber._next (filter.js:33)
at FilterSubscriber.next (Subscriber.js:49)
at subscribeToPromise.js:5
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Object.onInvoke (core.js:27148)
Using below is also not a good solution as it brings in the entire set of highlight definitions causing big JS bloat
import * as hljs from 'highlight.js';
(document.defaultView as any).hljs = hljs;
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!
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. :(
My solution was:
In the AppModule "app.module.ts" for the highlighting provider
{
provide: HIGHLIGHT_OPTIONS,
useValue: {
coreLibraryLoader: () => import('highlight.js/lib/highlight'),
languages: {
I switched to coreLibraryLoader as mentioned by @jiayisheji
coreLibraryLoader: () => import('highlight.js/lib/core'),
and the error vanished.
Could it be that the description in the README.md is wrong?
https://github.com/MurhafSousli/ngx-highlightjs#import-only-the-core-library-and-the-needed-highlighting-languages
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!