我一直在尝试将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 serve
或ionic 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"
]
}
}
1条答案
按热度按时间yptwkmov1#
您需要将其导入到AppModule中才能使用:
同时尝试重新安装软件包
npm i swiper
。