title: Angular ngx-swiper-wrapper giving an error of TS2339 Property 'x' does not exist on type 'y'
body: <p>I have a working swiper slider but always got an error TS2339 saying that</p>
  <p><code>Property 'config' does not exist on type 'AppComponent' </code></p>
  <p><code>Property 'index' does not exist on type 'AppComponent'.</code></p>
  <p>I followed the very simple instruction on <a href="https://www.npmjs.com/package/ngx-swiper-wrapper" rel="nofollow noreferrer">https://www.npmjs.com/package/ngx-swiper-wrapper</a> it works properly but gives me the TS2339 error. How can I fix it? Is there any way to disable that error since the swiper slider is working properly?</p>
  <p>Here's my code:</p>
  <p>app.module.ts</p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { ProductPageComponent } from './product-page/product-page.component';
  import { LandingPageComponent } from './landing-page/landing-page.component';
  
  import { SwiperModule } from 'ngx-swiper-wrapper';
  import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
  import { SWIPER_CONFIG } from 'ngx-swiper-wrapper';
  
  const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
  
    slidesPerView: 4,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  };
  
  @NgModule({
    declarations: [
      AppComponent,
      ProductPageComponent,
      LandingPageComponent,
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      SwiperModule
    ],
    providers: [
      {
        provide: SWIPER_CONFIG,
        useValue: DEFAULT_SWIPER_CONFIG
      }
    ],
  
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>app.component.html</p>
  <pre><code>&lt;div class=&quot;container mb-5&quot;&gt;
    &lt;div class=&quot;card&quot;&gt;
      &lt;div class=&quot;card-body shadow&quot;&gt;
        &lt;h5 class=&quot;card-title&quot;&gt;Recommended for you&lt;/h5&gt;
        &lt;div  class=&quot;swiper-container&quot; [swiper]=&quot;config&quot; [(index)]=&quot;index&quot;&gt;
          &lt;div class=&quot;swiper-wrapper&quot;&gt;
            &lt;div class=&quot;swiper-slide p-4&quot;&gt;
              &lt;img src=&quot;../../assets/images/Rectangle 72.png&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;swiper-slide p-4&quot;&gt;
              &lt;img src=&quot;../../assets/images/Rectangle 73.png&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;swiper-slide p-4&quot;&gt;
              &lt;img src=&quot;../../assets/images/Rectangle 74.png&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;swiper-slide p-4&quot;&gt;
              &lt;img src=&quot;../../assets/images/Rectangle 75.png&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;swiper-slide p-4&quot;&gt;
              &lt;img src=&quot;../../assets/images/Rectangle 72.png&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;swiper-slide p-4&quot;&gt;
              &lt;img src=&quot;../../assets/images/Rectangle 73.png&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;swiper-slide p-4&quot;&gt;
              &lt;img src=&quot;../../assets/images/Rectangle 74.png&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;swiper-slide p-4&quot;&gt;
              &lt;img src=&quot;../../assets/images/Rectangle 75.png&quot;&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;swiper-scrollbar&quot;&gt;&lt;/div&gt;     
          &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>