Angular 2 : Cannot read property 'dataAdapter' of undefined

When trying to integrate the angular_jqxscheduler i got this error : “Cannot read property ‘dataAdapter’ of undefined”. those are my files :

scheduler.component.ts

/// <reference path=”../used/jqwidgets.d.ts” />
import { Component, ViewChild, AfterViewInit } from ‘@angular/core’;
import { jqxSchedulerComponent } from ‘../used/angular_jqxscheduler’;
@Component({
selector: ‘scheduler-app’,
template: <jqxScheduler #schedulerReference></jqxScheduler>
})
export class SchedulerComponent implements AfterViewInit
{
@ViewChild(‘schedulerReference’) scheduler: jqxSchedulerComponent;
ngAfterViewInit(): void
{
this.scheduler.createComponent(this.schedulerSettings);
this.scheduler.ensureAppointmentVisible(‘id1’);
}
generateAppointments(): any
{
let appointments = new Array();
let appointment1 = {
id: “id1”,
description: “George brings projector for presentations.”,
location: “”,
subject: “Quarterly Project Review Meeting”,
calendar: “Room 1”,
start: new Date(2016, 10, 23, 9, 0, 0),
end: new Date(2016, 10, 23, 16, 0, 0)
};
appointments.push(appointment1);
return appointments;
}
source =
{
dataType: “array”,
dataFields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘description’, type: ‘string’ },
{ name: ‘location’, type: ‘string’ },
{ name: ‘subject’, type: ‘string’ },
{ name: ‘calendar’, type: ‘string’ },
{ name: ‘start’, type: ‘date’ },
{ name: ‘end’, type: ‘date’ }
],
id: ‘id’,
localData: this.generateAppointments()
}
dataAdapter = new $.jqx.dataAdapter(this.source);
schedulerSettings: jqwidgets.SchedulerOptions =
{
date: new $.jqx.date(2016, 11, 23),
width: 800,
height: 600,
source: this.dataAdapter,
view: ‘weekView’,
showLegend: true,
appointmentDataFields:
{
from: “start”,
to: “end”,
id: “id”,
description: “description”,
location: “location”,
subject: “subject”,
resourceId: “calendar”,
},
resources:
{
colorScheme: “scheme05”,
dataField: “calendar”,
source: new $.jqx.dataAdapter(this.source)
},
views:
[
‘dayView’,
‘weekView’,
‘monthView’
]
};
}

components-routing.module.ts

import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { SchedulerComponent } from ‘./scheduler.component’;
const routes: Routes = [
{
path: ”,
data: {
title: ‘Components’
},
children: [
{
path: ‘scheduler’,
component: SchedulerComponent,
data: {
title: ‘Scheduler’
}
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ComponentsRoutingModule {}

components.module.ts

import { NgModule } from ‘@angular/core’;
import { ComponentsRoutingModule } from ‘./components-routing.module’;
import { ModalModule } from ‘ng2-bootstrap/modal’;
import { SchedulerComponent } from ‘./scheduler.component’;
import { jqxSchedulerComponent } from “../used/angular_jqxscheduler”;
@NgModule({
imports: [
ComponentsRoutingModule,
ModalModule.forRoot(),
TabsModule,
],
declarations: [
SchedulerComponent,
jqxSchedulerComponent
]
})
export class ComponentsModule { }

app.component.ts

[CODE]
import { Component } from ‘@angular/core’;
@Component({
selector: ‘body’,
template: ‘<router-outlet></router-outlet>’
})
export class AppComponent { }

app.module.ts

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { LocationStrategy, HashLocationStrategy } from ‘@angular/common’;
import { AppComponent } from ‘./app.component’;
import { AppRoutingModule } from ‘./app.routing’;
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
DropdownModule.forRoot(),
TabsModule.forRoot(),
],
declarations: [
AppComponent,
],
providers: [{
provide: LocationStrategy,
useClass: HashLocationStrategy
}],
bootstrap: [ AppComponent ]
})
export class AppModule { }

app.routing.ts

import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { FullLayoutComponent } from ‘./layouts/full-layout.component’;
export const routes: Routes = [
{
path: ”,
redirectTo: ‘home’,
pathMatch: ‘full’,
},
{
path: ”,
component: FullLayoutComponent,
data: {
title: ‘Accueil’
},
children: [
{
path: ‘components’,
loadChildren: ‘./components/components.module#ComponentsModule’
}
]
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}

index.ts

export * from ‘./app.component’;
export * from ‘./app.module’;

main.ts

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app.module’;
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

index.html

<!doctype html>
<html>
<head>
<base href=”./”>
<meta charset=”utf-8″>
</head>
<body>
<script>
window.__theme = ‘bs4’;
</script>
<!– App Loading… –>
</body>
</html>

main.ts

import ‘./polyfills.ts’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { enableProdMode } from ‘@angular/core’;
import { environment } from ‘./environments/environment’;
import { AppModule } from ‘./app/’;
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

via Oussama