I just finished developing an innovative Angular application.
Within the app.component.html file, I have included:
<bryntum-scheduler
#scheduler
[resources] = "resources"
[events] = "events"
[columns] = "schedulerConfig.columns"
[startDate] = "schedulerConfig.startDate!"
[endDate] = "schedulerConfig.endDate!"
></bryntum-scheduler>
The structure of app.component.ts is as follows:
import { Component, ViewChild } from '@angular/core';
import { BryntumSchedulerComponent } from '@bryntum/scheduler-angular';
import { schedulerConfig } from './app.config';
@Component({
selector : 'app-root',
templateUrl : './app.component.html',
styleUrls : ['./app.component.scss']
})
export class AppComponent {
resources = [
{ id : 1, name : 'Dan Stevenson' },
{ id : 2, name : 'Talisha Babin' }
];
events = [
{ resourceId : 1, startDate : '2022-01-01', endDate : '2022-01-10' },
{ resourceId : 2, startDate : '2022-01-02', endDate : '2022-01-09' }
];
schedulerConfig = schedulerConfig;
@ViewChild('scheduler') schedulerComponent!: BryntumSchedulerComponent;
}
In addition, app.config.ts (located in the same folder as app.component.ts) contains:
import { SchedulerConfig } from '@bryntum/scheduler';
export const schedulerConfig: Partial<SchedulerConfig> = {
columns : [
{ text : 'Name', field : 'name', width : 160 }
],
startDate : new Date(2022, 10, 17),
endDate : new Date(2022, 10, 23)
};
However, upon attempting to compile my application, I encountered the following error:
Type 'undefined' is not assignable to type 'object | object[] | ColumnStore | Partial | Partial[]'.
5 [columns] = "schedulerConfig.columns"
I am struggling to identify the root cause of this issue. Can anyone provide some guidance?