import JavaScript module in angular nx project

Question

I have an angular project built with nx I want to import standard JavaScript libraries which do not have typescript typings for example I want to install and use cytoscape and cytoscape-context-menus

I get compilation errors such as

error TS7016: Could not find a declaration file for module 'cytoscape-context-menus'. 'C:/dev/armo/armo-ng-app/node_modules/cytoscape-context-menus/cytoscape-context-menus.js' implicitly has an 'any' type. Try npm i --save-dev @types/cytoscape-context-menus if it exists or add a new declaration (.d.ts) file containing declare module 'cytoscape-context-menus';

How can I solve them? I tried to put declaration files but I think my setup doesn't see them.

pauljosephatay · Accepted Answer · 2021-10-16 11:09:56Z

1

since there's no available type definition npm package, you have to write your own. start with the ones you need and continue to build on top of it as needed.

if you like you can share it too as an npm package.

found this article for writing TypeScript type definition files by @dubtypescript: http://blog.wolksoftware.com/contributing-to-definitelytyped

also take a look at how cytoscope is typed from here, borrow their ways: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/cytoscape/index.d.ts

Added a stackblitz to checkout:

https://stackblitz.com/edit/cytoscape-6cyuem?file=src%2Fapp%2Fcytoscape-context-menus.d.ts

edited Oct 16, 2021 at 11:09

answered Oct 15, 2021 at 8:08

pauljosephatay

1314 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

canbax Over a year ago

Thank you but it didn't work. Some don't have typings in "DefinitelyTyped". Also I try addeding .d.ts file but still I get compilation erros

pauljosephatay Over a year ago

@canbax added a stackblitz to check out

canbax Over a year ago

thank you for your efforts but for me the important thing is the tsconfig.json file. Stackblitz doesn't have that file. Also, I can't use @types/cytoscape. It breaks many things in my application because I don't use type definitions for many things

pauljosephatay Over a year ago

should be able to download the stackblitz project and check tsconfigs. although it should still work with standard angular app. you may also manually type cytoscope in similar manner.

canbax Over a year ago

I'm still getting the error. The problem is with architecture of nx project. I don't really understand how can I add the typings.

|

Collectives™ on Stack Overflow

import JavaScript module in angular nx project

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related