Rahul Pandit.
Published in : 2022-03-05
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" ] }}
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now
Rakshit Date : 2022-03-06
Best answers
34
Best answers
34
Your imports in app.module.ts matter the most.
try re-installing the package
npm i swiper
.Source: thread