Angular 5: Unable to add a destroyed View to a ViewContainer

Question

Angular 5: Unable to add a destroyed View to a ViewContainer

I encountered a new error in my Angular application that I haven't seen before. The issue is arising from this specific line in the Angular source code.

This error occurs when I log out and then log back into my app. While on a certain route, there is an observable being observed. When this observable emits a value to its stream, it triggers updates and change detection, resulting in elements being removed and added dynamically.

I suspect the component below is causing the error. Can anyone identify any obvious mistakes I'm making? I have included what I believe could be relevant to the bug and commented out everything else. It's possible that I am misusing ngTemplateOutlet and ContentChild here...

Component:

@Component({
    selector: 'paginated-infinite-scroll',
    templateUrl: './paginated-infinite-scroll.component.html'
})
export class PaginatedInfiniteScrollComponent {
    // ...

    @ContentChild('results') resultsRef: TemplateRef<any>;
    @ContentChild('noResults') noResultsRef: TemplateRef<any>;
    @ContentChild('loading') loadingRef: TemplateRef<any>;
    @ContentChild('loadingMore') loadingMoreRef: TemplateRef<any>;

    // ...
}

Template:

<div infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="300" [scrollWindow]="true" (scrolled)="scrolled()">
    <ng-container *ngIf="result.items.length > 0 && !loading">
        <ng-template [ngTemplateOutlet]="resultsRef"></ng-template>
    </ng-container>

    <ng-container *ngIf="result.items.length === 0 && !loading">
        <ng-template [ngTemplateOutlet]="noResultsRef"></ng-template>
    </ng-container>

    <ng-container *ngIf="loading">
        <ng-template [ngTemplateOutlet]="loadingRef"></ng-template>
    </ng-container>

    <ng-container *ngIf="loadingMore">
        <ng-template [ngTemplateOutlet]="loadingMoreRef"></ng-template>
    </ng-container>
</div>

Usage:

<paginated-infinite-scroll [onScroll]="onScroll" [query]="query" [result]="result">
    <ng-template #results>
        // Display results looped through here...
    </ng-template>

    <ng-template #noResults>
        // Show message for no results here...
    </ng-template>

    <ng-template #loading>
        // Display loading spinner here...
    </ng-template>

    <ng-template #loadingMore>
        // Show alternative loading spinner here...
    </ng-template>
</paginated-infinite-scroll>

angular typescript

Answer 1

Answer №1

After investigation, I discovered that the bug was not originating from the code mentioned in my initial query. The issue stemmed from an observable present within a directive. I had neglected to unsubscribe from this observable. The directive was set up to subscribe to authentication events, and whenever there was a login/logout action, it would attempt to add or remove the connected component accordingly. However, since the component was being destroyed upon navigation, the bug manifested itself.

Here is the logic implemented in my directive:

@Directive({
    selector: '[loggedIn]'
})
export class LoggedInDirective implements OnInit, OnDestroy {
    private which: boolean = false;
    private _loggedIn: boolean = false;

    view = this.templateRef.createEmbeddedView(null);
    authEventsSub: Subscription;

    constructor(
        private viewContainerRef: ViewContainerRef,
        private templateRef: TemplateRef<any>
    ) {}

    ngOnInit() {
        this.authEventsSub = this.authEventsService.events$.subscribe((event: AuthEvent) => {
            this._loggedIn = (event === AuthEvent.LOGGED_IN) || (event === AuthEvent.READY);
            this.render();
        });
    }

    private render() {
        if (this.which) {
            if (this._loggedIn) {
                this.viewContainerRef.insert(this.view);
            } else {
                this.viewContainerRef.detach();
            }
        } else {
            if (this._loggedIn) {
                this.viewContainerRef.detach();
            } else {
                this.viewContainerRef.insert(this.view);
            }
        }
    }

    // ...
}

To address the issue, I added an unsubscribe call to the observable in the ngOnDestroy hook:

authEventsSub: Subscription;

constructor(
    private viewContainerRef: ViewContainerRef,
    private templateRef: TemplateRef<any>,
    private authEventsService: AuthEventsService,
) {}

ngOnInit() {
    this.authEventsSub = this.authEventsService.events$.subscribe((event: AuthEvent) => {
        this._loggedIn = (event === AuthEvent.LOGGED_IN) || (event === AuthEvent.READY);
        this.render();
    });
}

ngOnDestroy() {
    if (this.authEventsSub) {
        this.authEventsSub.unsubscribe();
    }
}

Answer 2

After investigation, I discovered that the bug was not originating from the code mentioned in my initial query. The issue stemmed from an observable present within a directive. I had neglected to unsubscribe from this observable. The directive was set up to subscribe to authentication events, and whenever there was a login/logout action, it would attempt to add or remove the connected component accordingly. However, since the component was being destroyed upon navigation, the bug manifested itself.

Here is the logic implemented in my directive:

@Directive({
    selector: '[loggedIn]'
})
export class LoggedInDirective implements OnInit, OnDestroy {
    private which: boolean = false;
    private _loggedIn: boolean = false;

    view = this.templateRef.createEmbeddedView(null);
    authEventsSub: Subscription;

    constructor(
        private viewContainerRef: ViewContainerRef,
        private templateRef: TemplateRef<any>
    ) {}

    ngOnInit() {
        this.authEventsSub = this.authEventsService.events$.subscribe((event: AuthEvent) => {
            this._loggedIn = (event === AuthEvent.LOGGED_IN) || (event === AuthEvent.READY);
            this.render();
        });
    }

    private render() {
        if (this.which) {
            if (this._loggedIn) {
                this.viewContainerRef.insert(this.view);
            } else {
                this.viewContainerRef.detach();
            }
        } else {
            if (this._loggedIn) {
                this.viewContainerRef.detach();
            } else {
                this.viewContainerRef.insert(this.view);
            }
        }
    }

    // ...
}

To address the issue, I added an unsubscribe call to the observable in the ngOnDestroy hook:

authEventsSub: Subscription;

constructor(
    private viewContainerRef: ViewContainerRef,
    private templateRef: TemplateRef<any>,
    private authEventsService: AuthEventsService,
) {}

ngOnInit() {
    this.authEventsSub = this.authEventsService.events$.subscribe((event: AuthEvent) => {
        this._loggedIn = (event === AuthEvent.LOGGED_IN) || (event === AuthEvent.READY);
        this.render();
    });
}

ngOnDestroy() {
    if (this.authEventsSub) {
        this.authEventsSub.unsubscribe();
    }
}

Angular 5: Unable to add a destroyed View to a ViewContainer

Answer №1

Similar questions

Is it possible to showcase a unique date for every item that gets added to a list?

Exploring Angular Performance: Template Functions vs. Properties. Which Method Reigns Supreme in Speed?

angular-oauth2-oidc - Issue with missing 'State' and 'Scope' parameters

What is the necessity behind keeping makeStyles and createStyles separate in Material UI with TypeScript?

Create a function in JavaScript that is able to accept a variable number of objects as arguments

By utilizing a function provided within the context, React state will consistently have its original value

Encountering issues when trying to import const enums in a webpack project using babel

React-router-dom TypeScript error when defining the type of the prop parameter in the loader

Issue with react router v6: Component fails to render even though route has been changed

What is the best way to address dynamic meta tags in Angular server-side rendering (SSR

There seems to be an issue in Angular as it is unable to retrieve /

When utilizing *ngIf in Angular 2, the issue of #elmentRef remaining undefined still persists

What is the best way to run tests on this method using Jest?

`How can I incorporate typography into my Angular Material design?`

Setting a blank value or null equivalent to a field: Tips and tricks

Connecting Angular components to the Document Object Model (DOM)

The error at core.js line 4442: TypeError - Unable to access the 'trim' property of an undefined value

Multiple asynchronous calls in Angular 2

Enhancing Readability of Public Static Member Variables in Typescript

Tips for displaying only the initial 15 characters of a text value