NouisliderModule is not an NgModule

[jredd]

NouisliderModule is not an NgModule

[visar1897]

I fixed this by change the import path of the module:
import {NouisliderModule} from 'ng2-nouislider' => import {NouisliderModule} from 'ng2-nouislider/src/nouislider'

[daBishMan]

@karan83 I did the same think you said
"styles": [ "styles.css", "../node_modules/nouislider/distribute/nouislider.min.css" ],
in my angular-cli.json.

I added the following html
<nouislider [connect]="true" [min]="0" [max]="15" [(ngModel)]="someRange"></nouislider>

when I run I get

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:4:50 caused by: noUiSlider (9.2.0): 'start' is required.

error_handler.js:56Error: noUiSlider (9.2.0): 'start' is required.
at http://localhost:4200/vendor.bundle.js:82478:12 [angular]
at Array.forEach (native) [angular]
at testOptions (http://localhost:4200/vendor.bundle.js:82472:22) [angular]
at Object.initialize [as create] (http://localhost:4200/vendor.bundle.js:83751:17) [angular]
at NouisliderComponent.ngOnInit (http://localhost:4200/vendor.bundle.js:81432:34) [angular]
at Wrapper_NouisliderComponent.ngDoCheck (/AppModule/NouisliderComponent/wrapper.ngfactory.js:180:53) [angular]
at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:73:33) [angular]
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:74489:14) [angular]
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:74684:44) [angular]
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:74474:18) [angular]
at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:29:19) [angular]
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:74489:14) [angular]
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:74684:44) [angular]
at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:55251:20) [angular]

[hisham]

Put NouisliderComponent in declarations not imports.

[hemantpiliyagate6]

@visar1897 Thank You :)

[hisham]

I am getting this too. Did you find a solution @jredd?

[hisham]

I was able to resolve this by importing NouisliderComponent and adding that to the app's declarations. Did not do anything with NouisliderModule.

[daBishMan]

`import { AppComponent } from './app.component';
import { NouisliderComponent } from 'ng2-nouislider';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NouisliderComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }`

And I still get ERROR in NouisliderComponent is not an NgModule

am I doing something wrong?

[daBishMan]

@hisham thanks you so much for the quick reply and help, that worked for me.

[daBishMan]

@hisham do you have a basic angular-cli project that I can take a look at to see how you have used this please ?

[hisham]

Not publicly no, but it was pretty east to use and setup.

[daBishMan]

I added @import "../node_modules/nouislider/distribute/nouislider.min.css"; to my css file, and I changed it to component like you suggested, but when I run, this is a new angular-cli (latest on CLI) project with nothing else in it, and I get
zone.js:405Unhandled Promise rejection: Failed to load ../node_modules/nouislider/distribute/nouislider.min.css ; Zone: <root> ; Task: Promise.then ; Value: Failed to load ../node_modules/nouislider/distribute/nouislider.min.css undefined consoleError @ zone.js:405 _loop_1 @ zone.js:434 drainMicroTaskQueue @ zone.js:438 ZoneTask.invoke @ zone.js:349 2017-01-10 13:04:34.585 zone.js:407Error: Uncaught (in promise): Failed to load ../node_modules/nouislider/distribute/nouislider.min.css at resolvePromise (zone.js:486) [<root>] at resolvePromise (zone.js:471) [<root>] at :4200/vendor.bundle.js:88804:17 [<root>] at Zone.runTask (zone.js:151) [<root> => <root>] at drainMicroTaskQueue (zone.js:418) [<root>] at XMLHttpRequest.ZoneTask.invoke (zone.js:349) [<root>]

[hisham]

Looks like a path issue. Try to add that css file under "styles" in your angular-cli.json instead of through @import. This is what I got:

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/nouislider/distribute/nouislider.min.css"]

[daBishMan]

so bootstrap is needed as dependency? I missed that. I will try it. Thanks again for your help

[hisham]

Doesn't look like it. I was just using bootstrap in my project for other things.

[jredd]

I don't think you have too? If you want it styled and all that, I think it's needed, but you could just look at all the classes and create your own... I ended up overriding a decent number of mine anyways. @Hishman sorry for the slow response, I wasn't able to overcome the issue and thanks for sharing your solution. Haven't tried it yet.

[hisham]

Yeah no bootstrap needed. You can see the app i did using nouislider in angular 2 here btw: http://cora-patient.snapdx.co/. Those sliders are nouisliders with our own css styles applied.

We should probably close this ticket as @jredd's question has now been answered.

[jredd]

@hisham agreed on closing!

[daBishMan]

@hisham @jredd

I know you closed this issue, but I am still struggling with getting it to work. I created a repo https://github.com/daBishMan/slider it is public with both of you as contributors.

Can you help?

[hisham]

Sure. What specific issue are you running into now?

[daBishMan]

I can not get the UI to show, and it does not run, there is something wrong in my setup. I am not sure what it is.

[hisham]

Usually in this case there is an error in the browser console you can see.

[karan83]

@daBishMan, I had same issue & i have fixed UI issue by adding css file in angular-cli.json.
"styles": [ "styles.css", "../node_modules/nouislider/distribute/nouislider.min.css" ]
I have cloned your repository and it's working fine by adding css file.

[daBishMan]

@karan83 I made you a contributor on my repo, can you check in what you have working please with sugar on top please.

[jredd]

I was able to finally sit down and do the changes @hisham suggested and it worked just fine for me. @daBishMan I can't look at it right now but if the issue hasn't been resolved this evening I'll try and take a peek at it.

[ryan-morris]

I began having this issue. When I move NouisliderModule to declarations instead of imports I see Unexpected module 'NouisliderModule' declared by the module 'MyModule' but I think this may be an angular-cli issue I'm seeing related to angular/angular-cli#3426

[jovanialferez]

@ryan-morris you no longer have to use NouisliderModule but rather have NouisliderComponent in your declarations.

[hemanrnjn]

@daBishMan Did you resolve the problem? I am also getting the same issue.

[daBishMan]

@hemanrnjn sorry I was not able to to fix it.

[singhpuja11]

Any update on the same. Have imported NouisliderComponent in app.module.ts and in the app.component.ts. Added css file in ,angular-cli.json. Am not getting any error, but slider component is not showing up. Please let me know what am I missing, am using @angular/cli 1.0.0.

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { NouisliderComponent } from 'ng2-nouislider';
@NgModule({
declarations: [
AppComponent,
NouisliderComponent ],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ReactiveFormsModule,

],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts
import { Component, Input, OnInit, AfterViewInit } from '@angular/core';
import { Validators, FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';
import { NouisliderComponent } from 'ng2-nouislider';
@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'app works!';
form1: FormGroup;
form2: FormGroup;
constructor(protected fb: FormBuilder) {
//console.log("QuestionBaseFormComponent Constructor:", this.children);
}

ngOnInit() {
this.form1 = this.fb.group({ 'single': [ 10 ] });
console.log(this.form1);
this.form2 = this.fb.group({ 'range': [ [ 2, 8 ] ] });
}
}
app.component.html
<nouislider [connect]="true" [min]="0" [max]="15" [(ngModel)]="someRange">

.angular-cli.json
"styles": [
"styles.css",
"../node_modules/nouislider/distribute/nouislider.min.css"
],

[singhpuja11]

Got it working, thanks. Stopped the server and restarted. Have another query as how do I shown the slider value as it moves? Thanks.

Declaring the component instead of importing the module seems like a workaround not a fix.

[AbhI9519]

I think this is version issue, this work fine for me please go through once if you still getting the error
npm i --save nouislider [email protected]