Cannot set property 'daterangepicker' of undefined

Hi,

I'm experiencing an annoying issue with the ng2-daterangepicker component. Whenever I refresh the webpage of my application or a HMR compilation occurs, I get the following error: Exception: Call to Node module failed with error: Prerendering failed because of error: TypeError: Cannot set property 'daterangepicker' of undefined at C:\Users\adaerds\Documents\Visual Studio 2017\Projects\Angular2.2\ClientApp\dist\main-server.js:36162:26 at Object. (C:\Users\adaerds\Documents\Visual Studio 2017\Projects\Angular2.2\ClientApp\dist\main-server.js:34560:44) at cb.parentEl (C:\Users\adaerds\Documents\Visual Studio 2017\Projects\Angular2.2\ClientApp\dist\main-server.js:34561:11) at Object. (C:\Users\adaerds\Documents\Visual Studio 2017\Projects\Angular2.2\ClientApp\dist\main-server.js:34576:2) at webpack_require (C:\Users\adaerds\Documents\Visual Studio 2017\Projects\Angular2.2\ClientApp\dist\main-server.js:20:30) at Object. (C:\Users\adaerds\Documents\Visual Studio 2017\Projects\Angular2.2\ClientApp\dist\main-server.js:26136:1) at webpack_require (C:\Users\adaerds\Documents\Visual Studio 2017\Projects\Angular2.2\ClientApp\dist\main-server.js:20:30) at Object. (C:\Users\adaerds\Documents\Visual Studio 2017\Projects\Angular2.2\ClientApp\dist\main-server.js:78823:35) at __webpack_require__ (C:\Users\adaerds\Documents\Visual Studio 2017\Projects\Angular2.2\ClientApp\dist\main-server.js:20:30) at Object.defineProperty.value (C:\Users\adaerds\Documents\Visual Studio 2017\Projects\Angular2.2\ClientApp\dist\main-server.js:8345:27) Current directory is: C:\Users\adaerds\Documents\Visual Studio 2017\Projects\Angular2.2

Once the error occurs, I cannot get the application to run anymore unless I comment out the datepicker imports and the dashboardcomponent it belongs to in the app.module.ts and recompile. Then after uncommenting and recompiling again it works until the next time an HMR or page refresh occurs.

I've set it up as described in the example as follows as a component used in Dashboardcomponent.

First the definitions in the application module "app.module.ts": import { NgModule } from '@angular/core'; import { AppConfig } from './app.config'; import { AuthGuard } from './components/_guards/auth.guard'; import { ServerModule } from '@angular/platform-server'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HttpModule, JsonpModule } from '@angular/http'; import { Routes, RouterModule } from '@angular/router'; import { Component } from "@angular/core"; import { AppComponent } from './components/app/app.component' import { HomeComponent } from './components/home/home.component'; import { DashboardComponent } from './components/dashboard/dashboard.component'; import { Daterangepicker } from 'ng2-daterangepicker'; ....

@NgModule({ bootstrap: [AppComponent], declarations: [ , DashboardComponent, HomeComponent, AppComponent, .... ], imports: [ ServerModule,BrowserModule, Ng2Webstorage, FormsModule, HttpModule, JsonpModule, ChartsModule, Daterangepicker, RouterModule.forRoot([ { path: 'home', component: HomeComponent }, { path: 'dashboard', component: DashboardComponent }, { path: '**', redirectTo: 'home' } .... ]),
providers: [ AppConfig, AuthGuard, ... ], }) export class AppModule { }

And then as a component of dashboardcomponent.ts: import { Component, OnInit, ViewChild, SimpleChanges} from '@angular/core'; import { Http, Headers, RequestOptions, Response } from '@angular/http'; import * as moment from 'moment'; import { AppConfig } from '../../app.config'; import { DataService } from '../_services/data.service'; import { AlertService } from '../_services/alert.service'; import { TicketCountByMonth } from '../_models/ticketcountbymonth'; import { BaseChartDirective } from 'ng2-charts/ng2-charts' import { DaterangepickerConfig } from 'ng2-daterangepicker'; import { DaterangePickerComponent } from 'ng2-daterangepicker';

@Component({ selector: 'line-chart-demo', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css','../../shared/style.css'] }) export class DashboardComponent implements OnInit {
@ViewChild(DaterangePickerComponent) public picker: DaterangePickerComponent;

errorMessage: string;
supportTicketsByMonth: TicketCountByMonth;

public daterange: any = {};
public fromDate: any;
public toDate: any;

constructor(private http: Http, private config: AppConfig, private alertService: AlertService, private dataService: DataService, private daterangepickerOptions: DaterangepickerConfig) {
    this.daterangepickerOptions.skipCSS = true;
    this.fromDate = moment().subtract(6, 'month').startOf('month');
    this.toDate = moment().subtract(1, 'month').endOf('month');
}

public options: any = {
    locale: { format: 'MMMM D, YYYY' },
    alwaysShowCalendars: false,
    ranges: {
        'Last 3 Months': [moment().subtract(3, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
        'Last 6 Months': [moment().subtract(6, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
        'Year To Date': [moment().startOf('year'), moment()],
        'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
    }
};

public selectedDate(value: any) {
    this.daterange.start = value.start;
    this.daterange.end = value.end;
    this.daterange.label = value.label;
    this.fromDate = value.start;
    this.toDate = value.end;
    this.getData(this.daterange.start, this.daterange.end);
}

/ rest of my code/ ... }

I'm using ng2-daterangepicker version 2.0.7 and angular version 4.1.2. I really love the look & feel of the component and couldn't find a better alternative so I would appreciate all the help to fix this issue. I'm hoping it's just a mistake on my side due to my ignorance :)

evansmwendwa / ng2-daterangepicker

Cannot set property 'daterangepicker' of undefined #37