Ionic 将Swiper导入Angular导致错误- @angular/core/core”'没有导出成员' FactoryDeclaration'

v1l68za4  于 2022-12-09  发布在  Ionic
关注(0)|答案(1)|浏览(220)

我一直在尝试将Swiper(创建旋转木马)添加到Angular中。我只是将它添加到模块中。

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代码没有警告我任何错误。但当我尝试运行(ng serveionic serve)时,它产生了错误。
(The真实的东西太长了,放不进这个帖子。这只是它的一小部分)

[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<SwiperModule, never>;
[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<SwiperModule, [typeof i1.SwiperComponent, typeof i2.SwiperSlideDirective], [typeof i3.CommonModule], [typeof i1.SwiperComponent, typeof i2.SwiperSlideDirective]>;
[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<SwiperModule>;

只要我从模块中删除了import { SwiperModule } from 'swiper/angular';,一切都会立即工作(无论是ng serve还是ionic serve)。
我尝试过一些解决方案,比如删除node_modules,然后删除npm cache clean,然后删除npm install,尝试使用旧版本的Swiper和其他一些东西,但都无济于事。
为了了解更多信息,我在这个项目中使用了Bookspeak模板和Ionic Framework。我的目标是制作在Web和移动的应用上都能工作的旋转木马。(Bookspeak主要关注移动应用,所以它在Web上运行时会产生丑陋的水平滚动条。)
这是包参:

{
  "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"
    ]
  }
}
yptwkmov

yptwkmov1#

您需要将其导入到AppModule中才能使用:

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,
    SwiperModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

同时尝试重新安装软件包npm i swiper

相关问题