CODEWITHSUNDEEP
angulartypescriptionic-framework
Lukho Mdingi
Lukho Mdingi

Reputation: 548

Ionic 4 page not updating on navigation

I have a problem with navigation on Ionic 4 using Angular 7. The url changes on the url bar, but it doesn't actually update the page. This is my app component html:

    <ion-app>
     <ion-split-pane [when]="authenticated">
        <ion-menu class="menu menu-left" *ngIf="authenticated">
            <ion-header>

            </ion-header>

            <ion-content class="scroll-content ionic-scroll has-header">
                <ion-list>
                    <ion-item class="item-icon-left menu-item item-complex">
                        <a routerLink="/home">
                            <ion-icon name="home"></ion-icon>
                            Home
                        </a>
                    </ion-item>
                </ion-list>

                <ion-fab vertical="bottom" horizontal="start" color="light">
                    <ion-fab-button routerLink="/settings"><ion-icon name="settings"></ion-icon></ion-fab-button>
                </ion-fab>
            </ion-content>
        </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>

And here is the typescript:

authenticated = false;
    constructor(private router: Router, private platform: Platform, private events: Events, private auth: AuthProvider)
{
 this.auth.authenticationState.subscribe((state) => {
   this.authenticated = state;
   if (!state) {
     this.router.navigate(['login']);
 }
 });
}

This is my app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AuthGuardService} from './services/auth/auth-guard.service';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full', canActivate: [AuthGuardService] },
  { path: 'test', loadChildren: './pages/test/test.module#TestPageModule', canActivate: [AuthGuardService] },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule', canActivate: [AuthGuardService] },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './pages/register/register.module#RegisterPageModule' },
  { path: 'profile', loadChildren: './pages/profile/profile.module#ProfilePageModule', canActivate: [AuthGuardService] },
  { path: 'settings', loadChildren: './pages/settings/settings.module#SettingsPageModule', canActivate: [AuthGuardService] },

];

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

Upvotes: 0

Views: 1929

Answers (1)

Lukho Mdingi
Lukho Mdingi

Reputation: 548

I noticed that in my global.scss file I had previously commented out the @import "~@ionic/angular/css/core.css"; line. Uncommenting this line fixed the problem.

Upvotes: 2

Related Questions