This is a migrated thread and some comments may be shown as answers.

Angular 9 Support with Ivy

12 Answers 1890 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

12 Answers, 1 is accepted

answered on 11 Dec 2019, 08:53 AM

Hi,

We are currently working toward providing support for Ivy, and some of our packages are already compatible, but we will likely abstain from introducing the necessary breaking changes involved until there is no official, finalized and stable Angular version that uses Ivy as its default rendering engine. It currently is still in an experimental stage not recommended for production.

This was expected for Angular 8, but is now postponed for the next major Angular version - 9 that was supposed to be released in November, but was not, and latest news are it will be released next year.

We will do our best to provide full support for Ivy as soon as it is officially released as the default Angular rendering engine or very soon after.

You can track the following thread in our GitHub portal where we will be posting any available updates on our progress:

https://github.com/telerik/kendo-angular/issues/2321

Regards,
Dimiter Topalov
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 21 Feb 2020, 06:31 AM

Hi Jean-Christian,

The latest versions of the Kendo UI for Angular packages support Angular 9. All packages dependencies were updated to require @progress/kendo-angular-common v. 1.2.2 which in turn supports Angular 9.

Please make sure that all latest versions of our packages are installed:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/#toc-updating-to-latest-versions

We also recommend removing the package-lock.json file and the node_modules folder before running a clean npm install to ensure that all latest versions and their correct dependencies are actually installed.

Let us know whether updating all packages resolves the issue.

Regards,
Dimiter Topalov
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 10 Apr 2020, 05:16 AM

Archive.zip

Hello Thibaut,

The Grid and all of its functionalities are compatible and working as expected in Angular 9. There were issues with the early 9.x versions of the Angular framework, but they were also fixed, and we are not aware of any problems, affecting our components since Angular 9.0.4.

I can suggest ensuring that all latest versions of our packages and their correct dependencies are actually installed by removing the node_modules folder and the package-lock.json file and running a clean npm install. Sometimes clearing the NPM cache also proves useful:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/#toc-updating-to-latest-versions

https://docs.npmjs.com/cli-commands/cache.html

I prepared a sample project using Angular 9.1 and Kendo Grid v. 4.7.0 (find attached) that is working as expected.

Please compare it to your implementation and setup, and apply any necessary adjustments. Checking the browser developer tools (F12) console for any JavaScript errors might also indicate what is causing the problem.

If the issue persists, please send us a similar isolated runnable project where it can be observed or modify the attached one to better replicate the specific scenario until the problem is reproducible. This will help us inspect the problem further, determine what is causing it, and try to provide a solution that is best suitable to the specific use case. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 14 Apr 2020, 09:11 AM

telrik-grid.zip

Hello Dimiter,

Thank you for taking the time. Your sample project helped me to figure out what was wrong.

I adapted your sample to reproduce my issue and how to fix it. I think it can be interesting.

In my archive, in the tsconfig.app.json, the "enableIvy" flag is set to false. If you start the app, you can see the grid is displayed correctly. What I mean by correctly is that only two columns are displayed and they each display the 'text' property of the object. Also, in debug mode, the formatColumn method is called.

Now, if you set the "enableIvy" flag to true, the grid is not displayed correctly : All three columns are displayed (while only two are declared in tableInputColumnMetadata and the formatColumn method is NOT called.

Now if you keep the "enableIvy" flag to true and simply replace "<div *ngFor..." by "<ng-container *ngFor..." in app.component.ts, you'll see that the grid is now correctly displayed with 2 columns and formatColumn method called even though Ivy is enabled.

Do you know why the <div *ngFor is not working anymore while Ivy is enabled ?

I'm aware <ng-container should be used when declaring a *ngFor loop but it was hard to debug considering it was working before Ivy.

Regards,

Thibaut

answered on 16 Apr 2020, 07:35 AM

Hi Thibaut,

The difference between Ivy and the previous Angular rendering engine versions is that ContentChildren used to match any nested DOM elements, but now only direct children are matched:

https://angular.io/guide/ivy-compatibility#changes-you-may-see

https://angular.io/guide/ivy-compatibility-examples#content-children-descendants

Thus when the GridColumnComponents are wrapped in an extra DIV element, they are not picked up at all (it is working with ng-container because it does not add an extra DOM element to wrap the content). The Grid thus considers there is no column configuration, and reverts to rendering a column for each data item property:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/auto-generated/#toc-default-configuration

Please note that using an extra container to put the *ngFor directive on is not necessary - it can be placed directly on the kendo-grid-column element:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/auto-generated/#toc-specific-column-generation

If wrapping the kendo-grid-column tag in another element so that a couple of structural directives could be used - for example *ngFor on the wrapper, and *ngIf on the kendo-grid-column element, then use ng-container instead of DIV to avoid adding extra DOM element between the Grid column component and the Grid component.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

answered on 02 Sep 2020, 12:47 PM

ng-serve-output.zip

Hello,

I am getting an error regarding Ivy Support after installing @progress/kendo-angular-menu, if I am already serving the app. To fix it I need to restart the ng serve process.

Steps to reproduce:

1. ng new kma-reproducer --defaults=true

2. cd kma-reproducer

3. ng serve

4. Now run ng add @progress/kendo-angular-menu while the app is being served

I am attaching the whole output of the ng serve command.

I know this isn't something major, just want to document it for posterity.

answered on 04 Sep 2020, 06:57 AM

Hi Kalin,

Thank you for the provided sample project and list of steps.

Indeed, what you describe is expected. Any ng add command should be executed when the Angular application isn't being served. The ng add command installs new packages to the project and in order for the Angular application to be able to use these new packages it should be recompiled. It isn't possible to install new project dependencies at run time and use them without recompiling the application. Indeed, that is related to the functionality of the framework as opposed to being a Kendo UI for Angular related feature or functionality.

Regards,
Svetlin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.