Display issue with an observable in Angular 17: the page loads indefinitely

Question

I'm encountering an issue with Angular 17 where the use of an observable in my template seems to cause an indefinite loading of the page without displaying any errors in the browser console. This behavior didn't occur in Angular 16.

Context : I am a beginner in Angular. I want to display the values emitted by an Observable 'interval,' manipulated by the async pipe for real-time updating of an <h1> element in my template.

Environment : Ubuntu 22.04, Angular CLI 17.2.2, NodeJs 20.11.1

Observed Behavior: The page keeps loading indefinitely without displaying the number. There are no errors shown in the browser console.

Expected Behavior: The number should be displayed and updated every second.

Code :

app.component.ts :

import { Component, OnInit } from '@angular/core';
import { Observable, interval } from 'rxjs';

@Component({
  selector: 'app-root',
  template: '<h1>Counter : {{ numbers$ | async }}</h1>'
})
export class AppComponent implements OnInit {
  numbers$!: Observable<number>;

  ngOnInit(): void {
    this.numbers$ = interval(1000);
  }
}

I have the same issue if I use the subscribe function instead of the async pipe to display the emissions of intervals$.

app.component.ts :

import { Component, OnInit } from '@angular/core';
import { Observable, interval } from 'rxjs';

@Component({
  selector: 'app-root',
  template: '<h1>Counter : {{ currentValue }}</h1>'
})
export class AppComponent implements OnInit {
  numbers$!: Observable<number>;
  currentValue!: number;

  ngOnInit(): void {
    this.numbers$ = interval(1000);
    this.numbers$.subscribe(value => this.currentValue = value)
  }
}

I've tried these two codes in an Angular 16 project, it works properly.

Attempted Solutions:

• I've verified that the Observable numbers$ is correctly implemented. When I modified the code in app.component.ts to display the emissions of numbers$ in the terminal, the terminal correctly shows the different values.
• I've reset the development environment to correct a potential environment issue.
• I've created a new minimal Angular 17 project to isolate the issue, but it doesn't resolve the issue.
• I've consulted the Angular documentation and particularly regarding the AsyncPipe https://angular.io/api/common/AsyncPipe and tested the example with an observable, but it still presents the same issue.

Has anyone else encountered this problem or have any suggestions on what I could try next?

Thank you for your help !

Update :

Thanks to Andrew Allen for helping me resolve my problem.

When using the async pipe in a non-standalone Angular 17 project, it is necessary to import AsyncPipe in the @NgModule decorator in the app.module.ts file.

However, even after making these modifications, my page continues to load endlessly when attempting to display the values emitted by the observable. I discovered that this new issue is caused by the server-side rendering (SSR) I activated in my project. This is why the code with the subscription to the observable also fails to work. After disabling SSR and prerender, everything works perfectly.

I'm unsure of the reasons behind the inability to display values emitted by an observable. If someone could provide an explanation, I would greatly appreciate it.