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) {
}
}