Cannot find module "./ng2-slider.component.html"

[kbjerring]

I get the above error when using the ng2-slider on RC5.

the ng2-slider is imported as:
import { Ng2SliderComponent } from "ng2-slider-component/ng2-slider.component";
and included in my component's providers

If I add the component "manually" (with correct path to ng2-slider.component.html) I get
"No provider for ViewContainerRef!"

[mnaei]

The toturial isn't complete, so you have to do the following.

If your using the latest version of angular go to package.json and make sure under dependencies it has:

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

and in your systemjs.config.js :

  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'ng2-slider-component' :      'node_modules/ng2-slider-component',
    'ng2-slideable-directive':    'node_modules/ng2-slideable-directive',
    'ng2-styled-directive':       'node_modules/ng2-styled-directive',
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'ng2-slider-component':       { main: 'ng2-slider.component.system.js', defaultExtension: 'system.js'  },
    'ng2-slideable-directive':    { defaultExtension: 'js'  },
    'ng2-styled-directive':       { defaultExtension: 'js'  },
  };

it should work after that

[kbjerring]

Thanks for the response. I must be doing something wrong though (I'm using webpack). I've made sure all dependencies are included in packages.json, and the import seems to work fine (the module is recognised).

However, I still end up with a "Can't bind to 'normalHandlerStyle' since it isn't a known property of 'ng2-slider'" error. And if I remove binders then a "No provider for ViewContainerRef!" error. So it seems that the component is not being provided.

[bonaparte89]

I'm running into the same issue.... using angular2seed-minko //systemjs

any ideas on this one?

[artdias90]

Having problems loading it with JSPM too (/ng2-slider.component.html 404 (Not Found))

EDIT: Is this lib working with the newest ng2 release?

[happyNariman]

The same problem as in @bonaparte89

[ricardovillar]

@kbjerring

At app.module.ts try:

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'm using systemjs.config.js and that way works for me.

[ricardovillar]

For those who are using systemjs.config.js too:

System.config({
    paths: {
      'ng2-slider-component': 'node_modules/ng2-slider-component/',
      'ng2-slideable-directive': 'node_modules/ng2-slideable-directive/',
      'ng2-styled-directive': 'node_modules/ng2-styled-directive/',
    },
    packages: {
      'ng2-slider-component': {
        main: './ng2-slider.component.system.js',
        defaultExtension: 'system.js'
      },
      'ng2-slideable-directive': {
        main: './slideable.directive.js',
        defaultExtension: 'js'
      },
      'ng2-styled-directive': {
        main: './ng2-styled.directive.js',
        defaultExtension: 'js'
      }
    }
  });

[kbjerring]

Thanks @ricardovillar. But (similar to #18) I now get the following error

moduleId should be a string in "Ng2SliderComponent".

[Luperco]

HI, I have the same problem.

I've created my app with angular-cli (so I believe it is using webpack).

I'm import with:

import { Ng2SliderComponent } from 'ng2-slider-component';
But when I recompile the project I get the error:

Cannot find module 'ng2-slider-component'.

In package.json I have

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

[Hassan0Rehman]

Hi, same issue as above. I see error "Error: moduleId should be a string in "Ng2SliderComponent". See https://goo.gl/wIDDiL for more information." on console. The error message doesn't make any sense to me. Some solution would be help, i am using webpack.

[peboCodemill]

Hi, same as above (Error: moduleId should be a string in "Ng2SliderComponent)
Importing using:
import { Ng2SliderComponent } from "ng2-slider-component/ng2-slider.component";

angular-cli project

[JeroenRombouts]

And same for me too.

"Error: moduleId should be a string in "Ng2SliderComponent". See https://goo.gl/wIDDiL for more information. If you're using Webpack you should inline the template and the styles"

[dfanica]

"Error: moduleId should be a string in "Ng2SliderComponent" - Same as above... angular-cli project

[rach12345]

We can get rid of the error: moduleId should be a string by:

1.Traverse to the node_modules\ng2-slider-component\ng2-slider.component.js
2.In lines (400-405approx),in the prototype of Ng2SliderComponent, we have module.id
3.This should be changed to moduleId: module.id+"",

[nelbe]

I had the same problem, thanks for your help rach12345. Now it works correctly.

[SergeySagan]

With Angular CLI, after doing the above, fixing module.id error, I am now getting:

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)

Ng2SliderComponent.ngfactory.js:199 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 20, nodeDef: Object, elDef: Object, elView: Object}
View_Ng2SliderComponent_0 @ Ng2SliderComponent.ngfactory.js:199
proxyClass @ vendor.bundle.js:51983
DebugContext_.logError @ vendor.bundle.js:15195
ErrorHandler.handleError @ vendor.bundle.js:2884
ApplicationRef_.tick @ vendor.bundle.js:6611
ApplicationRef_._loadComponent @ vendor.bundle.js:6580
ApplicationRef_.bootstrap @ vendor.bundle.js:6568
(anonymous) @ vendor.bundle.js:6344
PlatformRef_._moduleDoBootstrap @ vendor.bundle.js:6344
(anonymous) @ vendor.bundle.js:6306
webpackJsonp.555.ZoneDelegate.invoke @ polyfills.bundle.js:2464
onInvoke @ vendor.bundle.js:5689
webpackJsonp.555.ZoneDelegate.invoke @ polyfills.bundle.js:2463
webpackJsonp.555.Zone.run @ polyfills.bundle.js:2214
(anonymous) @ polyfills.bundle.js:2904
webpackJsonp.555.ZoneDelegate.invokeTask @ polyfills.bundle.js:2497
onInvokeTask @ vendor.bundle.js:5680
webpackJsonp.555.ZoneDelegate.invokeTask @ polyfills.bundle.js:2496
webpackJsonp.555.Zone.runTask @ polyfills.bundle.js:2264
drainMicroTaskQueue @ polyfills.bundle.js:2668

[SergeySagan]

For those also experiencing this in NG4, the problem was in a dependency ng2-styled.directive change how the var component is assigned (line 35ish) to this:

var component = (<any>this._view.injector).view.context;

More info about it here: angular/angular#8277

This does mean that you will need a local copy of both directives and the component copied locally with updated references in each of those as well as in your app.module

[darin-cardin]

I am confused, does this package work? rach12345 advises to actually go in the code and change the moduleID. Even if this does indeed fix the problem, i am concerned that the code may not be 'production ready.' Has anyone got this widget to work?