Angular 15: Why are my input elements empty when wrapped with a router-outlet?

Question

I have a simple app that has a login screen and once you click sign in you are taken to the homepage. The login screen contains a title, two text inputs and a button. When not wrapped in router-outlet, everything shows fine. But when I wrap it into the router-outlet, the labels, placeholders and warning messages do not show on the inputs until i start typing into the form.

Even the button inside the header, which is not wrapped within the router but lives directly above, does not get populated with its label.

My app.component.html:

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

I am using angular 15.

Here's what it looks like: Before typing After typing. The first letter I type in seems to not get accepted either.

I can add more code if necessary.

My app-routing module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; 
import { LoginFormComponent } from './components/login-form/login-form.component'; 
import { OverviewComponent } from './components/overview/overview.component';

const routes: Routes = [   
 { path: '', redirectTo: '/sign-in', pathMatch: 'full' },   
 { path: 'sign-in', component: LoginFormComponent},   
 { path: 'overview', component: OverviewComponent }, 
 // { path: '**', component: PageNotFoundComponent } 
];

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

Removing the routing-outlet resolves the issue and inputs once again have all necessary text, but isn't a solution since I need routing. I've tried setting constants into the components as well to fill in the inputs, but nothing gets filled until I start typing, making me think it has to do something with re-rendering.