Importing 'marked' module into Angular project returns error

Question

I have a project based on Angular 15 in which i recently added marked. My idea was to use it for a angular pipe to transform MarkDown text to HTML. However, there is no way i get it working, it doesn't matter how i import it, it always give me errores

I executed: npm i marked and then: npm i --save-dev @types/marked

And then made up this pipe:

import { Pipe, PipeTransform } from '@angular/core';
// import { marked } from 'marked';
import * as marked from 'marked';

@Pipe({
  name: 'mdToHtml'
})
export class MdToHtmlPipe implements PipeTransform {

  transform(value: any): any {
    if (value && value.length > 0) {
      return marked.marked(value);
    }
    return value;
  }

}

I tried to import marked like import { marked } from 'marked'; and import * as marked from 'marked'; but either way it doesn't work

It returns errors like

Error: node_modules/marked/lib/marked.d.ts:613:5 - error TS1383: Only named exports may use 'export type'.

613     export type * from "MarkedOptions";

Or it doesn't even compile when using ng serve.

Thanks in advance :)

Answer 1

I also faced the same error when I installed marked and @types/marked with the latest versions in my angular 15 project.

For me, the workaround is to downgrade versions as below

"ngx-markdown": "^15.1.2",
"marked": "^4.3.0",
"@types/marked": "^4.3.0",

I followed this guide and helped me to resolve this issue https://jfcere.github.io/ngx-markdown/get-started