Cannot use images in imported markdown files after updating to Angular 13

Seems to be an incompatibility with the most recent versions of angular 13. Here is a package.json that works properly:

"dependencies": {
    "@angular-builders/custom-webpack": "~13.1.0",
    "@angular/animations": "~13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "html-loader": "~3.1.0",
    "markdown-loader": "~8.0.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.3",
    "@angular/cli": "^13.2.4",
    "@angular/compiler-cli": "~13.0.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.4.3"
  }

It's hard to tell which package is the cause since many are dependent on each other.

Instead of messing around with webpack and loaders, you could just bundle your markdown and images in the assets folder, and use ngx-markdown: https://stackblitz.com/edit/angular-ivy-yqzyms?file=src/assets/markdown.md

I'm getting an image from the web there, only because stackblitz doesn't let me upload images. You can change the md file to:

Lemon the cat

![lemon](assets/lemon.jpg)

on your local machine.

You can also just point to a raw markdown file on github which is super handy

<markdown [src]="'https://raw.githubusercontent.com/...'"></markdown>

I'd imagine you can put images in the same repo.

It's great because you can edit the markdown file without redeploying the site.

You should upgrade markdown-loader package to the version 8.0.0. There is a breaking change in version 8.0.0:

Every call to marked is isolated now. This makes sure that options from the first call won't influence options from the second call. If you've configured the markdown-loader with two different options, you might observe different behavior now. We also removed Node v8 and Node v10 support and support for older webpack versions. Webpack 5 is required now.

Also, try to upgrade @angular related packages to version 13.2.x. In version 13.2 there was a few fixes related to Webpack. You can do it with just running this command in the terminal:

ng update

I recently implemented marked.js and highlight.js for my blog which uses Angular 13.2.4. I ended up creating a markdown service that offloads the need to use that markdown-loader or need of ngx-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());
  }

}