withLineNumbers not working with Angular 12

[julianpoemp]

I'm using codejar with prismjs in my Angular app, but when I try to use the module withLineNumbers, it does not work.

I created a test project in order to make it easier for you to reproduce: https://github.com/julianpoemp/angularCodeJarSample

I get the following error in the web console:

core.js:6456 ERROR TypeError: (0 , codejar_linenumbers__WEBPACK_IMPORTED_MODULE_3__.withLineNumbers) is not a function
    at AppComponent.ngAfterViewInit (app.component.ts:33)
    at callHook (core.js:2526)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9512)
    at renderComponentOrTemplate (core.js:9555)
    at tickRootContext (core.js:10786)
    at detectChangesInRootView (core.js:10811)
    at RootViewRef.detectChanges (core.js:22858)
    at ApplicationRef.tick (core.js:29648)

on a previous Angular version (11), I got the error in the terminal:

Error: ./node_modules/codejar/linenumbers.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /Users/julian/repos/angularCodeJar/node_modules/codejar/linenumbers.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
    at AngularCompilerPlugin.getCompiledFile (/Users/julian/repos/angularCodeJar/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:951:23)
    at /Users/julian/repos/angularCodeJar/node_modules/@ngtools/webpack/src/loader.js:43:31
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)

Here is my code:

import {CodeJar} from 'codejar';
import * as Prism from 'prismjs';
import 'prismjs/components/prism-json';
import { withLineNumbers } from 'codejar/linenumbers';

//...

const testJSON = {
        test: 'ok',
        something: 123456
      };
      const highlightMethod = (editor: HTMLElement) => {
        // Do something with code and set html.
        const textContent = (editor.textContent) ? editor.textContent : '';
        editor.innerHTML = Prism.highlight(textContent, Prism.languages.json, 'json');
        console.log(`highlight`);
      };
      this.codeJar = CodeJar(this.editor.nativeElement, withLineNumbers(highlightMethod), {tab: '\t'});
      this.codeJar.updateCode(JSON.stringify(testJSON, null, '\t'));

//...

How can I fix this? I really like codejar and I would like to use it in my app 😄

[julianpoemp]

fixed it using

import {withLineNumbers} from 'codejar/linenumbers.js';

[julianpoemp]

My solution is just a workaround because it's a deep import. Angular warns about this issue every time I do a build:

Entry point 'ngx-codejar' contains deep imports into '/Users/julian/repos/my-app/node_modules/codejar/linenumbers.js'. This is probably not a problem, but may cause the compilation of entry points to be out of order.