Why is Angular saying my component is not standalone when it is?

I have the following component which was declared standalone:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-header',
standalone: true,
imports: [CommonModule],
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent {

}


I import this component in app.component.ts as follows:

import { Component } from '@angular/core';
import { HeaderComponent } from './shared/components/header/header.component';
import { FooterComponent } from './shared/components/footer/footer.component';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
imports: [HeaderComponent, FooterComponent]
})
export class AppComponent {
title = 'client';
}


I get the following error message during transpilation:

Error: src/app/app.component.ts:9:12 - error NG2010: 'imports' is only valid on a
component that is standalone.

9 imports: [HeaderComponent, FooterComponent]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/app.component.ts:11:14
11 export class AppComponent {
~~~~~~~~~~~~
Did you forget to add 'standalone: true' to this @Component?

Continue reading...