Angular ngx-swiper-wrapper 给出了错误的 TS2339 属性“x”在类型“y”上不存在

Question

I have a working swiper slider but always got an error TS2339 saying that

Property 'config' does not exist on type 'AppComponent'

Property 'index' does not exist on type 'AppComponent'.

I followed the very simple instruction on https://www.npmjs.com/package/ngx-swiper-wrapper 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?

Here's my code:

app.module.ts

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 { }

app.component.html

<div class="container mb-5">
  <div class="card">
    <div class="card-body shadow">
      <h5 class="card-title">Recommended for you</h5>
      <div  class="swiper-container" [swiper]="config" [(index)]="index">
        <div class="swiper-wrapper">
          <div class="swiper-slide p-4">
            <img src="../../assets/images/Rectangle 72.png">
          </div>
          <div class="swiper-slide p-4">
            <img src="../../assets/images/Rectangle 73.png">
          </div>
          <div class="swiper-slide p-4">
            <img src="../../assets/images/Rectangle 74.png">
          </div>
          <div class="swiper-slide p-4">
            <img src="../../assets/images/Rectangle 75.png">
          </div>
          <div class="swiper-slide p-4">
            <img src="../../assets/images/Rectangle 72.png">
          </div>
          <div class="swiper-slide p-4">
            <img src="../../assets/images/Rectangle 73.png">
          </div>
          <div class="swiper-slide p-4">
            <img src="../../assets/images/Rectangle 74.png">
          </div>
          <div class="swiper-slide p-4">
            <img src="../../assets/images/Rectangle 75.png">
          </div>
        </div>
        <div class="swiper-scrollbar"></div>     
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </div>
</div>
<router-outlet></router-outlet>

Answer 1

After digging on the internet I've found the solution by removing the index class and adding a config code on component.ts

  public config: SwiperConfigInterface = {
    a11y: true,
    direction: 'horizontal',
    slidesPerView: 4,
    keyboard: true,
    mousewheel: true,
    scrollbar: true,
    navigation: true,
    pagination: false
  };