DatePicker crashes if it's destroyed before it's fully initialized (TypeError: Cannot read property 'destroy' of undefined)

[CandidCodingCanary]

Issue Type

I'm submitting a bug report.

Issue Description

I included the regular Nebular DatePicker Component in my Angular 8 application based on ngx-admin and nebular. I am using an authentication guard in my routing module (canActivate), so it can happen that the page is destroyed immediately after its opened.

<input [nbDatepicker]="datepicker">
<nb-datepicker #datepicker></nb-datepicker>

I cannot share the authentication code, but the issue can be reproduced by just creating a new DatePicker Component and immediately trying to destroy it:

  const component = new NbDatepickerComponent<Date>(null, null, null, null, null, null, null);
  component.ngOnDestroy();

The error message looks like this.

core.js:4002 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'destroy' of undefined
TypeError: Cannot read property 'destroy' of undefined
    at NbDatepickerComponent.push.../../node_modules/@nebular/theme/fesm5/index.js.NbBasePicker.ngOnDestroy (index.js:21489)
    at callProviderLifecycles (core.js:21419)
    at callElementProvidersLifecycles (core.js:21387)
    at callLifecycleHooksChildrenFirst (core.js:21377)
    at destroyView (core.js:29573)
    at callViewAction (core.js:29699)
    at execComponentViewsAction (core.js:29621)
    at destroyView (core.js:29572)
    at callWithDebugContext (core.js:30308)
    at Object.debugDestroyView [as destroyView] (core.js:30016)
    at resolvePromise (zone.js:836)
    at resolvePromise (zone.js:795)
    at zone.js:897
    at ZoneDelegate.invokeTask (zone.js:431)
    at Object.onInvokeTask (core.js:26246)
    at ZoneDelegate.invokeTask (zone.js:430)
    at Zone.runTask (zone.js:198)
    at drainMicroTaskQueue (zone.js:611)
    at ZoneTask.invokeTask [as invoke] (zone.js:517)
    at invokeTask (zone.js:1671)

Possible Solution

I believe the DatePicker.ngOnDestroy is just missing a null check for the triggerStrategy:

nebular/src/framework/theme/components/datepicker/datepicker.component.ts

Lines 253 to 264 in 28e7468

	ngOnDestroy() {
	this.alive = false;
	this.hide();
	this.init$.complete();
	if (this.ref) {
	this.ref.dispose();
	}
	this.triggerStrategy.destroy();
	}

Like so:

    if (this.triggerStrategy) { 
        this.triggerStrategy.destroy(); 
    }

The following pull request resolves this issue.

[yggg]

Fixed by #2011

[gonzalo42]

Hi. Im using version 4.4 and Im having this issue. Please help

[CandidCodingCanary]

Hi. Im using version 4.4 and Im having this issue. Please help

You will have to update to at least 4.5, or override and fix the destructor in your own code. But updating is definitely the better option.