Importing plain JS code inside angular - 7

Question

I trying to import for the first time this plain JS code inside my angular app.
I created a js file inside the App folder and I passed there all the code that located here . I added the script inside my scripts Array in the angular.json file and set allowJs to true.
Inside my component JS file I importing the methods like that:

import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
import { Util, HocrProofreader} from '../hocr';

const Utils = Util;
const Hocr = HocrProofreader;

@Component({
  selector: 'app-ocr-compiler',
  templateUrl: './ocr-compiler.component.html',
  styleUrls: ['./ocr-compiler.component.css']
})
export class OcrCompilerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
      Utils.onReady(() => {
        var hocrProofreader = new HocrProofreader({
            layoutContainer: 'layout-container',
            editorContainer: 'editor-container'
        });
      })

      const hocr = '../../assets/1.jpg';
      Hocr.prototype.setHocr(hocr)
  }
}

And the HTML file looks like that

<div class="viewport">
  <div class="toolbar">
      <div class="logo">hOCR-Proofreader</div>

      <button id="toggle-layout-image">Image/Text</button>
      <div class="separator"></div>

      <span>Zoom:</span>
      <button id="zoom-page-full">Full Page</button>
      <button id="zoom-page-width">Page Width</button>
      <button id="zoom-original">Original</button>
      <div class="separator"></div>

      <button id="button-save">Save</button>
  </div>

  <div id="layout-container" class="container"></div>
  <div id="editor-container" class="container"></div>
</div>

The import work fine but I facing with an error:

AppComponent.html:1 ERROR TypeError: Cannot read property 'contentDocument' of undefined
    at Object.push../src/app/hocr.js.HocrProofreader.setHocr (hocr.js:106)

That refers to this code:

HocrProofreader.prototype.setHocr = function (hocr, baseUrl) {
    this.hocrBaseUrl = baseUrl;
    var hocrDoc = this.editorIframe.contentDocument; <===== Here

    // TODO: use baseUrl for images/components in hOCR - use <base>?

    hocrDoc.open();
    hocrDoc.write(hocr);
    hocrDoc.close();

    var self = this;
    var hocrRoot = hocrDoc.documentElement;
    hocrRoot.addEventListener('mousemove', function (event) {
        self.mousePosition = {container: 'editor', x: event.clientX, y: event.clientY};
        self.onHover(event.target, true);
    });
    hocrRoot.addEventListener('mouseleave', function (event) {
        self.mousePosition = null;
        self.onHover(null, true);
    });
    hocrDoc.addEventListener('scroll', function (event) {
        if (!self.mousePosition || self.mousePosition.container !== 'editor') return;
        self.onHover(hocrDoc.elementFromPoint(self.mousePosition.x, self.mousePosition.y), true);
    });

    this.editorStylesheet = Util.createElem('link', {'type': 'text/css', 'rel': 'stylesheet', 'href': 'editor.css'});
    hocrDoc.head.appendChild(this.editorStylesheet);

    hocrDoc.body.contentEditable = true;

    this.setPage('first');
};

Typescript is a superset of Javascript anyway so pretty much all valid JS is also valid TS. Typing etc is optional. As for your issue, it looks like this.editorIframe is not defined, hence the error — gdgr
– gdgr, Commented Apr 25, 2019 at 12:27

Ritesh Waghela · Accepted Answer · 2019-04-25 11:05:17Z

1

You can definitely use JS inside Angular component. But there is a special place to include your script.

You can include script in angular.json file. Look for scripts array and include the path of your script.

"scripts": [
   "path of your script goes here"
]

After this in you component you can say at the very top before import (though it's not necessary):

declare var Utils;

and use Utils function.

answered Apr 25, 2019 at 11:05

Ritesh Waghela

3,7272 gold badges23 silver badges27 bronze badges

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

5 Comments

Igor.R Over a year ago

As i mention inside my question. I already added it to the script array

Ritesh Waghela Over a year ago

Then you don't need to import it. Just use the declare statement and you can use your script.

Ritesh Waghela Over a year ago

Remove Hocr.prototype.setHocr(hocr) and try hocrProofreader .setHocr(hocr); in your compoent

Igor.R Over a year ago

No.Property 'setHocr' does not exist on type 'typeof HocrProofreader'.ts(2339)

Ritesh Waghela Over a year ago

The code you have posted, setHocr exist on the prototype of HocrProofreader. HocrProofreader.prototype.setHocr this line.

rebiscosg · Accepted Answer · 2019-06-23 13:29:03Z

The only missing here is to instantiate your object. You can do it inside a service if you want.

HocrProofreader-service.ts

import { Injectable } from '@angular/core';

declare const Util: any;
declare const HocrProofreader: any;

@Injectable({
  providedIn: 'root'
})
export class PRService{
  private util;
  private hpf;

  constructor() {
    this.util = new Util();
    this.hpf = new HocrProofreader({
      layoutContainer: 'layout-container',
      editorContainer: 'editor-container'
    });
  }

  setHocr(hocr) {
    this.hpf.setHocr(hocr);
  }
}

let me know if this works for you.

Collectives™ on Stack Overflow

Importing plain JS code inside angular - 7

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related