How do I import TUI image editor for Javascript into my Angular app?

Question

Problem - I have an Angular app and I want to use Toast UI image editor but I'm not sure how to add the imports to app.module.ts so that I can use it?

I followed the install instructions for npm

$ npm install --save tui-image-editor

and it looks like it installed ok with 1 deprecated dependancy.

In the Toast UI page I see this image below but not sure what they mean by

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

I tried to add this line below to my app.module.ts file to get the reference to the node module but I'm seeing an error that says

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

I also tried this below, but got the error saying "Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead"

import module = require('module')

Answer 1

The reason why you are getting this error is that the Library is a CommonJS instead of an ES Modules type.

In order to use this library, you will need to do the following:

1. Add the following to tsconfig.json file:

"compilerOptions": {

    ...//other stuffs

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

2. Import it into the component you want to use (NOT in the app.module.ts). In this case, I use 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. Then you will need to add this to your app.component.html

<h3>TUI Image Editor: </h3>

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

You will notice the warning when you do ng serve. That's because commonJS is slow, and we should avoid using them if possible in Angular.