Пользовательский компонент не отображается в Ionic v4 + Angular 6

Я пытаюсь добавить пользовательский компонент в мое веб-приложение Ionic v4. Я думаю, что что-то упустил, но я не знаю что. Консоль не показывает ошибок, но компонент, который она никогда не использовала (я также пробовал вести журнал внутри.ts компонента, и он никогда не печатался на консоли). Вот код:

в приложении / компоненты / пользовательский компонент / пользовательский компонент.component.html

<p>
  my custom-component works!
</p>

в приложении / компоненты / пользовательский компонент / пользовательский компонент.component.ts

@Component({
  selector: 'app-custom-component',
  templateUrl: './custom-component.component.html',
  styleUrls: ['./custom-component.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class CustomComponentComponent implements OnInit {

  constructor() {}

  ngOnInit() {}
}

в приложении / компоненты / компоненты.module.ts

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomComponentComponent } from './custom-component/custom-component.component';

@NgModule({
  imports : [
    CommonModule,
    IonicModule.forRoot(),
  ],
  declarations: [
    ProgressBarComponent,
    CustomComponentComponent],
    exports: [CustomComponentComponent, ProgressBarComponent],
  entryComponents: [],
})
export class ComponentsModule {}

Затем я использую пользовательский компонент на моей домашней странице следующим образом:

в приложении / home / home.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { ComponentsModule } from '../components/components.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: HomePage }]),
    ComponentsModule
  ],
  declarations: [HomePage],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomePageModule {}

и в app / home / home.page.html

<ion-content>
--> <app-custom-component></app-custom-component> <--
</ion-content>

Я запускаю приложение с помощью команды ionic serve, и вот результат

Скриншот

Как видите, в консоли нет ошибок, но содержимое компонента не отображается. Что мне не хватает? Спасибо

1 ответ

По предложению пользователя jjdev на forum.ionicframework.com

Попробуйте включить CustomComponentComponent в массиве entryComponents в ComponentsModule

Это решило проблему. Благодаря сообществу ionicframework

Другие вопросы по тегам