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

"Design a function that generates a return type based on the input array

Guide on integrating external libraries with Angular CLI

The parameter cannot be assigned the readonly type 'X' in this context

Encountering the error "unrecognized pseudo-class :lang" following the Angular update

What is the function of the Angular dependency injection mechanism?

Looking for a youtube.d.ts file to integrate the youtube-iframe-api with Angular 2?

Guide to transmitting a boolean value from a service to a component using observables in Angular

Angular: Unable to access values of non-existent data (reading '0')

Obtaining the display name and phone numbers of a contact

Angular - combining lowercase letters in an attribute

Material 2's portal host fails to display the specified template portal

How to send parameters with the fetch API

The dependencies of Nest are unable to be resolved by the system

What methods can I utilize to manage the output generated by the C# backend project?

Ionic Angular and Capacitor causing a black screen post social login

Troubleshooting the creation of migration paths in NestJS with TypeORM

Leveraging JSON data in subsequent GET request in Ionic 3

Utilize Angular 2 to search and filter information within a component by inputting a search term from another component

Struggling to find the definition of a Typescript decorator after importing it from a separate file

Is it possible to globally modify the component reference <dropdown-component> name in Angular during runtime in a dynamic manner?