Angular 2 CLI 和 HTML 2.0.0 的 yfiles - 无法读取未定义的属性 'GraphComponent'

Question

问题

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

我已经使用 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

感谢任何帮助。

Answer 1

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

但是，您在脚本数组中提供的 yFiles 模块是 "meta modules"，它将使用 AMD/CommonJS-style 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 实现模块的列表，您可以使用我们的带有 "script-tags" 选项的 yeoman 生成器： https://www.npmjs.com/package/generator-yfiles-app

Angular 2 CLI 和 HTML 2.0.0 的 yfiles - 无法读取未定义的属性 'GraphComponent'

Angular 2 CLI and yfiles for HTML 2.0.0 - Cannot read property 'GraphComponent' of undefined

angularjs

yfiles

问题

Angular 2 CLI 和 HTML 2.0.0 的 yfiles - 无法读取未定义的 属性 'GraphComponent'

Angular 2 CLI and yfiles for HTML 2.0.0 - Cannot read property 'GraphComponent' of undefined

angularjs

yfiles

问题

Angular 2 CLI 和 HTML 2.0.0 的 yfiles - 无法读取未定义的属性 'GraphComponent'