Angular如何从组件导入mermaid而非angular.json使ngx-markdown正常运行

安全阿岳

2026-8-28

解决方案

报错根因有两点：一是你写的导入路径带node_modules/前缀不符合Angular的依赖解析规则，二是ngx-markdown的mermaid检测逻辑会在初始化阶段读取全局window.mermaid变量，你之前的写法既没正确导入依赖，也没把mermaid实例挂到全局对象上，自然会触发依赖缺失的报错。
按以下步骤操作即可实现组件级按需加载mermaid，无需在angular.json中全局引入：

首先删除angular.json里build.options.scripts数组中添加的node_modules/mermaid/dist/mermaid.min.js条目，避免重复打包。
放弃你之前用的静态导入写法，用动态import实现真正的按需加载（仅组件加载时才下载mermaid的大体积JS文件），同时手动挂载全局变量通过ngx-markdown的检测，参考可直接复用的组件代码：

import { Component, ElementRef, OnInit } from '@angular/core';
import { MarkdownService } from 'ngx-markdown';

@Component({
  selector: 'app-mermaid-markdown',
  template: `<markdown [data]="content" (ready)="renderMermaid()"></markdown>`
})
export class MermaidMarkdownComponent implements OnInit {
  // 替换为你自己的markdown内容
  content = '```mermaid\ngraph LR\nA[组件加载] --> B[按需下载mermaid] --> C[正常渲染流程图]\n```';
  private mermaidInstance: any = null;

  constructor(
    private el: ElementRef,
    private markdownService: MarkdownService
  ) {}

  async ngOnInit() {
    // 动态导入mermaid，构建时会自动拆分为独立chunk，仅执行到这行时才下载对应JS
    const mermaidModule = await import('mermaid');
    this.mermaidInstance = mermaidModule.default;
    
    // 关闭mermaid自动渲染，避免它提前查找还没生成的DOM节点
    this.mermaidInstance.initialize({
      startOnLoad: false,
      theme: 'default' // 可替换为你需要的主题配置
    });

    // 关键操作：把mermaid实例挂载到全局window对象，通过ngx-markdown的依赖检测
    (window as any).mermaid = this.mermaidInstance;

    // 自定义markdown代码块渲染规则，把mermaid代码块输出为mermaid可识别的容器
    this.markdownService.renderer.code = (code: string, lang: string) => {
      if (lang === 'mermaid') {
        return `<div class="mermaid">${code}</div>`;
      }
      return `<pre><code class="language-${lang}">${code}</code></pre>`;
    };
  }

  renderMermaid() {
    // 等markdown内容渲染完成后，手动触发当前组件内的mermaid图表渲染
    if (this.mermaidInstance) {
      this.mermaidInstance.run({
        nodes: this.el.nativeElement.querySelectorAll('.mermaid')
      });
    }
  }
}

注意事项

如果把这个组件放在非懒加载模块中，哪怕用了动态import，mermaid的chunk也会在应用初始化阶段被预加载。要完全实现按需加载，需要把这个组件放到独立的懒加载路由模块下，只有访问对应路由时才会加载组件和mermaid依赖。
不要开启mermaid的startOnLoad配置，否则mermaid会在页面初始加载时就遍历DOM查找mermaid节点，此时markdown还没完成渲染，会导致图表渲染空白或失败。
如果你不需要拆分chunk做极致的按需加载，只是不想把mermaid配置在angular.json的全局脚本里，也可以直接在组件顶部写import mermaid from 'mermaid'，只要在组件初始化时把mermaid挂载到window.mermaid上就能解决报错，但这种写法会把mermaid打进组件所在模块的初始chunk，不会延迟加载。

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