Angular2 routing issue and ngOnInit called twice

Was finally able to resolve the issue after getting the debugging help from @user3249448.

Turns out I was getting this NavigationError, even though no errors were being logged to the console:

Here was the full stack trace:

TypeError: Cannot read property 'notificationId' of undefined    at CompiledTemplate.proxyViewClass.View_NotificationEditComponent0.detectChangesInternal (/MaintenanceModule/NotificationEditComponent/component.ngfactory.js:487:49)    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:80125:14)    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:80320:44)    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:80110:18)    at CompiledTemplate.proxyViewClass.View_NotificationEditComponent_Host0.detectChangesInternal (/MaintenanceModule/NotificationEditComponent/host.ngfactory.js:29:19)    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:80125:14)    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:80320:44)    at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:60319:20)    at RouterOutlet.activate (http://localhost:4200/vendor.bundle.js:65886:42)    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:24246:16)    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:24213:26)    at http://localhost:4200/vendor.bundle.js:24149:58    at Array.forEach (native)    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:24149:29)    at ActivateRoutes.activate (http://localhost:4200/vendor.bundle.js:24123:14)

So essentially, my template was being rendered before the call to my web service was returned, and my template could not be rendered properly because notification was undefined, so I got this NavigationError, which caused the described behavior (doesn't it seem like this error should be logged to the console without having to add extra debugging code in your AppComponent?).

To fix this, all I had to do was add an *ngIf to my fieldset that contained all the information about the notification.

<p-fieldset [legend]="'Edit Notification'" *ngIf="notification">

And now my template loads properly once the data is returned from the web service.

My guess would be that your browser is interpreting your edit link as an actual link instead of doing what you want it to do. This is based on the fact that you see a flash - sounds like the browser is trying to visit the link in question.

Try changing the item that you click on in your notification list to edit the notification from an anchor tag to a simple span or div. If you don't get the flash, then you know that was your issue.