在Angular 4中使用Ngu Carousel遇错误，求解决方案

我之前在Angular 4里折腾过这个轮播组件，太懂这种明明按文档操作却一直报错的崩溃感了！给你几个我亲测有效的排查方向，挨个试试：

• 严格匹配组件版本
  Angular 4属于比较早期的版本，ngu-carousel的新版大概率依赖Angular 5+的API，直接装最新版肯定会触发兼容报错。你得安装适配Angular 4的特定版本，比如执行：

  npm install ngu-carousel@1.5.5 --save
  

  这个版本是我当时在Angular 4项目里验证过能正常运行的。

• 检查依赖库是否引入
  ngu-carousel依赖hammerjs来处理触摸滑动逻辑，Angular 4不会自动帮你引入这个库，必须手动操作：

  1. 先安装依赖：npm install hammerjs --save
  2. 在项目根目录的polyfills.ts里添加一行：import 'hammerjs';
     要是漏了这步，控制台大概率会报hammer is not defined之类的错误。

• 确认模块导入的完整性
  如果你是在懒加载模块的组件里使用轮播，只在AppModule里导入NguCarouselModule是不够的，必须在当前组件所属的懒加载模块里也导入一次这个模块。

• 核对模板与组件配置的正确性
  哪怕简化了模板，也要确保结构和配置都符合要求：
  组件类里必须定义轮播配置对象（不能空着），比如：

  import { NguCarouselConfig } from 'ngu-carousel';
  
  export class YourComponent {
    carouselConfig: NguCarouselConfig = {
      grid: { xs: 1, sm: 1, md: 1, lg: 1 },
      slide: 1,
      speed: 500,
      interval: 3000,
      loop: true,
      touch: true
    };
  }
  

  模板结构要对应：

  <ngu-carousel [nguCarousel]="carouselConfig">
    <ngu-carousel-item *ngFor="let item of yourItemList">
      <div class="carousel-item">
        <!-- 你的轮播内容 -->
      </div>
    </ngu-carousel-item>
  </ngu-carousel>
  

  别漏了ngu-carousel-item这个指令，或者绑定配置时写错变量名。

• 导入组件样式
  没导入轮播的默认样式，可能会导致渲染异常甚至间接报错。在全局的styles.css（或styles.scss）里添加：

  @import '~ngu-carousel/lib/ngu-carousel.css';
  

• 清理依赖缓存
  有时候npm的依赖缓存会搞鬼，试试删除node_modules文件夹和package-lock.json文件，然后重新执行npm install，再重启ng serve，说不定就能解决莫名其妙的报错。

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