如何在Ionic v1/AngularJS项目中正确导入ionic-native并集成FirebaseX

我之前在Ionic v1项目里也折腾过类似的插件集成问题，给你梳理几个关键步骤，帮你解决模块找不到的错误并正确集成FirebaseX：

1. 先装对兼容Ionic v1的Ionic Native版本 #

Ionic v1基于AngularJS，只能兼容Ionic Native 4.x版本——新版的Ionic Native只支持Angular 2+，这是很多人踩坑的核心点。先卸载可能装错的高版本，再安装适配的包：

# 卸载现有不兼容版本（如果已经安装）
npm uninstall @ionic-native/core @ionic-native/firebase-x

# 安装4.x兼容版
npm install @ionic-native/core@4 @ionic-native/firebase-x@4 --save

2. 修正index.html里的脚本引入路径 #

你之前引入的ionic-native-plugin.js是错误的，4.x版本的核心脚本是ionic-native.js，还要注意路径是否匹配（假设你的index.html在项目的www文件夹下，node_modules在项目根目录）：

<!-- 必须在cordova.js之后引入，顺序不能乱 -->
<script src="cordova.js"></script>
<script src="../node_modules/@ionic-native/core/dist/ionic-native.js"></script>
<script src="../node_modules/@ionic-native/firebase-x/dist/firebase-x.js"></script>

小提示：可以打开浏览器控制台的Network标签，确认这些脚本是否成功加载，避免路径写错导致的404。

3. 在AngularJS模块中注入ionic.native #

这是你报错的直接原因——你没在App主模块里声明对ionic.native的依赖。打开你的主模块文件（比如app.js），修改模块定义：

// 原来的代码可能只依赖了ionic，现在要加上ionic.native
angular.module('yourAppName', ['ionic', 'ionic.native'])

4. 正确调用FirebaseX插件（务必等设备就绪） #

Cordova插件必须在设备就绪后才能调用，所以要把FirebaseX的操作包裹在$ionicPlatform.ready()里：

angular.module('yourAppName')
.controller('MainController', function($scope, $ionicPlatform, FirebaseX) {
  $ionicPlatform.ready(function() {
    // 这里才能安全调用FirebaseX的方法
    FirebaseX.getToken()
      .then(token => console.log('FCM Token获取成功:', token))
      .catch(err => console.error('FCM Token获取失败:', err));
  });
});

5. 确保cordova-plugin-firebasex正确安装 #

最后检查插件是否正常添加到项目，必要时重新构建平台：

# 安装FirebaseX原生插件（如果还没装）
cordova plugin add cordova-plugin-firebasex

# 重新添加平台避免缓存问题
cordova platform remove android && cordova platform add android
cordova build android

如果还是有问题，可以查看浏览器控制台的具体报错，确认是否有其他依赖冲突，或者脚本加载顺序是否正确。

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