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.