离子生成找不到模块错误。如何导入Android插件?

时间:2019-02-14 23:32:04

标签: android angular cordova ionic-framework ionic4

我正在尝试开发一个可在Ionic应用程序中使用的Android插件。

我使用ionic start myApp tabs使用Ionic已提供的入门项目创建了该应用。

我还在另一个文件夹中创建了包含以下文件的插件。

  

plugin.xml

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    id="location-plugin" version="0.0.1">
<name>GSLocationManager</name>
<description>Location Plugin</description>
<license>MIT</license>
<keywords>cordova,device,sensors,location</keywords>

<js-module name="LocationManager" src="www/LocationManager.js">
    <clobbers target="LocationManager" />
</js-module>

<engines>
    <engine name="cordova" version=">=3.6.0"></engine>
</engines>

<platform name="android">
  <preference name="GOOGLE_PLAY_SERVICES_VERSION" default="11+"/>
  <preference name="ANDROID_SUPPORT_LIBRARY_VERSION" default="26+"/>
  <preference name="ICON" default="@mipmap/icon" />
  <preference name="SMALL_ICON" default="@mipmap/icon" />
  <preference name="ACCOUNT_NAME" default="@string/app_name" />
  <preference name="ACCOUNT_LABEL" default="@string/app_name" />
  <preference name="ACCOUNT_TYPE" default="$PACKAGE_NAME.account" />
  <preference name="CONTENT_AUTHORITY" default="$PACKAGE_NAME" />

  <framework src="com.google.android.gms:play-services-location:$GOOGLE_PLAY_SERVICES_VERSION" />
  <framework src="com.android.support:support-v4:$ANDROID_SUPPORT_LIBRARY_VERSION" />
  <framework src="com.android.support:appcompat-v7:$ANDROID_SUPPORT_LIBRARY_VERSION" />
  <!-- <framework src="android/dependencies.gradle" custom="true" type="gradleReference"/> -->

  <source-file src="path/to/locationmanager/GSLocationManager.java"
               target-dir="path/to/locationmanager"></source-file>

  <config-file target="AndroidManifest.xml" parent="/manifest">
     <uses-permission android:name="android.permission.AUTHENTICATE_ACCOUNTS" />
     <uses-permission android:name="android.permission.READ_SYNC_SETTINGS" />
     <uses-permission android:name="android.permission.WRITE_SYNC_SETTINGS" />
     <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
     <uses-permission android:name="com.google.android.gms.permission.ACTIVITY_RECOGNITION" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
     <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.WAKE_LOCK" />
     <uses-permission android:name="android.hardware.location" />
  </config-file>

  <config-file target="res/xml/config.xml" parent="/*">
      <feature name="GSLocationManager">
          <param name="android-package" value="android.package.locationmanager.GSLocationManager" />
      </feature>
  </config-file>
</platform>

  

locationManager.js

var GSLocationManager = {
  getCurrentLocation: function(success, failure) {
    exec(success, failure, 'GSLocationManager', 'getCurrentLocation', []);
  }
}

module.exports = GSLocationManager;
  

GSLocationManager.java

package android.package.locationmanager;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaWebView;
import org.apache.cordova.CordovaPlugin;

import org.json.JSONArray;
import org.json.JSONObject;
import org.json.JSONException;

import android.annotation.SuppressLint;
import android.content.Context;
import android.location.Location;
import android.location.LocationManager;

public class GSLocationManager extends CordovaPlugin {

    private JSONObject data = new JSONObject();

    // at the initialize function, we can configure the tools we want to use later, like the sensors
    @Override
    public void initialize(CordovaInterface cordova, CordovaWebView webView) {
        super.initialize(cordova, webView);

    }

    // safety unregistering from the events if the application stops somehow
    @Override
    public void onDestroy() {

    }

    // this is the main part of the plugin, we have to handle all of the actions sent from the js
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if ("getCurrentLocation".equals(action)) {
            Location location = getCurrentLocation();
            JSONObject json = new JSONObject();
            json.put("latitude", location.getLatitude());
            json.put("longitude", location.getLongitude());
            callbackContext.success(json);
            return true;
        }
        return false;  // Returning false results in a "MethodNotFound" error.
    }

    @SuppressLint("MissingPermission")
    private Location getCurrentLocation() {
        LocationManager locationManager = (LocationManager) cordova.getActivity().getApplicationContext().getSystemService(Context.LOCATION_SERVICE);

        Location lastKnownGPSLocation = locationManager.getLastKnownLocation(LocationManager.GPS_PROVIDER);
        return lastKnownGPSLocation;
    }
}

然后我为插件usign plugman 创建了package.json 然后,通过执行以下操作将我的android插件添加到Ionic项目中 ionic cordova plugin add path/to/my/plugin

但是我似乎无法使用app.module.ts将插件导入import { GSLocationManager } from 'globespinning-location-plugin' 我尝试构建,但CLI提示ERROR in src/app/app.module.ts(12,31): error TS2307: Cannot find module 'globespinning-location-plugin'.

知道错误在哪里吗? 我应该如何导入由我创建并从本地文件夹引用的插件? 我希望能够在离子应用程序内调用GSLocationManager.getCurrentLocation()

4 个答案:

答案 0 :(得分:1)

@Tachyon和@SeunBincom的答案很有帮助,但是问题出在我的plugin.xml文件上。在Android Studio的帮助下,我能够对其进行调试,并最终使其正常工作。

xml最终是这样的:

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
        id="globespinning-location-plugin" version="0.0.1">
    <name>LocationManager</name>
    <description>Globespinning Location Plugin</description>
    <license>MIT</license>
    <keywords>cordova,device,sensors,location</keywords>

    <js-module name="LocationManager" src="www/locationManager.js">
        <clobbers target="LocationManager" />
    </js-module>

    <platform name="android">
      <preference name="GOOGLE_PLAY_SERVICES_VERSION" default="11+"/>
      <preference name="ANDROID_SUPPORT_LIBRARY_VERSION" default="26+"/>
      <preference name="ICON" default="@mipmap/icon" />
      <preference name="SMALL_ICON" default="@mipmap/icon" />
      <preference name="ACCOUNT_NAME" default="@string/app_name" />
      <preference name="ACCOUNT_LABEL" default="@string/app_name" />
      <preference name="ACCOUNT_TYPE" default="$PACKAGE_NAME.account" />
      <preference name="CONTENT_AUTHORITY" default="$PACKAGE_NAME" />

      <framework src="com.google.android.gms:play-services-location:$GOOGLE_PLAY_SERVICES_VERSION" />
      <framework src="com.android.support:support-v4:$ANDROID_SUPPORT_LIBRARY_VERSION" />
      <framework src="com.android.support:appcompat-v7:$ANDROID_SUPPORT_LIBRARY_VERSION" />
      <framework src="src/android/dependencies.gradle" custom="true" type="gradleReference"/>

      <source-file src="src/android/com/globespinning/ionic/locationmanager/GSLocationManager.java"
                   target-dir="src/com/globespinning/ionic/locationmanager"></source-file>

      <config-file target="AndroidManifest.xml" parent="/manifest">
         <uses-permission android:name="android.permission.AUTHENTICATE_ACCOUNTS" />
         <uses-permission android:name="android.permission.READ_SYNC_SETTINGS" />
         <uses-permission android:name="android.permission.WRITE_SYNC_SETTINGS" />
         <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
         <uses-permission android:name="com.google.android.gms.permission.ACTIVITY_RECOGNITION" />
         <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
         <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
         <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
         <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
         <uses-permission android:name="android.permission.INTERNET" />
         <uses-permission android:name="android.permission.WAKE_LOCK" />
         <uses-permission android:name="android.hardware.location" />
      </config-file>

      <config-file target="res/xml/config.xml" parent="/*">
          <feature name="LocationManager">
              <param name="android-package" value="com.globespinning.ionic.locationmanager.GSLocationManager" />
          </feature>
      </config-file>
    </platform>
</plugin>

答案 1 :(得分:0)

您要继续运行ionic cordova plugin add "folder path of your custom plugin",然后在.ts文件中运行它,并声明以下declare var myPlugin: any;

声明了插件后,您可以按以下步骤继续使用它:

myPlugin.myFuntion((data) => {
        console.log(data);
},(err) => {
        console.log(err);
});

因此,在您的情况下,您将使用以下内容:

declare var GSLocationManager: any;

....

GSLocationManager.getCurrentLocation().then((data) => {});

答案 2 :(得分:0)

除了@tachyon答案之外,还有一些注意事项。

  • 您需要先为插件js创建一个声明(.d.ts)文件,然后才能使用import * from * syntax。在这种情况下,不需要这样做。
  • 检查是否已正确定义js方法的名称空间。你的在这里<clobbers target="LocationManager" />

因此,这是在您的情况下实现这种方式的方法;

您要在.TS文件中执行功能

// at the top of the file. after all the import statements
import { Component } from '@angular/core';  // i'm using this as an example.
import { Platform } from '@ionic/angular';  // you need the platform

declare var LocationManager;
...
constructor(
private platform: Platform
){
  this.platform.ready().then(() => {
   // we will make use of the plugin here
   console.log('LocationManager: ', LocationManager); // we can check if it exist by logging it out to the console
   if (LocationManager) {
      LocationManager.GSLocationManager.getCurrentLocation(
         success => {
            console.log('LocationManager: Got Location: ', success);
         }, error => {
            console.log('LocationManager: Err Getting Location: ', error);
         }
      );
    }
  });
}

您可以在此处了解更多信息: How to use a plugin without using ionic-native?https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html

答案 3 :(得分:-1)

如果导入失败,则很可能与您的tsconfig.json或您的angular模块(app.module.ts)有关。检查文件中是否包含文件。

您只发布了Java文件。您确定这可以在浏览器上运行吗?