Angular 17 & NgxMarkdown: Error: renderer 'ɵNgxMarkdownRendererExtendedForExtensions' does not exist

Question

This angular app runs version 17 and has ssr included. Somehow when integrating ngx-markdown, this error message pops up:

Error: renderer 'ɵNgxMarkdownRendererExtendedForExtensions' does not exist

Here all relevant scripts that implemented NgxMarkdown, there are no other integrations or modules at all.

article.component.ts

    import { CommonModule } from '@angular/common';
    import { Component, ChangeDetectionStrategy, OnInit, ViewEncapsulation } from '@angular/core';
    import { MarkdownModule, MarkdownComponent, provideMarkdown } from 'ngx-markdown';
    @Component({
        selector: 'article-component',
        templateUrl: './article.component.html',
        standalone: true,
        imports: [MarkdownModule, CommonModule,MarkdownComponent],
        providers: [provideMarkdown()],
        encapsulation: ViewEncapsulation.None,
        changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class ArticleComponent implements OnInit {
        constructor(
        ) { }
    
        ngOnInit(): void {
        }
    }

article.component.html

<article>
<markdown>{{article.content}}</markdown>
</article>

app config

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(), provideClientHydration(), provideRouter(routes)]
};

Answer 1

UPDATE

After going through you code, there was only a single problem i think, the versions needs to like so

"marked": "^9.1.6",
"ngx-markdown": "^17.1.1",

For both the packages to not error out, other than that your code works fine!

working stackblitz

---

I think you are missing the importProvidersFrom(MarkdownModule.forRoot()) in the environment providers array!

app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { MarkdownModule } from 'ngx-markdown';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideRouter([]),
    importProvidersFrom(MarkdownModule.forRoot()), // <- changed here
  ],
};

stackblitz -> cd test -> npm i -> npm run start