Face-api.js: Is this package available for Angular?

Created on 7 Dec 2018  路  10Comments  路  Source: justadudewhohacks/face-api.js

I'm trying to include this package in Angular 7 via npm i face-api.js, but I'm always getting:

error TS2304: Cannot find name 'faceapi'.

Any hints or quick steps to include it correctly in Angular?

Most helpful comment

I am seeing this same problem with the latest clean build of an angular 7 application.
For reference, here is the package.json for a minimal app I created just to test this error.
{
"name": "ang-face",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"face-api.js": "^0.18.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.3",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}

All 10 comments

import * as faceapi from 'face-api.js';

seems to solve the issue

I am getting these warnings:

client:154 ./node_modules/@tensorflow/tfjs-core/dist/tf-core.esm.js Module not found: Error: Can't resolve 'crypto' in '/home/qamaruddin/eclipse-workspace/imgproc-frontend-angular/node_modules/@tensorflow/tfjs-core/dist' warnings @ client:154 onmessage @ socket.js:41 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:887 SockJS._transportMessage @ sockjs.js:885 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2961 wrapFn @ zone.js:1188 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496 invokeTask @ zone.js:1540 globalZoneAwareCallback @ zone.js:1566 client:154 ./node_modules/tfjs-image-recognition-base/build/es6/env/initialize.js Module not found: Error: Can't resolve 'fs' in '/home/qamaruddin/eclipse-workspace/imgproc-frontend-angular/node_modules/tfjs-image-recognition-base/build/es6/env'

The camera opens but no face tracking overlay :(

Including the js doesn't seem to resolve it either:

It seems there are plenty of complaints which I have no clue how to solve:

ERROR in src/app/logger.service.ts(29,30): error TS2339: Property 'stack' does not exist on type '{}'.
src/face/face.component.ts(120,42): error TS2345: Argument of type 'FaceDetectionWithLandmarks<FaceLandmarks68>[]' is not assignable to parameter of type 'FaceLandmarks | FaceLandmarks[]'.
  Type 'FaceDetectionWithLandmarks<FaceLandmarks68>[]' is not assignable to type 'FaceLandmarks[]'.
    Type 'FaceDetectionWithLandmarks<FaceLandmarks68>' is not assignable to type 'FaceLandmarks'.
      Property '_shift' is missing in type 'FaceDetectionWithLandmarks<FaceLandmarks68>'.

What typescript version are you using, maybe there is a mismatch between the tfjs-core version you installed and the version of face-api.js (should be 0.13.8)?

I am seeing this same problem with the latest clean build of an angular 7 application.
For reference, here is the package.json for a minimal app I created just to test this error.
{
"name": "ang-face",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"face-api.js": "^0.18.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.3",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}

Boa noite pessoal.

Algu茅m saber o que 茅 isso ? Estou tentando criar a pasta dist com o comando ng build --prod

ERROR in src/app/components/camera/face-detection.1.ts(1,26): error TS2307: Cannot find module './js/face-api'.

Obrigada por ter respondido a minha outra pergunta pessoal, ajudou bastante ! grata !!!!

The typescript version that google use to build typescript ends in .2222 i think, or something along those lines. If you try that version and it works, let us know on the ticket so it can be closed out :)

Thank you, my doubt has been resolved. The project I was studying was without the dist folder and the main.js file was missing, it was an upgrade in the gitignore file. But thank you so much for having responded. Thankful !

@justadudewhohacks this can be closed.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hawxxx picture hawxxx  路  5Comments

liyinghao666 picture liyinghao666  路  5Comments

TuanHungVU1202 picture TuanHungVU1202  路  6Comments

logypaser picture logypaser  路  3Comments

MilindModi picture MilindModi  路  6Comments