将 Cytoscape JS 与 JHipster 结合使用 Angular

Question

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

遵循的步骤：

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

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

是否所有添加到 vendor.ts 的 javascript 库都得到 executed/linked？

如有任何帮助，我们将不胜感激。

Answer 1

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

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

使用 npm install --save-exact cytoscape
使用 npm install --save-dev --save-exact @types/cytoscape
编辑app/vendor.ts

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

编辑 app/home/home.component.html 为我们的图形添加容器

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

编辑 app/home/home.scss 以至少设置宽度和高度

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

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

结果如下：

将 Cytoscape JS 与 JHipster 结合使用 Angular

Using Cytoscape JS with JHipster Angular

javascript

cytoscape.js

jhipster

webpack

angular