Could not find a declaration file for module 'highlightjs-line-numbers.js' - Show line numbers

[Alessandro]

Expected Behavior

Show line numbers

Actual Behavior

Every time I try to import the library highlightjs-line-numbers.js to show the line numbers in the app module like this:

providers: [
     ...
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: <HighlightOptions>{
        lineNumber: true,
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        lineNumbersLoader: () => import('highlightjs-line-numbers.js'),
        themePath: 'node_modules/highlight.js/styles/github.css',
        languages: {
          typescript: () => import('highlight.js/lib/languages/typescript'),
          css: () => import('highlight.js/lib/languages/css'),
          xml: () => import('highlight.js/lib/languages/xml'),
        },
      },
    },
  ],

it gives me the error:

Error: src/app/app.module.ts:69:41 - error TS7016: Could not find a declaration file for module 'highlightjs-line-numbers.js'. '/Users/alessandrobuffoli/Development/Blockchain/Solana/app.cowsigner/node_modules/highlightjs-line-numbers.js/src/highlightjs-line-numbers.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/highlightjs-line-numbers.js` if it exists or add a new declaration (.d.ts) file containing `declare module 'highlightjs-line-numbers.js';`

69         lineNumbersLoader: () => import('highlightjs-line-numbers.js'),

Even if I've added and installed the following libraries in the package.json

    "highlight.js": "^11.5.1",
    "highlightjs-line-numbers.js": "^2.8.0",
    "ngx-highlightjs": "^7.0.0",

Shouldn't it be written in the docs how to install everything?

Environment

• Angular: 14.0.0
• ngx-highlightjs: 7.0.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS

[Murhaf Sousli]

I think you modified something in your tsconfig.json, google the general error without mentioning the library or try it out in a brand new angular project

[Gregory Roussac]

Hi, +1

It seems a types declaration file is missing ? adding highlightjs-line-numbers.d.ts in the src folder as suggested lets you at least compile. It's also happening on https://stackblitz.com/edit/ngx-highlightjs .

[Oscar Rojas Molina]

In fact, the file "highlightjs-line-numbers.d.ts" is missing, I created this file in the "src" directory with the following content:
declare module 'highlightjs-line-numbers.js';
Also copy file "node_modules/highlightjs-line-numbers.js/src/highlightjs-line-numbers.js" to "node_modules/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.js", this is due to with the file highlightjs-line-numbers.min.js did not work for typescript types

[Pulkit (Ryo)]

Still running into this issue in the latest major version (8.0.0)

Environment

• Angular: 15.2.0
• ngx-highlightjs: 8.0.0
• Browser(s): Chrome
• Operating System: Windows 11

[Pedro Relvas]

hey, having the same issue:

• angular: 15.2.7
• ngx-highlightjs: 9.0.0
• browser: Chrome
• Operative System: Mac Os Ventura
• typescript: 4.9.4

[Murhaf Sousli]

I've included the script within ngx-highlightjs in v10

providers: [
  {
    provide: HIGHLIGHT_OPTIONS,
    useValue: {
      lineNumbersLoader: () => import('ngx-highlightjs/line-numbers')
    }
  }
]