Our powerful JS Calendar component


Post by braincept »

Hi Team, We are facing one issue in the production build. Please have a look at the screenshot.

Steps to reproduce the issue:
1) Goto calendar lazy route. ( First time calendar is working. You will not see any error )
2) From calendar route goto abc lazy route
3) go back to the calendar lazy route again. (This time calendar is not going to work)

then you will see the errors which are displaying in the screenshot. But if you reload the page then you will not able to see the error.

core.js:6150 ERROR TypeError: Cannot read property 'some' of undefined
    at o.value (calendar.lite.umd.js:31239)
    at o.value (calendar.lite.umd.js:30844)
    at o.value (calendar.lite.umd.js:30782)
    at o.set [as resourcesData] (calendar.lite.umd.js:35018)
    at o.set (calendar.lite.umd.js:27247)
    at o.value (calendar.lite.umd.js:26197)
    at o.value (calendar.lite.umd.js:26118)
    at o.value (calendar.lite.umd.js:25756)
    at o.value (calendar.lite.umd.js:30375)
    at o.value (calendar.lite.umd.js:71106)
Hi @ core.js:6150
handleError @ core.js:6198
(anonymous) @ core.js:29519
invoke @ zone-evergreen.js:368
run @ zone-evergreen.js:130
runOutsideAngular @ core.js:28457
tick @ core.js:29519
(anonymous) @ core.js:29391
invoke @ zone-evergreen.js:368
onInvoke @ core.js:28528
invoke @ zone-evergreen.js:367
run @ zone-evergreen.js:130
run @ core.js:28412
next @ core.js:29390
i @ core.js:25882
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25872
Ad @ core.js:28465
onHasTask @ core.js:28545
hasTask @ zone-evergreen.js:422
_updateTaskCount @ zone-evergreen.js:443
_updateTaskCount @ zone-evergreen.js:270
runTask @ zone-evergreen.js:191
m @ zone-evergreen.js:578
invokeTask @ zone-evergreen.js:487
h @ zone-evergreen.js:1596
f @ zone-evergreen.js:1633
load (async)
P @ zone-evergreen.js:1748
scheduleTask @ zone-evergreen.js:389
onScheduleTask @ zone-evergreen.js:279
scheduleTask @ zone-evergreen.js:382
scheduleTask @ zone-evergreen.js:217
scheduleEventTask @ zone-evergreen.js:243
(anonymous) @ zone-evergreen.js:1903
(anonymous) @ http.js:1793
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ map.js:16
subscribe @ Observable.js:23
call @ catchError.js:14
subscribe @ Observable.js:23
l @ innerSubscribe.js:67
_innerSub @ mergeMap.js:57
_tryNext @ mergeMap.js:51
_next @ mergeMap.js:34
next @ Subscriber.js:49
_next @ Subscriber.js:72
next @ Subscriber.js:49
_next @ Subscriber.js:72
next @ Subscriber.js:49
notifyNext @ mergeMap.js:70
_next @ innerSubscribe.js:10
next @ Subscriber.js:49
(anonymous) @ subscribeToPromise.js:5
invoke @ zone-evergreen.js:368
onInvoke @ core.js:28528
invoke @ zone-evergreen.js:367
run @ zone-evergreen.js:130
(anonymous) @ zone-evergreen.js:1272
invokeTask @ zone-evergreen.js:402
onInvokeTask @ core.js:28515
invokeTask @ zone-evergreen.js:401
runTask @ zone-evergreen.js:174
m @ zone-evergreen.js:578
invokeTask @ zone-evergreen.js:487
h @ zone-evergreen.js:1596
f @ zone-evergreen.js:1622
Show 40 more frames

core.js:6150 ERROR TypeError: Cannot read property 'eventStore' of undefined
    at e.ngAfterViewInit (event-calendar-dashboard.component.ts:855)
    at Lt (core.js:2521)
    at Mt (core.js:2492)
    at St (core.js:2443)
    at rs (core.js:9478)
    at core.js:10527
    at rs (core.js:10520)
    at Ls (core.js:10573)
    at core.js:9204
    at rs (core.js:9202)

Let me share the angular.json configuration with you.

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [],
            "preserveSymlinks": true,
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
            ]
          },
          "configurations": {
            "calio": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.calio.ts"
                }
              ],
              "aot": true,
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        }

TsConfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "noUnusedLocals": true
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "node",
      "googlemaps"
    ]
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Calendar code in afterViewInit

ngAfterViewInit(): void {
	this.calendarInstance = this.calendar.calendarInstance;
    	this.eventStore = this.calendarInstance.eventStore;
   	LoggerService.log('before eventstore ', this.eventStore);
   }
Attachments
Screenshot 2021-02-11 at 2.37.04 PM.png
Screenshot 2021-02-11 at 2.37.04 PM.png (246.82 KiB) Viewed 2674 times

Post by alex.l »

Could you please attach a runnable test case (your app or modify one of our examples) to make possible reproduce the problem?

All the best,
Alex


Post by braincept »

Hi Alex,

Unfortunately, we cannot share our product code with you that's why we have shared the configurations with you.

Our dev team is currently engaged with coming releases. I am afraid as of now we are not in a position to allocate a resource to develop an example application to reproduce this error.

If you need any other help from us, you can let us know we will try to provide you.

I hope you are understanding our problem and If we are facing this issue, there are chances other users may also get this issue.

Thanks,


Post by pmiklashevich »

Please upgrade to the latest sources. If the bug is still reproducible, please create a small runnable demo that shows the issue (based on one of our examples). We must be able to reproduce the bug to be able to fix it. Here is the support guidelines: viewtopic.php?f=35&t=772 Cheers!

Pavlo Miklashevych
Sr. Frontend Developer


Post by RonaldoRibeiro »

Hello guys, any update on this issue?

We are facing the same issue with the scheduler component. We have a trial license and when our application builds in production mode it displays in console the same errors braincept posted.

The steps to reproduce are exactly the same as his posted.
1) Goto scheduler lazy route. ( It works fine )
2) From scheduler route goto any other lazy route
3) Go back to the scheduler lazy route again. (scheduler won't load and errors are displayed in console)

First error

TypeError: Cannot read property 'some' of undefined
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.set [as eventsData] (10.39f9a2cfca19dbaa46c0.js:1)
    at i.set (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)

Second error

TypeError: Cannot read property 'some' of undefined
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.set [as eventsData] (10.39f9a2cfca19dbaa46c0.js:1)
    at i.set (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)
    at i.value (10.39f9a2cfca19dbaa46c0.js:1)

Third error

TypeError: Cannot read property 'eventStore' of undefined
    at 10.39f9a2cfca19dbaa46c0.js:1
    at l.invokeTask (polyfills.1ef481aa5c7baf2488f7.js:1)
    at Object.onInvokeTask (main.1c55b0be2d376013a763.js:1)
    at l.invokeTask (polyfills.1ef481aa5c7baf2488f7.js:1)
    at a.runTask (polyfills.1ef481aa5c7baf2488f7.js:1)
    at invokeTask (polyfills.1ef481aa5c7baf2488f7.js:1)
    at invoke (polyfills.1ef481aa5c7baf2488f7.js:1)
    at n.args.<computed> (polyfills.1ef481aa5c7baf2488f7.js:1)

Let me share some configurations files

@angular/core: 10.2.4
@bryntum/demo-resources: 1.0.0
@bryntum/scheduler: npm:@bryntum/scheduler-trial@4.1.0
@bryntum/scheduler-angular: 4.1.0

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "SotreqlinkResourcePlanning": {
      "projectType": "application",
      "i18n": {
        "sourceLocale": {
          "code": "pt"
        },
        "locales": {
          "en": "src/assets/locale/messages.en.xlf",
          "es": "src/assets/locale/messages.es.xlf"
        }
      },
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "srp",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/SotreqlinkResourcePlanning",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/angular-calendar/css/angular-calendar.css",
              "node_modules/primeng/resources/themes/bootstrap4-dark-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "allowedCommonJsDependencies": [
              "lodash"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "100kb",
                  "maximumError": "1mb"
                }
              ]
            },
            "hml": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.hml.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "100kb",
                  "maximumError": "1mb"
                }
              ]
            },
            "dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "100kb",
                  "maximumError": "1mb"
                }
              ]
            },
            "en": {
              "localize": ["en"]
            },
            "es": {
              "localize": ["es"]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "SotreqlinkResourcePlanning:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "SotreqlinkResourcePlanning:build:production"
            },
            "en": {
              "browserTarget": "SotreqlinkResourcePlanning:build:en"
            },
            "es": {
              "browserTarget": "SotreqlinkResourcePlanning:build:es"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "SotreqlinkResourcePlanning:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/angular-calendar/css/angular-calendar.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "SotreqlinkResourcePlanning:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "SotreqlinkResourcePlanning:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "SotreqlinkResourcePlanning",
  "cli": {
    "analytics": "82bccb20-480f-4d28-8f97-ea064fdb26c5"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2019",
      "es2018",
      "dom"
    ],
    "paths": {
      "@app/*": ["src/app/*"],
      "@core/*": ["src/app/core/*"],
      "@environments/*": ["src/environments/*"],
      "@modules/*": ["src/app/modules/*"],
      "@shared/*": ["src/app/shared/*"],
      "@angular/*": ["node_modules/@angular/*"]
    }
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

packages.json

{
  "name": "sotreqlink-resource-planning",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "test:dev": "ng test --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:prod": "ng build --prod",
    "build:hml": "ng build --configuration=hml",
    "build:dev": "ng build --configuration=dev",
    "build:localize": "ng build --localize"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.2.4",
    "@angular/cdk": "^10.2.5",
    "@angular/common": "~10.2.4",
    "@angular/compiler": "~10.2.4",
    "@angular/core": "~10.2.4",
    "@angular/forms": "~10.2.4",
    "@angular/platform-browser": "~10.2.4",
    "@angular/platform-browser-dynamic": "~10.2.4",
    "@angular/router": "~10.2.4",
    "@bryntum/demo-resources": "^1.0.0",
    "@bryntum/scheduler": "npm:@bryntum/scheduler-trial@^4.1.0",
    "@bryntum/scheduler-angular": "^4.1.0",
    "@fortawesome/angular-fontawesome": "^0.7.0",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-regular-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@microsoft/applicationinsights-web": "^2.5.9",
    "@ngrx/effects": "^10.0.1",
    "@ngrx/schematics": "^10.0.1",
    "@ngrx/store": "^10.0.1",
    "angular-calendar": "^0.28.20",
    "angular-resizable-element": "^3.3.3",
    "bootstrap": "^4.5.2",
    "calendar-utils": "^0.8.3",
    "date-fns": "^2.14.0",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "ng-block-ui": "^3.0.2",
    "ngx-cookie-service": "^10.1.1",
    "primeicons": "^4.0.0",
    "primeng": "^10.0.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.1",
    "@angular/cli": "~10.2.1",
    "@angular/compiler-cli": "~10.2.4",
    "@angular/localize": "^10.2.4",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}


Post by alex.l »

Hi RonaldoRibeiro,

The steps to reproduce are exactly the same as his posted.

Where can I do these steps to reproduce the issue? Are you able to replicate this in our Angular examples?
Could you please attach a runnable test case here, so we will be able to investigate reasons of such behaviour?

All the best,
Alex

All the best,
Alex


Post by saki »

This is a known issue and we have a ticket for it: https://github.com/bryntum/support/issues/2663

We do not yet know if it is caused by the Angular tree shaking/optimization or if it can be fixed in our code. We will fix it if we find it fixable by us.

See also please: viewtopic.php?p=85384#p85384


Post by RonaldoRibeiro »

alex.l wrote: Thu Apr 15, 2021 8:56 am

Where can I do these steps to reproduce the issue? Are you able to replicate this in our Angular examples?
Could you please attach a runnable test case here, so we will be able to investigate reasons of such behaviour?

All the best,
Alex

Thanks for your reply.

I've made an application on github where you can reproduce this problem, that application is also attached to this post.

https://github.com/ronaldosjr/bryntum-scheduler

If you run it with ng serve --prod you can reproduce the issue.

saki wrote: Thu Apr 15, 2021 9:15 am

This is a known issue and we have a ticket for it: https://github.com/bryntum/support/issues/2663

We do not yet know if it is caused by the Angular tree shaking/optimization or if it can be fixed in our code. We will fix it if we find it fixable by us.

See also please: viewtopic.php?p=85384#p85384

Thanks saki, I'll have a look.

Attachments
bryntum-scheduler-trial.zip
(154.21 KiB) Downloaded 100 times

Post by pmiklashevich »

Thanks for the testcase. Your issue is reproducible. I've updated the ticket above. We will try to get that fixed. Stay tuned!

Pavlo Miklashevych
Sr. Frontend Developer


Post by RonaldoRibeiro »

pmiklashevich wrote: Fri Apr 16, 2021 10:34 am

Thanks for the testcase. Your issue is reproducible. I've updated the ticket above. We will try to get that fixed. Stay tuned!

You're very welcome.

I've noticed that if we change buildOptimizer to false in angular.json file, the scheduler component works fine.


Post Reply