Ngx-bootstrap: Angular throws a ViewDestroyedError triggered by change detections done by dropdown

[Lolmewn]

Bug description:

I'm not entirely sure what circumstances cause this issue to trigger, but when some page navigation happens, the following error is thrown:

ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
    at viewDestroyedError (core.js:20451)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:23907)
    at checkAndUpdateView (core.js:23306)
    at callWithDebugContext (core.js:24176)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:23878)
    at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (core.js:21687)
    at ngx-bootstrap-dropdown.js:639
    at HTMLDocument.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17289)

Since compiled line numbers are a bit different from source line numbers, I've included the code that is referenced (line 639 is highlighted):

this._subscriptions.push(this._state.isOpenChange.subscribe(function (value) {
            _this.isOpen = value;
            if (value) {
                _this._documentClickListener = _this._renderer.listen('document', 'click', function (event) {
                    if (_this._state.autoClose && event.button !== 2 &&
                        !_this._element.nativeElement.contains(event.target) &&
                        !(_this._state.insideClick && _this._dropdown._contains(event))) {
                        _this._state.toggleClick.emit(false);
                        _this._changeDetectorRef.detectChanges(); // Line 639
                    }
                });
                _this._escKeyUpListener = _this._renderer.listen(_this._element.nativeElement, 'keyup.esc', function () {
                    if (_this._state.autoClose) {
                        _this._state.toggleClick.emit(false);
                        _this._changeDetectorRef.detectChanges();
                    }
                });
            }
            else {
                _this._documentClickListener();
                _this._escKeyUpListener();
            }
        }));

The component displayed on the page only changes in data, not in what components are shown.
If I may believe https://stackoverflow.com/questions/37849453/attempt-to-use-a-destroyed-view-detectchanges, simply wrapping detectChanges in an if-statement, checking if the changeDetectorRef has some destroyed property might fix it.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: ^4.2.0

Angular: 7.2.9

Bootstrap: ^3.4.1

Build system: Angular CLI, System.js, webpack, starter seed:

Angular CLI (7.3.6)

[hassanasad]

Yes i am facing similar error. I have reverted ngx-bootstrap to v3.3.0 to get rid of that error for now.

[hassanasad]

For me - if i have [routerLink] in the dropdown and i click on any of them - thats when the error triggers.

[hassanasad]

Apparently there is a PR that fixes this: https://github.com/valor-software/ngx-bootstrap/pull/5205

[johnnyswan]

@valorkin Hi, when you plan your next release? This PR is already merged.

[Domainv]

@johnnyswan today/tomorrow will be released

[ismcagdas]

@Domainv is this released ? Thanks.

[Domainv]

@ismcagdas Yes in 4.3.0

[ismcagdas]

Thanks a lot and thank you for the great work you are doing 👍

[Domainv]

Thank you)