Bryntum Support Forums

Hi Support,
I'm upgrading scheduler component in my application to version 4.1.0.
I noticed that the bundle size now is very big.
If I open your angular example "angular-7" of the previous version 4.0.x and launch "ng build --prod" the bundle size is about 2.500 Kb (not so small at all).
If i build the same "angular-7" example of the version 4.1.0 the bundle size is about 3.600 Kb.

Is there a way to make the bundle size smaller?

I have tried to compile angular-7 demo both in 4.0.8 and 4.1.0 versions and the differences are approximately same as yours. My bundles were 2.6MB vs 3.7MB. The increase is caused by adding more code in the new version.

However, there would be a way to decrease the size of the bundle and that would be upgrading version of Angular. I have tried to build our recurring-events demo that uses Angular 9.1.13 and the bundle size was 2.8MB. Gantt example rollups on Angular 10.2.4 built into 3.18MB bundle (Gantt is has more code than Scheduler).

Therefore, I'd suggest to upgrade Angular, at least to version 9 and the bundle size should decrease. This is most likely caused by better code optimization and/or more aggressive (clever?) tree shaking in the newer Angular versions.

Thanks for your time Saki,
I use Angular 11 in my application but I had to disable the option buildOptimizer because there were come problems
when deploying to the production web server, I found some topic here confirming the issue.
I confirm that if I build with the optimization enabled the bundle size is about 2.800Kb.
Is the buildOptimizer issue fixed?

Best Regards

Hi mils,

Yes, we've fixed buildOptimizer and it works in all our examples. But actually we don't have an example for angular 11. Could you please try it with your application, it should work too.

Al the best,
Alex

Hi Alex,
I still get an error when I build with buildOptimizer=true:

ERROR TypeError: Cannot read property 'some' of undefined
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.set [as eventsData] (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.set (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)
    at i.value (7-es2015.bab2db6b0005ecbe1af8.js:1)

The error raises when I open the second time the route that point to the component that reference the scheduler.
Everything's ok without the optimization enabled.

Best Regards

Would you post please a showcase? The simplest Scheduler with routing that triggers it?

If I create a new project from the scratch everything works fine, even with optimization enabled.
The problem is in my main project, that I can't attach or reduce to a showcase
This is the function causing the error, I can intercept it from the browser debugger:

{
                            key: "cancelBatch",
                            value: function() {
                                this.batching = null,
                                this.meta.batchChanges = null
                            }
                        }, {
                            key: "triggerBeforeUpdate",
                            value: function(e) {
                                var t = this;
                                return !this.stores.some(function(n) { 		// error is here (this.stores is undefined)
                                    return !1 === n.trigger("beforeUpdate", {
                                        record: t,
                                        changes: e
                                    })
                                })
                            }
                        }, {

The above code comes from the very core class Core/lib/Core/data/Model.js. I doubt that the code itself would be buggy as we run thousands of tests before release so a bug would be revealed by them. I think it is what Angular optimization does with the code.

A possible approach would be to compare relevant config files of the newly created project with the files of the existing project, namely:

• package.json - especially the versions. Sometimes changing ^ to ~ can make/break things
• angular.json
• tsconfig*.json

Also the brute force of

npm cache clean --force
rm -rf node_modules package-lock.json dist
npm install
npm start

may help.

The last resort would be to copy files from the existing project into the workable newly created project.

Thanks a lot Saki,
I'll give it a try, but it doesn't seems that easy

Best Regards

I was wrong, the error didn't happen in my showcase just because I didn't add any event to the scheduler.
Adding some events I was able to replicate the problem, you can find the showcase in attachment.
Without the optimization everything works fine.

Best Regards