Unexpected directive 'Slides' imported by the module 'AppModule'. Please add a @NgModule annotation

Hi! I'm trying to build a very simple app: taking pictures, saving them in an array and then displaying with a slide component. But I'm getting an error as the title. The code:

app.moduel.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { Slides } from 'ionic-angular';
import { Camera } from '@ionic-native/camera';


@NgModule({
  declarations: [
    MyApp,
    HomePage      
    
  ],
  imports: [
    BrowserModule,
    Slides,
    IonicModule.forRoot(MyApp)    
       
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
        
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,  
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  
  public image: string = null;
  public base64Image: string[];
  public extraOptions : {};

  constructor(private camera: Camera) {
    this.base64Image = new Array();
    this.extraOptions = {
      pager: true,
      paginationClickable: true,
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: 2000
      }
  }  

  takePicture() {
    let options: CameraOptions = {
      destinationType: this.camera.DestinationType.DATA_URL,
      targetWidth: 1000,
      targetHeight: 1000,
      quality: 100
    }
    this.camera.getPicture( options )
    .then(imageData => {
      this.image = 'data:image/jpeg;base64,${imageData}';
      this.base64Image.push(imageData);
      let iData = this.base64Image.map(o => o).join(', ');
      console.log("iData is " + iData);
    })
    .catch(error =>{
      console.error( error );
    });
  } 
    
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Manage your photos!
    </ion-title>    
  </ion-navbar>
</ion-header>

<ion-content padding>    
        <button ion-button block (click)="takePicture()">Photo</button>
        <!--<img [src]="image" *ngIf="image" />-->
        <div *ngIf="base64Image.length == 0"> <br/><br/> &nbsp; &nbsp;Click on the camera icon to take pictures!</div>
        <ion-slides pager autoplay="true" pager="true" [options]="extraOptions" *ngIf="base64Image.length > 0">
          <ion-slide *ngFor="let image of base64Image">
            <img [src]="image" />
          </ion-slide>
        </ion-slides>
</ion-content>

Any ideas? Thank you very much!

Get all mentions of Slides out of your app module.

    After including import and @ViewChild statements in home.ts (and deleting import from app.module.ts), I am getting:                  Template parse errors:

Can’t bind to ‘options’ since it isn’t a known property of ‘ion-slides’.

  1. If ‘ion-slides’ is an Angular component and it has ‘options’ input, then verify that it is part of this module.
  2. If ‘ion-slides’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.

Well, I don’t see options listed under input properties in here.

    I see: [options] should be options. It worked

<ion-slides pager autoplay=“true” pager=“true” [ERROR ->][options]=“extraOptions” *ngIf=“base64Image.length > 0”>
<ion-slide *ngFor=“let image of ba”): ng:///AppModule/HomePage.html@12:u55b6:
Thank you very much rapropos.