Hot check internet connection in all pages and show a specific page?

Hello,
I’m looking for a way to check all pages, without rewriting the same code on each page, if there is an internet connection.
With @ capacitor / network I was able to get if there is a connection or not, but now I have to do two things:

1-Implement the code in all pages (I tried with the providers / services but I couldn’t)

2-When there is no connection I have to refer to a specific page ‘NotConnected.html’ but when there is no connection it does not load the page

Thanks in advance.

You to add a listener when the network change. You can try the following:
Note: The Network is from @capacitor/network

Network.addListener('networkStatusChange', status => {
  console.log('Network status changed', status);
  // Redirect to NotConnected.html if not connected
});

This is my app.components.ts file
import { Component } from ‘@angular/core’;
import { Platform, NavController } from ‘@ionic/angular’;
import { PluginListenerHandle } from ‘@capacitor/core’;
import { Network } from ‘@capacitor/network’;

@Component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’,
styleUrls: [‘app.component.scss’],
})
export class AppComponent{
networkStatus: any;
networkListener: PluginListenerHandle;

constructor(private platform: Platform, private navCtrl: NavController) {
this.initializeApp();
}

initializeApp(){
this.networkListener = Network.addListener(‘networkStatusChange’, (status) => {
console.log(‘Network status changed’, status);
if(status.connected == false){
this.navCtrl.navigateRoot([‘networkpage’], {});
}else{
this.navCtrl.navigateRoot([‘home’], {});
}
});

this.platform.ready().then(() => {
this.navCtrl.navigateRoot([‘home’], {});
});

}
}

This way it seems to work, I see in the url changing from ‘home’ to ‘network’ the problem is that I don’t see anything on the screen. Doesn’t load the page. It appears that without connection it is unable to load the page.

This is the error that give me back:

zone.js:1109 Unhandled Promise rejection: Cannot read properties of undefined (reading ‘isProxied’) ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading ‘isProxied’)

Try using the Router from @angular/router

constructor(private platform: Platform, private router: Router) {
  this.initializeApp();
}

initializeApp() {
  this.networkListener = Network.addListener(‘networkStatusChange’, (status) => {
  console.log(‘Network status changed’, status);
  if(status.connected == false){
      this.router.navigate([‘/networkpage’]);
  } else {
      this.router.navigate([‘/home’]);
  }
});

Thank you for the suggestion but I have already tried and the result is the same.
I get the same error back…

Hi, I found that it also works with NavController but the problem is that trying on the web it doesn’t work. It works directly on the Android device.

Thank you very much for helping!