EJ2 build error: Interface 'ITextAreaElement' incorrectly extends interface 'HTMLTextAreaElement'

[Support Arcania]

Hi,

We are encoutering this error when we are building the project. The error is in ej2.d.ts.

We have an ASP.NET MVC 5 application and we've installed Syncfusion.EJ2.MVC5 (17.4.0.50).

Our team is using Visual Studio 2019. It's happening on some machines but not everyone has this issue.

UPDATE

Here's the log:

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Microsoft\VisualStudio\NodeJs\node.exe "C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.8\tsc.js"  --sourcemap --target ES5 --lib dom,es2015 --noEmitOnError --listEmittedFiles --locale en-US "ej2.d.ts"

ej2.d.ts(175778,18): error TS2430: Build:Interface 'ITextArea' incorrectly extends interface 'HTMLTextAreaElement'.

Unknown output:   Types of property 'selectionDirection' are incompatible.

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

ej2.d.ts(176558,18): error TS2430: Build:Interface 'ITextAreaElement' incorrectly extends interface 'HTMLTextAreaElement'.

Unknown output:   Types of property 'selectionDirection' are incompatible.

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

I think it has to do with the Typescript version. It seems to work with 3.3 but not with 3.8.

Can you confirm that? And what can we do to fix this?

Thanks

[Jesus Arockia Sankaran S]

Hi Support Arcania, 

Thanks for contacting Syncfusion support. 

We are sorry for the inconvenience caused. We have checked your reported issue and we are not able to reproduce it in our end. We have checked it first installing the “TypeScript SDK” then “TypeScript.MSBuild” nuget package and both compiling it without any error and Syncfusion.EJ2.MV5 version is “17.4.0.50”. 

TypeScript SDK: 

C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\MSBuild\Microsoft\VisualStudio\NodeJs\node.exe "C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.8\tsc.js"  --sourcemap --target ES5 --lib dom,es2015 --noEmitOnError --listEmittedFiles --locale en-US "C:\Users\J****A******S*******\source\repos\WebApplication3\WebApplication3\Scripts\ej2\ej2.d.ts" 

1>Done executing task "VsTsc". 

1>Done building target "PreComputeCompileTypeScript" in project "WebApplication3.csproj". 

Reference Image: 

 

MSBuild Package: 

C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\MSBuild\Microsoft\VisualStudio\NodeJs\node.exe C:\Users\JesusArockiaSankaran\source\repos\WebApplication3\packages\Microsoft.TypeScript.MSBuild.3.8.3\tools\tsc\tsc.js  --sourcemap --target ES5 --lib dom,es2015 --noEmitOnError --listEmittedFiles --locale en-US "C:\Users\J****A******S*******\source\repos\WebApplication3\WebApplication3\Scripts\ej2\ej2.d.ts" 

1>Done executing task "VsTsc". 

1>Done building target "PreComputeCompileTypeScript" in project "WebApplication3.csproj". 

Reference Image: 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication3-1858093974 

We request you to run the above sample in your end and let us know whether the same issue could be reproduced in this provided sample.  

Please get back to us with requested details and further query if any. 

Regards, 

Jesus Arockia Sankaran S 

[Lex Kruijsse]

Hi,

We are also experiencing the same issue. The issue might be related to Visual Studio, I updated my Visual Studio 2019 to the latest updates recently, and after that, I'm starting to have this issue too, and now I'm unable to build the solution at all. 

Looking at the screenshot, you have v3.7 and 3.8 next to each other in your TypeScript folder, the latest version of Visual Studio 2019 only allows us to install TypeScript 3.8

[Jesus Arockia Sankaran S]

Hi Lex, 

Thanks for contacting Syncfusion support.  

We are sorry for the inconvenience and we are not able to reproduce the reported issue in our end even after updated to latest version of Visual Studio 2019.  

Older Version of 2019	Latest Version of 2019

After updated to the latest version the Typescript version 3.7 folder is automatically removed from the Microsoft Typescript SDK directory.  

 

We have also ensured that no other typescript compiler present in our machine other than Microsoft TypeScript SDKs. 

 

We have created sample for checking this issue in our end with Calendar, TreeView and Grid component that you can download from the below link. Also, we request you to run the below sample in your machine and let us know whether the same issue can be reproduced in it. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApp152775621402933 

We request you to ensure or share the below details which will be useful to understand your problem clearly.  

1. Ensure the TypeScript version of the project (from .csproj file, “<TypeScriptToolsVersion>3.8</TypeScriptToolsVersion>”)
2. Version of Syncfusion package (we checked with version 17.4.0.55 & 18.1.0.44 )
3. Version of Visual Studio 2019
4. Version of .NET Framework
5. Try building your project with “TypeScript.MSBuild” (as last resort)

Please get back to us with requested details and further query if any. 

Regards, 

Jesus Arockia Sankaran S 

[Malcolm van Staden]

Hi,

I'm replying to this thread to assist anyone who is having the same problem.

The issue is with the Syncfusion.EJ2.JavaScript nuget package

On doing a check between the ej2.d.ts file that is supposedly downloaded from nuget.org (the version I was targeting is v17.3.0.14) & the file that is on the sample attached to this forum, it's clear that the following lines have been removed from the sample:

export interface ITextArea extends HTMLTextAreaElement {

    selectionDirection: string;

}

export interface ITextAreaElement extends HTMLTextAreaElement {

    selectionDirection: string;

}

On investigating further, the above lines of code were included in the nuget packages at some stage (this is NO longer the case though - the nuget package no longer contain these). The problem is if you have any cached version of the nuget package. You'll need to remove these first. I had a cached version in %userprofile%\.nuget\packages

Once I deleted the syncfusion.ej2.javascript folder within the aforementioned folder, I was able to download the correct files from nuget.

It's always best to look for a HTTP GET on the package manager console output to see whether it has actually downloaded the package instead of from the cache:

Retrieving package 'Syncfusion.EJ2.JavaScript 17.3.0.14' from 'nuget.org'.

  GET https://api.nuget.org/v3-flatcontainer/syncfusion.ej2.javascript/17.3.0.14/syncfusion.ej2.javascript.17.3.0.14.nupkg

  OK https://api.nuget.org/v3-flatcontainer/syncfusion.ej2.javascript/17.3.0.14/syncfusion.ej2.javascript.17.3.0.14.nupkg 1227ms

Installing Syncfusion.EJ2.JavaScript 17.3.0.14.

For more info regarding nuget cache

Of course another option is to just try a different version altogether as this will also bypass the cache.

I hope this helps

[Jesus Arockia Sankaran S]

Hi Malcolm, 

Thanks for your information.  

Regards, 

Jesus Arockia Sankaran S 

[Rebecchi]

Hi,

I have the same issue on my angular project, here is my package.json file :

"dependencies": {

    "@angular/animations": "^9.1.1",

    "@angular/cdk": "^9.0.7",

    "@angular/common": "^9.1.1",

    "@angular/core": "^9.1.1",

    "@angular/forms": "^9.1.1",

    "@angular/material": "9.0.0",

    "@angular/platform-browser": "^9.1.1",

    "@angular/platform-browser-dynamic": "^9.1.1",

    "@angular/router": "^9.1.1",

    "@syncfusion/ej2-angular-buttons": "^18.1.43",

    "@syncfusion/ej2-angular-calendars": "^18.1.43",

    "@syncfusion/ej2-angular-dropdowns": "^18.1.43",

    "@syncfusion/ej2-angular-grids": "^18.1.43",

    "@syncfusion/ej2-angular-inplace-editor": "^18.1.42",

    "@syncfusion/ej2-angular-inputs": "^18.1.43",

    "@syncfusion/ej2-angular-lists": "^18.1.43",

    "@syncfusion/ej2-angular-navigations": "^18.1.43",

    "@syncfusion/ej2-angular-popups": "^18.1.43",

    "@syncfusion/ej2-angular-richtexteditor": "^18.1.43",

    "@syncfusion/ej2-angular-treegrid": "^18.1.43",

    "rxjs": "^6.5.5",

    "tslib": "^1.10.0",

    "zone.js": "^0.10.3"

  },

TypeScript version : 3.8.3

If I comment these lines in node_modules it build fine :

• @syncfusion/ej2-richtexteditor/src/markdown-parser/base/interface.d.ts :

export interface ITextArea extends HTMLTextAreaElement {

    //selectionDirection: string;

}

• @syncfusion/ej2-richtexteditor/src/rich-text-editor/actions/markdown-toolbar-status.d.ts :
  

export interface ITextAreaElement extends HTMLTextAreaElement {

    //selectionDirection: string;

}

Then it's ok to me.

Is there a way to fix it ? or how can I overload these interfaces....

thanks

[Jesus Arockia Sankaran S]

Hi Rebecchi, 

Thanks for contacting Syncfusion support.  

We have checked the reported issue in our end in Angular platform but we are not able to reproduce it with latest version of Syncfusion EJ2 RichTextboxEditor. We suspect that you project installs or refers the old versions of the Syncfusion package because in latest packages the mentioned interface is not present.  

We request you to clear cache using “npm cache clear --force” and ensure that “package-lock.json” is removed before updating to latest version. Also, ask you to delete the “@syncfusion” folder from “node_modules” directory and install the packages. 

Reference Image: 

 

Please let us know if you need any further assistance on this. 

Regards, 

Jesus Arockia Sankaran S 

[Anh Nguyen Duc]

Hi Rebecchi, 

Thanks for contacting Syncfusion support.  

We have checked the reported issue in our end in Angular platform but we are not able to reproduce it with latest version of Syncfusion EJ2 RichTextboxEditor. We suspect that you project installs or refers the old versions of the Syncfusion package because in latest packages the mentioned interface is not present.  

We request you to clear cache using “npm cache clear --force” and ensure that “package-lock.json” is removed before updating to latest version. Also, ask you to delete the “@syncfusion” folder from “node_modules” directory and install the packages. 

Reference Image: 

 

Please let us know if you need any further assistance on this. 

Regards, 

Jesus Arockia Sankaran S 

Hi, 

I have the same issue on my angular project when i update version of typescript from "2.1.4" to "4.2.3"

And i see your answer, i did but i can't fix this bug.

This is my bug.

Thanks for watching and i look forward to your answer.

[Jesus Arockia Sankaran S]

Hi Anh, 

Sorry for the inconvenience. 

We have checked the reported issue with latest Angular CLI and Syncfusion Angular packages but we are unable to reproduce the reported issue. You can find the sample from the following link for your reference.  

Sample: https://www.syncfusion.com/downloads/support/forum/152775/ze/ej2-angular-2099819231 

System Details: 

 

Packages Version: 

"dependencies": { 

    "@angular/animations": "~11.2.0", 

    "@angular/common": "~11.2.0", 

    "@angular/compiler": "~11.2.0", 

    "@angular/core": "~11.2.0", 

    "@angular/forms": "~11.2.0", 

    "@angular/platform-browser": "~11.2.0", 

    "@angular/platform-browser-dynamic": "~11.2.0", 

    "@angular/router": "~11.2.0", 

    "@syncfusion/ej2-angular-richtexteditor": "^19.1.55", 

    "rxjs": "~6.6.0", 

    "tslib": "^2.0.0", 

    "zone.js": "~0.11.3" 

  }, 

  "devDependencies": { 

    "@angular-devkit/build-angular": "~0.1102.0", 

    "@angular/cli": "~11.2.0", 

    "@angular/compiler-cli": "~11.2.0", 

    "@types/jasmine": "~3.6.0", 

    "@types/node": "^12.11.1", 

    "codelyzer": "^6.0.0", 

    "jasmine-core": "~3.6.0", 

    "jasmine-spec-reporter": "~5.0.0", 

    "karma": "~6.1.0", 

    "karma-chrome-launcher": "~3.1.0", 

    "karma-coverage": "~2.0.3", 

    "karma-jasmine": "~4.0.0", 

    "karma-jasmine-html-reporter": "^1.5.0", 

    "protractor": "~7.0.0", 

    "ts-node": "~8.3.0", 

    "tslint": "~6.1.0", 

    "typescript": "~4.1.2" 

  } 

We request you to share the more details of your scenario such as your angular CLI version, Syncfusion package version, simple application, package.json file for clear understanding in our side in case we misunderstood your point. 

We suppose that the issue is caused by mismatched packages while upgrading your application to latest version and request you to compare the package details of new CLI version projects for upgrading.  

Please get back to us with requested details and further query if any. 

Regards, 

Jesus Arockia Sankaran S