What is the best way to incorporate the TUI image editor for Javascript into my Angular application?

Question

What is the best way to incorporate the TUI image editor for Javascript into my Angular application?

Issue - I'm facing a challenge with my Angular application as I want to integrate Toast UI image editor. However, I am unsure about how to properly add the imports to app.module.ts in order to utilize it.

Despite following the npm installation instructions:

$ npm install --save tui-image-editor

the installation seemed successful with only one deprecated dependency present.

While browsing through the Toast UI documentation, I came across an image that referenced:

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

Trying to implement this, I added a line to my app.module.ts file to reference the node module. However, I encountered an error stating:

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'; // attempted this as well

Further attempts led me to another error message: "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')

angular typescript node-modules

Answer 1

Answer №1

The error you're encountering is due to the Library being in a CommonJS format instead of an ES Modules type.

To utilize this library, follow these steps:

Insert the following into your tsconfig.json file:

"compilerOptions": {

    ...//other stuffs

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

Import it into the specific component you wish to use (NOT in the app.module.ts). For example, in this case, it's used in 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');
  }

}

Next, add the following to your app.component.html:

<h3>TUI Image Editor: </h3>

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

When running ng serve, you will see a warning. This occurs because using commonJS can be slow, so it's recommended to avoid them whenever possible in Angular.

Answer 2

The error you're encountering is due to the Library being in a CommonJS format instead of an ES Modules type.

To utilize this library, follow these steps:

Insert the following into your tsconfig.json file:

"compilerOptions": {

    ...//other stuffs

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

Import it into the specific component you wish to use (NOT in the app.module.ts). For example, in this case, it's used in 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');
  }

}

Next, add the following to your app.component.html:

<h3>TUI Image Editor: </h3>

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

When running ng serve, you will see a warning. This occurs because using commonJS can be slow, so it's recommended to avoid them whenever possible in Angular.

What is the best way to incorporate the TUI image editor for Javascript into my Angular application?

Answer №1

Similar questions

Creating TypeScript types using GraphQL code generation: Generating types without any other code

Setting the type of a prop dynamically based on another prop value

Notes on using touch devices with Angular

Enumerated types in Typescript: access the values

Angular 8 bug: Requiring 2-3 arguments, received only 1

Angular 13 vulnerability alert triggered by loader-utils bug

Angular 6: Issue with displaying data on the user interface

What is the best way to update an array in TypeScript when the elements are of different types and the secondary array has a different type as

What is the process for defining an opaque type in programming?

Node.js has been giving me trouble as I try to install Inquirer

Tips on joining property name in typescript

Signing in to a Discord.js account from a React application with Typescript

Utilize the pipe function to generate a personalized component

Comparing Angular2 Material and Bootstrap: Which one is the better

Utilizing Regular Expressions in Angular 4 by Referencing Patterns Stored in an Object

Having trouble transferring data from AppComponent to a function

Steps for activating the HTML select option menu with an external button click

Tips for adjusting the maximum characters per line in tinyMCE 5.0.11

Deciding between bundling a Typescript package and using tsc: When is each approach the best choice

Tips for creating nested child routes in AngularJS 2 with ID: