Ionic 4: ionic serve reloads app on every page

Question

I'm new to Ionic 4 and I'm trying to figure out if I'm doing something wrong, or if Ionic 4 just acts differently in this area. I have a very simple app that just has a few Ionic pages, and in the app.component.ts file I trigger some init logic in the platform.ready() call. I noticed this init code was fired on every page load when testing via ionic serve. Some code is below. I assume ionic serve is supposed to only reload the app when the code changes (and not on every navigation to a new page)? Maybe my navigation approach is causing the app to reload?

app.component.ts

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

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

      let time = new Date().toLocaleString();
      console.log(`${time}: Platform is ready...dude`);
    });
  }

Simple navigation that loads various empty pages (and seems to trigger an app reload on every nav).

Home.page.html

<ion-content padding>
<h1>Home Page</h1>
  <ul>
    <li><a href="/home" routerDirection="root">HOME</a></li>
    <li><a href="/login" routerDirection="root">login</a></li>
    <li><a href="/profile" routerDirection="root">profile</a></li>
    <li><a href="/signup" routerDirection="root">signup</a></li>
    <li><a href="/account" routerDirection="forward">accounts</a></li>    
    <li><a href="/admin" routerDirection="forward">admin</a></li>
  </ul>
</ion-content>

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: 'profile', loadChildren: './pages/profile/profile.module#ProfilePageModule' },
  { path: 'account-detail/:id', loadChildren: './pages/account-detail/account-detail.module#AccountDetailPageModule' },
  { path: 'account', loadChildren: './pages/account/account.module#AccountPageModule' },
  { path: 'settlement', loadChildren: './pages/settlement/settlement.module#SettlementPageModule' },
  { path: 'signup', loadChildren: './pages/signup/signup.module#SignupPageModule' },
  { path: 'admin', loadChildren: './pages/admin/admin.module#AdminPageModule' },
];

BRass · Accepted Answer · 2019-02-25 17:00:36Z

Rookie mistake. I'm posting an answer in case anyone else stumbles into this.

My issue was the anchor tags. Obviously I'm unfamiliar with the angular router. Looks like if you provide a routerLink it will do what we'd expect from a "normal" SPA link (as opposed to reloading the app).

Updated Home Page

<ion-content padding>
<h1>Home Page</h1>
  <ul>
    <li><a [routerLink]="['/home']" routerDirection="root">HOME</a></li>
    <li><a [routerLink]="['/login']" routerDirection="root">login</a></li>
    <li><a [routerLink]="['/profile']" routerDirection="root">profile</a></li>
    <li><a [routerLink]="['/signup']" routerDirection="root">signup</a></li>
    <li><a [routerLink]="['/account']" routerDirection="forward">accounts</a></li>    
    <li><a [routerLink]="['/admin']" routerDirection="forward">admin</a></li>
  </ul>
</ion-content>

Collectives™ on Stack Overflow

Ionic 4: ionic serve reloads app on every page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related