cytoscape-html-label.d.ts is not a module after importing it in a component (angular 7)

[Tonixhymshiti]

When importing cytoscape-html-label as a module, so import htmlLabel from cytoscape-html-label, there is an error in the angular saying that cytoscape-html-label.d.ts is not a module

[kykint]

Wrong d.ts file. Please, rebuild and republish. @kaluginserg

[dustinwaguespack]

Any updates on this issue? I would really like to use this extension for an angular project.

[Gianlca]

Hello all
I fixed it exporting the interface CytoscapeNodeHtmlParams in cytoscape-node-html-label.d.ts file.
But I should need a new version that fix this bug in order to use it in my project.

[josejulio]

Hello, I have the permissions to publish new versions, but not much time to do so.
Is the fix already in master? If not, please send a PR I'll try to publish a new version with the fix.

[dustinwaguespack]

Does simply adding the export to the interface fix the problem?

[Gianlca]

Yes that's it but I could be good to have a new use case.

[Gianlca]

Hello all,
What about npm? I can't get the new version from there. Thnaks again

[josejulio]

Released version 1.2.0

[aszorenyi]

I have the same issue with angular 9. Is there any fix available? I want to use this in an angular project.

[josejulio]

Does version 1.2.0 has the same error?

[aszorenyi]

Yes, 1.2.0 and angular 9.

[TakkuzOld]

I confirm: still not working on 1.2.1.
import * as nodeHtmlLabel from 'cytoscape-node-html-label' doesn't work, with the same error: "cytoscape-html-label.d.ts is not a module".

Using import 'cytoscape-node-html-label' with declare var nodeHtmlLabel compiles but it says that nodeHtmlLabel is not defined and even .nodeHtmlLabel as function of cyInstance is not defined.

[TakkuzOld]

I found a way to solve it, this is my "cytoscape-node-html-label.js" from v1.2.1:

declare type IHAlign = "left" | "center" | "right";
declare type IVAlign = "top" | "center" | "bottom";

interface NodeRequireFunction {
  (id: string): any;
}

interface NodeModule {
  exports: any;
  require: NodeRequireFunction;
  id: string;
  filename: string;
  loaded: boolean;
  /** @deprecated since 12.19.0 Please use `require.main` and `module.children` instead. */
  parent: NodeModule | null | undefined;
  children: NodeModule[];
  /**
   * @since 11.14.0
   *
   * The directory name of the module. This is usually the same as the path.dirname() of the module.id.
   */
  path: string;
  paths: string[];
}

declare var module: NodeModule;
declare var define: any;
declare var cytoscape: typeof cytoscape;
interface CytoscapeNodeHtmlParams {
    query?: string;
    halign?: IHAlign;
    valign?: IVAlign;
    halignBox?: IHAlign;
    valignBox?: IVAlign;
    cssClass?: string;
    tpl?: (d: any) => string;
}
interface CytoscapeContainerParams {
    enablePointerEvents?: boolean;
}

declare module 'cytoscape-node-html-label'

I've added interface NodeRequireFunction and interface NodeModule from "global.d.ts" to be able to modify declare var module: any as declare var module: NodeModule.

Then I've added declare module 'cytoscape-node-html-label' and this is the main thing to be recognized as module from Angular.

Then you can import them as usual:

import * as cytoscape from 'cytoscape';
import * as nodeHtmlLabel from 'cytoscape-node-html-label';