ng2-slider-component ERROR TypeError: Cannot read property component of undefined

Question

I am trying to use this Angular 2 plugin, because I need an NG2 number slider that I can customize the background bar and knob for: https://github.com/Bogdan1975/ng2-slider-component

I can see an example of it working here: http://bogdan1975.github.io/slider/

But when I try using in my brand new Angular CLI project, I was having issues. I used this as a reference to clear away a few of the issues: https://github.com/Bogdan1975/ng2-slider-component/issues/12

Namely to add these 3 packages to my package.json dependencies:

"ng2-slideable-directive": "^1.0.13",
"ng2-slider-component": "^1.0.9",
"ng2-styled-directive": "^1.0.5"

Then in my app.module, I add them this way:

//...
import { Ng2SliderComponent } from 'ng2-slider-component/ng2-slider.component';
import { SlideAbleDirective } from 'ng2-slideable-directive/slideable.directive';
import { Ng2StyledDirective } from 'ng2-styled-directive/ng2-styled.directive';

//...

@NgModule({
    declarations: [ 
        //...
        SlideAbleDirective,
        Ng2StyledDirective,
        Ng2SliderComponent
    ],
    // ...
    exports: [
        Ng2SliderComponent,
        Ng2StyledDirective
    ],
    //...

I also fixed the module.id bug by appending a + "" to line 401 of ng2-slider.component.js

Having gone through all of that, I am now getting another error and I have been unable to figure it out:

Ng2SliderComponent.ngfactory.js:199 ERROR TypeError: Cannot read property 'component' of undefined at Ng2StyledDirective.ngAfterViewInit (vendor.bundle.js:24206) at callProviderLifecycles (vendor.bundle.js:12979) at callElementProvidersLifecycles (vendor.bundle.js:12954) at callLifecycleHooksChildrenFirst (vendor.bundle.js:12938) at checkAndUpdateView (vendor.bundle.js:14043) at callViewAction (vendor.bundle.js:14400) at execComponentViewsAction (vendor.bundle.js:14332) at checkAndUpdateView (vendor.bundle.js:14041) at callViewAction (vendor.bundle.js:14400) at execComponentViewsAction (vendor.bundle.js:14332)

So, this has now completely blocked me on my task. Can you please help me fix this bug? Or perhaps point to an NG2 slider that lets me customize the background bar and the knob... I would love to use this: https://material.angular.io/components/slider/overview but I don't see a way to customize the way that it looks (I need to be able to change the background image but changing it in MDL doesn't seem to have any effect.) In any case, please help!

Edit:

Looking through the internals of that component, I noticed that it was failing at this line:

var component = (this._view)._element.component;

I am assuming that was an old way to get at the component itself, I found this link which shows some way of getting past this: https://github.com/angular/angular/issues/8277#issuecomment-288285510

What worked for me was doing this in NG 4:

(this._view.injector).view.context

ng2-slider-component ERROR TypeError: Cannot read property component of undefined

0 Answers