Angular 5创建范围滑块：引入组件提示NgModule未知元素求助

这种Angular模块相关的报错真的很让人头疼，不过咱们一步步来排查，肯定能解决：

1. 确认你导入的是正确的模块类 #

很多时候报错是因为导入了组件本身而非对应的模块。你需要确保在AppModule（或使用组件的子模块）中导入的是官方提供的模块：

• 对于ng2-nouislider，要导入NouisliderModule
• 对于ng2-ion-range-slider，要导入IonRangeSliderModule

修正后的AppModule导入部分应该类似这样：

import 'hammerjs';
import { SharedModule } from './core/modules/shared.module';
import { AppComponent } from './app.component';
import { VoifinityMainModule } from './main/main.module';
import { FuseSplashScreenService } from './core/services/splash-screen.service';
// 新增正确的模块导入
import { NouisliderModule } from 'ng2-nouislider';
import { IonRangeSliderModule } from 'ng2-ion-range-slider';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // ... 其他已有的模块
    NouisliderModule,
    IonRangeSliderModule
  ],
  providers: [FuseSplashScreenService],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 检查组件是否在子模块中使用 #

如果你是在VoifinityMainModule这类子模块的组件里使用滑块组件，那仅仅在AppModule导入是不够的——Angular的模块是隔离的，子模块需要自己导入对应的滑块模块。

比如在VoifinityMainModule中也要添加：

import { NouisliderModule } from 'ng2-nouislider';
import { IonRangeSliderModule } from 'ng2-ion-range-slider';

@NgModule({
  imports: [
    // ... 其他子模块依赖
    NouisliderModule,
    IonRangeSliderModule
  ],
  // ... declarations、exports等
})
export class VoifinityMainModule { }

3. 验证组件选择器是否正确使用 #

别小看拼写错误！确认模板里的组件标签和官方文档一致：

• ng2-nouislider的正确选择器是 <nouislider>
• ng2-ion-range-slider的正确选择器是 <ion-range-slider>

比如模板里的代码应该是：

<!-- ng2-nouislider 示例 -->
<nouislider [min]="0" [max]="100" [(ngModel)]="value"></nouislider>

<!-- ng2-ion-range-slider 示例 -->
<ion-range-slider [(value)]="sliderValue"></ion-range-slider>

4. 确认依赖安装完整 #

有时候依赖安装不完整也会导致这类问题，你可以重新安装一遍依赖：

npm uninstall ng2-nouislider ng2-ion-range-slider
npm install ng2-nouislider ng2-ion-range-slider --save

做完这些步骤后，重启你的Angular开发服务器，应该就能解决“未知元素”的报错了。

内容的提问来源于stack exchange，提问作者Ashok