0

I'm struggling to develop a card that, when clicked, open any Maps app from the device, mainly using this tutorial: https://www.youtube.com/watch?v=BHBLjRuzb7s

Although I coded the same code it's not working since nothing happens when I click the button.

This is my html file:

<div>
  <ion-card>
    <div>
      <img src="{{UnitLocal}}">
    </div>
    <ion-item>
      <button ion-button block (click)="navToMaps()">Universidade Tiradentes</button>
    </ion-item>
  </ion-card>
</div>

And this is my ts file:

import { Component } from '@angular/core';

import { LaunchNavigator, LaunchNavigatorOptions } from '@ionic-native/launch-navigator/ngx';

@Component({
  selector: 'unitmap',
  templateUrl: 'unitmap.html'
})
export class UnitmapComponent {
  private UnitLocal: string;
  private UnitEndereco: string;

  constructor(private launchNavigator: LaunchNavigator) {
    this.UnitLocal = this.getMap();
    this.UnitEndereco = "Universidade Tiradentes, Aracaju";
  }

  navToMaps() {
    console.log('Navegando para mapas');
    this.launchNavigator.navigate(this.UnitEndereco);
  }
}

When I run the app through the browser I'm able to get the console log, so I'm assuming the button references navToMaps correctly.

Leandro Souza
  • 69
  • 1
  • 11

2 Answers2

1

You have mentioned you are using Ionic 3 and Angular 5( Check your ionic.config.json file Your project type must be ionic-angular ), and you seem to be using the plugin whose @ionic-native/launch-navigator whose version>=5.0.0 which is supported for Ionic 4 and Angular 6 and the project type angular.

You need to use the lower version of the native plugin for the application to work correctly.

Uninstall the plugin first 

npm uninstall @ionic-native/launch-navigator

and install the proper version for your project type.

npm i -s @ionic-native/launch-navigator@4.20.0

And since you are not using Angular 6, you don't need to append ngx and the end of the import.

Like below

import { LaunchNavigator, LaunchNavigatorOptions } from '@ionic-native/launch-navigator';

And also, don't forget to add the plugin to your app module's provider array.

Reference : https://stackoverflow.com/a/54474247/6617276

Rathnakara S
  • 1,446
  • 11
  • 17
  • I made this changes, but still nothing happen when I click the button. This card is a component, should I put the Launch Navigator on components.module.ts provider array? I tried this and nothing happened – Leandro Souza Feb 07 '19 at 01:58
  • And when I run the app through the browser I got this message when I click the button: "Ionic Native: tried calling LaunchNavigator.navigate, but Cordova is not available. Make sure to a) run in a real device or simulator and b) include cordova.js in your index.html" But, again, when I run on a real device nothing happens. – Leandro Souza Feb 07 '19 at 02:02
  • My Android version is 8.1.1. But it shouldn't be a problem, right? – Leandro Souza Feb 07 '19 at 02:16
  • Did you try debugging on the real device? If you don't know how to debug on the real device , Follow this link https://ionic.zone/debug/remote-debug-your-app#android. You will get to know what error you are getting when you click the button. – Rathnakara S Feb 07 '19 at 03:57
  • Thank you. I didn't know about this, I'll try this later when I get home – Leandro Souza Feb 07 '19 at 11:31
  • Thank you for the help! I solved! I changed the @ionic-native/launch-navigator plugin version, but forgot to change the cordova plugin too, so they were incompatible. I installed cordova plugin version 4.2.0 and it finally worked – Leandro Souza Feb 08 '19 at 03:15
0

I have tried with lower version but it is not working due to ionic/angular compatibility. And I have tried with v5.0.0 but the issue is unresolved. Then I have debug with android code and I found some setting in AndroidManifest.xml file as followed,

<permission android:name="android.permission.QUERY_ALL_PACKAGES" />
...
<queries>
    <intent>
        <action android:name="android.intent.action.MAIN" />
    </intent>
</queries>
...

After Android11 query required a special permission, It is throwing NameNotFoundException exception while checking packages applicable to open the map (related applications installed in your mobile device). You can find detail on following link, NameNotFoundException when calling getPackageInfo on Android 11

Thanks.

Arjun Bhatt
  • 41
  • 4