Angular 2 : Cannot read property 'dataAdapter' of undefined

Bonjour,

Lorsque j'essaie d'intégrer angular_jqxscheduler, je reçois l'erreur : “Cannot read property ‘dataAdapter’ of undefined”.

Voici mes fichiers :
//—————————————————————–
scheduler.component.ts
//—————————————————————–

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
/// <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
//—————————————————————–

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
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
//————————————————

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
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:

1
2
3
4
5
6
7
 
import { Component } from ‘@angular/core’;
@Component({
	selector: ‘body’,
	template: ‘<router-outlet></router-outlet>’
})
export class AppComponent { }

//———————————————–
app.module.ts
//———————————————–

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
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
//————————————————-

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
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
//——————————————————-

Code:

1
2
3
 
export * from ‘./app.component’;
export * from ‘./app.module’;

//——————————————————-
main.ts
//——————————————————-

Code:

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

//——————————————————–
index.html
//——————————————————–

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!doctype html>
	<html>
		<head>
			<base href=”./”>
				<meta charset=”utf-8″>
		</head>
		<body>
		<script>
			window.__theme = ‘bs4’;
		</script>
		<!– App Loading… –>
		</body>
	</html>

//———————————————-
main.ts
//———————————————–

Code:

1
2
3
4
5
6
7
8
9
10
 
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);