title: Working with d3 & nvd3 on an Angular2 final project w/angular-cli beta 15
body: <p>I am trying to get the combo <code>d3</code>, <code>nvd3</code> and <code>ng2-nvd3</code> to work on a Angular 2 project with <code>angular-cli 1.0.0-beta.15</code>.</p>
  
  <p>I have installed the packages with the corresponding <code>@types</code> via npm, <code>package.json</code> looks like this (irrelevant packages omitted):</p>
  
  <pre><code>  "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",
    }
  </code></pre>
  
  <p>I included the <code>d3.js</code> and <code>nv.d3.js</code> as well as <code>nv.d3.css</code> in the <code>angular-cli.json</code> (packages are bundled correctly):</p>
  
  <pre><code>  "styles": [
      "../../../node_modules/nvd3/build/nv.d3.css",
      "styles.scss"
    ],
    "scripts": [
      "../../../node_modules/d3/d3.js",
      "../../../node_modules/nvd3/build/nv.d3.js"
    ],
  </code></pre>
  
  <p>I created a <code>common</code> module for importing <code>ng2-nvd3</code> (I verified the code is bundled as well):</p>
  
  <pre><code>import { NgModule } from "@angular/core";
  import { nvD3 } from "ng2-nvd3";
  
  @NgModule({
      declarations: [nvD3],
      exports: [nvD3]
  })
  export class MyCommonModule {
  }
  </code></pre>
  
  <p>Then, I imported the <code>common</code> module into the app module that expects to use it (in the <code>ActivityChartComponent</code>):</p>
  
  <pre><code>@NgModule({
      imports: [PaginationModule, CommonModule, FormsModule, routing, MyCommonModule],
      declarations: [ActivityChartComponent],
      exports: [PlatformComponent]
  })
  export class PlatformModule {
  }
  </code></pre>
  
  <p>and here is the <code>ActivityChartComponent</code> template (the component code itself just calculates the data, it is irrelevant here):</p>
  
  <pre><code>&lt;h5 class="card-title"&gt;{{title}}&lt;/h5&gt;
  &lt;span *ngIf="description" class="chart-info"&gt;{{description}}&lt;/span&gt;
  &lt;nvd3 [options]="chart" [data]="data"&gt;&lt;/nvd3&gt;
  </code></pre>
  
  <p>I am getting an exception ( I masked the URLs in the stack trace with '...' to protect private data):</p>
  
  <pre><code>TypeError: groups.watchTransition is not a function
      at SVGGElement.&lt;anonymous&gt; (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.&lt;anonymous&gt; (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)
  </code></pre>
  
  <p>To be able to debug this - I removed the <code>d3</code> and <code>nvd3</code> references from <code>angular-cli.json</code> and I imported them directly into the <code>index.html</code> instead.</p>
  
  <p>Looking at the <code>d3</code> code, I couldn't find any reference to <code>watchTransition</code>, however <code>nvd3</code> adds the implementation on <code>d3.selection.prototype</code>.</p>
  
  <p>snippet from <code>nv.d3.js</code>:</p>
  
  <pre><code>d3.selection.prototype.watchTransition = function(renderWatch){
      var args = [this].concat([].slice.call(arguments, 1));
      return renderWatch.transition.apply(renderWatch, args);
  };
  </code></pre>
  
  <p>When debugging, I see the prototype does not have the <code>watchTransition</code> reference...</p>
  
  <p>Any ideas, leads or information would be greatly appreciated.</p>