ngonit method of component getting called twice which holds the router-outlet

See original GitHub issue

I have a route requirement like localhost:4200/1234 where 1234 is mapped to adNo.

And i have child route like localhost:4200/ad1 and localhost:4200/ad2. landComponent oninit method gets the parameter and decides where it has to redirect internally.

Issue is that oninit method is called twice when page is loaded first i.e when localhost:4200/1234 is loaded, how can this be prevented.Calling twice happens when navigateByUrl is invoked. Below is the route code.

Root Route
export const appRoutes: Routes = [
  { path: ':adNo', component: landComponent },
];


Child Route

export const subRoutes: Routes = [
  {
    path: '',
    component: landComponent,
    children: [{ path: 'ad1', component: infoComponent },
    { path: 'ad2', component: typeComponent }]
  }
];
LandComponent
ngOnInit() {    
   // logic to get the adNo and make service call
  let adNo = this._activatedRoute.snapshot.params['adNo'];
   console.log('working');
   this._router.navigateByUrl('ad1', { skipLocationChange: true });
}

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:18 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
mlc-mlapiscommented, Dec 11, 2017

@gpradeepjain … you have a route in the main app module /457 which leads to instantiating of the first instance of LandComponent in <router-outlet></router-outlet> which is placed in the template of app.component.html

{path: ':adNo', component: LandComponent}

… then LandComponent component … from LandsModule which has defined a route:

{path: '', component: LandComponent}

leads to instantiating of the second instance of LandComponent in <router-outlet></router-outlet> which is placed in the template of land.component.html.

So the actual behavior that 2 instances of LandComponent component are created and their ngOnInit hooks are called is totally OK.

0reactions
angular-automatic-lock-bot[bot]commented, Sep 14, 2019

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is ngOnInit called twice? - angular
Right now, if an error happens during detecting changes of content/view children of a component, ngOnInit will be called twice (seen in DynamicChangeDetector)....
Read more >
[Solved]-Why is ngOnInit called twice?-angular.js
Right now, if an error happens during detecting changes of content/view children of a component, ngOnInit will be called twice (seen in ...
Read more >
Why Is Ngoninit Called Twice
The child components constructor is being called twice, and the second time it is called the parentItemId is set to null and the...
Read more >
Component testing scenarios
To simulate user input, find the input element and set its value property. You will call fixture.detectChanges() to trigger Angular's change detection. But ......
Read more >
Angular Navigation: How Routing & Redirects Work ...
The simplest breakdown for what we have here is a path/component lookup. When our app loads, the router kicks things off by reading...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found