[ANGULAR] Scheduler is not working on Production

Post by **NARESH.RAI** » Mon Sep 14, 2020 12:35 pm

Hello,

I have integrated both gantt & scheduler components in my angular app..
everything is working fine on local.
But
On production which is build using AOT enabled, scheduler is throwing some err and not loading properly .

See attached image for err.

any solution on this?

Post by **pmiklashevich** » Mon Sep 14, 2020 2:51 pm

Could you please prepare a small runnable testcase and steps to reproduce the issue?

Post by **NARESH.RAI** » Mon Sep 14, 2020 8:24 pm

Hi,

Not able to attache angular test App, which includes both Gantt & schedluer.
As it has size of 45 MB (node modules not included).

Can u tell me other option to send test app, any support email id etc ?

Thanks

Post by **NARESH.RAI** » Tue Sep 15, 2020 7:36 am

Hello,

I have removed library files from attachment to reduce the size of app.
Please refer package.json file to get details about library location.

We are using Gantt & scheduler version 4.0 beta-1

Thanks

Post by **pmiklashevich** » Tue Sep 15, 2020 2:23 pm

Hello,

I checked your testcase this morning, but unfortunately it's not runnable. I'll leave my comments below, so you can improve it and produce another testcase.

Please avoid having libraries inside your application. Always keep them outside. Otherwise compiler tries to process them too. So please move your "lib" folder outside of "testApp"
Wrapper names are predefined, so you need to follow this naming:
```
    "bryntum-angular-shared": "../../../../Gantt/examples/angular/_shared/dist/bryntum-angular-shared",
    "bryntum-gantt": "../../../../Gantt/build",
    "@bryntum/schedulerpro-angular": "../../../../SchedulerPro/examples/frameworks/npm/angular/dist/schedulerpro",
    "bryntum-schedulerpro": "../../../../SchedulerPro/build",
```
I put your testcase in Gantt/examples/angular and specified relative paths to the libraries and wrappers.
Please pay attention that "@bryntum/" prefix is required. "@bryntum/schedulerpro-angular" is a full name of the SchedulerPro angular wrapper. In 4.0 all wrappers will start from "@bryntum/". These changes are coming.

SchedulerPro module is called "BryntumSchedulerProModule" instead of BryntumAngularSharedModule. We will get our guide fixed according to this change.

import { BryntumAngularSharedModule } from 'bryntum-angular-shared'; // gantt wrapper
import { BryntumSchedulerProModule } from '@bryntum/schedulerpro-angular'; // scheduler pro wrapper

"bry-schedulerpro" is used for SchedulerPro component, need to replace bry-scheduler with bry-schedulerpro in testApp/src/app/scheduler-widget/scheduler-widget.component.html

    <bry-schedulerpro
      #scheduler
      [rowHeight]         = "schedulerConfig.rowHeight"
      .....
      // columns should be either removed, or provided in schedulerConfig

Add comma at line 20 file testApp/src/app/app.module.ts:
```
FormsModule,
```

Removed SpreadsheetComponent usage in testApp/src/app/app-routing.module.ts since it's not provided. Also since you're using routing, please describe what URL should be opened to check your application. The best thing of course is to simplify the application and get rid of the routing unless it's the reason of the main failure you have.
I tried https://localhost:4200/gantt but the app redirects me to https://localhost:4200/ and I see the following error in the browser console:

core.js:15724 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[GanttComponent -> ElementRef]: 
  StaticInjectorError(Platform: core)[GanttComponent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!
Error: StaticInjectorError(AppModule)[GanttComponent -> ElementRef]: 
  StaticInjectorError(Platform: core)[GanttComponent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveToken (core.js:9141)
    at tryResolveToken (core.js:9085)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
    at resolveNgModuleDep (core.js:21218)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21907)
    at resolveDep (core.js:22278)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

I hope this will help you to move forward and create a runnable testcase which show the error in the production mode + AOT. AOT compiles application ahead of time, so if the compiler decides the some part of code is never used, it can simply remove it. Need to be careful with this mode. By the way, when to reproduce the problem we need to build the app in a special way, I would recommend to add a new item to "scripts" in package.json which does everything and we can then execute just "npm run yourscript".

Best wishes,
Pavel

Post by **NARESH.RAI** » Mon Sep 21, 2020 7:30 pm

Hello,

How could we make scheduler pro (angular 10) compatible with angular 7 ?
we are getting some errs from angular core when we integrate directly.

Post by **saki** » Mon Sep 21, 2020 8:04 pm

We don't (yet) have Angular 7 demo for SchedulerPro but we have Calendar Angular 7 demo that works together with Angular 10-compiled wrappers.

I'm attaching this example that consists of both wrappers and the demo that work together. The decisive configurations are:

"enableIvy":false in frameworks/npm/angular/projects/calendar/tsconfig.lib.json
"skipLibCheck":true in frameworks/angular/angular-7/tsconfig.json
"preserveSymlinks":true in frameworks/angular/angular-7/angular.json

Post by **NARESH.RAI** » Tue Sep 22, 2020 7:10 am

Tried, to build scheduler pro library by

enableIvy:false in frameworks/npm/angular/projects/schedulerpro/tsconfig.lib.json

and run -> ng build to build library but getting errors (attached snip)

Post by **saki** » Tue Sep 22, 2020 10:00 am

The analysis of the error has revealed that it is caused by a bug in angular or ng-packagr. It can be fixed by adding // @dynamic comment before @Component in wrappers.

However it may sound strange, this comment line fixes it. Add it please to schedulerpro.component.ts and resourcehistogram.component.ts so that they read:

// @dynamic
@Component({
  selector: 'bry-schedulerpro',
  template: ''
})

and

// @dynamic
@Component({
  selector: 'bry-resourcehistogram',
  template: ''
})

and recompile the wrapper's library.

We'll take care to add it to our sources so that the next version will contain it.

Post by **NARESH.RAI** » Wed Sep 30, 2020 7:07 am

Hello Saki,

I have provided test app in another ticket,
in same test app u can see when we build app for prod (AOT build) then gantt is working fine but scheduler pro is not loading correctly.

ticket - viewtopic.php?p=77365#p77365

Please check and update

Support Forum

[ANGULAR] Scheduler is not working on Production