将 Cytoscape JS 与 JHipster Angular 一起使用

Question

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

后续步骤：

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

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

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

任何帮助将不胜感激。

Answer 1

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';

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

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

5. 编辑app/home/home.scss 为我们的容器设置至少宽度和高度的样式

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

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

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

结果如下：