NotYetImplemented error in HTMLCanvasElement

[hagay3]

Getting an error with message "NotYetImplemented" from utils.js
I get the error while using nodejs server, what this exact error means?
When I'm using "ng serve" there is not such error.

I'm using line chart from ng2-charts module.
Full Stack Trace:

ERROR Error: NotYetImplemented
    at HTMLCanvasElement.exports.nyi (/home/project15/web/node_modules/domino/lib/utils.js:41:9)
    at BaseChartDirective.ngOnInit (/home/project15/web/node_modules/ng2-charts/charts/charts.js:24:47)
    at checkAndUpdateDirectiveInline (/home/project15/web/node_modules/@angular/core/bundles/core.umd.js:12439:19)
    at checkAndUpdateNodeInline (/home/project15/web/node_modules/@angular/core/bundles/core.umd.js:13966:20)
    at checkAndUpdateNode (/home/project15/web/node_modules/@angular/core/bundles/core.umd.js:13909:16)
    at prodCheckAndUpdateNode (/home/project15/web/node_modules/@angular/core/bundles/core.umd.js:14633:5)
    at Object.updateDirectives (/home/project15/web/dist-server/main.bundle.js:1:51133)
    at Object.updateDirectives (/home/project15/web/node_modules/@angular/core/bundles/core.umd.js:14355:29)
    at checkAndUpdateView (/home/project15/web/node_modules/@angular/core/bundles/core.umd.js:13875:14)
    at callViewAction (/home/project15/web/node_modules/@angular/core/bundles/core.umd.js:14226:21)

Using the following:
NodeJS: 9.3.0
Angular: 5.1.2
OS: linux x64
"chart.js": "^2.7.1"
"ng2-charts": "^1.6.0"

[cscott]

Could you tell me what this line contains:
/home/project15/web/node_modules/ng2-charts/charts/charts.js:24:47

You are trying to use some not-yet-implemented method of the canvas API, but I can't tell exactly which one based on your stacktrace.

[ryandingle]

Hi is this issue got fixed on using domino with angular5.0 ?

I'm also having this kind of issue using domino in server.ts

Error output:
c:\Users\blank\Documents\blank-files\angularapps\rldwebshopv5.0\dist\server.js
:23712
throw new Error("NotYetImplemented");
^

Error: NotYetImplemented
at HTMLCanvasElement.exports.nyi (c:\Users\blank\Documents\blank-files\ang
ularapps\rldwebshopv5.0\dist\server.js:23712:9)
at c:\Users\blank\Documents\blank-files\angularapps\rldwebshopv5.0\dist\se
rver.js:191976:34898
at c:\Users\blank\Documents\blank-files\angularapps\rldwebshopv5.0\dist\se
rver.js:191976:35221
at c:\Users\blank\Documents\blank-files\angularapps\rldwebshopv5.0\dist\se
rver.js:191976:45461
at Object.defineProperty.value (c:\Users\blank\Documents\blank-files\angul
arapps\rldwebshopv5.0\dist\server.js:191976:47139)
at webpack_require (c:\Users\blank\Documents\blank-files\angularapps\r
ldwebshopv5.0\dist\server.js:20:30)
at Object.h9AC (c:\Users\blank\Documents\blank-files\angularapps\rldwebsho
pv5.0\dist\server.js:166616:493649)
at n (c:\Users\blank\Documents\blank-files\angularapps\rldwebshopv5.0\dist
\server.js:166616:149)
at Object.aR8+ (c:\Users\blank\Documents\blank-files\angularapps\rldwebsho
pv5.0\dist\server.js:166616:482366)
at n (c:\Users\blank\Documents\blank-files\angularapps\rldwebshopv5.0\dist
\server.js:166616:149)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve:ssr: node dist/server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\blank\AppData\Roaming\npm-cache_logs\2018-02-15T08_05_
08_044Z-debug.log

[rtyx]

I get it too. The problem seems to be here:

BaseChartDirective.prototype.ngOnInit = function () {
        this.ctx = this.element.nativeElement.getContext('2d');
        this.cvs = this.element.nativeElement;
        this.initFlag = true;
        if (this.data || this.datasets) {
            this.refresh();
        }
    };

and particularly, here:

this.ctx = this.element.nativeElement.getContext('2d');

[rtyx]

In my case, wrapping the canvas element and displaying it conditionally only if the platform is browser seems to be avoiding the error, at least.

The template:

<div style="display: block" *ngIf="isBrowser">
    <canvas baseChart
                    [datasets]="datasets"
                    [options]="barChartOptions"
                    [legend]="barChartLegend"
                    [chartType]="'bar'"
                    [colors]="statisticsService.colors"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)">
    </canvas>
</div>

The typescript file:

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this.isBrowser = isPlatformBrowser(this.platformId);
  }

[bleilarthur]

Any update on this issue?

[cscott]

The API isn't implemented. That seems pretty clear. It's of limited utility on a server-side DOM, although I suppose you could try to do server-side graphics rendering with it. Happen to accept patches if someone wants to tackle that task, though it's a lot of work.

Are you asking for the canvas API to be implemented, or do you want the feature test to work differently or....?

[bleilarthur]

I was using domino to mock the window, but I choose a different way right now, using the node window, jsdom and jsom-canvas...

[pedromcunha]

I've just gotten this with the lottie library. It's happening right as soon as the module is initialized:

var ImagePreloader = (function(){

    var proxyImage = (function(){
        var canvas = createTag('canvas');
        canvas.width = 1;
        canvas.height = 1;
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'rgba(0,0,0,0)';
        ctx.fillRect(0, 0, 1, 1);
        return canvas;
    }())

If it were in my application I would just wrap this in a conditional and only execute if inside the browser. But it seems to be too deep to reach. Anyone have any suggestions?

[danieldanielecki]

This problem still exists as of today

[danday74]

got same problem as @pedromcunha - can't wrap it because its not it my code!

[inesDomi]

For me, the above solution (@rtyx) doesn't work, but if I replace this

<div style="display: block" *ngIf="isBrowser">
    <canvas baseChart
                    [datasets]="datasets"
                    [options]="barChartOptions"
                    [legend]="barChartLegend"
                    [chartType]="'bar'"
                    [colors]="statisticsService.colors"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)">
    </canvas>
</div> 

by this,
It's works for me!

ngAfterViewInit(): void { if (this.isBrowser) { this.ctx = this.canvas.nativeElement.getContext( '2d', ) as CanvasRenderingContext2D; .... } }