Screen is disappeared in angular 19

I’m new to Angular and I’m currently facing an issue. Whenever I serve the project, the screen initially displays the component, but once the DOM is fully loaded, all the components disappear. I would appreciate any guidance or suggestions on how to resolve this.

App.component.html:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>


app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration, withEventReplay } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { HomeComponent } from './Components/home/home.component';
import { AboutusComponent } from './Components/aboutus/aboutus.component';
import { ContactusComponent } from './Components/contactus/contactus.component';
import { HeaderComponent } from './Components/header/header.component';
import { FooterComponent } from './Components/footer/footer.component';
import { TodosComponent } from './Components/todos/todos.component';
import { TodoDetailsComponent } from './Components/todo-details/todo-details.component';
import { RouterOutlet } from '@angular/router';
import { NotFoundComponent } from './Components/not-found/not-found.component';


@NgModule({
declarations: [
],
imports: [
BrowserModule,
AppRoutingModule,
RouterOutlet,
FormsModule,
HeaderComponent,
FooterComponent,
],
providers: [
provideClientHydration(withEventReplay()),
provideHttpClient(withFetch())
],
bootstrap: []
})
export class AppModule { }


app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './Components/home/home.component';
import { AboutusComponent } from './Components/aboutus/aboutus.component';
import { TodosComponent } from './Components/todos/todos.component';
import { TodoDetailsComponent } from './Components/todo-details/todo-details.component';
import { ContactusComponent } from './Components/contactus/contactus.component';
import { NotFoundComponent } from './Components/not-found/not-found.component';

const routes: Routes = [
{path:'', redirectTo:'/home', pathMatch:'full'},
{path:'home', component: HomeComponent, title:'Home'},
{path:'aboutUs', component: AboutusComponent, title:'About Us'},
{path:'todos', component: TodosComponent, title:'Todos'},
{path:'todos/:id', component: TodoDetailsComponent, title:'Todo Details'},
{path:'contactus', component: ContactusComponent, title:'Contact Us'},
{path:'**', component: NotFoundComponent, title:'Not Found'},

];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {

}

Continue reading...