如何将适用于 Javascript 的 TUI 图像编辑器导入到我的 Angular 应用程序中？

Problem- 我有一个 Angular 应用程序，我想使用Toast UI 图像编辑器 https://nhn.github.io/tui.image-editor/latest/#typescript但我不确定如何将导入添加到 app.module.ts 以便我可以使用它？

我按照 npm 的安装说明进行操作

$ npm install --save tui-image-editor

看起来它安装正常，有 1 个已弃用的依赖项。

在 Toast UI 页面中，我看到下面的图片，但不确定它们的含义

“导入时 import module = require('module')。export = 和 import = require()”

我尝试将下面的这一行添加到我的 app.module.ts 文件中以获取对节点模块的引用，但我看到一个错误：

该模块只能通过打开“allowSyntheticDefaultImports”标志并引用其默认导出来通过 ECMAScript 导入/导出来引用

import * as index from 'tui-image-editor';
import * as index from 'tui-image-editor/index'; // tried this too

我也在下面尝试过，但收到错误消息“在定位 ECMAScript 模块时无法使用导入分配。请考虑使用 'import * as ns from "mod"'、'import {a} from "mod"'、'import d from “mod”'，或其他模块格式”

import module = require('module')

您收到此错误的原因是该库是CommonJS而不是ES Modules type.

为了使用该库，您需要执行以下操作：

1. 添加以下内容到tsconfig.json file:

"compilerOptions": {

    ...//other stuffs

    "allowSyntheticDefaultImports": true <========== This
}

2. 将其导入到您要使用的组件中（而不是在app.module.ts）。在这种情况下，我使用app.component.ts:

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

import ImageEditor from 'tui-image-editor'; // <========= THIS

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {

  private _tuiImageEditor!: ImageEditor;

  // Angular way of getting the element without getElementById.
  @ViewChild('tuiRef')
  private _tuiRef!: ElementRef<HTMLDivElement>;

  public ngAfterViewInit() {
    this._createImageEditor();
  }

  private _createImageEditor() {

    this._tuiImageEditor = new ImageEditor(this._tuiRef.nativeElement, {
      cssMaxWidth: 700,
      cssMaxHeight: 500
    });

    // Add a picture into your assets folder to test.
    this._tuiImageEditor.loadImageFromURL('../assets/example.jpg', 'My example picture');
  }

}

3. 然后你需要将其添加到你的app.component.html

<h3>TUI Image Editor: </h3>

<div #tuiRef style="height: 800px">
  <canvas></canvas>
</div>

当您这样做时，您会注意到警告ng serve。那是因为commonJS速度很慢，我们应该尽可能避免在 Angular 中使用它们。