Our powerful JS Calendar component


Post by NARESH.RAI »

Hi,

Checked calendar example which has compiled in angular version 10.
where as my application working on angular version 7.

So it this works with my app ? is this library has backward comparability for older version?

thanks!


Post by sergey.maltsev »

Hi!

We suggest to use bundled angular wrappers to use within end-user app.
We already checked building angular wrappers with Angular 10 and they work with older versions of apps like Angular 7.
It is not released yet but we plan to do it for it for 4.0 version or one of the upcoming updates for it.

If you have any specific problems please attach the app you can't build/run and we will check it.


Post by NARESH.RAI »

Tried to include calendar angular 10 version in to my angular 7 app getting namespace errors -> "@angular/core/core"' has no exported member 'ɵɵFactoryDef'."

PFA for more details

Attachments
calendarIssue.PNG
calendarIssue.PNG (42.92 KiB) Viewed 2457 times

Post by sergey.maltsev »

Hi!

Please remove all node_modules and dist folders in app and _shared folders and rebuild the project.

npm install
npm run build

Post by NARESH.RAI »

Tried this already but didn't worked for me.

Actually we are building calendar library on angular version 10 which as some imports from angular core where as when we use in our app angular-7 it doesn't get those imports from angular core that's why it throws err's..

As some modules are separated or moved from angular core package to other modules from 7-10 upgrade ..

any other solution ?

Thnaks!


Post by saki »

Yes, there are several steps to do to make these versions compatible:

  1. First you need to disable Ivy in the library located in examples/frameworks/npm/angular/projects/calendar folder. The file to change is tsconfig.lib.json. angularCompilerOptions should contain:

      "angularCompilerOptions": {
        "enableIvy": false,
  2. In the project, in file tsconfig.base.json add the following item:

      "compilerOptions": {
        "skipLibCheck": true,
  3. Rebuild examples/frameworks/npm/angular best with:

    rm -rf node_modules package-lock.json dist
    npm i && npm run build
  4. Rebuild project also best with:

    rm -rf node_modules package-lock.json dist
    npm i && npm run build

Post by NARESH.RAI »

Tried above solution but still getting same errors..

Attaching my app, in which have added library using - {"enableIvy": false}
Please check and update ASAP.

Thanks!

Attachments
testApp.zip
(15.06 MiB) Downloaded 145 times

Post by saki »

"enableIvy":false must be in the npm package sources, not in the application.

The application only needs "skipLibCheck":true.


Post by NARESH.RAI »

Yes, added in same way.
Can u please check attached app for more info.


Post by saki »

Yes, there is still some combination of angular config options that prevents it from building and working correctly.

In this case, the easiest will be to copy files from npm source to your directory. The .ts files of interest are located in examples/frameworks/npm/angular/projects/calendar/src/lib.

The most important is calendar.component.ts which is the calendar wrapper and it also needs bryntum-config.ts.

Copy the needed files to your project, import directly from these files and also adjust package.json and remove import of @bryntum/calendar-angular.


Post Reply