Syntax errors only in app.component.html | Angular Community | Page 1

Hi,
im trying out the new angular 18 features and I wonder why i get unresolved reference errors, but only in my app.component.html.

It looks like this

<body>
  <div class="layout-grid" [class.navbar-closed]="!isNavbarOpen()">
    <app-topbar></app-topbar>
    <app-navbar></app-navbar>
    <app-main></app-main>
    <app-footer></app-footer>
  </div>

</body>

and the component looks like this

import { Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FooterComponent } from './layout/footer/footer.component';
import { MainComponent } from './layout/main/main.component';
import { NavbarComponent } from './layout/navbar/navbar.component';
import { TopbarComponent } from './layout/topbar/topbar.component';
import { NavbarStore } from './store/navbar.store';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  imports: [RouterModule, TopbarComponent, NavbarComponent, MainComponent, FooterComponent],
  standalone: true,
})
export class AppComponent {
  title = 'app';
  navbarStore = inject(NavbarStore);
  isNavbarOpen = this.navbarStore.isOpen;
}

So basically just how I did it for other components. However Im getting errors as if I havent imported the components (see screenshot)
Does somebody know what's the issue here? It compiles perfectly, so it is something in angular.json or tsconfig that I need to look for?

#Syntax errors only in app.component.html