Failed to navigate: No provider for lookup!

Ionic Framework ionic-v3
1

Hi there, im a newbie to Ionic2 and Angular2. Im currently writing a simple app that receive data from a BLE device and use socket.io to push the data to a local server.

When i run the app on my device, this error pop up on my developer tools.

image
image.png1058×95 10.5 KB

i realize its an error from the NavController.
I was able to load the rootpage which is my homepage. However, when i wan to navigate to the devicepage with a click button, this error pop up on my console log and i cannot navigate to the device page on click.

Here is my home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DevicePage } from '../device/device';
import { BLE } from '@ionic-native/ble';

@Component({
	selector: 'page-home',
	templateUrl: 'home.html'
})

export class HomePage {

devices: any[];
isScanning:boolean;

constructor(
public navCtrl: NavController,
public ble: BLE) 
{
	this.devices = [];
	this.isScanning = false;
}

startScanning() {
	console.log('Scanning Started');
	this.devices = [];
	this.isScanning = true;

	this.ble.startScan([]).subscribe(device => {
		console.log("Found device: " + JSON.stringify(device));
		this.devices.push(device);
		},
		err => {
		console.log("Error occurred during BLE scan: " + JSON.stringify(err));
		},
	);
	
	setTimeout(() => {
		this.ble.stopScan().then(() => {
			console.log('Scanning has stopped');
			console.log(JSON.stringify(this.devices));
			this.isScanning = false;
		});
	}, 3000);
}

connectToDevice(device) {
	this.navCtrl.push(DevicePage, {
	device: device
	});
}
}

my device.ts

import { Component, Inject  } from '@angular/core';
import { NavParams } from 'ionic-angular';
import { BLE } from '@ionic-native/ble';
import * as io from 'socket.io-client';


@Component({
    selector: 'page-device',
    templateUrl: 'device.html'
})

export class DevicePage {

connecting:boolean;
device:any;
characteristic:any;
beatsPerMinute:any;
characteristics:any[];
data:any[];
socketHost: string;
	
constructor(
public navParams: NavParams,
public ble: BLE,
@Inject(io)public socket: SocketIOClient.Socket)
{
	
	this.connecting = true;
	this.device = this.navParams.get('device');
	this.characteristic = this.navParams.get('characteristic'); 
	this.beatsPerMinute = this.navParams.get('beatsPerMinute'); 
	this.connect(this.device.id); 
	this.socketHost = "http://localhost:3000";	
}

connect(deviceID) { 
	this.characteristics = [];
	
	this.ble.connect(deviceID).subscribe(peripheralData => {
		
		this.characteristics = peripheralData.characteristics;
		console.log('Connected' + JSON.stringify(this.characteristics));
		this.connecting = false;
		
		this.ble.startNotification(deviceID, "180D", "2A37").subscribe(buffer => {
			
			var data = new Uint8Array(buffer);
			console.log(JSON.stringify(data));
			this.beatsPerMinute.innerHTML = data[1];
			
			this.socket = io(this.socketHost);
			this.socket.on('connect', () => {
			console.log('socket ok');
			this.socket.emit("BLE", this.beatsPerMinute);
			});
		});
	},
	err => {
	console.log("Error occurred during BLE connect: " + JSON.stringify(err));
	});
}

diconnect(deviceID){
	this.ble.disconnect(deviceID).then(() => {
		console.log('Disconnected' + JSON.stringify(deviceID));
	},
	err => {
		console.log("Error occurred during BLE scan: " + JSON.stringify(err));
	});
}
}

Been struggle this error…hope anyone can help to solve this issue…:sweat::sweat::sweat:

2

Please post the providers stanza of your app module.

3

Hi there, thank for giving feedback
my app.modulle.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';
import { DevicePage } from '../pages/device/device';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { BLE } from '@ionic-native/ble';
/// <reference path="../../node_modules/typings/globals/socket.io-client/index.d.ts" />

@NgModule({

  declarations: [
MyApp,
HomePage,
DevicePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
DevicePage
],
providers: [
StatusBar,
SplashScreen,
BLE,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

my app.component.ts

/// <reference path="../../node_modules/typings/globals/socket.io-client/index.d.ts" />
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { BLE } from '@ionic-native/ble';

import { HomePage } from '../pages/home/home';


@Component({
 templateUrl: 'app.html'
})


export class MyApp {

rootPage:any = HomePage; //the root (or first) page

constructor(
platform: Platform,
statusBar: StatusBar, 
splashScreen: SplashScreen,  
public ble: BLE)
{
	platform.ready().then(() => {
	// Okay, so the platform is ready and our plugins are available.
	// Here you can do any higher level native things you might need.
		statusBar.styleDefault();
		splashScreen.hide();
	
		ble.isEnabled().then(data => {
			},
			() => {
			ble.enable().then(data => {
				(err) => {alert('Cannot enable bluetooth')
				}
				});
			}
		);
	});
}
}

so whenever i debug using dev tools, i realize this function gave me the error

NavControllerBase.prototype.push = function (page, params, opts, done) {
    var _this = this;
    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__nav_util__["f" /* convertToView */])(this._linker, page, params).then(function (viewController) {
        return _this._queueTrns({
            insertStart: -1,
            insertViews: [viewController],
            opts: opts,
        }, done);
    }).catch(function (err) {
       console.error('Failed to navigate: ', err.message);
        throw err;
    });
};

However, this error never occur before i implement my socket.io, i was able to navigate before.

4

I suspect that wonky triple slash line trying to import typings for socket.io-client is causing problems. I would lose that and try installing @types/socket-io.client instead.

5

image
image.png728×315 16.6 KB

This error pop up when i removed the triple slash and use npm install@types/socket.io-client
it seem like the socket-io.client is not imported.
even if i include back the triple slash back, it pop upp back to the Failure to navigate error: No provider for lookup when i run on my device

6

So import it. Look for modern sample code on the web that uses the socket-io client in TypeScript.

7

Hi there…i able to solved the problem…
it was my careless mistake on initiating the socket.io connection…:sweat_smile: :sweat_smile: :sweat_smile:
should done in here

import * as io from 'socket.io-client';
@Component({
selector: 'page-device',
templateUrl: 'device.html'
})

export class DevicePage {
socket: any;
	    
constructor(public navParams: NavParams, public ble: BLE)
{  
this.connecting = true;
this.device = this.navParams.get('device');
this.connect(this.device.id); 
this.socketHost = "http://localhost:3000";
this.socket = io(this.socketHost);
this.socket.on('connect', () => {
	console.log('socket ok');
	});	
}

however, i encounter this problem on running my device

image
image.png1146×23 4.97 KB

do you have any idea why, i already have a local server running on my pc.