user image

Rahul Pandit.
Published in : 2022-03-05

Import Swiper into Angular causes error

Angular

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": "https://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"
    ]
  }
}

Comments

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.

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 { HomePage } from './home.page';

import { SwiperModule } from 'swiper/angular';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ...
    
    IonicModule,
    TranslateModule,   

    SwiperModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Source: thread

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Angular - PrimeNG charts adding colors for each legends dynamically
Publish date: 2022-02-27 | Comments: 1

Tag: Angular

Adding country flags is really struggling thing?
Publish date: 2022-02-25 | Comments: 6

Tag: Angular

How to reload Angular component without refreshing page?
Publish date: 2022-03-02 | Comments: 1

Tag: Angular

How to bind Weekends off to my kendo calendar in Angular?
Publish date: 2022-03-11 | Comments: 2

Tag: Angular

Rename key inside Object {}
Publish date: 2022-03-05 | Comments: 2

Tag: Angular

Angular: Change columns to rows, and rows to columns while running a *ngFor loop.
Publish date: 2022-03-06 | Comments: 0

Tag: Angular