uncaught TypeError: Cannot read property 'Injectable' of undefined

[tbadlov]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

On page render I am getting the following error:

caught TypeError: Cannot read property 'Injectable' of undefined at :3000/scripts.bundle.js:24 at Object../src/common/tooltip/injection.service.ts (:3000/scripts.bundle.js:24) at e (:3000/scripts.bundle.js:24) at Object../src/common/tooltip/tooltip.service.ts (:3000/scripts.bundle.js:24) at e (:3000/scripts.bundle.js:24) at Object../src/common/tooltip/tooltip.directive.ts (:3000/scripts.bundle.js:24) at e (:3000/scripts.bundle.js:24) at Object../src/common/tooltip/tooltip.module.ts (:3000/scripts.bundle.js:24) at e (:3000/scripts.bundle.js:24) at Object../src/common/tooltip/index.ts (:3000/scripts.bundle.js:24)

That said the page render correctly and ngx-chart is showing properly.

Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior?

error shown in console on render.

Please tell us about your environment:

Angular CLI 1.4.3

ngx-charts version: x.x.x

"@swimlane/ngx-charts": "^6.1.0",

Angular version: 2.x.x

4.4.4

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome 61

Language: [all | TypeScript X.X | ES6/7 | ES5] Typescript

[tbadlov]

More details: Looks like the issue is here:

e = i([Object(r.Injectable)(), a("design:paramtypes", [r.ApplicationRef, r.ComponentFactoryResolver, r.Injector])], e) }()

"./src/common/tooltip/injection.service.ts": function(e, t, n) {
            "use strict";
            n.d(t, "a", function() {
                return o
            });
            var r = n("@angular/core")
              , i = (n.n(r),
            this && this.__decorate || function(e, t, n, r) {
                var i, a = arguments.length, o = a < 3 ? t : null === r ? r = Object.getOwnPropertyDescriptor(t, n) : r;
                if ("object" == typeof Reflect && "function" == typeof Reflect.decorate)
                    o = Reflect.decorate(e, t, n, r);
                else
                    for (var s = e.length - 1; s >= 0; s--)
                        (i = e[s]) && (o = (a < 3 ? i(o) : a > 3 ? i(t, n, o) : i(t, n)) || o);
                return a > 3 && o && Object.defineProperty(t, n, o),
                o
            }
            )
              , a = this && this.__metadata || function(e, t) {
                if ("object" == typeof Reflect && "function" == typeof Reflect.metadata)
                    return Reflect.metadata(e, t)
            }
              , o = function() {
                function e(e, t, n) {
                    this.applicationRef = e,
                    this.componentFactoryResolver = t,
                    this.injector = n
                }
                return e.prototype.getRootViewContainer = function() {
                    var e = this.applicationRef._rootComponents;
                    if (e && e.length)
                        return e[0];
                    if (this._container)
                        return this._container;
                    throw new Error("View Container not found! ngUpgrade needs to manually set this via setRootViewContainer.")
                }
                ,
                e.prototype.setRootViewContainer = function(e) {
                    this._container = e
                }
                ,
                e.prototype.getComponentRootNode = function(e) {
                    return e.hostView ? e.hostView.rootNodes[0] : e.element.nativeElement
                }
                ,
                e.prototype.getRootViewContainerNode = function() {
                    return this.getComponentRootNode(this.getRootViewContainer())
                }
                ,
                e.prototype.projectComponentBindings = function(e, t) {
                    if (t) {
                        if (void 0 !== t.inputs)
                            for (var n = 0, r = Object.getOwnPropertyNames(t.inputs); n < r.length; n++) {
                                var i = r[n];
                                e.instance[i] = t.inputs[i]
                            }
                        if (void 0 !== t.outputs)
                            for (var a = 0, o = Object.getOwnPropertyNames(t.outputs); a < o.length; a++) {
                                var s = o[a];
                                e.instance[s] = t.outputs[s]
                            }
                    }
                    return e
                }
                ,
                e.prototype.appendComponent = function(e, t, n) {
                    void 0 === t && (t = {}),
                    void 0 === n && (n = this.getRootViewContainerNode());
                    var r = this.componentFactoryResolver.resolveComponentFactory(e).create(this.injector)
                      , i = this.applicationRef
                      , a = this.getComponentRootNode(r);
                    return this.projectComponentBindings(r, t),
                    i.attachView(r.hostView),
                    r.onDestroy(function() {
                        i.detachView(r.hostView)
                    }),
                    r.instance.renderer.projectNodes(n, [a]),
                    r
                }
                ,
                e = i([Object(r.Injectable)(), a("design:paramtypes", [r.ApplicationRef, r.ComponentFactoryResolver, r.Injector])], e)
            }()

[marjan-georgiev]

Can you reproduce this in a plunkr or stackblitz please?

[tbadlov]

Unfortunately no. I guess this may not be a bug but how I instantiate the module. I guess What I don't understand is at which point this module needs to be declared?

[marjan-georgiev]

That is used by the tooltips of the chart. Are you by any chance using this in a hybrid angular1/angular4 application?

[tbadlov]

No, this is pure angular 4.

Here is what I have:

dashboard.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { single } from './dashboard.data';

@Component({
  templateUrl: 'dashboard.component.html'
})
export class DashboardComponent implements OnInit {
  single: any[] = single;
  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  constructor() { }

  ngOnInit() {
  }

  onSelect(event) {
    console.log(event);
  }
}

dashboard.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { NgxChartsModule } from '@swimlane/ngx-charts';

@NgModule({
  imports: [
    CommonModule,
    NgxChartsModule
  ],
  declarations: [ DashboardComponent ]
})
export class DashboardModule { }

dashboard.data.ts:

export const single = [{
    'name': 'Test1',
    'value': 22
  },
  {
    'name': 'Test2',
    'value': 137
  },
  {
    'name': 'Test3',
    'value': 213
  },
  {
    'name': 'Test4',
    'value': 112
  },
  {
    'name': 'Test5',
    'value': 112
  },
  {
    'name': 'Test6',
    'value': 173
  },
  {
    'name': 'Test7',
    'value': 23
  },
  {
    'name': 'Test8',
    'value': 7
  }
];

dashboard.component.html:

<div class="card">
  <div class="card-body">
    <div class="chart">
      <ngx-charts-advanced-pie-chart [scheme]="colorScheme" [results]="single" (select)="onSelect($event)">
      </ngx-charts-advanced-pie-chart>
    </div>
  </div>
</div>

[snivels]

I was getting this error when including the @swimlane/ngx-charts/release.index.js file in my angular-cli "scripts" array. Now I'm just importing it into my module:

import { NgxChartsModule } from '@swimlane/ngx-charts';

and stopped getting the "Injectable" error.

Not sure if that's your issue, but webpack loading the dependency is enough.

[tbadlov]

@bradleyhancock - Yes! Same thing here! I wonder why this is happening. @marjan-georgiev, are there any consequences of not using the script in the angluar-cli file?

[marjan-georgiev]

Importing the module is the way to do it.

import { NgxChartsModule } from '@swimlane/ngx-charts';

[tbadlov]

Great. I feel like I have seen somewhere in the documentation that you need to add the JS file to the angular-cli.json file. Anyhow, this issue is resolved for me. Thanks!

[inexuscore]

I'm still having this issue. Using Angular 7 I have installed the library and imported the script file in my angular.json file. I have also imported the module into my main module, yet I'm still getting the error.

[akshaykandari]

I'm still having this issue. Using Angular 7 I have installed the library and imported the script file in my angular.json file. I have also imported the module into my main module, yet I'm still getting the error.

Did you get any where around this error ? I am facing same issue.