[ANGULAR] Unable to import both Gantt and Taskboard in a project

[cngo@ensiteusa.com]

This is simple project that can't import both module: Gantt and Taskboard.
https://github.com/cngoEnsite/BrytumGanttTaskboard.git

This is the error message:

taskboard.module.js:1269 Uncaught Error: The Bryntum Grid bundle was loaded multiple times by the application.

Common reasons you are getting this error includes:

* Imports point to different types of the bundle (e.g. *.module.js and *.umd.js)
* Imports point to both sources and bundle
* Imports do not use the shortest relative path, JS treats them as different files
* Cache busters differ between imports, JS treats grid.module.js?1 and grid.module.js?2 as different files
* Imports missing file type, verify they all end in .js

See https://bryntum.com/products/grid/docs/guide/Grid/gettingstarted/es6bundle#troubleshooting for more information


at _VersionHelper.setVersion (taskboard.module.js:1269:17)
at taskboard.module.js:3297:15

Please help me out.
Thank you,

[tasnim]

Hi,

While you're using multiple bryntum products combined, you'd need to use thin bundles for that
Please check the guide here https://bryntum.com/products/gantt/docs/guide/Grid/gettingstarted/multiple-products#combining-multiple-products-using-thin-bundles

And here is a demo of thin bundles https://bryntum.com/products/gantt/examples/gantt-taskboard/

This should help.

Best regards,
Tasnim

[cngo@ensiteusa.com]

So I need to use javascript for combination. I can't use angular syntax?

[marcio]

Hey,

No, we have thin packages for the supported frameworks, we have an Angular guide here https://bryntum.com/products/gantt/docs/guide/Gantt/integration/angular/multiple-products

[cngo@ensiteusa.com]

I can import 'thin' libraries but gantt still can't work: This is the error message.

Cannot read properties of null (reading 'classList')
    at Rectangle.client (Rectangle.js:221:36)
    at Gantt.onInternalResize (GridElementEvents.js:764:35)
    at Gantt.onInternalResize (GridBase.js:1186:11)
    at Gantt.onElementResize (Widget.js:4543:10)
    at ResizeObserver.onElementResize (ResizeMonitor.js:120:13)

Do you have any ideas?

[cngo@ensiteusa.com]

This is the code in Retangle.js which has error (element.classList is null)

if (scrollbarWidth && !element.classList.contains("b-hide-scroll")) {
      if (element.scrollHeight > element.clientHeight && DomHelper.getStyleValue(element, "overflow-y") !== "hidden") {
        padding = parseFloat(DomHelper.getStyleValue(element, "padding-right"));
        result.right += padding - Math.max(padding, scrollbarWidth);
      }
      if (element.scrollWidth > element.clientWidth && DomHelper.getStyleValue(element, "overflow-x") !== "hidden") {
        padding = parseFloat(DomHelper.getStyleValue(element, "padding-bottom"));
        result.bottom += padding - Math.max(padding, scrollbarWidth);
      }
    }

[tasnim]

Hi,

Please check what is the element. It might not be defined.
Or You can attach you're app here we can download it and debug it for you locally.

[cngo@ensiteusa.com]

Hi,
I am able to run "thin" library with local data but for remote data, it doesn't work. with the same project config like this. It able to get data with old library but with "thin" library, it never return to load listener.

this.ganttProject$.next({        

          transport: {
            load: {
              // url: '../lib/launch-saas.json'
              url: loadUrl,
              headers: {
                Authorization: "Bearer " + this.token
              },
              paramName: 'q'
            },
            sync: {
              url: syncUrl,
              headers: {
                Authorization: "Bearer " + this.token
              }
            }
          },
          autoLoad: true,
          autoCommit: true,
          autoSync: true,
          // The State TrackingManager which the UndoRedo widget in the toolbar uses
          stm: {
            autoRecord: true
          },
          listeners: {          

            load: ({ response }) => {
              console.log('response ', response);           

            },
            sync: ({ response }) => {
              if (response || response.success) {
               

          }
        }
      },

      // This config enables response validation and dumping of found errors to the browser console.
      // It's meant to be used as a development stage helper only so please set it to false for production systems.
      validateResponse: true,
    });

[cngo@ensiteusa.com]

It looks like I can't use 'thin' library with project transport to load and save automatically.
It is so simple to work with Kendo library but with bryntum, it is too much works.
Could you please double check and help me out?
Thank you.

[tasnim]

Hi,

Would it be possible for you to upload a runnable test app here so we can reproduce the issue and debug it? Without seeing/testing the code it's very difficult to say what's wrong.