Ionic 4 (Angular 7) - проблема совместного использования компонентов

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

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

@NgModule({
  imports: [
    CommonModule,
    IonicModule
  ],
  declarations: [
    HeaderComponent
  ],
  exports: [
    HeaderComponent
  ]
})

export class SharedModule {}

если вы используете ionic 4, вам нужно отредактировать импорт IonicModule следующим образом:

import { IonicModule } from '@ionic/angular';

В моем случае проблема заключалась в том, что я пытался включить пользовательский компонент в компонент, который открывается с помощью модального окна. Мне нужно было добавить свой компонент в модуль родительской страницы.

У меня было много проблем с попыткой создать третий, то есть общий модуль, поэтому я нашел это очень полезным: https://forum.ionicframework.com/t/ionic-4-create-shared-component-up-to-date-example-please/176887

Я не следил за тем, как избавляться от вещей, но я добавил модуль в свой компонент (в той же папке). Затем на других страницах я смог импортировать этот модуль поверх, а затем в массив импорта, и это сработало.

В конце концов мне пришлось импортировать другие вещи, подобные тому, что сказал Гэри выше, но это просто здравый смысл.

В большинстве руководств, которые я нашел в Интернете, вы должны создать еще один компонент, а затем использовать модуль, который поставляется с ним. Я был очень сбит с толку, следуя такому образу мышления. Я думаю, что в основном это сводится к тому, что вы можете делиться модулями, но не компонентами. Не цитируйте меня, но я так понимаю сейчас.

header.component.html

     <ion-header>
...

    </ion-header>

header.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { feedService } from "../services/feed.service";

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

  ngOnInit() {}
}

header.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { HeaderComponent } from "./header.component";

@NgModule({
    imports: [
      ...  
    ],
    declarations: [HeaderComponent],
    exports: [HeaderComponent],
  })
  export class HeaderModule{
  }

наконец, чтобы использовать его в другом месте, на странице module.ts

import ... //other modules

import { HeaderModule  } from "../header/header.module";  //your relative path

@NgModule({
  imports: [
    //other modules
    HeaderModule,
  ],
  declarations: [],
  entryComponents: [],
})
export class MyPageModule {}

затем в html-файле этой страницы я могу использовать селектор, объявленный в header.component.ts выше.

<app-header ...></app-header>