Ionic Navigator Launch doesn't work. I click on button and nothing happens

Question

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.

Answer 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/[email protected]

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