ObjectUnsubscribedError on router.navigate inside a subscribe of http post request

Question

I am trying to navigate to a page after I get a response from the http post call. The router navigate needs the response object since it routes based on the response.id as shown in below code.

user.component.ts:

this._userService.createUser(data).subscribe(response => {
    this.router.navigate(['userEdit/' + response.id]);
});

Inside the service:

createUser(userdata: User): Observable<User> {
    return this._httpClient.post<User>(url, userData, this._httpOptions);
}

Inside app.routing.ts

{path: 'userEdit/:userId', component: UserEditComponent}

It navigates correctly to the 'userEdit/10' path but on the console it gives ObjectUnsubscribedError.

The application is working fine but I want to understand why I am getting this error.

Console Error:

Answer 1

I realized through the stack trace that the error is thrown by a ngx-bootstrap modal directive.

modal.directive.js:276

I was hiding the modal before the createUser function call and due to the router.navigate it was getting destroyed and that was throwing the error.

Fixed it by adding the createUser function call inside modal.onHidden.subscribe()