angular - 同じモジュールで宣言された Angular コンポーネントを相互に使用する

Question

モジュール M で宣言されたコンポーネント A と、同じモジュール M で宣言された別のコンポーネント B があるとします。

Angular 6 で正確に言うと、以前のバージョンの Angular でこのようなことを行いました。

しかし、私はエラーが発生します

NG8001: 'B' は既知の要素ではありません

角度11で

以下はフォルダ構造です

app
-home
-- home-footer.component.html
-- home-footer.component.ts
-- home.component.html
-- home.component.less
-- home.component.spec.ts
-- home.component.ts
-- home.module.ts
app-routing.module.ts
app.component.html
app.component.less
app.component.spec.ts
app.component.ts
app.module.ts

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [{
  path: "",
  component: HomeComponent
}];

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

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeFooterComponent } from './home-footer.component';
import { HomeComponent } from './home.component';



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

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

ホームフッター.コンポーネント.ts

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

@Component({
  selector: 'app-home-footer',
  templateUrl: './home-footer.component.html'
})
export class HomeFooterComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

home.component.html

<p>home works!</p>
<app-home-footer></app-home-footer>

home-footer.component.html

<span>Home Footer works</span>

エラーメッセージ

√ Browser application bundle generation complete.

    Error: home/home.component.html:2:1 - error NG8001: 'app-home-footer' is not a known element:
    1. If 'app-home-footer' is an Angular component, then verify that it is part of this module.
    2. If 'app-home-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    
    2 <app-home-footer></app-home-footer>
      ~~~~~~~~~~~~~~~~~
    
      home/home.component.ts:5:16
        5   templateUrl: './home.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component HomeComponent.

バージョン情報 ：

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.1.1
Node: 10.16.3
OS: win32 x64

Angular: 11.1.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.1
@angular-devkit/build-angular   0.1101.1
@angular-devkit/core            11.1.1
@angular-devkit/schematics      11.1.1
@angular/cli                    11.1.1
@schematics/angular             11.1.1
@schematics/update              0.1101.1
rxjs                            6.6.3
typescript                      4.1.3