Angular 17 SSR集成ngx-markdown报错：renderer不存在

错误原因 #

当前实现存在两个核心问题：

• 组件内重复导入MarkdownModule和MarkdownComponent（MarkdownModule已导出MarkdownComponent，无需单独导入）
• 在组件本地声明provideMarkdown()，结合SSR环境会导致渲染器注册冲突，且全局未正确初始化ngx-markdown服务

修复步骤 #

1. 修正article.component.ts

移除重复导入的MarkdownComponent，同时删除组件内的provideMarkdown()提供者：

import { CommonModule } from '@angular/common';
import { Component, ChangeDetectionStrategy, OnInit, ViewEncapsulation } from '@angular/core';
import { MarkdownModule } from 'ngx-markdown';

@Component({
    selector: 'article-component',
    templateUrl: './article.component.html',
    standalone: true,
    imports: [MarkdownModule, CommonModule],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ArticleComponent implements OnInit {
    article = { content: '你的Markdown内容' }; // 确保article变量已定义

    constructor() { }

    ngOnInit(): void {
    }
}

2. 在全局app.config.ts中配置provideMarkdown

将provideMarkdown()移至全局提供者，适配SSR环境：

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';
import { provideMarkdown } from 'ngx-markdown';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideClientHydration(),
    provideRouter(routes),
    provideMarkdown() // 全局提供ngx-markdown服务
  ]
};

3. SSR环境验证

使用官方SSR启动命令（npm run serve:ssr）启动项目，组件加载后错误会消失，Markdown内容可正常渲染。

内容的提问来源于stack exchange，提问作者jorit