Angular Routing - No errors, however the component only "blinks" and disappears

Whenever my page loads, the component only "blinks" and disappears completely. It shouldn't be a matter of styles, since it's just gone. Nothing in dev tools. It's the same for all of my routes.

Here is the code.

app.routes.ts

import { Routes } from '@angular/router';

import { HomePageComponent } from './home-page/home-page.component';
import { TestPageComponent } from './test-page/test-page.component';

export const routes: Routes = [
{ path: 'home', component: HomePageComponent },
{ path: 'flashcards', component: TestPageComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
];


app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideClientHydration(),
]
};


app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';

@Component({
selector: 'app-root',
imports: [NavbarComponent, FooterComponent, RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})

export class AppComponent {
title = 'Biology';
}


app.component.html

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


The home and test page components are pretty much the base generated files.

I've tried official angular docs or youtube tutorials and it's still broken. I genuinely have no idea what's the problem. Please help me anyone. Thanks.

Continue reading...