Lazy-load Highlight.js for Quill Syntax Module in Lazy-Loaded Angular Module?

[KeithGillette]

This example project shows loading the Highlight.js script and its CSS in index.html. We are using ngx-quill in lazy-loaded modules and would prefer to lazy-load HighlightJS, as well, in order to optimize application load time. However, our attempts to do so have failed. We always get the error 'Syntax module requires highlight.js. Please include the library on the page before Quill.' when configuring syntax: true. Any tips on lazy-loading Highlight.js?

[KillerCodeMonkey]

I do Not know If this is possible, because quilljs needs it on the global Context.

So it would be hacky to put and remove it on your own there.

I would just load IT globally, maybe through the angular json or custom webpack.

And in General you should ASK this in the highlight.js Repo or Stack overflow.

Keith Gillette notifications@github.com schrieb am Do., 26. Dez. 2019, 17:44:

This example project shows loading the Highlight.js script and its CSS in index.html. We are using ngx-quill in lazy-loaded modules and would prefer to lazy-load HighlightJS, as well, in order to optimize application load time. However, our attempts to do so have failed. We always get the error 'Syntax module requires highlight.js. Please include the library on the page before Quill.' when configuring syntax: true. Any tips on lazy-loading Highlight.js?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill-example/issues/269?email_source=notifications&email_token=AARI4YFKSK6YMVYA3CO2CTTQ2TNQVA5CNFSM4J7M2V3KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4ICXOSQA, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YGMDMA6Y2LJPV2ARZLQ2TNQVANCNFSM4J7M2V3A .

[KeithGillette]

Thanks for the fast reply, @KillerCodeMonkey! I'll ask elsewhere. If Quill expects Highlight.js in the global context, do you happen to know what name it expects? Is it hljs?

[KillerCodeMonkey]

Yes, I think this is the global namespace of highlight.js.

Keith Gillette notifications@github.com schrieb am Do., 26. Dez. 2019, 18:10:

Thanks for the fast reply, @KillerCodeMonkey https://github.com/KillerCodeMonkey! I'll ask elsewhere. If Quill expects Highlight.js in the global context, do you happen to know what name it expects? Is it hljs?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/KillerCodeMonkey/ngx-quill-example/issues/269?email_source=notifications&email_token=AARI4YBRXX2FOQLVCFBN4ELQ2TQQHA5CNFSM4J7M2V3KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHV24JA#issuecomment-569093668, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YHNAQ55AYXSVPIBMJTQ2TQQHANCNFSM4J7M2V3A .

[KeithGillette]

Thanks, again @KillerCodeMonkey . We're investigating using the highlightChildren directive from ngx-highlightjs imported in our lazy-loaded module as a solution, but I think I also found a way to initialize the Syntax module of Quill in a lazy-loaded scenario using this suggestion from Quill issue #2130

In angular.json:

scripts: {
    "input": "node_modules/highlight.js/lib/highlight.js",
    "lazy": true,
    "bundleName": "highlight"
}

In a routing guard method for the lazy-loaded module:

import('highlight.js').then((highlightModule: { default: { highlightAuto: Function } }) => {
    const Syntax = Quill.import('modules/syntax');
    Syntax.DEFAULTS = {
    highlight: function (text: string): string {
        const result = highlightModule.default.highlightAuto(text);
        return result.value;
        }
    };
});

[swordensen]

@KeithGillette Thanks for providing that insight. Since the SEO on this page is more highly ranked than anything else I figured I'd share my spin off solution.

Instead of creating a route guard I just added the import inside the loadChildren function like so:

  {
    path: "blog",
    loadChildren: () =>
      import("./modules/screens/blog/blog.module").then(async (m) => {
        window.hljs = await import("highlight.js"); //assigns highlight.js to the global namespace as hljs
        return m.BlogModule;
      }),
  },

thanks again guys!