Ionic Cordova插件报错求助：WEBPACK_IMPORTED_MODULE_1_ionic_native_core相关问题

我来帮你解决这个头疼的插件报错问题——这个错误通常是Ionic Native与Cordova插件版本不匹配、Angular模块配置遗漏或者构建缓存干扰导致的，针对你的LaunchNavigator和DocumentViewer插件问题，我整理了几个针对性的解决方案：

1. 检查并修复版本兼容性 #

这个错误最常见的原因是@ionic-native/core和对应插件的版本不匹配。比如Ionic 5+需要使用@ionic-native插件的5.x及以上版本，同时Cordova插件本身也要适配对应的Ionic Native版本。

• 先查看当前已安装的版本：

  npm list @ionic-native/core @ionic-native/launch-navigator @ionic-native/document-viewer
  

• 如果版本不匹配，卸载后重装对应版本（以LaunchNavigator为例，DocumentViewer操作同理）：

  # 卸载现有插件
  npm uninstall @ionic-native/launch-navigator
  ionic cordova plugin remove uk.co.workingedge.phonegap.plugin.launchnavigator
  
  # 安装兼容的最新版本
  ionic cordova plugin add uk.co.workingedge.phonegap.plugin.launchnavigator@latest
  npm install @ionic-native/launch-navigator@latest --save
  

2. 确保Angular模块正确配置插件服务 #

很多时候报错是因为没有在Angular的模块中正确注册插件服务：

• 在app.module.ts中，不仅要导入插件，还要将其添加到providers数组里：

  import { LaunchNavigator } from "@ionic-native/launch-navigator/ngx";
  import { DocumentViewer } from "@ionic-native/document-viewer/ngx";
  
  @NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
    providers: [
      StatusBar,
      SplashScreen,
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
      LaunchNavigator, // 注册LaunchNavigator服务
      DocumentViewer   // 注册DocumentViewer服务
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 在页面组件中，必须通过构造函数注入插件实例，不能手动new实例：

  import { Component } from '@angular/core';
  import { LaunchNavigator } from "@ionic-native/launch-navigator/ngx";
  
  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  export class HomePage {
  
    constructor(private launchnavigator: LaunchNavigator) { }
  
    nav() {
      this.launchnavigator.navigate("<my location>")
        .then(() => console.log('导航启动成功'))
        .catch(err => console.error('导航启动失败:', err));
    }
  }
  

3. 清理构建缓存并重新构建 #

Webpack的缓存或者Ionic的构建残留也可能导致这种奇怪的报错，尝试清理后重新构建：

# 清理Ionic构建缓存
ionic build --clean

# 删除node_modules和锁文件，重新安装依赖
rm -rf node_modules package-lock.json
npm install

# 重新同步Cordova插件
ionic cordova prepare

4. 确认在正确的测试环境运行 #

Cordova插件只能在真实设备或者模拟器中运行，如果你是用ionic serve在浏览器中测试，必然会报错。请使用以下命令在设备或模拟器中测试：

# Android设备/模拟器
ionic cordova run android

# iOS设备/模拟器
ionic cordova run ios

按照以上步骤逐一排查，应该就能解决你遇到的插件报错问题了。

内容的提问来源于stack exchange，提问作者A. Inbar