在 Angular 库中导入 Markdown 文件

Question

我目前正在尝试在我的 Angular 库中导入 .md（markdown）文件，以便我可以创建一个方法来将自述文件作为字符串传递回任何实现我的库的应用程序。

我已经通过在 src 文件夹中创建一个 global.d.ts 文件并为其提供以下内容，在标准应用程序中实现了此功能：

declare module '*.md';

然后，我可以使用以下命令将 markdown 导入到我的 app.component.ts 文件中：

import * as pageMarkdown from 'raw-loader!../../projects/ui/login/assets/1.md';

这按预期工作。但是，然后我尝试在使用以下方法生成的 Angular 库中执行相同的导入：

ng generate library example-library

如果我随后浏览到该库中的组件打字稿并添加相同的导入，则它不起作用。每当我构建库时，我都会收到以下错误：

找不到模块“raw-loader！../../projects/ui/login/assets/1.md”或其相应的类型声明。

当我将导入添加到库时，它几乎无法获取我的 global.d.ts 中声明的内容。我错过了什么吗？

任何帮助将不胜感激！提前致谢。

Answer 1

我建议您将 markdown 文件放在资产文件夹或文档中，并像资产文件夹一样公开它。这是我创建的一个服务，它使用marked和highlight.js呈现markdown

import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {firstValueFrom, from, Observable, of} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class MarkdownConverterService {

  constructor(
    private httpClient: HttpClient,
  ) { }

  convert(resourceRelUrl: string): Observable<string> {
    const parseMarkdown: Promise<string> = this.getMarkdownByPath(resourceRelUrl)
      .then(this.parseMarkdown)
    return from(parseMarkdown);
  }

  private async parseMarkdown(markdownString: string) {
    const marked = require('marked');
    const hljs = require('highlight.js');
    marked.setOptions({
      renderer: new marked.Renderer(),
      highlight: function (code: any) {
        return hljs.highlightAuto(code).value;
      },
      langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
      pedantic: false,
      gfm: true,
      breaks: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      xhtml: true
    });
    let html$ = of(marked.parse(markdownString));
    return await firstValueFrom(html$)
      .then(value => value.toString());
  }

  private async getMarkdownByPath(path: string): Promise<string> {
    // @ts-ignore
    let markdown$ = this.httpClient.get<string>(path, {responseType: "text"});
    return await firstValueFrom(markdown$)
      .then(value => value.toString());
  }

}