Fails to build with NGCC

[Eric Solari]

I'm getting errors at runtime if I ignore ngcc build with the date time picker.

core.js:4197 ERROR TypeError: Cannot call a class as a function

    at _classCallCheck (classCallCheck.js:3)

    at new DateTimePicker (ej2-calendars.es2015.js:11481)

    at DateTimePickerComponent.<anonymous> (createSuper.js:12)

    at new DateTimePickerComponent (datetimepicker.component.ts:34)

    at NodeInjectorFactory.DateTimePickerComponent_Factory [as factory] (datetimepicker.component.ts:79)

    at getNodeInjectable (core.js:4029)

    at instantiateAllDirectives (core.js:7965)

    at createDirectivesInstances (core.js:7330)

    at ɵɵelementStart (core.js:13903)

    at Module.ɵɵelement (core.js:13954)

If I do a postinstall ngcc I get the following errors.

Compiling @syncfusion/ej2-angular-calendars : main as umd

Compiling @syncfusion/ej2-angular-calendars : module as esm5

Error: Failed to compile entry-point @syncfusion/ej2-angular-calendars (main as umd) due to compilation errors:

node_modules/@syncfusion/ej2-angular-calendars/dist/ej2-angular-calendars.umd.js:174:31 - error NG1010: Value at position 0 in the NgModule.declarations of CalendarModule is not a reference

  Value could not be determined statically.

174                 declarations: [

                                  ~

175                     exports.CalendarComponent

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

176                 ],

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

....

...

I've created a simple repro here: https://github.com/sliceofbytes/Syncfusion-Calendar-Error

Just clone and npm install

[Eric Solari]

I got an email saying this was converted to an issue but I'm not seeing the issue on my support account. Please let me know the status of this request.

[Sureshkumar P]

Hi Eric,  

 

Greetings from Syncfusion support.  

 

We have validated your query. We suspect that you have migrated from any of the older angular versions to the latest Angular 10. We suggest you upgrade the angular version to 10 by upgrading the current version to the next major version. Please refer the below blogs for further reference.  

 

- https://update.angular.io/#7.0:10.0    

- https://www.angularjswiki.com/angular/update-angular-cli-version-ng-update-to-latest-6-7-versions/  

    

      

Also we request you to check the configuration files in your angular project as Angular have changed some migrations with respect to compiler options. We also suspect that the issue might occur due to typescript compiler is targeting the es5 or esnext. So as recommended in the Angular 10 update guidance, we suggest you to change the target of the compiler to es2015 or es 2020 to resolve the issue.


  

{  

  "compileOnSave": false,  

  "compilerOptions": {  

    "baseUrl": "./",  

    "outDir": "./dist/out-tsc",  

    "sourceMap": true,  

    "declaration": false,  

    "module": "esnext",  

    "moduleResolution": "node",  

    "emitDecoratorMetadata": true,  

    "experimentalDecorators": true,  

    "target": "es2020",  

    "typeRoots": [  

      "node_modules/@types"  

    ],  

    "lib": [  

      "es2018",  

      "dom"  

    ]  

  }  

}  

   

Please refer the below UG link for further references.

Angular UG: https://angular.io/guide/migration-update-module-and-target-compiler-options#update-module-and-target-compiler-options-migration  

 

Regards,  

Sureshkumar P 

 

[Eric Solari]

Hi Sureshkumar,

The sample I included (https://github.com/sliceofbytes/Syncfusion-Calendar-Error) is created with a `ng new` command and is a completely standard starter Angular 10 project. I updated the tsconfig as suggested but still get the same error. This does not appear to be an upgrade path error.

I've updated the repro with the changes you suggested and same error from ngcc.

```

rror: Failed to compile entry-point @syncfusion/ej2-angular-calendars (main as umd) due to compilation errors:

node_modules/@syncfusion/ej2-angular-calendars/dist/ej2-angular-calendars.umd.js:174:31 - error NG1010: Value at position 0 in the NgModule.declarations of CalendarModule is not a reference

  Value could not be determined statically.

174                 declarations: [

                                  ~

175                     exports.CalendarComponent

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

176                 ],

```

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Eric, 

We thank you for your patience. 

We have further validated the reported issue. The cause for the reported issue is Syncfusion angular library is published in a minified format, which cannot be compiled for Ivy consumption by ngcc (the compatibility compiler) as its contents are not fully statically analyzable. Also Angular still does not support IVY to compile minified file formats .Please refer the below links for further reference.


https://github.com/angular/angular/issues/35255#issuecomment-585922703 

https://github.com/angular/angular/issues/32442#issuecomment-576574775 

Fortunately, we can get rid of this compile time issue. To resolve this issue, we suggest you to configure the postinstall as like below in your package.json file.


 

"scripts": { 

    "ng": "ng", 

    "start": "ng serve", 

    "build": "ng build", 

    "test": "ng test", 

    "lint": "ng lint", 

    "e2e": "ng e2e", 

    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points" 

  }, 

 
Kindly integrate the above changes with your application and get back to us if you are still encountering the reported issue. Also please let us know if you need any further assistance regarding this issue. 

Thanks, 

Jeyanth. 

[Søren Hylle]

Hi there 

I have had a few days with this "Cannot call a class as a function"-error.

I tried everything I could think of, but every time i ran "ng build" and ran the project from the dist folder, I got that  "Cannot call a class as a function"-error in the browser.

Finally I found out that running "ng build --watch" did something different (I don't know what) and I could load the pages with that error.

Maybe this clue can help others in the same predicament. Have a good one.

[Berly Christopher]

Hi Søren, 

  

Thanks for the update. Please get back to us if you need any further assistance on this.  

  

Regards, 

Berly B.C