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

Question

Since updating to Angular 13 when I import a markdown file containing images via markdown-loader, images are not shown.

Situation:

• I recently upgraded my app from Angular 12 to Angular 13
• I am using @angular-builders/custom-webpack to configure webpack
• nothing changed in my webpack config between the versions
• same version of html-loader and markdown-loader in both

To isolate the issue, I created a new empty angular app with ng new on both ng12 and ng13, with following webpack config:

import { Configuration } from 'webpack';

export default {
  module: {
    rules: [
      {
        test: /\.md$/i,
        use: [
          {
            loader: require.resolve('html-loader')
          },
          {loader: require.resolve('markdown-loader')}
        ],
      }
    ],
  }
} as Configuration;

markdown file with image:

Lemon the cat

![lemon](lemon.jpg) 

using it as follows:

<div class="markdown" [innerHtml]="mdContent"></div>

import { Component } from '@angular/core';

import markdownFile from './markdown.md';
import {DomSanitizer} from "@angular/platform-browser";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private readonly sanitizer: DomSanitizer) {}
  mdContent = this.sanitizer.bypassSecurityTrustHtml(markdownFile);
}

Results:

• The app created with Angular 12 shows the image which has been correctly extracted in the dist files.
• The app created with Angular 13 does not show the image, the image has not been extracted, and the link points to the local path, e.g. <img src="file:///C:/dev/workspace/labs/markdown-images/src/app/lemon.jpg" alt="lemon">

Any idea at all about what could be causing this issue? Thank you.

Dependencies:

    "dependencies": {
      "@angular/animations": "~13.1.0",
      "@angular/common": "~13.1.0",
      "@angular/compiler": "~13.1.0",
      "@angular/core": "~13.1.0",
      "@angular/forms": "~13.1.0",
      "@angular/platform-browser": "~13.1.0",
      "@angular/platform-browser-dynamic": "~13.1.0",
      "@angular/router": "~13.1.0",
      "file-loader": "^6.2.0",
      "html-loader": "^3.1.0",
      "markdown-loader": "^8.0.0",
      "rxjs": "~7.4.0",
      "tslib": "^2.3.0",
      "zone.js": "~0.11.4"
    },
    "devDependencies": {
      "@angular-builders/custom-webpack": "^13.1.0",
      "@angular-devkit/build-angular": "~13.1.2",
      "@angular/cli": "~13.1.2",
      "@angular/compiler-cli": "~13.1.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.1.0",
      "karma-jasmine": "~4.0.0",
      "karma-jasmine-html-reporter": "~1.7.0",
      "typescript": "~4.5.2"
    }

I tried to create a StackBlitz to reproduce the issue, but I can't even load MD files for some reason. https://stackblitz.com/edit/angular-13-markdown-loader

Answer 1

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.

Answer 2

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