'ap-vmessage' is not a known element

Erro:

Uncaught Error: Template parse errors:
'ap-vmessage' is not a known element:
1. If 'ap-vmessage' is an Angular component, then verify that it is part of this module.
2. If 'ap-vmessage' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
            placeholder="user name"
            autofocus>
        [ERROR ->]<ap-vmessage *ngIf="loginForm.get('username').errors?.required"
                     text='Username "): ng:///HomeModule/SigninComponent.html@10:8

No signin.component.html, estou chamando da seguinte forma:

<ap-vmessage *ngIf="loginForm.get('username').errors?.required"
                     text='Username is required'>
</ap-vmessage>

Meu signin.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  templateUrl: './signin.component.html',
})
export class SigninComponent implements OnInit {
  loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    })
  }
}

Meu home.module.ts:

import { SigninComponent } from './signin/signin.component';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [SigninComponent],
  imports: [ReactiveFormsModule, CommonModule]
})
export class HomeModule {

}

vmessage.component.html:

<small class="text-danger d-block mt-2">
  {{text}}
</small>

vmessage.component.ts:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'ap-vmessage',
  templateUrl: './vmessage.component.html'
})
export class VMessageComponent {
  @Input() text = '';
}

vmessage.module.ts:

import { CommonModule } from '@angular/common';
import { VMessageComponent } from './vmessage.component';
import { NgModule } from '@angular/core';

@NgModule ({
  declarations: [VMessageComponent],
  exports: [VMessageComponent],
  imports: [CommonModule]
})
export class VMessageModule {}

E por fim, meu app.module.ts:

import { VMessageModule } from './shared/components/vmessage/vmessage.module';
import { HomeModule } from './home/home.module';
import { PhotoListResolver } from './photos/photo-list/photo-list.resolver';
import { ErrorsModule } from './errors/errors.module';
import { AppRoutingModule } from './app.routing.module';
import { PhotosModule } from './photos/photos.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  // Declarar componentes para funcionar
  declarations: [
    AppComponent
  ],
  // Importar modules para funcionar
  imports: [
    BrowserModule,
    PhotosModule,
    AppRoutingModule,
    ErrorsModule,
    HomeModule,
    VMessageModule
  ],
  providers: [
    PhotoListResolver
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Minha organização do código está um pouco diferente do que a do professor, mas acredito que dê pra entender.