ngOnDestroy throws error when in SSR

[RomanLavrinenko]

Hey, first of all thanks a lot for your work! It's great!

Could you please provide SSR (universal) support?
I faced with next:
TypeError: Cannot read property 'removeChild' of undefined at DatePickerComponent.ngOnDestroy (webpack-internal:///77:272:29) at callProviderLifecycles (webpack-internal:///2:11392:18) at callElementProvidersLifecycles (webpack-internal:///2:11361:13) at callLifecycleHooksChildrenFirst (webpack-internal:///2:11345:17) at destroyView (webpack-internal:///2:12681:5) at callViewAction (webpack-internal:///2:12827:13) at execComponentViewsAction (webpack-internal:///2:12739:13) at destroyView (webpack-internal:///2:12680:5) at callViewAction (webpack-internal:///2:12827:13) at execComponentViewsAction (webpack-internal:///2:12739:13)

Looks like this happened because server try to execute 'removeChild' of nothing.

I resolved this by checking isPlatformBrowser(this.platformId) and render datepicker only in browser and all works, but yeah, when i get html from the server side, there is no datepicker and i can't see it on browser until browser bundle render datepicker. So there is some delay between getting page html and datepicker.

Probably this is not a big issue because this happens only if user go to page directly by ulr link, but SSR support would be a good investment.

Thanks

[vlio20]

I would be more than happy to to add this capability, though I am not sure what is missed. Can you post some demo project for me to starting on?

[Hampfter]

I have a similar Problem. The quick and dirty solutuion would be to modify the code this way:

DatePickerComponent.prototype.ngOnDestroy = function () {
   this.handleInnerElementClickUnlisteners.forEach(function (ul) { return ul(); });

    if (this.appendChild)

      this.appendToElement.removeChild(this.calendarWrapper);

};

[HuChaoyong]

I got same error in my application.

 HistoricalDataContent.html:1 ERROR TypeError: Cannot read property 'removeChild' of undefined
at DatePickerComponent.webpackJsonp../node_modules/ng2-date-picker/date-picker/date-picker.component.js.DatePickerComponent.ngOnDestroy (date-picker.component.js:269)
at callProviderLifecycles (vendor.dll.js:11709)
at callElementProvidersLifecycles (vendor.dll.js:11678)
at callLifecycleHooksChildrenFirst (vendor.dll.js:11662)
at destroyView (vendor.dll.js:12923)
at callViewAction (vendor.dll.js:13069)
at execComponentViewsAction (vendor.dll.js:12981)
at destroyView (vendor.dll.js:12922)
at callWithDebugContext (vendor.dll.js:13748)
at Object.debugDestroyView [as destroyView] (vendor.dll.js:13302)

this is my main code

    import{ Component,
    ViewChild,
    ComponentFactoryResolver,
    ViewContainerRef,
    ReflectiveInjector} from '@angular/core';
 @ViewChild('content',{read: ViewContainerRef}) bodyContainerRef: ViewContainerRef;
 constructor ( ... ) { ... }
  changeContent(parameter) {
    // console.log(parameter);
    const WidgetFactory = this.componentFactoryResolver.resolveComponentFactory(parameter.component);
    this.bodyContainerRef.clear();
    const injector: Injector = ReflectiveInjector.resolveAndCreate([{
        provide: 'parameter',
        useValue: parameter.obj
    }]);
    const componentRef = this.bodyContainerRef.createComponent(WidgetFactory, 0, injector);
    // this.mainContentService.changed.emit(parameter.obj);
}

<dp-date-picker [(ngModel)]="startDate" [config]="datePickerConfig">startTime</dp-date-picker>
tag in the "parameter.component"
datePickerConfig = { locale: 'zh-cn', format: 'YYYY-MM-DD' };

when the app first load, and run methodchangeContent is OK, but when changeContent push another component, it will get this error.

[vlio20]

The component wasn't built for SSR (yet) I will be glad for a PR.

[vlio20]

@Hampfter, why is your solution considered dirty?

The problem is with ngAfterViewInit.

Solution example:
https://github.com/angular/material2/pull/6050/files

[vlio20]

resolved in c2a0c8b