Angular项目中ngx-swiper-wrapper元数据版本不匹配问题求助

问题背景 #

你安装swiper模块时一切正常，但重启项目服务时遇到了这个报错：

ERROR in Error: Metadata version mismatch for module E:/xampp/htdocs/havemybooks/node_modules/ngx-swiper-wrapper/dist/ngx-swiper-wrapper.d.ts, found version 4, expected 3，在解析E:/xampp/htdocs/havemybooks/src/app/component/component.module.ts中的ComponentModule符号时失败。

你的环境信息：

ng -v
@angular/cli: 1.4.2
node: 6.10.3
os: win32 x64
@angular/animations: 4.4.5
@angular/common: 4.4.5
@angular/compiler: 4.4.5
@angular/core: 4.4.5
@angular/forms: 4.4.5
@angular/http: 4.4.5
@angular/platform-browser: 4.4.5
@angular/platform-browser-dynamic: 4.4.5
@angular/router: 4.4.5
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.5
@angular/language-service: 4.4.5
typescript: 2.3.4

问题原因 #

这个错误的核心就是版本不兼容：

• Angular 4及以下版本使用的是metadata版本3
• 你默认安装的ngx-swiper-wrapper是为Angular 5+开发的，它的metadata版本是4，Angular 4的编译器识别不了这个版本，自然就抛出了不匹配的错误。

解决方案 #

直接安装适配Angular 4的旧版本ngx-swiper-wrapper就能搞定，步骤如下：

1. 先卸载当前安装的新版本：

npm uninstall ngx-swiper-wrapper --save

2. 安装兼容Angular 4的2.x系列版本（这个系列专门适配Angular 4）：

npm install ngx-swiper-wrapper@2.2.1 --save

注：2.x系列的最新稳定版是2.2.1，你也可以直接用@2来安装该系列的最新版本：npm install ngx-swiper-wrapper@2 --save

3. 同时要确保swiper核心库版本也兼容，安装适配的swiper版本：

npm install swiper@4.5.1 --save

4. 最后重启你的Angular服务：

ng serve

额外检查 #

确认你的component.module.ts中导入和声明是正确的：

import { NgxSwiperModule } from 'ngx-swiper-wrapper';

@NgModule({
  imports: [
    // ...其他模块
    NgxSwiperModule
  ]
})
export class ComponentModule { }

这样就能顺利解决这个metadata版本不匹配的问题啦！

内容的提问来源于stack exchange，提问作者Black Mamba