Issue importing in Angular application

[purushothaman-k]

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",

[ttt43ttt]

@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]

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

[ttt43ttt]

maybe try to add a delay before using the opencv module

[purushothaman-k]

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 Chunk Files | Names | Raw Size vendor.js | vendor | 11.18 MB | polyfills.js | polyfills | 334.08 kB | styles.css, styles.js | styles | 212.50 kB | main.js | main | 53.13 kB | runtime.js | runtime | 6.85 kB |

                  | 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)

[ttt43ttt]

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

[purushothaman-k]

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.