Important: Radzen and Angular 11

[korchev]

Hi fellow Angular developers!

We have a very important announcement to make. As you know Radzen supports Angular applications from its very beginning. There is a catch though - the current version of Radzen targets Angular 7 whereas the latest official Angular version is 11 (was 10 at the time of the original writing)

We were hesitant to upgrade earlier because of various reasons - breaking changes in the Angular API, third party libraries not fully supporting it etc.

However since Google no longer supports Angular 7 we decided it is high time we make the transition.

Installation

I am linking a Beta build of Radzen which targets Angular 11 (Windows, macOS. We ask every Radzen developer who uses Angular to try this version with their apps and report their findings. If this is you please check the following important bits before trying that build:

1. This is a "Beta" product and comes with a beta warning - things are likely to break. Try it with your applications but do not make a production deployment with the Radzen beta.
2. It installs as a separate product and will not replace your existing Radzen installation so you can use it side by side.
3. Once you start the Beta you will see that none of your Radzen applications will be listed - the My Applications screen will be empty.

Using the Radzen Beta

To try the Radzen Beta on an existing application you have to do the following:

1. Copy the directory of your Radzen Angular application to a new location. This is critical! Without making a copy you will upgrade your existing Angular 7 app to Angular 11 which may have side effects when you open the same application with the official Radzen version later.
2. Import the copy of your application in Radzen Beta. Everything is expected to build and run normally unless you use third party dependencies or have added certain files to Radzen's code generation ignore list. In case of the former (third party dependencies) Radzen should ask you to manually run npm install. You may have to update the third party dependencies to a newer version compatible with Angular 11. If case of the latter (ignored files) you may have to remove those files temporarily from the code generation ignore list so Radzen can update them. The files that Radzen will try to update are: app.module-generated.ts and *-generated.component.ts

What changed

Surprisingly not so many things changed in the generated code. Most of the changes we had to make were in the @radzen/angular package and Radzen itself.

1. Components imported from the @radzen/angular package now have a different path:
   Before: import {AutoComplete} from '@radzen/angular/dist/autocomplete';
   Now: import {AutoComplete} from '@radzen/angular/autocomplete';
   This affects the *-generated.component.ts files (Angular components generated for Radzen pages) and app.module-generated.ts.
2. The package.json and angular.json files have been updated to reflect the latest versions of the required dependencies.
3. Radzen applications now use PrimeNG 9.x. This has a few side effects - the PrimeNG DataTable component no longer exists. The themes have been updated to reflect the changes in the PrimeNG rendering. If you have a custom theme some components may look off (e.g. Dialog, Notification, DatePicker etc.) - rolling back to an existing theme should fix that.

Why are we asking you to try the Beta

Once we release Angular 11 support officially all existing Angular 7 applications will be automatically upgraded once you open them with Radzen and press the Run button. We have tested a few dozens of customer applications that we had access to but there are probably issues we haven't discovered. This is why it is very important as many Radzen Angular developers as possible give the beta a try and report any issues with it.

And before you ask - unfortunately we can't support both Angular 7 and Angular 11. Ignoring the fact that Google no longer supports Angular 7 it would be too much of a hassle to support two versions of @radzen/angular and two separate sets of node_modules dependencies. And since Radzen includes the required node_modules maintaining two copies would essentially double Radzen's size.

How do I give feedback

You can either write it here in this very topic or send an email to info@radzen.com with the details.

Thank you for your consideration!

Vladimir & Atanas @ Radzen

[Carlos_Carminati]

Hi guys,

Trying it I found this problem:

Previously I installed:

npm install -g npm@latest
npm install -g typescript
npm install -g @angular/cli@latest

In Radzen beta Output window when try to run:

ng-cli: An unhandled exception occurred: Cannot find module 'typescript'

Something missing?

Thanks!

[mumfie]

Initially tested by creating New Radzen sample app Find a Car with default theme.
Not sure if these issues are related to the new version or if the app needs an update but will post anyway.

[mumfie]

Another strange issue is the Radzen Beta IDE was working but it has now started loading but the new application and import icons are missing and most of the menu items no longer work. E.G. clicking the File Import no longer does anything. Only a single instance of Radzen Beta is running and log.txt does not report any errors. After restarting windows the Radzen Beta is still not working.

FYI:After reinstalling the Radzen beta it is now working again.

[korchev]

Hi @Carlos_Carminati,

There is indeed such a version of the @radzen/angular package. You need to install @radzen/angular@next.

The missing typescript package is an issue that we will fix and update the build.

[korchev]

Hi @mumfie,

It looks as there is a theming issue with the Scheduler. We will investigate.

UPDATE:

Just updated the download links to a newer Beta release - Radzen 2.60.0-beta.1. Fixes include:

• Radzen cannot find the typescript package when building.
• Radzen asks you to install @radzen/angular@3.0.0 which does not exist. Now it should correctly tell what version to install.
• The scheduler button colors are off in some themes.

[mcanavar]

Using Beta-1. Windows

1. issue.
   I have to run the Radzen application as Administrator to compile and run the application : otherwise complains about not being able to create a ".cache " folder onder node_modules.

[korchev]

@mcanavar unfortunately this seems to be an Angular CLI issue that we can't do much about. Does it happen if you run npm install in the client to have a copy of node_modules instead of using the linked one?

[mcanavar]

when using "npm install" the issue with having Radzen run in admin mode resolves, so it seems to be only the issue when the linked npm version is used.

[korchev]

@mcanavar is Radzen installed by this user?

A possible solution is to give write access to C:\Program Files\Radzen to your user. We will investigate if there are other ways to solve this problem.

UPDATE: We seem to have found a way to move the cache directory to the application itself instead of node_modules. Will ship with the next update of the Radzen Beta.

[mumfie]

Does Radzen automaticallay update packages in package.json and if so when? I just imported a project and got lots of errors similar to.

Manually updated package.json with "@radzen/angular": "next", and now works without error although some formatting issues within app so likely need to update some other references.
@korchev
Update:Was using premium dark theme and modals appearing to left and translucent. Changed theme in settings then restored, rerun and now modals appear correctly.

[korchev]

@mumfie yes, Radzen should have updated the version automatically but I think there is a case where it won't. Will handle that. About the theming issue - indeed some PrimeNG components have changed rendering hence we had to update the themes. Mentioned above in the "What changed" section.

[DMKB]

when opening a page as a dialog it is displayed semi-transparent and in the left top corner. No custom code was added to the action - just the logic of the automatically generated CRUD page. Deleting the on-click logic and adding it again did not result in any change. Despite its weird appearance, the opened dialog is still functional - one can press buttons and open dropdown-fields...

Forgot to add - tested in Chrome v 84.0.4147.135 and MS Edge v 84.0.522.63
Theme used is the Default one, with primary color changed manually in \client\src\assets\css

[korchev]

My last response discusses this very issue. You need to reset your custom theme.

[markb]

Just doing some preliminary testing using 2.60.0-beta.1 and noticed an error coming up on a couple of my dialogs when they are opened. They are simple add and edit dialogs with nothing complicated on them but, this error is showing in the console:

Having deleted objects off the page 1 at a time, I've got down to the error coming from a Checkbox component which has it's Value property bound to a boolean page property

[korchev]

Hi @markb,

To my regret this seems buried deep in the Angular code and I can't trace it to Radzen. Can you send us your application to info@radzen.com so we can investigate further? Also specify what page this happens in. Thanks!

[korchev]

Hi,

I have just updated the Radzen Beta and the download links in the first post. There are two things fixed in the new version.

1. The issue reported by @markb - having a CheckBox in a Template form throws a runtime JS error.
2. The user cannot select tables in the data source infer dialog - the tree component does not respond to user action.

[mumfie]

Hi @korchev,
Just tried this new beta version and still unable to uncheck anything (tables,columns, etc) in the Entities fieldset.
If check Generate pages for CRUD operations can amend checkboxes in CRUD Pages fieldset.

[korchev]

Indeed we have uploaded a build which does not include the fix. Will do so next week.