Styjun

I have created login with menu pages in ionic. I am not able to go to menu page after authentication stage. It didn't show the error too.
Could you please help me?

Here is my code I have tried.

app.routing.module.ts

import NgModule from '@angular/core';
import PreloadAllModules, RouterModule, Routes from '@angular/router';
import AuthGuard from './guards/auth.guard';

const routes: Routes = [
 path: '', redirectTo: 'login', pathMatch: 'full' ,
 path: 'login', loadChildren: './public/login/login.module#LoginPageModule' ,

 
 path: 'menu', canActivate: [AuthGuard],
 loadChildren: './protected/menu/menu.module#MenuPageModule' 
 ,

 
 path: 'reportlist', canActivate: [AuthGuard],loadChildren: './reportlist/reportlist.module#ReportlistPageModule' ,
 path: 'profile', canActivate: [AuthGuard], loadChildren: './protected/profile/profile.module#ProfilePageModule' ,
 path: 'profile-edit', canActivate: [AuthGuard], loadChildren: './protected/profile-edit/profile-edit.module#ProfileEditPageModule' ,
 path: 'report-detail', canActivate: [AuthGuard], loadChildren: './protected/report-detail/report-detail.module#ReportDetailPageModule' ,
 path: 'report-create', canActivate: [AuthGuard], loadChildren: './protected/report-create/report-create.module#ReportCreatePageModule' ,


];

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

app.component.ts

import Component 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 OraclemcsService from './services/oraclemcs.service';

@Component(
 selector: 'app-root',
 templateUrl: 'app.component.html'
)

export class AppComponent 

 public appPages = [
 
 title: 'Login',
 url: '/login',
 icon: 'login',
 render: true
 ,
 /*
 title: 'ReportList',
 url: '/reportlist',
 icon: 'list',
 render: false
 , */
 
 title: 'menu',
 url: '/menu',
 icon: 'list',
 render: false
 
 ];
 public stateFlag = false;

 constructor(
 private platform: Platform,
 private splashScreen: SplashScreen,
 private statusBar: StatusBar,
 private authService: OraclemcsService,
 private router: Router
 ) 
 this.initializeApp();
 

 initializeApp() 
 this.platform.ready().then(() => 
 this.statusBar.styleDefault();
 this.splashScreen.hide();

 this.authService.authenticationState.subscribe(state=>

 if (state) 
 this.stateFlag = true;
 this.router.navigate(['menu']);
 // this.router.navigate(['menu']);
 this.appPages = [

 
 title: 'profile',
 url: '/profile',
 icon: 'person',
 render: false
 ,
 
 title: 'reportList',
 url: '/reportlist',
 icon: 'list',
 render: false
 ,
 
 title: 'menu',
 url: '/menu',
 icon: 'list',
 render: false
 
 ];
 else 
 this.router.navigate(['login']);
 this.stateFlag = false;
 this.appPages = [
 
 title: 'Login',
 url: '/login',
 icon: 'log-in',
 render: true
 
 ];
 
 );
 );
 
 logout() 
 this.authService.logout();
 

login.page.html

<ion-header>
 <ion-toolbar>
 <ion-buttons slot="end">
 <ion-menu-button></ion-menu-button>
 </ion-buttons>
 <ion-title color="primary">Care Mobile</ion-title>
 </ion-toolbar>
</ion-header>

<ion-content padding>
 <ion-grid>
 <ion-row justify-content-center>
 <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
 <div text-center>
 <ion-text color="primary">
 <h3>Login</h3>
 </ion-text>
 </div>
 <div padding>
 <ion-item>
 <ion-input type="text" [(ngModel)]="username" placeholder="Username"></ion-input>
 </ion-item>

 <ion-item>
 <ion-input type="password" [(ngModel)]="password" placeholder="Password"></ion-input>
 </ion-item>
 </div>

 <div padding>
 <ion-button color="primary" (click)="login()" expand="block">Login</ion-button>
 <!--ion-button (click)="callweblogicservice()" expand="block">CallService</ion-button-->
 <!--ion-button (click)="logoutweblogic()" expand="block">weblogic logout</ion-button-->
 </div>
 </ion-col>
 </ion-row>
 </ion-grid>
</ion-content>

login.module.ts

import NgModule from '@angular/core';
import CommonModule from '@angular/common';
import FormsModule from '@angular/forms';
import Routes, RouterModule from '@angular/router';
import IonicModule from '@ionic/angular';
import LoginPage from './login.page';

const routes: Routes = [
 
 path: '',
 component: LoginPage
 
];

@NgModule(
 imports: [
 CommonModule,
 FormsModule,
 IonicModule,
 RouterModule.forChild(routes)
 ],
 declarations: [LoginPage]
)
export class LoginPageModule 

login.page.ts

import Component, OnInit from '@angular/core';
import OraclemcsService from './../../services/oraclemcs.service';
import MenuController from '@ionic/angular';

@Component(
 selector: 'app-login',
 templateUrl: './login.page.html',
 styleUrls: ['./login.page.scss'],
)
export class LoginPage implements OnInit 

 public username: string;
 public password: string;

 constructor(private authService: OraclemcsService, private NavCtrl: MenuController ) 

 ngOnInit() 
 

 login() 
 console.log('User Name & Password' + this.username + this.password);
 this.authService.login(this.username, this.password);
 this.password = null;
 //code to login to WEBLOGIC
 //this.authService.loginWeblogic(this.username , this.password);
 

menu.page.html

<ion-split-pane>
 <ion-menu contentId="content">

 <ion-header>
 <ion-toolbar>
 <ion-title>CARE</ion-title>
 </ion-toolbar>
 </ion-header>

 <ion-content>
 <ion-list>
 <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
 <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath === p.url">
 <ion-label>
 p.title 
 </ion-label>
 </ion-item>
 </ion-menu-toggle>
 </ion-list>

 </ion-content>

 </ion-menu>

 <ion-router-outlet id="content" main></ion-router-outlet>

</ion-split-pane>

menu.module.ts

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

import IonicModule from '@ionic/angular';

import MenuPage from './menu.page';
import AuthGuard from 'src/app/guards/auth.guard';
//import BrowserModule from '@angular/platform-browser';
import CommonModule from '@angular/common';
import FormsModule from '@angular/forms';

import HttpClientModule from '@angular/common/http';
//import AppRoutingModule from 'src/app/app-routing.module';

const routes: Routes = [
 
 path: 'menu',
 component: MenuPage,
 children:[
 
 path: 'reportlist', canActivate: [AuthGuard], loadChildren: './reportlist/reportlist.module#ReportlistPageModule' ,
 path: 'profile', canActivate: [AuthGuard], loadChildren: './protected/profile/profile.module#ProfilePageModule' ,
 path: 'profile-edit', canActivate: [AuthGuard], loadChildren: './protected/profile-edit/profile-edit.module#ProfileEditPageModule' ,
 path: 'report-detail', canActivate: [AuthGuard], loadChildren: './protected/report-detail/report-detail.module#ReportDetailPageModule' ,
 path: 'report-create', canActivate: [AuthGuard], loadChildren: './protected/report-create/report-create.module#ReportCreatePageModule' ,

 ]
 ,
 
 path: '',
 redirectTo: './reportlist/reportlist.module#ReportlistPageModule' ,
 
];

@NgModule(

 imports: [ CommonModule, FormsModule, IonicModule,
 HttpClientModule, RouterModule.forChild(routes)],
 exports: [RouterModule],
 declarations: [MenuPage]
)

export class MenuPageModule 

menu.page.ts

import Component, OnInit from '@angular/core';
import Router, RouterEvent from '@angular/router';

@Component(
 selector: 'app-menu',
 templateUrl: './menu.page.html',
 styleUrls: ['./menu.page.scss'],
)
export class MenuPage implements OnInit 

 selectedPath = '';

 public pages = [
 
 title: 'Profile',
 url: '/menu/profile'
 ,
 
 title: 'Report',
 url: '/menu/reportlist'
 
 ];
 constructor(private router: Router) 
 this.router.events.subscribe((event: RouterEvent) => 
 this.selectedPath = event.url;
 );
 

 ngOnInit() 
 

The result is still at login page and unable to go to another page. But authentication stage is passed when I print out. Please help me.

I just remove the menu and leave it blank as below. The menu appeared.

path: '',
component: MenuPage,
children:[
 
 path: 'reportlist', canActivate: [AuthGuard], loadChildren: './reportlist/reportlist.module#ReportlistPageModule' ,
 path: 'profile', canActivate: [AuthGuard], loadChildren: './protected/profile/profile.module#ProfilePageModule' ,
 path: 'profile-edit', canActivate: [AuthGuard], loadChildren: './protected/profile-edit/profile-edit.module#ProfileEditPageModule' ,
 path: 'report-detail', canActivate: [AuthGuard], loadChildren: './protected/report-detail/report-detail.module#ReportDetailPageModule' ,
 path: 'report-create', canActivate: [AuthGuard], loadChildren: './protected/report-create/report-create.module#ReportCreatePageModule' ,

]