Angular re-run ngOnInit when coming back to an initialized page

Question

When comming back to an initialized page it doesn't run ngOnInit. For example /user/profile shows username, I go on /user/settings change username, and came back to /user/profile. Username on /user/profile didn't change because ngOnInit wasn't called.

So what I want is to re-init page which has been already initialized. This is router.service.ts which is used for navigation:

export class RouterService {
  constructor(
    private router: Router,
  ) {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    this.router.onSameUrlNavigation = "reload";
  };


  async go(path: string[], options: NavigationExtras = {}) {
    this.router.navigate(path, { ...options });
  }
}

If I add replaceUrl: true to the function options it works, initted page re-inits, but the url is not being saved to the browser history and browser back button doesn't work (it redirects to the beggining of the app).

This is app.module.ts:

@NgModule({
    declarations: [AppComponent],
    imports: [
        ...
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
    ],
    providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    ],
    bootstrap: [AppComponent]
})

This is app-routing.module.ts:

@NgModule({
    imports: [
        RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, onSameUrlNavigation: "reload" }),
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Those are the routes:

const routes = [
    {
        path: "user/profile",
        loadChildren: () => import("./user/profile/profile.module").then(m => m.ProfilePageModule),
        canActivate: [LoggedGuard],
    },
    {
        path: 'user/settings',
        loadChildren: () => import('./user/settings/settings.module').then(m => m.SettingsPageModule),
        canActivate: [LoggedGuard],
    },

Those are **not** solutions: [navigating to '/' and then to actual url](https://stackoverflow.com/questions/65401966/re-initializing-a-component-or-forcing-it-to-run-ngoninit-again-in-angular), or using `window.location.reload()` — 1baz, Oct 28 '22 at 22:40

score 1 · Accepted Answer · answered Nov 04 '22 at 05:30

1

ngOnInit()

The above method executes when the page/component is created. Probably executes when the page is added for first time in routing.This is angular component lifecycle event.

ionViewDidEnter()

This method is executed when we everytime enter the page or component.This is ionic page lifecycle event. So use ionViewDidEnter()

answered Nov 04 '22 at 05:30

mani kandan

399
2
6

1

I feel terrible for only knowing about this after my 2nd Ionic App development. Used to apply all the public / event emitters / observables all over my application – Binary_Hits00 Jun 29 '23 at 21:12

score 0 · Answer 2 · answered Oct 29 '22 at 00:08

Lifecycle hooks aren't intended to be called manually. That said, in the main components which you want to re-run the routines, you can subscribe to router events and call whatever functions you wish when the route matches whatever value you wish it to for the given page.

score 0 · Answer 3 · answered Oct 29 '22 at 12:08

With this method in ionic you are destroying page stacks. You don't need to re-init a page, you can simply use ionic lifecycle hooks instead of angular's. ionViewWillEnter instead of ngOnInit, which is called whenever the page is opened, not when initiated.

Angular re-run ngOnInit when coming back to an initialized page

3 Answers3