2

问题

我正在尝试将 HTML 的 yfile 集成到使用 Angular CLI 的 Angular 2 应用程序中。我正在使用最新版本的 Angular 2 和 CLI 的最新 BETA 版本。

我已经使用npm install --save @types/yfiles.

我已经在我的项目中放置了所需的 yfiles 文件夹，并更新了 angular-cli.json 以包含所需的样式和脚本：

"styles": [
      "../lib/yfiles.css"
  ],
  "scripts": [
      "../lib/license.js",
      "../lib/yfiles/view-component.js",
      "../lib/yfiles/view-layout-bridge.js",
      "../lib/yfiles/layout-hierarchic.js",
      "../lib/yfiles/layout-tree.js",
      "../lib/yfiles/router-polyline.js",
      "../lib/yfiles/router-other.js"
  ],

我已经确认构建在运行后将这些脚本包含在捆绑的脚本输出中ng build。

当尝试引用 yfiles 时，自动完成在 IDE（最新的 Webstorm）中工作：

graphComponent: yfiles.view.GraphComponent;

constructor(private element: ElementRef,
            injector: Injector,
            resolver: ComponentFactoryResolver) { }

ngAfterViewInit() {
    let containerDiv:HTMLDivElement =     
this.element.nativeElement.getElementsByClassName('graph-control-container')  
[0];
    this.graphComponent = new yfiles.view.GraphComponent(containerDiv);

}

该项目在发出时编译并运行，ng serve但是当我导航到激活尝试使用 yfiles 的组件的路由时，会在控制台中引发错误并报告：

error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in ./BrowseVisualisationsComponent class BrowseVisualisationsComponent - inline template:0:0 caused by: Cannot read property 'GraphComponent' of undefined

我尝试过导入 yfiles 模块 - 例如：

import 'yfile/view-component'

这只是阻止ng serve构建应用程序：

ERROR in ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts
Module not found: Error: Can't resolve 'yfiles/view-component' in '/home/VMdev/Documents/iotahoe_client/src/app/shared/table-relationship-visualisation'
 @ ./src/app/shared/table-relationship-visualisation/table-relationship-visualisation.component.ts 12:0-31
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi main

任何帮助表示赞赏。

4

1 回答 1

1

数组中提供的脚本app.scripts只会被加载，就好像它们会被常规<script>标签引用一样——根本不会发生模块解析。

但是，您在 scripts 数组中提供的 yFiles 模块是“元模块”，它将使用 AMD/CommonJS 样式的 define/require 语句加载实际的实现文件。因此，为了使用 angular-cli 加载 yFiles 功能，您必须直接提供实际的实现文件：

"scripts": [
  "./assets/yfiles/license.js",
  "./assets/yfiles/lib/yfiles/impl/lang.js",
  "./assets/yfiles/lib/yfiles/impl/graph-core.js",
  "./assets/yfiles/lib/yfiles/impl/core-lib.js",
  "./assets/yfiles/lib/yfiles/impl/graph-styles-core.js",
  "./assets/yfiles/lib/yfiles/impl/graph-styles-default.js",
  "./assets/yfiles/lib/yfiles/impl/algorithms.js",
  "./assets/yfiles/lib/yfiles/impl/graph-styles-template.js",
  "./assets/yfiles/lib/yfiles/impl/graph-styles-other.js",
  "./assets/yfiles/lib/yfiles/impl/graph-binding.js",
  "./assets/yfiles/lib/yfiles/impl/layout-core.js",
  "./assets/yfiles/lib/yfiles/impl/graph-layout-bridge.js",
  "./assets/yfiles/lib/yfiles/impl/layout-polyline.js",
  "./assets/yfiles/lib/yfiles/impl/layout-router.js",
  "./assets/yfiles/lib/yfiles/impl/layout-tree.js",
  "./assets/yfiles/lib/yfiles/impl/layout-hierarchic.js"
],

不幸的是，即使 yFiles 模块遵循 UMD 模式，也无法使用这种方法自动解析模块，但我现在没有看到更好的选择来使用 angular-cli。

要以正确的顺序生成 yFiles 实现模块的列表，您可以使用我们的 yeoman 生成器和“script-tags”选项： https ://www.npmjs.com/package/generator-yfiles-app

于 2017-02-15T16:13:29.363 回答