Unable to compile an app referencing @syncfusion/ej2-angular-dropdowns

[Usman]

Hi, I have a basic app which works fine with Angular compiler 8 but today I tried upgrading it to Angular 9 and ran into this during ng build:

Any ideas how to fix this? Btw, the typescript had to be upgraded to latest version due to angular 9 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:189:31 - error NG1010: Value at position 

0 in the NgModule.declarations of DropDownListModule is not a reference: [object Object]

189                 declarations: [

                                  ~

190                     DropDownListComponent

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

191                 ],

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

node_modules/@syncfusion/ej2-angular-dropdowns/@syncfusion/ej2-angular-dropdowns.es5.js:181:5 - error NG6002: Appears in the NgModule.imports of DropDownListAllModule, but could not be resolved to an NgModule class

181 var DropDownListModule = /** @class */ (function () {

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

node_modules/@syncfusion/ej2-angular-dropdowns/@syncfusion/ej2-angular-dropdowns.es5.js:181:5 - error NG6003: Appears in the NgModule.exports of DropDownListAllModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class

181 var DropDownListModule = /** @class */ (function () {

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

node_modules/@syncfusion/ej2-angular-dropdowns/@syncfusion/ej2-angular-dropdowns.es5.js:390:31 - error NG1010: Value at position 

0 in the NgModule.declarations of ComboBoxModule is not a reference: [object Object]

390                 declarations: [

                                  ~

391                     ComboBoxComponent

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

392                 ],

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

node_modules/@syncfusion/ej2-angular-dropdowns/@syncfusion/ej2-angular-dropdowns.es5.js:382:5 - error NG6002: Appears in the NgModule.imports of ComboBoxAllModule, but could not be resolved to an NgModule class

382 var ComboBoxModule = /** @class */ (function () {

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

node_modules/@syncfusion/ej2-angular-dropdowns/@syncfusion/ej2-angular-dropdowns.es5.js:382:5 - error NG6003: Appears in the NgModule.exports of ComboBoxAllModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class

382 var ComboBoxModule = /** @class */ (function () {

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

node_modules/@syncfusion/ej2-angular-dropdowns/@syncfusion/ej2-angular-dropdowns.es5.js:591:31 - error NG1010: Value at position 

0 in the NgModule.declarations of AutoCompleteModule is not a reference: [object Object]

591                 declarations: [

                                  ~

592                     AutoCompleteComponent

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

593                 ],

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

node_modules/@syncfusion/ej2-angular-dropdowns/@syncfusion/ej2-angular-dropdowns.es5.js:583:5 - error NG6002: Appears in the NgModule.imports of AutoCompleteAllModule, but could not be resolved to an NgModule class

583 var AutoCompleteModule = /** @class */ (function () {

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

node_modules/@syncfusion/ej2-angular-dropdowns/@syncfusion/ej2-angular-dropdowns.es5.js:583:5 - error NG6003: Appears in the NgModule.exports of AutoCompleteAllModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class

583 var AutoCompleteModule = /** @class */ (function () {

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

node_modules/@syncfusion/ej2-angular-dropdowns/@syncfusion/ej2-angular-dropdowns.es5.js:799:31 - error NG1010: Value at position 

0 in the NgModule.declarations of MultiSelectModule is not a reference: [object Object]

[Sureshkumar P]

Hi Usman, 

 

Greetings from Syncfusion support. 

 

We have checked your requirement. we cannot able to reproduce the reported issue from our end. We have prepared the angular-9 dropdownlist sample. Please find the sample below link.  

 

Sample link: https://www.syncfusion.com/downloads/support/forum/151329/ze/angular9-dropdownlist-826780308  

 

Please find the ng-build and ng-serve comment output screenshot. 

 

 

 

If still issue persist, please share below details. 

1.     Share your npm, node and typescript versions installed in your local machine. 

2.     share you used Syncfusion components detailed list. 

3.     If, the same issue reproduced in the attached sample, then please revert the sample with detailed issue reproduced replication procedure. 

These details will help us to provide exact solution at earliest. 

 

Regards, 

Sureshkumar P 

[Usman]

Thanks SureshKumar. I was playing with the "Appointments Scheduler" sample by Syncfusion when I ran into this. I was able to fix those build issues by adding couple of things to my tsconfig. This is what I had to add/change to make it work:

But now the sample doesnt render many things. The schedule, patients and settings screens do render at all without reporting any errors/warnings in the browser console. Can you please upgrade that sample and upload for everyone's purpose here? Appreciate your help and time, thanks,

 "angularCompilerOptions": {

    "fullTemplateTypeCheck": true,

    "strictInjectionParameters": true

  }

"module": "esnext",

"target": "es2015",

[Vengatesh Maniraj]

Hi Usman, 

 

Thanks for the update. 

 

We are happy that you have found the solution for your problem. Based on your provided details, we suspect that we have to add the couple of things to tsConfig file in that sample and uploaded for everyone’s purpose. So we have done this and uploaded for everyone’s purpose which could be accessible by below link. 

 

Sample Link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular9-dropdownlist1572387156  

 

If we misunderstood your requirement please share your exact requirement to serve you better. We are waiting to hear from you. 

 

Regards 

Vengatesh 

[Usman]

Hello Vengatesh, thanks for getting back. I am after compiling this sample application from Syncfusion

https://github.com/syncfusion/ej2-showcase-angular-appointment-planner

Can you please compile and make it work for Angular 9? Syncfusion should be updating all angular samples to angular 9 for the benefit of community.

Please let me know if this is do-able for you. Thanks,

[Vengatesh Maniraj]

Hi Usman, 

Thanks for the update. 

Currently we are working to port all our sample browser samples to Angular 9 version, so we will consider our Appointment planner project for porting to Angular 9 also. And this will reflected in our upcoming releases. We will let you know once it is published.  

Please let us know for further assistance. 

Regards, 

Vengatesh