Injecting 3rd party modules

[iamdevlinph]

This is not an issue but more of a question.

I have installed angular-nvd3 but I have no idea how to inject it properly in AngularJS 1.6. In 1.5 I can just put it in the module file.

I tried doing this in the app.js file:

import angular from 'angular';
import Common from './common/common';
import Components from './components/components';
import AppComponent from './app.component';
import 'nvd3';

angular.module('app', [
    Common,
    Components,
  ])

  .component('app', AppComponent);

But it doesn't seem to work.

[iamdevlinph]

I've tried
app.js

import angular from 'angular';
import Common from './common/common';
import Components from './components/components';
import AppComponent from './app.component';
import nvd3 from 'nvd3';

angular.module('app', [
  Common,
  Components
])
  .component('nvd3', nvd3)
  .component('app', AppComponent);

The controller

class BarGraphController {
  constructor() {
    this.name = 'barGraph';
  }

  $onInit() {
    this.options = {
      chart: {
        type: 'multiBarChart',
        height: 450,
        margin: {
          top: 20,
          right: 20,
          bottom: 45,
          left: 45
        },
        clipEdge: true,
        //staggerLabels: true,
        duration: 500,
        stacked: true,
        xAxis: {
          axisLabel: 'Time (ms)',
          showMaxMin: false,
          tickFormat: function (d) {
            return d3.format(',f')(d);
          }
        },
        yAxis: {
          axisLabel: 'Y Axis',
          axisLabelDistance: -20,
          tickFormat: function (d) {
            return d3.format(',.1f')(d);
          }
        }
      }
    };
    this.data = [
      {
        "key": "Stream0",
        "values": [
          {
            "x": 0,
            "y": 19.34962967910275
          },
          {
            "x": 1,
            "y": 22.90663821412926
          },
          {
            "x": 2,
            "y": 27.146867956150217
          },
          {
            "x": 3,
            "y": 20.2273045862577
          },
          {
            "x": 4,
            "y": 31.24773496499743
          },
          {
            "x": 5,
            "y": 28.4219955981908
          },
          {
            "x": 6,
            "y": 26.404678901383786
          },
          {
            "x": 7,
            "y": 25.288545655200966
          },
          {
            "x": 8,
            "y": 20.345422226505697
          },
          {
            "x": 9,
            "y": 24.23759274592509
          }
        ]
      }
    ];

    console.log(this.data)
  }
}

export default BarGraphController;

The html

<div class="primary callout">
  <p>Bar Graph in here</p>
  <nvd3 options="$ctrl.options"
    data="$ctrl.data"></nvd3>
</div>

Putting <nvd3></nvd3> on any html file does nothing.

[iamdevlinph]

I tried this
app.js

import angular from 'angular';
import Common from './common/common';
import Components from './components/components';
import AppComponent from './app.component';
import nvd3 from 'nvd3';

angular.module('app', [
    Common,
    Components
  ])

  .directive('nvd3', nvd3)
  .component('app', AppComponent);

html

<div class="primary callout">
  <p>Bar Graph in here</p>
  <nvd3 options="$ctrl.options"
    data="$ctrl.data"></nvd3>
</div>

But I get an error [ng:areq] Argument 'fn' is not a function, got Object

[amankmishra]

If you still face this issue, you can try to import module like

import '../../node_modules/angular-nvd3/dist/angular-nvd3'

It should get you getting, until you get a better way to import it.

[thematho]

@iamdevlinph the right way to import third party libraries is the following:

import nvd3 from 'angular-nvd3';
angular.module('myApp', [
 nvd3,
]);

This worked using your code example:

Some libraries doesn't declare the module export name and that might cause issues in those cases you need to import the files from the full path:

import AngularMDDataTable from 'angular-material-data-table';
import 'angular-material-data-table/dist/md-data-table.css';

Or even use the provide plugin in some cases like jQuery:

  plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "window.jquery": "jquery"
    })
]