White page when I use setTimeout

Question

I created an intro/splash screen component that should display for 5 seconds and then automatically navigate to the login page.

The strange thing is:

If I don’t use setTimeout, Angular correctly renders the content of the component’s HTML template.
As soon as I wrap the navigation in a setTimeout (or any asynchronous operation), the page stays completely blank — nothing from the template is displayed.

TS file:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-introduction-page',
  imports: [],
  templateUrl: './introduction-page.html',
})
export class IntroductionPage implements OnInit{
  private intervalId: any;

  constructor(private router: Router) {
  }

  ngOnInit(): void {
    setTimeout(() => {
      this.router.navigate(['/login'])
      
    }, 5000);}
}

HTML file:

<p>Hello</p>

This code itself working fine for me

Velusamy Venkatraman
– Velusamy Venkatraman

2025-11-20 22:59:28 +00:00
Commented yesterday — Velusamy Venkatraman
– Velusamy Venkatraman, Commented yesterday

Lavi Kumar · Accepted Answer · 2025-11-20 07:08:22Z

0

The splash screen renders blank because Angular can’t detect changes inside your setTimeout() callback (it runs outside Angular’s zone). Wrap the navigation inside NgZone.run():

import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-introduction-page',
  templateUrl: './introduction-page.html',
})
export class IntroductionPage implements OnInit {
  constructor(private router: Router, private ngZone: NgZone) {}

  ngOnInit(): void {
    setTimeout(() => {
      this.ngZone.run(() => {
        this.router.navigate(['/login']);
      });
    }, 5000);
  }
}

Alternatively, use Angular’s built-in timer() from RxJS instead of setTimeout().

answered 2 days ago

Lavi Kumar

2771 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph Ajayi · Accepted Answer · 2025-11-20 14:07:48Z

0

Try to run the setTimeout inside Angular's zone to ensure proper change detection: just as suggested above

import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-introduction-page',
  imports: [],
  templateUrl: './introduction-page.html',
})
export class IntroductionPage implements OnInit {
  constructor(private router: Router, private ngZone: NgZone) {}

  ngOnInit(): void {
    this.ngZone.run(() => {
      setTimeout(() => {
        this.router.navigate(['/login']);
      }, 5000);
    });
  }
}

answered yesterday

Joseph Ajayi

1

New contributor

Comments

BDK Web · Accepted Answer · 2025-11-20 14:45:15Z

0

Your component is missing standalone: true.

Without it, Angular does not treat the component as a standalone component, so the template is never rendered. It may look like it works until you introduce any async operation (like setTimeout), then Angular never runs change detection for that view and you get a blank page.

@Component({
  selector: 'app-introduction-page',
  standalone: true,
  imports: [],
  templateUrl: './introduction-page.html',
})
export class IntroductionPage implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    setTimeout(() => this.router.navigate(['/login']), 5000);
  }
}

If you’re not using standalone components, then make sure this component is declared in a module instead.

answered yesterday

BDK Web

13 bronze badges

New contributor

1 Comment

Eliseo yesterday

from Angular 19, the components are standalone by defect

Collectives™ on Stack Overflow

White page when I use setTimeout

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related