從其他模塊角度找不到組件

Question

我聲明AppModule並導入我的HomeModule。

@NgModule({
  declarations: [
    AppComponent

  ],
  imports: [
    BrowserModule,
    HomeModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

那是我的HomeModule

@NgModule({
  declarations: [
    HomeComponent,
    ContactComponent,
    Page404Component
  ],
  imports: [
    BrowserModule,
    HomeRoutingModule,
    MainModule,
    ReactiveFormsModule

  ],
  providers: []
})
export class HomeModule { 

}

接下來，我嘗試添加到app.component一個home.component所以我做了這樣的事情：

@Component({


     selector: 'em-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss']
   })
    export class HomeComponent {
}

到AppComponent.html：

<div>
<em-home></em-home>
</div>

然后我在瀏覽器中收到錯誤：

'em-home' is not a known element:
1. If 'em-home' is an Angular component, then verify that it is part of this module.
2. If 'em-home' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<div>
[ERROR ->]<em-home></em-home>

誰能解釋我怎么了？

Answer 1

您忘記了home模塊組件中的exports 。

您應該在這里添加：

@NgModule({
  declarations: [
    HomeComponent,
    ContactComponent,
    Page404Component
  ],
  imports: [
    BrowserModule,
    HomeRoutingModule,
    MainModule,
    ReactiveFormsModule

  ],
exports:[HomeComponent,
        ContactComponent,
        Page404Component], //<--here
providers: []
})
export class HomeModule { 

}

注意，雖然您不需要導出提供程序。