Ionic router. OnInit working only once

Bug Report

Ionic version: [x] 4.1.0

Current behavior: Ionic router run OnInit only first time

Expected behavior: Run OnInit each time

I have an app with Angular. It is a simple list of items, after clicking on an item opened item details page. Two routes:

• IndexComponent. Items list.
• ItemDetailsComponent. Edit item page

const routes: Routes = [
  {
    path: 'index',
    component: IndexComponent
  },
  {
    path: 'item/:id',
    component: ItemDetailsComponent
  }
];

I use ItemsService -> get/save items.

export class IndexComponent implements OnInit {
  public items: Array<Item>;

  constructor(private itemsService: ItemsService) {
  }

  ngOnInit() {
    this.itemsService.getItems()
    .subscribe(data => this.items = data)
  }
}

export class ItemDetailsComponent implements OnInit {
  public item: Item;

  constructor(private route: ActivatedRoute,
              private itemsService: ItemsService) {
  }

  ngOnInit() {
    const id = this.route.snapshot.params['id'];
    this.itemsService.getItem(id)
    .subscribe(data => this.item = data)
  }
}

In Angular application, OnInit lifecycle event working each time when I open these pages. And it is fine. I should edit an item on ItemDetailsComponent, and after clicking back to IndexComponent I see new information.

I start an Ionic project. Changed router-outlet to ion-router-outlet Same structure, same routing. And now:

• IndexComponent OnInit working the only first time. When I back to this page from ItemDetailsComponent - OnInit not rerun. Ionic reuse IndexComponent, But I need a new instance.

• ItemDetailsComponent OnInit working the only first time for each item in the items list. But if I edit an item, return back to IndexComponent, update items handly(click a button, because OnInit not work). And open ItemDetailsComponent again - I see old information because OnInit not firing - this is an old instance.

[kamvir]

I used ionViewWillEnter() instead of ngOnInit(). It works,

[liamdebeasi]

Hi @traziusbiztest,

Thanks for the issue! I can confirm this is a bug. By default, we cache the component when navigating (whereas a regular Angular component destroys it and re-creates it when going back). We have a fix in the works that should resolve issues where routing isn’t working after the first time, params aren’t being updated, etc.

Work on the fix is well underway, and I hope to have more info to share soon!

Thanks for using Ionic!