Пользовательский компонент в ионном v3

Я хотел создать простой компонент и включить его на странице. Я создал его с помощью ionic g component my-header (ionic-cli v3 beta), исправил ошибку IonicPageModule, а затем добавил на другую страницу. Затем я получаю эту ошибку:

Error: Uncaught (in promise): Error: Template parse errors:
'my-header' is not a known element:
1. If 'my-header' is an Angular component, then verify that it is part of this module.
2. If 'my-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

"MyHeaderComponent" автоматически добавлен в объявления @NgModule.

Спасибо за вашу помощь.

EDIT:

Компонент находится внутри моей папки components:

компонента/мой заголовок/мой-header.html

<div>
  {{text}}
</div>

компонента/мой заголовок/мой-header.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MyHeaderComponent } from './my-header';

@NgModule({
  declarations: [
    MyHeaderComponent,
   ],
  imports: [
    IonicModule,
  ],
  exports: [
    MyHeaderComponent
  ],
  entryComponents:[
    MyHeaderComponent
  ]
})
export class MyHeaderComponentModule {}

компонента/мой заголовок/мой-header.scss

my-header {}

компонента/мой заголовок/мой-header.ts

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

@Component({
  selector: 'my-header',
  templateUrl: 'my-header.html'
})
export class MyHeaderComponent {

  text: string;

  constructor() {
    console.log('Hello MyHeaderComponent Component');
     this.text = 'Hello World';
  }

}

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

/* imports */
import { MyHeaderComponent } from '../components/my-header/my-header';

@NgModule({
  declarations: [
    MyApp,
    MyHeaderComponent
  ],
...

страницы/главная/home.html

Ответы

Ответ 1

Вам не нужно импортировать MyHeaderComponent в ngModule.

Вы должны импортировать MyHeaderComponentModule в свой модуль страницы, где вы хотите использовать это.

 imports: [
    MyHeaderComponentModule,
  ],

Ответ 2

Так как ионная 3 поддерживает ленивую загрузку, вам не нужно импортировать свой пользовательский компонент в приложение. module.ts. Вместо этого вы можете импортировать его в конкретный файл page module.ts. Например, если вы хотите использовать свой пользовательский компонент на своей домашней странице, вы можете просто импортировать его в файл home.module.ts, как указано ниже:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { MyHeaderComponent }from '../../components/myheader/myheader';

@NgModule({
  declarations: [
    HomePage,
    MyHeaderComponent
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
   
  ],
  exports: [
    HomePage,
  ]
})
export class HomePageModule {
 
}

Ответ 3

Вот мой модуль. Надеюсь, это поможет вам ответить на ваш вопрос:

@NgModule({
  declarations: [
    TestPage
  ],
  imports: [
    IonicPageModule.forChild(TestPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule
  ],
  exports: [
    EntriesPage,
  ],
  providers:[
    NavigatorComponent
  ]
})

Ответ 4

Просто для пояснения: я использую настраиваемый navigatorComponent на многих страницах (компонент многократного использования).

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { PipesModule } from '../../pipes/PipesModule';
import { NavigatorComponent } from '../../components/navigator/navigator';
import { ComponentsModule } from '../../components/components.module';
import { NavigatorComponentModule } from '../../components/navigator/navigator.module';

@NgModule({
  declarations: [
    TestPage,

  ],
  imports: [
    IonicPageModule.forChild(EntriesPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule

  ],
  exports: [
   TestPage,

  ],
  providers:[
    NavigatorComponent
  ]
})
export class TestPageModule {}

Примечание. НавигаторComponent имеет 4 файла: ts, css, html и yourcomponentname.module.ts. Команда "ionic g component" не генерирует последний файл (yourcomponentname.module.ts). Поэтому я сделал это.

Ответ 5

Вы должны импортировать компонент в модуль. Убедитесь, что вы также экспортируете этот компонент.

@NgModule({
    imports: [
        IonicModule,
    ],
    declarations:[
        MyHeaderComponent
    ],
    exports:[
        MyHeaderComponent
    ],
    entryComponents:[
        MyHeaderComponent
    ]

})