Ionic 3 to Ionic 5 Migration: Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

Hi,

I’m migrating a Ionic 3 project to Ionic 5. I need to load a new page (monitor) after clicking an item on a list and when a bluetooth connection is done. The Ionic 3 code used NavController and now I changed it to Router but I’m getting this message:

Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run()’?

in this.Router.navigate (['/monitor']);

The code inside inicio.page.ts:

BTConectado(item){   
    this.bluetoothSerial.isConnected().then(() => {
      console.log("BT Conectado:" + item.name + " " + item.address);
      this.UsrService.setBTEqData (item.name, item.address, item.alias);

      // Cambiar a Pagina Monitor
      //this.navCtrl.navigateRoot('MonitorPage');      
      this.Router.navigate (['/monitor']);
    }, () => {console.log("BT No conectado");});
  }

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'creditos',
    loadChildren: () => import('./pages/creditos/creditos.module').then( m => m.CreditosPageModule)
  },
  {
    path: 'historial',
    loadChildren: () => import('./pages/historial/historial.module').then( m => m.HistorialPageModule)
  },
  {
    path: '',
    loadChildren: () => import('./pages/inicio/inicio.module').then( m => m.InicioPageModule)
  },
  {
    path: 'internal',
    loadChildren: () => import('./pages/internal/internal.module').then( m => m.InternalPageModule)
  },
  {
    path: 'monitor',
    loadChildren: () => import('./pages/monitor/monitor.module').then( m => m.MonitorPageModule)
  },  
  {
    path: '',
    redirectTo: 'inicio',
    pathMatch: 'full'
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

What I’m doing wrong?

1 post - 1 participant

Read full topic