更新到Angular13后無法在匯入的降價檔案中使用影像-有解無憂

賞金將在 5 天后到期。此問題的答案有資格獲得 300聲望賞金。 fusio希望引起對這個問題的更多關注。

由于當我通過匯入包含影像的降價檔案時更新到 Angular 13 markdown-loader，因此不會顯示影像。

情況：

我最近將我的應用程式從 Angular 12 升級到了 Angular 13
我正在使用@angular-builders/custom-webpack配置 webpack
版本之間我的 webpack 配置沒有任何變化
html-loader和markdown-loader在兩者中的相同版本

為了隔離這個問題，我在ng newng12 和 ng13 上創建了一個新的空 Angular 應用程式，并帶有以下 webpack 配置：

import { Configuration } from 'webpack';

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

帶有影像的降價檔案：

Lemon the cat

![lemon](lemon.jpg)

使用它如下：

<div  [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);
}

結果：

使用 Angular 12 創建的應用程式顯示已在 dist 檔案中正確提取的影像。
使用Angular 13創建的app不顯示圖片，圖片沒有被提取，鏈接指向本地路徑，eg<img src="file:///C:/dev/workspace/labs/markdown-images/src/app/lemon.jpg" alt="更新到 Angular 13 后無法在匯入的降價檔案中使用影像">

關于可能導致此問題的任何想法？謝謝你。

依賴項：

"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"
}

我試圖創建 s StackBlitz 來重現該問題，但由于某種原因我什至無法加載 MD 檔案.. https://stackblitz.com/edit/angular-13-markdown-loader

uj5u.com熱心網友回復：

似乎與 angular 13 的最新版本不兼容。這是一個正常作業的 package.json：

"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"
  }

很難判斷哪個包是原因，因為許多包是相互依賴的。

assets您可以將降價和影像捆綁在檔案夾中，然后使用ngx-markdown：https : //stackblitz.com/edit/angular-ivy-yqzyms?file=src/assets/markdown.md，而不是搞亂 webpack 和加載程式

我從那里的網路上獲取影像，只是因為 stackblitz 不允許我上傳影像。您可以將 md 檔案更改為：

Lemon the cat

![lemon](assets/lemon.jpg)

在您的本地計算機上。

您也可以只指向 github 上的原始降價檔案，非常方便

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

我想您可以將影像放在同一個倉庫中。

這很棒，因為您可以在不重新部署站點的情況下編輯降價檔案。

uj5u.com熱心網友回復：

您應該將markdown-loader包升級到版本8.0.0。版本發生了重大變化8.0.0：

現在每個對標記的呼叫都是隔離的。這可以確保第一次呼叫的選項不會影響第二次呼叫的選項。如果您使用兩個不同的選項配置了 markdown-loader，您現在可能會觀察到不同的行為。我們還洗掉了 Node v8 和 Node v10 支持以及對舊 webpack 版本的支持。現在需要 Webpack 5。

另外，嘗試將@angular相關軟體包升級到 version 13.2.x。在版本13.2中，有一些與 Webpack 相關的修復。您只需在終端中運行此命令即可：

ng update

uj5u.com熱心網友回復：

我最近為使用 Angular 13.2.4 的博客實作了marked.js 和highlight.js。我最終創建了一個 markdown 服務，它可以減輕使用 markdown-loader 或 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());
  }

}

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/436098.html

標籤：有角度的网页包降价

上一篇：通過匯入為Typescript配置WebPack

下一篇：SPFxwebpack加載器已定義，但仍收到錯誤訊息