Question

问题

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

我已使用npm install --save @types/yfiles安装了类型。

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

"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模块是＆＃34;元模块＆＃34;这将使用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生成器与＆＃34; script-tags＆＃34;一起使用。选项： https://www.npmjs.com/package/generator-yfiles-app

用于HTML 2.0.0的Angular 2 CLI和yfiles - 无法读取未定义的属性“GraphComponent”

问题

1 个答案: