Cannot read property 'TNSCanvas' of undefined

[popoleeMaster]

Sorry if this question is a miss implementation.

I would like to try to setup NativeScript/canvas and NativeScript/canvas-three in my Angular Native Script project.

Current dependencies are

    "@angular/core": "^14.0.0",
    ...
    "@nativescript/angular": "^14.0.0",
    "@nativescript/canvas": "^1.0.0",
    "@nativescript/canvas-three": "^1.0.0",
    "@nativescript/core": "~8.2.0",
    "three": "^0.141.0",

I am using Android API 32, and a virtual emulated device.

My code is

shared.module.ts

import { NativeScriptCommonModule, NativeScriptFormsModule, NativeScriptRouterModule } from '@nativescript/angular';
import { CanvasModule } from '@nativescript/canvas/angular';

const MODULES = [
  NativeScriptCommonModule,
  NativeScriptFormsModule,
  NativeScriptRouterModule,
  CanvasModule
];

home.component.html

<ActionBar title="My App" class="action-bar" flat="true">
</ActionBar>
<StackLayout class="p-20">
  <Canvas id="canvas" width="100%" height="100%" (ready)="ready($event)"></Canvas>
</StackLayout>

home.component.ts

export class HomeComponent {

  ngOnInit() {
    setStatusBarColor('dark', '#97d9e9');
  }

  ready(event) {
    console.log('[TEST => ready]');
  }

All I get is

JS: Angular is running in development mode. Call enableProdMode() to enable production mode. JS: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'TNSCanvas' of undefined JS: TypeError: Cannot read property 'TNSCanvas' of undefined JS: at new Canvas (file: src\webpack:\frontend\node_modules\@nativescript\canvas\Canvas\index.android.js:31:0) JS: at ViewUtil.createView (file: src\webpack:\frontend\node_modules\@nativescript\angular\fesm2015\nativescript-angular.mjs:1518:21) JS: at NativeScriptRenderer.createElement (file: src\webpack:\frontend\node_modules\@nativescript\angular\fesm2015\nativescript-angular.mjs:2082:35) JS: at file: src\webpack:\frontend\node_modules\@nativescript\angular\fesm2015\nativescript-angular.mjs:1946:39 JS: at _ZoneDelegate.invoke (file: src\webpack:\frontend\node_modules\zone.js\fesm2015\zone.js:372:0) JS: at Zone.run (file: src\webpack:\frontend\node_modules\zone.js\fesm2015\zone.js:134:0) JS: at runInRootZone (file: src\webpack:\frontend\node_modules\@nativescript\angular\fesm2015\nativescript-angular.mjs:1939:21)
JS: at NativeScriptRenderer.descriptor.value (file: src\webpack:\frontend\node_modules\@nativescript\angular\fesm2015\nativescript-angular.mjs:1946:19)

I tried using

  <Canvas:TNSCanvas height="100%" width="100%" id="canvas" (ready)="ready($event)" (loaded)="loaded($event)"  />

This works, but ready is never fired, only loaded and the object reference is empty so I can't find a easy way to get the context.

  <canvas:Canvas height="100%" width="100%" id="canvas" (ready)="ready($event)" (loaded)="loaded($event)"  />

throw the same error as above.

also added require('@nativescript/canvas-polyfill') just in case in main.ts, but no success.

is it something I am setting up wrong ? I tried to copy the documentation part a bit of demo-angular/canvas-three but even tho I double checked all, it looks like I can't get it running

[VanderSP]

try polyfill before app run... also, u can´t use 141 now... use 133~

[vallemar]

+1 in vue3

[triniwiz]

Fixed in v2.