Javascript 使用Cytoscape JS和JHipster Angular

我试图在使用jhipster生成的angular应用程序中使用普通javascript库（cytoscapejs）。我使用npm安装了库，并将js文件添加到我的vendor.ts文件中。当我试图在我的组件中使用该库时，它不可用。当我检查时，我在webpack下的源代码中看到了库，但该库未加载。我按照自述文件中的说明进行操作。我是否遗漏了一些额外的步骤

以下步骤：

npm安装cytoscape

将cytoscape.js添加到vendor.ts

在我的组件“declare const cytoscape:any

测试代码

“未定义细胞景观”

但是如果我直接在index.html中添加cytoscape cdn链接，它就可以工作了。但我希望jhipster供应商构建包括cytoscapejs

是否所有添加到vendor.ts的javascript库都已执行/链接

---

任何帮助都将不胜感激。

Cytoscape看起来是一个不错的工具，我以前从未使用过它，所以我从头开始集成它，但是使用为数不多的用于它的角包装之一可能会更容易

下面的最终和详细说明与JHipster生成的项目的

README.md

中的传单示例中的说明类似，但在

vendor.ts

中导入哪个捆绑包方面存在一个区别，它可能是Cytoscape JS中最重要的部分，也可以在节点应用程序中使用（我跟踪了他们提到网页的文档）

使用npm安装来安装cytoscape--保存准确的cytoscape

使用npm安装--save dev--save exact@types/cytoscape安装cytoscape类型

编辑

app/vendor.ts

编辑

app/home/home.component.html

为图形添加容器

编辑app/home/home.component.ts，通过导入cytoscape模块，然后在ngOnInit（）中初始化它来定义我们的图形

结果如下：

---

谢谢Marziou。它很有魅力。但是当我为一个名为cytoscape edgehandles的cytoscape插件尝试相同的解决方案时，它不起作用。插件库没有一个类型定义，使得“从‘cytoscape’导入*作为cytoscape；”不可能。插件库通过全局检查初始化的cytoscape库来工作。您是否也可以提供一些关于非类型javascript库的指导。由于您的详细解决方案解决了我的初始问题，我接受了您的答案。太好了，请打开一个新问题并提供详细信息，因为评论不是最好的地方。另外，我很抱歉不确定是否理解您关于“非类型化javascript库”的观点。

/* ESM version of cytoscape for webpack */
import 'cytoscape/dist/cytoscape.esm.js';

        <!-- cytoscape container -->
        <div id="cy"></div>

#cy {
  width: 400px;
  height: 200px;
}

import * as cytoscape from 'cytoscape';

@Component({
  selector: 'jhi-home',
  templateUrl: './home.component.html',
  styleUrls: ['home.scss'],
})
export class HomeComponent implements OnInit, OnDestroy {
  account: Account | null = null;
  authSubscription?: Subscription;
  cy: any;

  constructor(private accountService: AccountService, private loginModalService: LoginModalService) {}

  ngOnInit(): void {
    this.authSubscription = this.accountService.getAuthenticationState().subscribe(account => (this.account = account));
    this.cy = cytoscape({
      container: document.getElementById('cy'),
      elements: [
        { data: { id: 'a' } },
        { data: { id: 'b' } },
        {
          data: {
            id: 'ab',
            source: 'a',
            target: 'b'
          }
        }]
    });
  }