We are evaluating Bryntum Gantt and we've looked at the integration document with Angular and tried both methods to integrate with and without the wrapper. The package we are working with is the Free Trial of the Gantt so whichever is included that's what were working with. We are using Angular version 8, which I've seen some of your examples using Angular 8. Is there anyway to see the source code of the Angular 8 examples? The Angular examples that's included in the package are Angular 7. So onto our original problem with integration.
We added the bryntum-gantt module to our packages.json file doing this:
"bryntum-gantt": "file:../../3rdParty/bryntum-gantt".
Here is a copy of our controller that setups the gantt:
import { Component, ViewChild, ElementRef, OnInit, AfterViewInit, ViewEncapsulation, HostListener } from '@angular/core';
import { Services, BaseComponent } from '@pm/shared/index';
import { Gantt } from 'bryntum-gantt';
@Component({
encapsulation: ViewEncapsulation.None,
selector: 'bryntum-gantt',
template: '<div></div>'
})
export class BryntumGanttComponent implements OnInit {
constructor(element: ElementRef) {
this.elementRef = element;
}
ngOnInit() {
const ganttEngine = new Gantt({
...this.config,
appendTo: this.elementRef.nativeElement,
});
this.ganttEngine = ganttEngine;
}
ngAfterViewInit() {
}
ngOnDestroy() {
}
public config = {
startDate: '2019-06-20 08:00:00',
columns: ["testColumn"]
};
private elementRef: ElementRef;
public ganttEngine: any;
}
import { Component, ViewEncapsulation, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BryntumGanttComponent } from '../../shared/components/bryntum-gantt/bryntum-gantt.component';
@Component({
templateUrl: './gantt-test.component.html',
encapsulation: ViewEncapsulation.None,
selector: 'gantt-test',
outputs:['myEvent']
})
export class GanttTestComponent {
constructor() {
}
ngAfterViewInit() {
}
}
<bryntum-gantt></bryntum-gantt>
Refused to apply style from 'https://localhost:7125/build/gantt.stockholm.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
The error below is what we had when we tried using the bryntum-angular-shared module(we followed the instructions of doing npm install and npm build).
ERROR in C:/_git/Product/3rdParty/bryntum-angular-shared/fesm2015/bryntum-angular-shared.js
Module not found: Error: Can't resolve '@angular/core' in 'C:\_git\Product\3rdParty\bryntum-angular-shared\fesm2015'
ERROR in C:/_git/Product/3rdParty/bryntum-angular-shared/fesm2015/bryntum-angular-shared.js
Module not found: Error: Can't resolve 'bryntum-gantt/gantt.umd.js' in 'C:\_git\Product\3rdParty\bryntum-angular-shared\fesm2015'