Version 1.0.7: Cannot load MLKitView anymore with Angular

[cjohn001]

Currently looking into the updated version 1.0.7 of MLKit in my Angular application. 1.0.6 is working fine. Seems like something is broken when loading the component. Even before getting in the view components init routine view loading breaks. I tried with Angular 15.1.4 and Angular 15.2.0, same behaviour. Following error in debugger:

ERROR Error: Uncaught (in promise): TypeError: Could not load view for: MLKitView.Error: The specified module does not exist: mlkit-core
  TypeError: Could not load view for: MLKitView.Error: The specified module does not exist: mlkit-core
  at getViewClass (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.mjs:1241:14)
  at ViewUtil.createView (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.mjs:1647:26)
  at EmulatedRenderer.createElement (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.mjs:2232:35)
  at file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.mjs:2096:39
  at _ZoneDelegate.invoke (file: node_modules/zone.js/fesm2015/zone.js:372:0)
  at Zone.run (file: node_modules/zone.js/fesm2015/zone.js:134:0)
  at runInRootZone (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.mjs:2089:21)
  at EmulatedRenderer.descriptor.value (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.mjs:2096:19)
  at EmulatedRenderer.createElement (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.mjs:2474:27)
  at BaseAnimationRenderer.createElement (file: node_modules/@angular/platform-browser/fesm2015/animations.mjs:244:29) 

In the angular template I load it as follows:

<MLKitView rowSpan="2" [pause]="_pause" [torchOn]="_torchOn" cameraPosition="back" detectionType="barcode" (detection)="onBarcodeScanResult($event)"
                [barcodeFormats]="_barcodeFormats" (loaded)="onMLKitViewLoaded($event)" style="background-color: black;">
</MLKitView>

In the component _barcodeFormats is specified as:

this._barcodeFormats = [ BarcodeFormats.EAN_13, BarcodeFormats.EAN_8, BarcodeFormats.UPC_A, BarcodeFormats.UPC_E ];

The loaded method is not getting called. Things break before.

public onMLKitViewLoaded(args: any) {
        const scannerView = args.object as MLKitView;
        if (!scannerView.hasCameraPermission()) {
            scannerView.requestCameraPermission();
        }
    }

OS: macOS 13.2.1
CPU: (10) arm64 Apple M1 Pro
Shell: /bin/zsh
node: 18.12.1
npm: 8.19.2
nativescript: 8.4.0

# android
java: 11.0.18
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found

# ios
xcode: 14.2/14C18
cocoapods: 1.11.3
python: 3.9.14
python3: 3.9.6
ruby: 2.7.7
platforms: 
  - DriverKit 22.2
  - iOS 16.2
  - macOS 13.1
  - tvOS 16.1
  - watchOS 9.1

Dependencies

"dependencies": {
  "@angular/animations": "15.2.0",
  "@angular/common": "15.2.0",
  "@angular/compiler": "15.2.0",
  "@angular/core": "15.2.0",
  "@angular/forms": "15.2.0",
  "@angular/platform-browser": "15.2.0",
  "@angular/platform-browser-dynamic": "15.2.0",
  "@angular/router": "15.2.0",
  "@apollo/client": "3.7.9",
  "@mnd/external-web-view": "file:../mnd-plugins/dist/packages/external-web-view/mnd-external-web-view-1.0.0.tgz",
  "@nativescript/angular": "15.0.2",
  "@nativescript/core": "8.4.7",
  "@nativescript/iqkeyboardmanager": "2.1.1",
  "@nativescript/localize": "5.0.4",
  "@nativescript/mlkit-barcode-scanning": "1.0.7",
  "@nativescript/mlkit-core": "1.0.7",
  "@nativescript/secure-storage": "3.0.0",
  "@nativescript/theme": "3.0.2",
  "@nativescript/ui-charts": "0.2.4",
  "apollo-angular": "4.2.1",
  "apollo3-cache-persist": "0.14.1",
  "d3-ease": "3.0.1",
  "graphql": "16.6.0",
  "graphql-tag": "2.12.6",
  "intl": "1.2.5",
  "moment": "2.29.4",
  "nativescript-health-data": "file:../mnd-custom-plugins/nativescript-health-data/publish/package/nativescript-health-data-2.0.0.tgz",
  "nativescript-oauth2-ext": "file:../mnd-custom-plugins/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.1.tgz",
  "nativescript-sqlite": "2.8.6",
  "nativescript-ui-calendar": "14.2.1",
  "nativescript-ui-gauge": "14.2.1",
  "rxjs": "7.8.0",
  "uuid": "9.0.0",
  "zone.js": "~0.11.8"
},
"devDependencies": {
  "@angular-devkit/build-angular": "15.2.0",
  "@angular/compiler-cli": "15.2.0",
  "@graphql-codegen/cli": "3.2.1",
  "@graphql-codegen/fragment-matcher": "4.0.1",
  "@graphql-codegen/introspection": "3.0.1",
  "@graphql-codegen/typescript": "3.0.1",
  "@graphql-codegen/typescript-apollo-angular": "3.5.6",
  "@graphql-codegen/typescript-operations": "3.0.1",
  "@nativescript/android": "8.4.0",
  "@nativescript/ios": "8.4.1",
  "@nativescript/types": "8.4.0",
  "@nativescript/webpack": "5.0.13",
  "@ngtools/webpack": "15.2.0",
  "@types/d3-ease": "3.0.0",
  "@types/intl": "1.2.0",
  "@types/node": "18.14.1",
  "@types/uuid": "9.0.1",
  "keycloak-request-token": "0.1.0",
  "rimraf": "4.1.2",
  "sass": "1.58.3",
  "ts-node": "10.9.1",
  "typescript": "4.9.5"
}

[timdoege]

You can register the view

registerElement('MLKitView', () => MLKitView);

in your main.ts or app.module.ts

in v1.0.7.

[cjohn001]

@timdoege and @triniwiz thanks for the directions this solved the issue. But there seems to be a bug since 1.0.7 then. I also tried with 1.08 issue is the same.

To my understanding due to the referenced line below it should not be required to registerElement manually. And what is also somehow odd is, I usually include things the following way. But this does not work as isKnownView returns true. Seems something with the registration of the View is broken in the plugin

if (!isKnownView('MLKitView')) {
    registerElement('MLKitView', () => require('@nativescript/mlkit-core').MLKitView);
}

https://github.com/NativeScript/mlkit/blob/742e5c3b07ef720e669da7f778f6cd140ab2799d/packages/mlkit-core/angular/index.ts#L15

[triniwiz]

Add the register to your app.module, also I'd remove the extra check.

[cjohn001]

@triniwiz , this is indeed how I did it. Added to app.module and removed isKnownCheck. Till 1.0.6 this was not required. Therefore I added the bug report. Is this now the intended behavior? In this case the issue could be closed. I would prefer the old way. saved a line of code :)

[triniwiz]

It's due to the angular upgrade, looks like you will need update angular to use a newer version if importing the module

[cjohn001]

@triniwiz : I am on 15.2.0, I can try out 15.2.1 I have just seen, but looks unlikely set a minor version would change something.

I just tried with: "@angular/animations": "15.2.1", "@angular/common": "15.2.1", "@angular/compiler": "15.2.1", "@angular/core": "15.2.1", "@angular/forms": "15.2.1", "@angular/platform-browser": "15.2.1", "@angular/platform-browser-dynamic": "15.2.1", "@angular/router": "15.2.1",

Situation is the same. Also needs registerElement('MLKitView', () => require('@nativescript/mlkit-core').MLKitView);

I am not sure if I understood what you mean

... looks like you will need update angular to use a newer version if importing the module

[darklight365]

@triniwiz - If the following line was updated to use an imported class (and not a require call) then it should work:

https://github.com/NativeScript/mlkit/blob/742e5c3b07ef720e669da7f778f6cd140ab2799d/packages/mlkit-core/angular/index.ts#L15

import { MLKitView } from '@nativescript/mlkit-core';
registerElement('MLKitView', () => MLKitView);