将Cytoscape JS与JHipster Angular结合使用

问题描述

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

遵循的步骤：

1. npm安装cytoscape
2. 将cytoscape.js添加到了vendor.ts
3. 在我的组件“ declare const cytoscape：any;”中添加了以下行
4. 测试了代码。
5. “未定义cytoscape”

但是，如果我直接在index.html中添加cytoscape cdn链接，它将起作用。但是我希望jhipster供应商的构建包括cytoscapejs。

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

任何帮助将不胜感激。

解决方法

Cytoscape看起来像是一个不错的工具，我以前从未使用过，所以我从头开始集成它，但是使用其中存在的少数Angular包装器之一可能会更容易。

最后的github repository和下面的详细说明与JHipster生成的项目README.md的Leaflet示例中的内容相似，只是在vendor.ts中导入哪个捆绑包和Cytoscape JS可能是最重要的部分，也可以在Node应用程序中使用（我遵循他们的文档中提到了webpack）

1. 使用npm install --save-exact cytoscape
安装cytoscape
2. 使用npm install --save-dev --save-exact @types/cytoscape
安装cytoscape类型
3. 编辑app/vendor.ts

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

1. 编辑app/home/home.component.html为我们的图表添加一个容器

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

1. 编辑app/home/home.scss以至少以宽度和高度设置容器的样式

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

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

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'
          }
        }]
    });
  }

，结果如下：