Ionic 4中的页面未呈现组件

Question

我正在尝试完成Ionic的《 Angular英雄之旅》指南，但遇到了一些问题。

可能是因为我误解了有关Ionic的工作原理的一些基本知识，但是在这里：

我已经制作了一个“英雄”组件：

导出带有选择器应用程序英雄的HeroesComponent：

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

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

  heroName = "Regularhero";

  constructor() { }

  ngOnInit() {
  } 

}

我将其导入我的主页：

import { Component } from '@angular/core';
import {HeroesComponent} from '../heroes/heroes.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  title = "Tour of Heroes";

}

然后我尝试在home.page.html中使用app-heroes组件：

<ion-header>
  <ion-toolbar>
    <ion-title>
      <h1>{{title}}</h1>
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <app-heroes>

  </app-heroes>
</ion-content>

失败，应用程序编译，页面尝试加载。

但是，在控制台中我遇到了所有错误之母，这是一个模板解析错误，表明我需要验证app-heroes是否是模块的一部分。

根据对角度框架的理解，我不知道我在做什么错，但是由于某种原因，它不起作用。所以请帮助我，感觉到我对ionic4 / angular有一些误解

编辑： 根据要求，这是我的app.module：

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

@NgModule({
  declarations: [AppComponent, HeroesComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

您忘记了在HomeModule

中声明HeroesComponent。

@NgModule({
  ...
  declarations: [..., HeroesComponent],
  ...
})
export class HomeModule {}