angular - can't run rxjs interval with angular universal

Question

I made a carousel effect through the RXJS's interval timing to change parameter.

I found that it works in development mode(ng serve), but it does not work properly in the universal mode, It's can't enter the page.

For example:

n: number = 0;
max: number = 5;

constructor(){}

ngOnInit() {
  this.carousel();
}

carousel() {
  this.subscription = interval(2000).subscribe(() => {
      //In universal, the console.log message show in node.js background log message not in browser console message. Each time the page is reorganized, it will be executed once and cannot be destroyed.
      console.log(`show the photo: ${this.n}`);
      if (this.n>this.max){
        this.n = 0;
      }else{
       this.n = this.n+1;
      }
  }
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

I found in universal model, assume that the carousel effect is on the page B, you can successfully enter page B through the link on page A, but opening page B directly will fail.

I tried to start the carousel in ngAfterContentInit() and it doesn't work.

Answer 1

If you use angular universal, you need to use isPlatformBrowser to exclude code that can only run on the front end.

Eaxmple:

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID } from "@angular/core";

constructor(
    @Inject(PLATFORM_ID) private platformId: Object
  ) { }

do(){
    if (isPlatformBrowser(this.platformId)) {
      //do something, only runs on the front end
    }
}