Compatibility with Angular 9

[Stanimir]

Hello,

Is you product compatible with Angular 9, because I have migrated my existing Angular 8.2 project which includes your controls but they are not visualized anymore and no error in the console is shown.

When I run 'npm install' I get a lot of warnings like this:

npm WARN @syncfusion/ej2-angular-base@17.3.17 requires a peer of @angular/common@2.2.1 - 8.2.10 but none is installed. You must install peer dependencies yourself.

Is there a way to work with your controls and Angular 9, because it offers very good and clean way for localisation.

Thanks in advance.

Greetings, 

Stan

[Vairamuthu Ramamoorthi]

Hi Stanimir,  

  

Syncfusion Greetings  

  

We have logged “Update peer dependency in angular” as an issue. We will fix this issue and provide the patch on volume 4, 2019 release which is scheduled to release by mid of December 2019.    

  

Now, you can track the status of your request through below feedback link.    

  

Feedback Link: https://www.syncfusion.com/feedback/10643/update-peer-dependency-in-angular-8   

  

  

Regards,  

Vairamuthu R 

[Vairamuthu Ramamoorthi]

Hi Stanimir, 

  

We are glad to announce that our Essential Studio Volume 4, 2019 release (v17.4.0.39) is rolled out and is available for download under the following link. 

  

https://www.syncfusion.com/forums/150001/essential-studio-2019-volume-4-release-v17-4-0-39-is-available-for-download 

  

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

  

Regards, 

Vairamuthu R 

[Géraud Brugière]

Hi Vairamuthu,

I've just tried the new version, still not working in Angular 9 (not 8!!). I have another warning claiming requirement of v8.2.14. Any hint ?

Thanks for help.

Regards,

Géraud

[Stanimir]

Hello,

I use Angular 9 and do not have any warnings and my projects builds and runs. 

I am stuck with a UI bugs. For example my dialog does not open anymore and my UI is a bit broken since the updates. I am investigating what the issue could be. Probably is by my side. 

My next step would be to translate the controls to my language - Bulgarian. I hope that this will be an easy task. Any examples are welcomed. 

[Géraud Brugière]

Hi Stanimir,

Thank you for reply.

Can't see how you've made it work : peer dependency seems clearly 8.2.14 in syncfusion sources. Have you modified source code ?

I'm curious to see wich versions you use (from package-lock.json ?).

Géraud

[Stanimir]

Hi

Currently I use those versions. I yet experience a problem of not opening a dialog or visualising listview. It is very strange because I do not get any error, but there is NO UI for it. 

Greetings,

Stan

[Géraud Brugière]

Hi Stanimir,

Still don't know how you manage to have no warning with npm install command. I have tried with no success with a fresh install and no modification. Warnings disappear, of course, if I modify the node_modules/@syncfusion/ej2-angular-base/package.json but this is useless because component won't show in browser.

Well, I think this means that we have to wait a little bit for Angular 9 compatibility. Hopefully, we'll have it soon !

Merry Christmas.

Géraud

[Stanimir]

Hi,

Thanks and Marry Christmas to you too.

Actually I also have some warnings here. Probably they will give us more information soon.

Greets,

Stan

[Banupriya Selvaraj]

Hi Stanimir & Géraud Brugière, 

Angular v9.0.0-rc.7 is still in testing mode. Once angular team releases it in live, we will update our peer dependency.  

In angular v9.0.0-rc.7, IVY compilation is enabled by default.  Our control is not compatible with IVY compilation due to below angular issue 

 

 

GitHub link: https://github.com/angular/angular/issues/31495  

 So please use stable angular-cli v8.3.21 and let us know if you need any further assistance. 

 

Regards, 

Banupriya Selvaraj 

[Sanket Thotange]

Team,

Any updates on Angular 9 compatibility?

[Géraud Brugière]

Hi !

Juste a little "trick". We have disabled ivy compilation in our project and manage to reduce drastically the errors. Still, there are some caveats but we are able to go forward and still hope that both Angular 9 & Syncfusion be available before delivery time !

To apply the trick

File : tsconfig.app.json

  "angularCompilerOptions": {

    "enableIvy": false

  },

[Jesus Arockia Sankaran S]

Hi Sanket, 

 

Thanks for contacting Syncfusion support.  

 

We are working on the Angular 9 IVY support and we expect that it will be available in our weekly patch release scheduled on February 18, 2020. We appreciate your patience until then.  

 

Please let us know if you have any concerns.   

 

Regards, 

Jesus Arockia Sankaran S 

[Jesus Arockia Sankaran S]

Hi Géraud, 

 

Thanks for your information.  

 

Please refer our previous update for the revised timeline of Angular IVY support. 

 

Regards, 

Jesus Arockia Sankaran S 

[Samir Modi]

Hi is this released now? To be compatible with Ivy and angular 9? We need to migrate our project to angular 9 

[Banupriya Selvaraj]

Hi All, 

 

Sorry for the inconvenience.  

 

Due to facing complexity while ensuring our EJ2 components with Angular 9, we were unable to complete it as promised. Currently, we are working on this with high priority and we will complete the Angular 9 support for upcoming patch release which is scheduled to be available on or before February 25, 2020.  

 

We appreciate your patience until then.  

 

Regards,  

Banupriya 

[Louis Ormerod]

Hi there,

Any progress with this issue to report?  

Many thanks

Louis

[Banupriya Selvaraj]

Hi All, 

Thanks for your patience. 

We have provided Angular 9 support to all our Syncfusion EJ2 components and it is available in our latest patch release version 17.4.0.51. 

Please let us know if you have any concerns 

Regards, 

Banupriya 

[Jaco Roux]

Upgraded to Angular 9 and 17.4.51.

Multiple issues in the syncfusion dependencies:

ERROR in Failed to compile entry-point @syncfusion/ej2-angular-dropdowns (module as esm5) due to compilation

errors:

node_modules/@syncfusion/ej2-angular-dropdowns/@syncfusion/ej2-angular-dropdowns.es5.js:195:31 - error NG1010: Value at position 0 in the NgModule.declarations of DropDownListModule is not a reference: [object Object]

195                 declarations: [

                                  ~

196                     DropDownListComponent

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

197                 ],

    ~~~~~~~~~~~~~~~~~

Attachment: Capture_d5e74694.7z

[Arash yousefi]

Having problem with angular 9 too...

Error failed to compile entry-point @syncfunction/ej2-angular-richtexteditor.es5.js:235:31

Declarations: [

RichTextEditorComponent

]

[George]

Hello,

There are still warnings for @syncfusion/ej2-angular-base@17.4.51

npm WARN @syncfusion/ej2-angular-base@17.4.51 requires a peer of @angular/common@2.2.1 - 8.2.14 but none is installed. You must install peer dependencies yourself.

npm WARN @syncfusion/ej2-angular-base@17.4.51 requires a peer of @angular/compiler@2.2.1 - 8.2.14 but none is installed. You must install peer dependencies yourself.

npm WARN @syncfusion/ej2-angular-base@17.4.51 requires a peer of @angular/core@2.2.1 - 8.2.14 but none is installed. You must install peer 

dependencies yourself.

npm WARN @syncfusion/ej2-angular-base@17.4.51 requires a peer of @angular/forms@2.2.1 - 8.2.14 but none is installed. You must install peer dependencies yourself.

npm WARN @syncfusion/ej2-angular-base@17.4.51 requires a peer of @angular/platform-browser@2.2.1 - 8.2.14 but none is installed. You must install peer dependencies yourself.

npm WARN @syncfusion/ej2-angular-base@17.4.51 requires a peer of @angular/platform-browser-dynamic@2.2.1 - 8.2.14 but none is installed. You must install peer dependencies yourself.

Regards,

George

[George]

Upgraded to Angular 9 and 17.4.51.

Multiple issues in the syncfusion dependencies:

ERROR in Failed to compile entry-point @syncfusion/ej2-angular-dropdowns (module as esm5) due to compilation

errors:

node_modules/@syncfusion/ej2-angular-dropdowns/@syncfusion/ej2-angular-dropdowns.es5.js:195:31 - error NG1010: Value at position 0 in the NgModule.declarations of DropDownListModule is not a reference: [object Object]

195                 declarations: [

                                  ~

196                     DropDownListComponent

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

197                 ],

    ~~~~~~~~~~~~~~~~~

Attachment: Capture_d5e74694.7z

Hi,

Try "target": "es6".

Regards,

George

[Ólafur Gíslason]

Perfect!

I had issues with the sidebar not hiding but the "target" : "es6" in tsconfig.json  did the trick for me.  Now everything is working with 9.0.3 and the 17.4.51 weekly build.

regards,

Olafur

[Banupriya Selvaraj]

Hi Jaco and Arash, 

We have checked your reported issue and we are unable to reproduce it on our end. We have prepared the dropdownlist and RichtextEditor samples in Angular 9. Please find the samples in the below links.   

Sample link:  

https://www.syncfusion.com/downloads/support/forum/149934/ze/angular-dropdownlist-106162380  

https://www.syncfusion.com/downloads/support/forum/149934/ze/angular-RTE-518781891  

 

Please find the “ng build –prod” and “ng serve” command output screenshot in below. 

For Dropdownlist: 

 

 

For RichTextEditor: 

 

Node and NPM version used: 

Node – v10.16.3 

npm -v6.9.0 

Could you please reinstall npm after cleaning the cache (npm clean cache) and try to run the sample. If still issue persists, please share below details.  

• Please share npm, node and typescript versions installed in your local machine.
• If possible, please reproduce the same issue in the attached sample, then revert us with detailed issue replication procedure.

These details will help us to provide a better solution as soon as possible. 

Regards, 

Banupriya 

[Banupriya Selvaraj]

  

Hi George, 

We have updated peerDependenices versions in our latest ej2-angular-base package version 17.4.52. Please check that now and revert us if you have any concerns. 

Regards, 

Banupriya 

[George]

Hi Banupriya,

Thank you for update.

Now seems to be ok.

Regards,

George

[Rémy C]

Hi !

I'm following the updates about Angular 9 support, but still your components doesn't seem to work, even using the last 17.4.52 version of ej2-angular-base (and 17.4.51 for other components since no 17.4.52 have been published for them).

Before giving you all my versions (npm, Node, typescript), a simple check to do is to use Stackblitz (this way everything project dependent is put apart).
Using a demo of one of your components (available at https://ej2.syncfusion.com/angular/demo), I change the Angular version to 9.0.2, update packages and check what happens after run.

As an example, I've done those steps with the Data Grid Overview Demo. Here is the link : https://stackblitz.com/edit/angular-mxvese?file=package.json

You can see that the component is not rendered as it should plus errors appears in the console.

(it seems that e-column and ng-template tags are not interpreted)

You can change Angular version of this stackblitz back to 8 (search and replace all occurrences of 9.0.2 by 8.0.0) and see that everything work fine again.

Maybe I'm doing this wrong, but locally I cannot manage to make Grid or Tab components work using Angular 9.0.2, typescript 3.7.0 and target es6 in tsconfig.json.

(those two last components are the ones I'm currently working with, I guess it's the same for other components)

Are you able to make this Data Grid Overview Demo work on Stackblitz with Angular 9 ?

Thanks in advance,

Regards,

Rémy

[Bruno]

Hi Banupriya

@syncfusion/ej2-angular-charts v17.4.51 (the latest version I see) gives errors when building for production but works fine in development.

-----------------------------------

ng build --prod 

ERROR in main-es2015.fcb72f137447619dbb02.js from Terser

RangeError: Maximum call stack size exceeded

----------------------------------

Here is my environment.

Angular CLI: 9.0.4
Node: 12.16.0
OS: win32 x64

Angular: 9.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.4
@angular-devkit/build-angular     0.900.4
@angular-devkit/build-optimizer   0.900.4
@angular-devkit/build-webpack     0.900.4
@angular-devkit/core              9.0.4
@angular-devkit/schematics        9.0.4
@ngtools/webpack                  9.0.4
@schematics/angular               9.0.4
@schematics/update                0.900.4
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Hope you can help. 

[Edgar Drozdov]

ERROR in node_modules/@syncfusion/ej2-richtexteditor/src/markdown-parser/base/interface.d.ts:165:18 - error TS2430: Interface 'ITextArea' incorrectly extends interface 'HTMLTextAreaElement'.

      Types of property 'selectionDirection' are incompatible.

        Type 'string' is not assignable to type '"none" | "forward" | "backward"'.

    

    165 export interface ITextArea extends HTMLTextAreaElement {

                         ~~~~~~~~~

    node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/actions/markdown-toolbar-status.d.ts:27:18 - error TS2430: Interface 'ITextAreaElement' incorrectly extends interface 'HTMLTextAreaElement'.

      Types of property 'selectionDirection' are incompatible.

        Type 'string' is not assignable to type '"none" | "forward" | "backward"'.

    

    27 export interface ITextAreaElement extends HTMLTextAreaElement {

[Banupriya Selvaraj]

Hi George, 

You are welcome. 

Regards, 

Banupriya 

[Banupriya Selvaraj]

Hi Edgar, 

We have checked your reported issue, but we are unable to reproduce it on our end. We have prepared the RichtextEditor sample in Angular 9. Please find the samples in the below links.    

Sample link:  https://www.syncfusion.com/downloads/support/forum/149934/ze/angular-RTE-388162952  

Please find the output screenshots of production and Development build, and “ng serve” command in below.  

 

 

Could you please share In which process, you are facing this issue. If possible, please reproduce the same issue in the attached sample, then revert us with detailed issue replication procedure. It will be helpful us to provide a better solution as soon as possible.  

Regards,  

Banupriya 

[Géraud Brugière]

Hi Syncfusion team !

Any news for our problems with Angular 9 ?

[Banupriya Selvaraj]

Hi Géraud, 

Query: I've just tried the new version, still not working in Angular 9 (not 8!!). I have another warning claiming requirement of v8.2.14. Any hint ?  

We have provided Angular 9 support to all our Syncfusion EJ2 components and it is available in our latest patch release version 17.4.0.51. And we have also updated peerDependenices versions in our latest ej2-angular-base package version 17.4.52.  

Please check that now and revert us if you have any concerns.  

Regards,  

Banupriya 

[Bruno]

Hi Banupriya.

I’m still having problems with @syncfusion/ej2-angular-charts 17.4.51. When I register  ChartModule in my application’s AppModule, I can’t do a production build (ng build --prod). I get the following error message from the TerserPlugin: 

ERROR in main-es2015.12dfd31422a1f806c8da.js from Terser

RangeError: Maximum call stack size exceeded

Yet when I do just a regular build (ng build), everything is fine. 

I also discovered something strange. If I also install @syncfusion/ej2-angular-filemanager 17.4.55 and register the FileManagerModule along with ChartModule, I can in fact do a production build. Everything is fine. I can live with this as a workaround but I would prefer not to have to include other modules that I don’t require. 

Here is my environment. 

Angular CLI: 9.0.6

Node: 12.16.1

OS: win32 x64

Angular: 9.0.6

... animations, cli, common, compiler, compiler-cli, core, forms

... language-service, platform-browser, platform-browser-dynamic

... router

Ivy Workspace: Yes

Package                           Version

-----------------------------------------------------------

@angular-devkit/architect         0.900.6

@angular-devkit/build-angular     0.900.6

@angular-devkit/build-optimizer   0.900.6

@angular-devkit/build-webpack     0.900.6

@angular-devkit/core              9.0.6

@angular-devkit/schematics        9.0.6

@ngtools/webpack                  9.0.6

@schematics/angular               9.0.6

@schematics/update                0.900.6

rxjs                              6.5.4

typescript                        3.7.5

webpack                           4.41.2

Here is my AppModule:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { ChartModule } from '@syncfusion/ej2-angular-charts';

@NgModule({

 declarations: [

   AppComponent

 ],

 imports: [

   BrowserModule,

   AppRoutingModule,

   ChartModule,

 ],

 providers: [],

 bootstrap: [AppComponent]

})

export class AppModule { }

[Banupriya Selvaraj]

Hi Bruno, 

We have validated your reported issue and we are able to reproduce it on our end. This issue is occurred due to terser. If terser package exists on your “package.json” file, then downgrade it to version “3.14.1" and if you don't see it in your “package.json” file then it must be present in “package.lock.json” file. Add "terser": "3.14.1" as a devDependencies in your package.json and npm install. Now you can able to make a “ng build  --prod” without any issue. 

 

We have also prepared the sample and attached it in the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/149934/ze/syncfusion-angular-app1984092192  

Also, please refer to the below github issue link for more details. 

GitHub Link: https://github.com/angular/angular-cli/issues/13096  

Please let us know if you need any assistance with this. 

Regards, 

Banupriya 

[Bruno]

Hi Banupriya

Yes, that fixed the problem. Thanks

Just to let you know that I tried terser versions 4.6.0 and 4.6.6 and they work too. The angular 9 client installs version 4.5.1 of terser that has the problem. Version 4.6.0 fixes as issue with "recursive class references" that I believe may be the problem with the ChartModule.

Cheers

Bruno 

[Banupriya Selvaraj]

Hi Bruno, 

Thanks for the update. We are glad to hear that your issue has been resolved. 

Regards, 

Banupriya 

[Kenana Reda]

Hi Guys!

 After updating to Angular 9 I got this issue, I'm facing the same issue of control are no longer appear, it's tab and drop down list,

Actually there is no error while compiling, but when set enableIvy to false, I got the component works fine and when remove it back to disappear

here is my packages

Any suggestion is much appreciated,

Best, 

Kenana

[Jesus Arockia Sankaran S]

Hi Kenana, 

Thank you for contacting Syncfusion support.  

We have checked the reported issue and we are not able to reproduce it in our end. We have prepared a sample in Angular 9 with DropDownList and Tab component and a demo video for your reference.  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular9app-528692453 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ng9-162012416 

We request you to run the above sample in your machine and revert us whether you can reproduce the same issue in it. We also request you to ensure the following things in your machine, 

1. Delete the node_modules folder and package-lock.json file
2. Run “npm cache clean --force” command
3. Then, install the latest Syncfusion NPM packages

Please get back to us if you need any further assistance on this. 

Regards, 

Jesus Arockia Sankaran S