Ionic3项目集成Ionic Cache Service npm时报错求助

这个错误大概率是依赖版本不兼容导致的——你当前使用的Ionic3（搭配Angular5）和安装的ionic-cache版本不匹配，新版本的ionic-cache可能采用了Angular6+才支持的语法（比如RxJS新特性、依赖注入新写法），而你的Angular5环境无法识别这些语法，从而抛出该错误。

下面是具体的排查和修复步骤：

1. 安装兼容Ionic3的ionic-cache版本 #

卸载当前可能安装的高版本ionic-cache，重新安装适配Angular5的旧版本（推荐3.1.0，该版本专门支持Ionic3/Angular5）：

npm uninstall ionic-cache --save
npm install ionic-cache@3.1.0 --save

2. 确认AppModule的配置正确 #

打开src/app/app.module.ts，确保正确导入并初始化CacheModule：

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
// 导入CacheModule
import { CacheModule } from "ionic-cache";

@NgModule({
  declarations: [
    MyApp
    // 你的页面/组件
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    // 初始化CacheModule
    CacheModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
    // 你的页面/组件
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
    // 如果需要配置CacheService全局参数，可在此添加
  ]
})
export class AppModule {}

3. 检查组件中CacheService的注入方式 #

确保在需要使用的组件中正确注入CacheService，不要使用Angular6+的providedIn: 'root'语法（你的Angular5不支持）：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { CacheService } from "ionic-cache";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private cache: CacheService) {
    // 可在此初始化缓存配置，比如设置默认过期时间
    this.cache.setDefaultTTL(60 * 60); // 1小时
  }
}

4. 验证RxJS版本匹配 #

Ionic3对应的RxJS版本应为~5.5.11，你可以检查package.json中的rxjs版本，如果版本过高（比如6.x），也会导致语法不兼容，建议安装适配版本：

npm install rxjs@5.5.11 --save

完成以上步骤后，重新执行ionic serve，应该就能解决这个错误了。

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