Issue importing in Angular application

Question

Issue importing in Angular application

purushothaman-k opened this issue 2 years ago · comments

Error:
opencv.js:45 Uncaught ReferenceError: Module is not defined
at opencv.js:45:11
at Object. (opencv.js:5:25)
at opencv.js:4:11
at Object.7512 (opencv.js:1:2)
at webpack_require (bootstrap:19:1)
at Module.7015 (device-scan.component.ts:5:10)
at webpack_require (bootstrap:19:1)
at Module.158 ($_lazy_route_resources|lazy|groupOptions: {}|namespace object:13:1)
at webpack_require (bootstrap:19:1)
at Module.6747 (app.component.html:21:14)

app.component.ts

var cv = require('@techstark/opencv-js');

ngOnInit(): void {
console.log(cv.getBuildInformation())

app.component.ts
// es6 import
import cv from "@techstark/opencv-js"
Error node_modules/@techstark/opencv-js/dist/types/index"' has no default export.

package.json

"@techstark/opencv-js": "^4.5.5-release.1",

Wilson Tian · Answer 1 · Sun Apr 24 2022 13:02:54 GMT+0800 (China Standard Time)

@purushothaman-k try import * as cv from "@techstark/opencv-js"
see also https://codesandbox.io/s/techstark-opencv-js-angular-demo-hkmc1n?file=/src/app/app.component.ts

Purushothaman K · Answer 2 · Tue Apr 26 2022 12:59:09 GMT+0800 (China Standard Time)

@ttt43ttt Thanks for your response.
Sill I am facing issue. with Angular 12 Not sure why

Wilson Tian · Answer 3 · Wed Apr 27 2022 22:46:31 GMT+0800 (China Standard Time)

maybe try to add a delay before using the opencv module

Purushothaman K · Answer 4 · Thu Apr 28 2022 00:52:24 GMT+0800 (China Standard Time)

Tried already,

app.component.ts

import { Component } from '@angular/core';
import * as cv from "@techstark/opencv-js";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'testProj';
  content: string | undefined;

  constructor() {
    setTimeout(() => {
      (window as any).cv = cv;
      // console.log(cv);
      // console.log((window as any).cv)
      this.content = cv.getBuildInformation();
    }, 3000);
  }
}

Terminal Out:
✔ Browser application bundle generation complete.

                  | Initial Total |  11.78 MB

Build at: 2022-04-27T16:47:32.998Z - Hash: 266cbb7f3f160ee7 - Time: 10158ms

Warning: /home/ubuntu/Desktop/test/testProj/src/app/app.component.ts depends on '@techstark/opencv-js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✔ Compiled successfully.
✔ Browser application bundle generation complete.

Still in Browser,
[webpack-dev-server] Live Reloading enabled.
opencv.js:45 Uncaught ReferenceError: Module is not defined
at opencv.js:45:11
at Object. (opencv.js:5:25)
at opencv.js:4:11
at Object.8170 (opencv.js:1:2)
at webpack_require (bootstrap:19:1)
at Module.5041 (main.js:14:78)
at webpack_require (bootstrap:19:1)
at Module.6747 (app.component.html:434:34)
at webpack_require (bootstrap:19:1)
at Module.4431 (environment.ts:16:71)

Wilson Tian · Answer 5 · Mon May 02 2022 13:16:26 GMT+0800 (China Standard Time)

@purushothaman-k please see example https://github.com/TechStark/opencv-js-examples/tree/develop/opencv-js-angular-example

Purushothaman K · Answer 6 · Mon May 09 2022 15:42:04 GMT+0800 (China Standard Time)

Thanks @ttt43ttt
At last resolved the issue by changing tsconfig.json lib: [ "es2018", "dom" ] to lib: [ "es2020", "dom" ]
Now I am able to run without any Issues.
We can close this Issue.