When I am reloading the page, It is taking time to navigate. Ionic 5, Cordova, Angular

I have done both navctrl, router still when page is reload or first time open then navigation takes time, no error is showing, When the button is clicked, the URL changes but the display waits for a few seconds And this issue comes only once then when the page is reloaded same issue comes

This is my app-routing.module.ts code

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {path: '', redirectTo: 'login', pathMatch:  'full'},
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule),
  },
  {
    path: 'welcome',
    loadChildren: () => import('./welcome/welcome.module').then( m => m.WelcomePageModule),
  },
  {
    path: 'registration',
    loadChildren: () => import('./registration/registration.module').then( m => m.RegistrationPageModule), 
  },
 {
    path: 'user',
    loadChildren: () => import('./user/user.module').then( m => m.UserPageModule),
  },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is my app.module.ts code

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ReactiveFormsModule} from '@angular/forms'
import { StreamingMedia } from '@ionic-native/streaming-media/ngx';
import { FileTransfer } from '@ionic-native/file-transfer/ngx';
import { FileChooser } from '@ionic-native/file-chooser/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';
import { File } from '@ionic-native/file/ngx';
import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
import { Camera } from '@ionic-native/camera/ngx';
import { IonicStorageModule } from '@ionic/storage';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AuthenticationService } from './services/authentication.service';
import { FirebaseAuthentication } from '@ionic-native/firebase-authentication/ngx';
import firebase from 'firebase/app';
import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';
import { WebIntent } from '@ionic-native/web-intent/ngx';
import { CallNumber } from '@ionic-native/call-number/ngx';

This is my app.component.ts

import { Component,OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Storage } from '@ionic/storage';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';
import { AuthenticationService } from './services/authentication.service';
import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
import { stringify } from '@angular/compiler/src/util';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
enableProdMode();
declare const window: any;
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  UserId :any;
  UserType : any;
  static myapp; 
  DbData:any;
  constructor(private statusBar: StatusBar,private splashScreen: SplashScreen,private router: Router,
  private platform: Platform,private authenticationService: AuthenticationService,
  private storage:Storage,private navCtrl:NgxNavigationWithDataComponent,
  private fcm: FCM) {
  }
  ngOnInit() {
    this.initializeApp();
  }

  initializeApp(){
    this.platform.ready().then( () => {
      this.statusBar.styleLightContent();
      this.splashScreen.hide();
      this.fcm.subscribeToTopic('all');
      this.fcm.getToken()
      .then((token:string)=>{
        this.DbData = token;
        this.fcm.onTokenRefresh().subscribe(
          (token:string)=>
          console.log("Nuevo token " +token),
          error=>console.log(error)
        );
        this.fcm.onNotification().subscribe(data=>{
          console.log(data)
          if(data.wasTapped){
            if(data.param1 == 'mediastream'){
              this.router.navigate([data.param1]);
            } else if(data.param1 == 'notification'){
              this.router.navigate([data.param1]);
            } else if(data.param1 == 'templedetails'){
              this.router.navigate([data.param1]);
            }  else if(data.param1 == 'deletechannel'){
              this.router.navigate([data.param1]);
            } else {
              this.router.navigate(['notification']);
            }
          } else {
          };
        })
        AppComponent.myapp = this.DbData;
      }).catch(error=>{
        console.error(error);
      });
    });
  }
}

This is my registration.page.html

      <ion-col align-self-center>      
        <span  class="already" style="padding-bottom: 40px; padding-top: 10px; font-size: 30px; font-family: Georgia, 'Times New Roman', Times, serif; font-weight: bolder; color: #318465;">
          REGISTRATION
        </span>
        <ion-button [routerLink]="['/user']" expand="block" style="--background: #003366; font-weight: bold; height: 40px;"><span  style="color: #FFCC00;">RegularUser</span></ion-button>
        <span class="divider line one-line" style="color: #318465;">or</span>
        <ion-button [routerLink]="['/administrator']" expand="block" style="--background: #003366; font-weight: bold; height: 40px;"><span  style="color: #FFCC00;">Administrator</span></ion-button>
      </ion-col>

This is my registration.page.ts

import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';
import { LoadingController, ToastController, Platform } from '@ionic/angular';
import { Storage } from '@ionic/storage';
@Component({
  selector: 'app-registration',
  templateUrl: './registration.page.html',
  styleUrls: ['./registration.page.scss'],
})
export class RegistrationPage {
  constructor(
    private httpClient:HttpClient,
    private navCtrl:NgxNavigationWithDataComponent,
    public toastController: ToastController,
    private loadingCtrl:LoadingController,
    private storage:Storage,
    public translate:TranslateService) { 
     
  }
}

2 posts - 2 participants

Read full topic