ionViewDidLoad triggers twice

Ionic Framework ionic-v3
1

Hi,
ionViewDidLoad is getting triggered 2 twice, any idea if this is knows issue or anything i am doing wrong ?

2 Likes
2

How does your class look like? Little bit hard to tell what’s going on without code :wink:

3

nothing special, and I am using lazy loading

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Auth } from '../../providers/auth';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import * as moment from 'moment';
import _ from "lodash";
import { Chart } from 'chart.js';

@IonicPage()
@Component({
  selector: 'page-dashboard',
  templateUrl: 'dashboard.html',
})
export class Dashboard {

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams) {
  }

  ionViewDidLoad() {
      console.log('ionViewDidLoad')
  }
}
4

Can you also please share the DashboardModule?

5 
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Dashboard } from './dashboard';

@NgModule({
  declarations: [
    Dashboard,
  ],
  imports: [
    IonicPageModule.forChild(Dashboard),
  ],
  exports: [
    Dashboard
  ]
})
export class DashboardModule {}
1 Like
6

just noticed that, If I go directly to http://localhost:8100/#/dashboard then it triggers twice but if I goto
http://localhost:8100 and the goto dashboard using menu then it triggers just once.

7

Interesting. Other reports of similar problems seemed to be caused by spurious IonicModule.forChild() imports, but you do not seem to have that.

8

Exactly the same for me too.

The event is called twice if I directly visit the page. But if I navigate via the launch page, it’s called once.

Any thoughts?

9

Hello,

For my side also ionViewDidload always triggered twice. Is there a fix ?

1 Like
10

I got this issue when setting the root page on app component after platform ready.
It got resolved when I set the root on:

// rootPage: any = 'LoginPage'; 

 ngAfterViewInit(){
    if(this.auth.isLoggedIn()){
      this.navCtrl.setRoot('HomePage');
    }else{
      this.navCtrl.setRoot('LoginPage');
    }
  }
11

I also have this problem with my site(ionic 3.13.1). In my case, here is my IonicPage

@IonicPage({
  segment: 'ev/:lat/:lng'
})

when i go to regular url http://mysite ionViewDidLoad will trigger one time but if I go to deeplink url http://mysite/#/ev/123/345 then it will trigger twice(first time without deeplink and second time with deeplink)

I want to detect if request come with deeplink parameter or not. How can I fix this?

12

+1
Exactly the same for me too.

The event is called twice if I directly visit the page. But if I navigate via the launch page, it’s called once.

Any thoughts?

1 Like
13

Hi, Have got a solution for this?

14

This is not working…

15

I been struggling with the same issue.

In my case was that i didn’t named router outlet. If you have more then one router outlet for example some another module with lazy loading, you need to name it inside component.

So before i have something like this

<ion-content>
    <ion-router-outlet></ion-router-outlet>
    <ng-container *ngIf="itDevice$ | async as itDevice">
        <ion-tabs>
            <ion-tab-bar slot="bottom">
                <ion-tab-button tab="info">
                    <ion-icon name="information-circle"></ion-icon>
                    <ion-label>Info</ion-label>
                </ion-tab-button>
                <ion-tab-button *ngIf="itDevice.id" tab="description">
                        <ion-icon name="information-circle"></ion-icon>
                        <ion-label>Description</ion-label>
                    </ion-tab-button>
            </ion-tab-bar>
        </ion-tabs>
    </ng-container>
</ion-content>

After:

<ion-content>
    <ion-router-outlet name="itDeviceView"></ion-router-outlet>
    <ng-container *ngIf="itDevice$ | async as itDevice">
        <ion-tabs>
            <ion-tab-bar slot="bottom">
                <ion-tab-button tab="info">
                    <ion-icon name="information-circle"></ion-icon>
                    <ion-label>Info</ion-label>
                </ion-tab-button>
                <ion-tab-button *ngIf="itDevice.id" tab="description">
                        <ion-icon name="information-circle"></ion-icon>
                        <ion-label>Description</ion-label>
                    </ion-tab-button>
            </ion-tab-bar>
        </ion-tabs>
    </ng-container>
</ion-content>

And now ionViewDidEnter fired only once.