为什么我的Angular应用程序找不到嵌入式组件？

Question

这是嵌入式组件HomeTabComponent。

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

嵌入式组件HomeTabComponent在home.module.ts中声明：

import { HomeTabComponent } from "./home-tab/home-tab.component";

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

然后将其嵌入home.component.html：

<section id="product-carousel">
    <app-home-tab></app-home-tab>
</section>

但出现以下错误：

compiler.js:2175 Uncaught Error: Template parse errors:
'app-home-tab' is not a known element:
1. If 'app-home-tab' is an Angular component, then verify that it is part of this module.
2. If 'app-home-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' 
of this component to suppress this message. ("
</section>
    <section id="product-carousel">
        [ERROR ->]<app-home-tab></app-home-tab>
        <!-- <div class="row">

HomeRoutingModule：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [];

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

Answer 1

[发生这种情况时，webpack无法加载该组件。修复最简单的方法是将组件文件夹移到其他任何地方，然后再移回去。 Angular的文件监视程序修复了损坏的引用。

Answer 2

[不确定是否已完成，但是应该在父NgModule的导入中添加HomeModule，例如，如果在应用模块上使用它，则：

import { HomeModule } from './home/home.module';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HomeModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

示例网址：https://stackblitz.com/edit/angular-ivy-76w6xq?file=src%2Fapp%2Fapp.component.html