模板解析错误：X不是已知元素

Question

我的组件'countries-menu'有一些问题。该组件在另一个页面中工作正常，所以问题不在于组件（我不确定，但我认为我的组件没问题）。也许宣言中存在冲突，或者我不知道。

我的组件HTML：

<form [formGroup]="form">
    <ion-item>
        <ion-label floating>{{ 'NEW_EVENT_COUNTRY_HEADER' | translate }}*</ion-label>
        <ion-select (ionChange)="selectCountry(country)" formControlName="country">
            <ion-option *ngFor="let country of countries">{{country.name}}</ion-option>
        </ion-select>
    </ion-item>
</form>

我的组件TS

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { TranslateService } from '@ngx-translate/core';

/**
 * Generated class for the CountriesMenuComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'countries-menu',
  templateUrl: 'countries-menu.html',
})
export class CountriesMenuComponent {
  @Input() form: FormGroup;
  @Input() currentEvent?: Object;
  private countries: Object;

  constructor(private httpClient: HttpClient, private translate: TranslateService) {
    const url = 'assets/countries/' + this.translate.currentLang + '.json';
    this.httpClient.get(url).subscribe((data) => {
      this.countries =  data;
    },                                 (error) => {
      this.httpClient.get('assets/countries/en.json').subscribe((data) => {
        this.countries =  data;
      });
    });
  }

  selectCountry(country: any) {
    if (this.currentEvent !== undefined) this.currentEvent[country] = country;
  }
}

components.module.ts我导出组件（有很多其他组件，但我删除它们以保存位置）

import { CountriesMenuComponent } from './countries-menu/countries-menu';

@NgModule({
  declarations: [...],
  imports: [IonicModule],
  exports: [...,
    CountriesMenuComponent],
})
export class ComponentsModule { }

然后在我想要使用组件的模块中，我使用声明数组。

import { CountriesMenuComponent } from '../../components/countries-menu/countries-menu';

@NgModule({
  declarations: [
    PersonalInformationPage,
    CountriesMenuComponent,
  ],
  imports: [
    IonicPageModule.forChild(PersonalInformationPage),
    TranslateModule.forChild(),
  ],
  providers: [
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    LeadService,
  ],
})
export class PersonalInformationPageModule { }

但是，当我使用我的HTML选择器时，我有这样的错误：模板解析错误：'countries-menu'不是已知元素：

HTML

...
<ion-col>
  <countries-menu [form]="form"></countries-menu>
</ion-col>
...

我在另一个网页上做了同样的事情，而且工作正常。我试图将声明放在app.module.ts中，以便在所有应用程序中访问但它不起作用。我不知道如何解决这个问题，也许我错过了什么？我不知道，但它在另一个页面上工作正常，没有其他任何东西。

谢谢你的阅读。

Answer 1

不要声明已在另一个模块中声明的类。看到这个documentation。当我读到“我在另一个网页上做了同样的事情，并且工作正常”时，我明白你犯了这个错误。因此，CountriesMenuComponent必须仅在ComponentsModule宣布。

尝试在ComponentsModule中声明您的组件并在PersonalInformationPageModule中导入此模块：

components.module.ts

import { CountriesMenuComponent } from './countries-menu/countries-menu';

@NgModule({
  declarations: [
      CountriesMenuComponent,
      ...          
  ],
  imports: [IonicModule],
  exports: [...,
    CountriesMenuComponent],
})
export class ComponentsModule { }

个人信息页面模块

@NgModule({
  declarations: [
    PersonalInformationPage,
  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(PersonalInformationPage),
    TranslateModule.forChild(),
  ],
  providers: [
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    LeadService,
  ],
})
export class PersonalInformationPageModule { }