tb / ng2-nouislider

Angular2 noUiSlider directive
http://tb.github.io/ng2-nouislider/
MIT License
184 stars 114 forks source link

How to use with `ng build --prod` #131

Closed issunboshi closed 6 years ago

issunboshi commented 6 years ago

Hi,

I've been using this on a project for the past few months. We've now started using the Angular CLI (v1.5.0) and have upgraded to Angular 5 as a result.

The only real issue we've come across is building for production using the CLI. The build fails if we declare NouisliderComponent in a module (app or a more specific module). Here is how we are declaring it in a module:

import { NouisliderComponent } from 'ng2-nouislider';

@NgModule({
    declarations: [
        NouisliderComponent,
    ],
    imports: [
    ],
    exports: [
    ],
    providers: []
})

The error message is:

ERROR in Error: Type NouisliderComponent in 
/Users/xxx/x-project/branches/dashboard/angular/node_modules/ng2-nouislider/src/nouislider.d.ts
is part of the declarations of 2 modules:
XModule in /Users/xxx/x-project/branches/dashboard/angular/src/app/pages/dashboard/x/x.module.ts 
and NouisliderModule in /Users/xxx/x-project/branches/dashboard/angular/node_modules/ng2-nouislider/src/nouislider.d.ts!

If we remove the declaration from XModule then the slider won't work as the components don't know how to interpret it.

If we move it to imports we get another error:

ERROR in Error: Unexpected directive 'NouisliderComponent in
/Users/xxx/x-project/branches/dashboard/angular/node_modules/ng2-nouislider/src/nouislider.d.ts'
imported by the module 'XModule in
/Users/xxx/x-project/branches/dashboard/angular/src/app/pages/dashboard/x/x.module.ts'.
Please add a @NgModule annotation.

We are using v1.7.4 of ng2-nouislider.

Any help you can give would be appreciated.

Thanks,

Cliff

kiqq commented 6 years ago

Use NouisliderModule instead of NouisliderComponent

import { NouisliderModule } from 'ng2-nouislider';

@NgModule({
  imports: [
    NouisliderModule]
issunboshi commented 6 years ago

Thanks.

That did the trick.