UntilDestroy() in the AppComponent with AngularUniversal

[FunnyGhost]

First: thanks for the awesome utility!

Now, I have an interesting scenario: If I use the UntilDestroy decorator in the AppComponent, the Server Side Rendering fails with ReferenceError: Document is not defined.

But this triggered another question. Do we actually need to manage app wide subscriptions? Those would be cleared anyway when you close the website, right? What about when we do Server Side rendering?

[arturovt]

Hey @FunnyGhost . Not sure I understand your question correctly. We don't have any references to document inside the codebase thus I don't think it's related somehow, you have to use the DOCUMENT token except document directly.

The topic of clearing subscriptions is a huge topic. I'm sure there are dozens of informations across the internet where you can find "why you have to always unsubscribe from observables".

[FunnyGhost]

So, what I have in my component is something like this:

@UntilDestroy()
@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    @Inject(DOCUMENT) private document: Document,
  ) {}

If I comment out the UntilDestroy() line, Server Side Rendering works. If I don't ServerSideRendering fails when starting the server.

My second question was specifically about the AppComponent and was more of an opinion ask, because I understand the subscription management part. Sorry for not being clear.
So, do you think using pipe(untilDestroy(this)) is useful in the AppComponent? I mean, if the AppComponent is destroyed, there is no App.

[arturovt]

1. Well, you can create a minimal reproducible example and I will definitely have a look (the example that's related to injecting document).

2. You don't have to unsubscribe in AppComponent if your application is running in browser w/o server-side rendering. Of course until you're running micro-frontend application where Angular app can be bootstrapped and destroyed multiple times. You do have to unsubscribe in AppComponent when using server-side rendering, since application is bootstrapped and destroyed on the server each time the request is made. Most next callbacks capture this, e.g.:

export class AppComponent {
  ngOnInit() {
    this.router.events.subscribe(event => {
      this.titleService.setTitle(...); // 💡 Just a rough example.
    });
  }
}

The above example does create a memory leak. Because it captures this, as long as there is a reference to () => this.titleService.setTitle(...), this will not be GC'd.

[FunnyGhost]

That makes sense. Thanks a lot for the clear explanation!