Our state of the art Gantt chart


Post by Obould »

Hello all,

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".
And then did a npm install, so they are referenced in our node_modules folder.

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;
}
Here is a copy of a controller that consumes the gantt:
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() {

	}
}
Here's the html that uses the gantt:
<bryntum-gantt></bryntum-gantt>
When we do all of that, we receive this error in the dev console on the webpage:
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.
Any thoughts on this? This is not using the wrapper as you can see in our packages.json we aren't referencing bryntum-angular-shared.

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'

Post by pmiklashevich »

Hello,
Is there anyway to see the source code of the Angular 8 examples?
Gantt/examples/angular/timeranges is Angular 8 demo
When we do all of that, we receive this error in the dev console on the webpage:
// 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.
Any thoughts on this?
I'm not sure where this come from. Need to search the project and find where gantt.stockholm.css is imported.
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).
This error message says it tries to resolve "bryntum-gantt/gantt.umd.js". You should work either with module or umd.

When you copy library to you project, please:
1. Do not put files inside your project, always keep them outside, so your angular builder doesn't touch them.
2. If you copy shared package please make sure you adjusted all pathes. Packages are relative to each other. They need to know location.

First please try to get our demos running, and confirm here that they are runnable for you. Then try to create a small prototype of your project, little testcase. It it doesn't work for you, please zip it up and attach here, so we have something to investigate.

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by Obould »

Pavel,

Thanks for the prompt response, when we tried the wrapper, we were importing the module and that's the message we were experiencing.

Files aren't included included the project, I'll give another look at the wrapper paths.

I am able to get demos running just fine, let me see if I can shrink our project to provide for you.

The gantt.stockholm.css hasn't ever been imported into our project at all. I only did what was above and thats the error we got.

Thanks!

Post by saki »

Hello,
...let me see if I can shrink our project to provide for you.
If you can provide runnable showcase then we can identify the problem most effectively and it is always the fastest way – post one please.

Post by Obould »

Ok here's a sample project based off of our big project. Hopefully you can provide some insight on what I'm missing.

Thanks!
Attachments
BryntumTestApp.zip
(4.78 MiB) Downloaded 199 times

Post by saki »

I have also seen the import of `gantt.stockholm.css` and although it is not explicitly required in your project there's an attempt to load it by gantt.umd.js when it is not found. The following configurations will therefor be needed for sure in `angular.json`:
"preserveSymlinks": true, // needed for file:// packages
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css",
  "node_modules/bryntum-gantt/gantt.material.css" // gantt theme
],
However, it did not help in your showcase so I started to suspect routing (all requests are redirected to 'gantt') and multiple levels of nesting. There could also be a timing issue as there's still a #shadow-root (open) still stays in DOM. Default angular routing unconditionally destroys the html markup on route change what can lead to various problems with gantt. There's a javascript engine that relies on an existing DOM so if the expected DOM is not there many things may fail.

We do not have a Gantt example with routing by we have such example in Scheduler (https://bryntum.com/examples/scheduler/angular/advanced). Here we implement a non-destructive routing strategy that keeps inactive Scheduler's DOM hidden, not destroyed. You can take an inspiration from this example when it comes to routing.

It is also possible to start simple with no routing, make the app working and then add components/modules/routing to see what causes the break and then handle that.

Post by Obould »

Hey,

So I was trying out the same solution again and see if I can get it working with the wrapper and I have attached a sample of it showing the other error I get.. Do you still think its dealing with the routing?

Thanks!
Attachments
BryntumTestApp_Wrapper.zip
(7.82 MiB) Downloaded 177 times

Post by Obould »

Saki,

I was working with the first example I sent you regarding not using wrapper and having the error:
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.
I was looking at the url further and notice the url mentions a "build" folder, I believe Bryntum Gantt itself is looking for a build folder(correct me if I'm wrong). I added a "build" folder and placed the requested css in that folder and voila, it works. Any thoughts on why I need a build folder and why doesn't Bryntum Gantt just doesn't look inside its own folder for the css?

Thanks!

Post by saki »

I've made it completely working with the following steps:
  1. I've downloaded fresh gantt trial 2.1.2 and unzipped it beside BryntumTestApp
    [+] -- BryntumTestApp
    [+] -- gantt-2.1.2-trial
  2. compiled `bryntum-angular-shared`
    cd gantt-2.1.2-trial/examples/angular/_shared
    npm i
    npm run build
  3. deleted `3rdParty` folder from your showcase
  4. run the following:
    cd BryntumTestApp/BryntumTestApp/ClientApp/
    npm i ../../../gantt-2.1.2-trial/examples/angular/_shared/dist/bryntum-angular-shared
    npm i ../../../gantt-2.1.2-trial/build
    npm i
    
  5. added
    @import "~bryntum-gantt/gantt.stockholm.css";
    at the top of `styles.css`
  6. run
    npm start
This is the result:

Screen Shot 2020-05-15 at 10.05.27.png
Screen Shot 2020-05-15 at 10.05.27.png (393.16 KiB) Viewed 3151 times

The only remaining thing is data location; you just need to provide your correct data url and it should work.
Attachments
BryntumTestApp.zip
(1.08 MiB) Downloaded 166 times

Post by Obould »

Saki,

Not sure if I'm missing something but I followed the instructions and still doesn't work for me. I even took the zip you had and still nothing. Is Brnytun-gantt looking for the style sheet hard-coded? Like I said I can fix this by adding a "build" folder. as my previous response.

Thanks!

Post Reply