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

Question

问题 - 我有一个 Angular 应用程序，我想使用 Toast UI image editor但我不确定如何将导入添加到 app.module.ts 以便我可以使用它？

我遵循了 npm 的安装说明

$ npm install --save tui-image-editor

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

在 Toast UI 页面中，我看到下面这张图片，但不确定它们的意思

"import module = require('module') on importing. export = and import = require()"

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

This module can only be referenced with ECMAScript imports/exports by turning on the 'allowSyntheticDefaultImports' flag and referencing its default export

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"', '从“mod”或其他模块格式导入 d”

import module = require('module')

Answer 1

您收到此错误的原因是该库是 CommonJS 而不是 ES 模块 类型。

为了使用这个库，你需要做以下事情:

1. 将以下内容添加到 tsconfig.json 文件中:

"compilerOptions": {

    ...//other stuffs

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

1. 将其导入您要使用的组件(不在 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');
  }

}

1. 然后您需要将其添加到您的 app.component.html

<h3>TUI Image Editor: </h3>

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

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