Import Swiper into Angular causes error

I've been trying to add Swiper (to create carousels) into Angular. I just added it into the module.

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { FormsModule } from '@angular/forms';import { TranslateModule } from '@ngx-translate/core'; import { IonicModule } from '@ionic/angular';import { HomePageRoutingModule } from './home-routing.module';import { HomePage } from './home.page';import { SwiperModule } from 'swiper/angular';@NgModule({ imports: [ CommonModule, FormsModule, IonicModule, TranslateModule, HomePageRoutingModule ], declarations: [HomePage]})export class HomePageModule {}

Visual Studio Code doesn't warn me of any error. But when I try to run (either ng serve or ionic serve), it results an error.

(The real thing is so long and cannot fit into this post. This is just a small part of it)

[ng] node_modules/swiper/angular/angular/src/swiper.module.d.ts:6:21 - error TS2694: Namespace '"C:/ORIGIN/bookspeak-update/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.[ng][ng] 6 static ɵfac: i0.ɵɵFactoryDeclaration;[ng] ~~~~~~~~~~~~~~~~~~~~[ng] node_modules/swiper/angular/angular/src/swiper.module.d.ts:7:21 - error TS2694: Namespace '"C:/ORIGIN/bookspeak-update/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.[ng][ng] 7 static ɵmod: i0.ɵɵNgModuleDeclaration;[ng] ~~~~~~~~~~~~~~~~~~~~~[ng] node_modules/swiper/angular/angular/src/swiper.module.d.ts:8:21 - error TS2694: Namespace '"C:/ORIGIN/bookspeak-update/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.[ng][ng] 8 static ɵinj: i0.ɵɵInjectorDeclaration;

As soon as I remove import { SwiperModule } from 'swiper/angular'; from the module, everything immediately works (either with ng serve or ionic serve as well).

I've tried some solutions, like removing node_modules then npm cache clean then npm install, trying to use older version of Swiper and several other things, but to no avail.

For more info, I use Bookspeak template and Ionic Framework for this project. My goal here is to make carousels that work on both web and mobile app. (Bookspeak mainly focus on mobile app, so it produces hideous horizontal scrollbars when run on web.)

This is package.json:

{ "name": "Bookspeak", "version": "0.0.1", "author": "Ionic Framework", "homepage": "//ionicframework.com/", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/cli": "^9.1.13", "@angular/common": "~9.1.6", "@angular/core": "~9.1.6", "@angular/forms": "~9.1.6", "@angular/platform-browser": "~9.1.6", "@angular/platform-browser-dynamic": "~9.1.6", "@angular/router": "~9.1.6", "@capacitor/android": "3.4.3", "@capacitor/app": "1.1.1", "@capacitor/core": "3.4.3", "@capacitor/haptics": "1.1.4", "@capacitor/keyboard": "1.2.2", "@capacitor/status-bar": "1.0.8", "@ionic-native/core": "^5.0.7", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic/angular": "^5.0.0", "@ngx-translate/core": "^13.0.0", "@ngx-translate/http-loader": "^6.0.0", "animate.css": "^4.1.0", "cordova-android": "^8.1.0", "rxjs": "~6.5.1", "swiper": "8.0.7", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.5", "@angular/compiler": "~9.1.6", "@angular/compiler-cli": "~9.1.6", "@angular/language-service": "~9.1.6", "@capacitor/cli": "3.4.3", "@ionic/angular-toolkit": "^2.1.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "cordova-plugin-device": "^2.0.2", "cordova-plugin-ionic-keyboard": "^2.2.0", "cordova-plugin-ionic-webview": "^4.2.1", "cordova-plugin-splashscreen": "^5.0.2", "cordova-plugin-statusbar": "^2.4.2", "cordova-plugin-whitelist": "^1.3.3", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~5.0.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~2.1.0", "karma-jasmine": "~3.0.1", "karma-jasmine-html-reporter": "^1.4.2", "protractor": "~5.4.3", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~3.8.3" }, "description": "An Ionic project", "cordova": { "plugins": { "cordova-plugin-whitelist": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-device": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-ionic-webview": { "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+" }, "cordova-plugin-ionic-keyboard": {} }, "platforms": [ "android" ] }}