Add a typescript library to angular

Question

I installed a text editor called Jodit and I'm having some issues trying to integrate it into my angular application.
In order, I did:

npm install --save jodit
Added in angular.json build-options-sripts "node_modules/jodit/build/jodit.min.js"
Added in angular.json build-options-styles "node_modules/jodit/build/jodit.min.css"

Here is my component:

import * as jodit from 'jodit';

@Component({
  selector: 'app-test',
  styleUrls: ['./test.component.scss'],
  template: `
    <textarea id="test" name="editor"></textarea>
  `
})
export class TestComponent implements OnInit {
  public editor: any;

  constructor() {}

  ngOnInit() {//
    const elem: HTMLElement = document.getElementById('test');
    this.editor = new jodit.Jodit(elem, {});
}

Im getting the following errors

src/app/test.component.ts(21,28): error TS2339: Property 'Jodit' does not exist on type 'typeof import("C:/Users/test/Desktop/test/node_modules/jodit/src/types/index")'.
src/app/test.component.ts(41,27): error TS2339: Property 'Jodit' does not exist on type 'typeof import("C:/Users/test/Desktop/test/node_modules/jodit/src/types/index")'.

I can't compile it, but with npm start I can make it working (I still have the errors but it compiles and I can see the text editor).
Am I missing something, it looks like a type linkage error?

Nexeuz · Accepted Answer · 2019-09-16 02:00:38Z

1

I try to create angular module, but now you can use it like this in your angular.json

"scripts": [
  "../node_modules/jodit/build/jodit.min.js",
],

in typings.d.ts add

declare var Jodit: any;

and create component like this

import {
  Component,
  OnDestroy,
  AfterViewInit,
  EventEmitter,
  Input,
  Output
} from '@angular/core';

@Component({
  selector: 'simple-jodit',
  template: `<textarea id="{{elementId}}"></textarea>`
})
export class SimpleJoditComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: String;
  @Output() onEditorKeyup = new EventEmitter<any>();

  editor;

  ngAfterViewInit() {
    this.editor = new Jodit('#' + this.elementId, {});
  }

  ngOnDestroy() {
   this.editor.destruct();
  }
}

and use it

<simple-jodit
  [elementId]="'my-editor-id'"
  (onEditorKeyup)="keyupHandlerFunction($event)"
  >
</simple-jodit>

answered Sep 16, 2019 at 2:00

Nexeuz

4073 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zack evein Over a year ago

src/app/shared/components/jodit.component.ts(19,23): error TS2304: Cannot find name 'Jodit'. I did everything you have written

zack evein Over a year ago

It did not work, I had to modify the library sources for fix some typescript errors.. I keep it as local dependency and I use your solution, ty

Nexeuz · Accepted Answer · 2019-09-16 02:08:57Z

0

You can download also this wrapper Jodi component wrapper

answered Sep 16, 2019 at 2:08

Nexeuz

4073 silver badges11 bronze badges

Collectives™ on Stack Overflow

Add a typescript library to angular

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related