Question

我正在尝试让组合d3，nvd3和ng2-nvd3与angular-cli 1.0.0-beta.15一起处理Angular 2项目。

我已经通过npm安装了包含相应@types的软件包，package.json看起来像这样（省略了无关的软件包）：

  "dependencies": {
    "d3": "3.5.16",
    "ng2-nvd3": "1.1.3",
    "nvd3": "1.8.4",
  },
  "devDependencies": {
    "@types/d3": "0.0.33",
    "@types/nvd3": "1.8.32",
    "angular-cli": "1.0.0-beta.15",
  }

我在d3.js中添加了nv.d3.js和nv.d3.css以及angular-cli.json（正确捆绑了包裹）：

  "styles": [
    "../../../node_modules/nvd3/build/nv.d3.css",
    "styles.scss"
  ],
  "scripts": [
    "../../../node_modules/d3/d3.js",
    "../../../node_modules/nvd3/build/nv.d3.js"
  ],

我创建了一个用于导入common的{{1}}模块（我验证了代码也已捆绑在一起）：

ng2-nvd3

然后，我将import { NgModule } from "@angular/core"; import { nvD3 } from "ng2-nvd3"; @NgModule({ declarations: [nvD3], exports: [nvD3] }) export class MyCommonModule { }模块导入到期望使用它的app模块中（在common中）：

ActivityChartComponent

这里是@NgModule({ imports: [PaginationModule, CommonModule, FormsModule, routing, MyCommonModule], declarations: [ActivityChartComponent], exports: [PlatformComponent] }) export class PlatformModule { }模板（组件代码本身只计算数据，这里不相关）：

ActivityChartComponent

我收到异常（我使用'...'屏蔽了堆栈跟踪中的URL以保护私有数据）：

<h5 class="card-title">{{title}}</h5>
<span *ngIf="description" class="chart-info">{{description}}</span>
<nvd3 [options]="chart" [data]="data"></nvd3>

为了能够对此进行调试，我删除了TypeError: groups.watchTransition is not a function at SVGGElement.<anonymous> (http://localhost:8000/.../nv.d3.js:12243:20) at http://localhost:8000/.../main.bundle.js:50272:16 at d3_selection_each (http://localhost:8000/.../main.bundle.js:50278:30) at Array.d3_selectionPrototype.each (http://localhost:8000/.../main.bundle.js:50271:12) at Array.chart (http://localhost:8000/.../nv.d3.js:11919:19) at Array.d3_selectionPrototype.call (http://localhost:8000/.../main.bundle.js:50285:14) at SVGGElement.<anonymous> (http://localhost:8000/.../nv.d3.js:6540:25) at http://localhost:8000/.../main.bundle.js:50272:16 at d3_selection_each (http://localhost:8000/.../main.bundle.js:50278:30) at Array.d3_selectionPrototype.each (http://localhost:8000/.../main.bundle.js:50271:12)中的d3和nvd3引用，并将其直接导入angular-cli.json。

查看index.html代码，我找不到对d3的任何引用，但watchTransition会在nvd3上添加实施。

来自d3.selection.prototype的

摘录：

nv.d3.js

调试时，我看到原型没有d3.selection.prototype.watchTransition = function(renderWatch){ var args = [this].concat([].slice.call(arguments, 1)); return renderWatch.transition.apply(renderWatch, args); };引用...

非常感谢任何想法，线索或信息。

Answer 1

好的，设法解决了这个问题问题是，当d3和nvd3通过angular-cli.json捆绑在一起时，它们被捆绑到scripts.bundle和main.bundle中的应用程序代码中，这显然导致他们有不同的范围。

我将它们导入公共模块而不是angular-cli配置中，这使得所有内容都捆绑在main.bundle中。

所以，普通模块现在看起来像这样：

import { NgModule } from "@angular/core";
import "d3";
import "nvd3";
import { nvD3 } from "ng2-nvd3";

@NgModule({
    declarations: [nvD3],
    exports: [nvD3]
})
export class MyCommonModule {
}

使用d3＆amp; Angular2最终项目中的nvd3 w / angular-cli beta 15

1 个答案: