ionic 3 eckige Unhandled Promise Ablehnung: Template Parse Fehler:

Question

Ich generierte eine leere App mit ionischen Start. Das lief gut.

Jetzt habe ich eine neue Seite namens Opty mit ionic g Seite Opty hinzugefügt.

Erstellt eine Navigation mit navPush von home.html zu opty.html auf Knopfdruck. Funktioniert super.

Nun habe ich eine Komponente mit: ionischen g Komponente Opty-header

Alle bis hier in Ordnung. Nun, wenn dies auf dem opty.html als

es endet mit Fehler:

Unhandled Promise rejection: Template parse errors: 
'opty-header' is not a known element: 
1. If 'opty-header' is an Angular component, then verify that it is part of this module. 
2. If 'opty-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" 

<ion-content padding> 
    [ERROR ->]<opty-header></opty-header> 
</ion-content> 
"): ng:///AppModule/OptyPage.html@16:2 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors: 
'opty-header' 

Mein opty.module.ts sieht aus wie

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { OpportunitiesPage } from './opportunities'; 

import { ComponentsModule } from '../../components/components.module' 


@NgModule({ 
    declarations: [ 
    OpportunitiesPage, 
    ], 
    imports: [ 
    IonicPageModule.forChild(OpportunitiesPage), 
    ComponentsModule 
    ], 
}) 
export class OpportunitiesPageModule {} 

mein components.module.ts sieht aus wie

import { NgModule } from '@angular/core'; 
import { OptyHeaderComponent } from './opty-header/opty-header'; 
@NgModule({ 
    declarations: [OptyHeaderComponent], 
    imports: [], 
    exports: [OptyHeaderComponent] 
}) 
export class ComponentsModule {} 

als opty.module.ts explictly ist die OptyHeaderComponent sowie Dezember Import Ich weiß nicht, wie ich es beheben kann.

Answer 1

sein

Da Sie in Ihrer components.module.ts Datei dendeklarieren und exportieren:

import { NgModule } from '@angular/core'; 
import { OptyHeaderComponent } from './opty-header/opty-header'; 

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

nun in der opty.module.ts Datei nur die ComponentsModule importieren, wie folgt aus:

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { OptyPage } from './opty'; 

// import the ComponentsModule... 

@NgModule({ 
    declarations: [ 
    OptyPage 
    ], 
    imports: [ 
    IonicPageModule.forChild(OptyPage), 
    ComponentsModule // The ComponentsModule includes the OptyHeaderComponent 
    ] 
}) 
export class OptyPageModule { } 

Die faule Last-Funktion noch in Ionic verbessert wird, aber dies ist die empfohlene Methode, mit Seiten zu arbeiten und Komponenten, die faul geladen sind. Sie würden also ein einzelnes Modul mit allen Komponenten (ComponentsModule) erstellen und dieses Modul dann einfach in jedes Seitenmodul importieren, um es auf dieser Seite verfügbar zu machen.

Answer 2

Zuerst Ihre components.module müssen auf die Importe die Klasse der Komponente Modul auflisten.

components.module

import { NgModule } from '@angular/core'; 
import { OptyHeaderComponent } from './opty-header/opty-header'; 
@NgModule({ 
    imports: [OptyHeaderComponentModule] 
}) 
export class ComponentsModule {} 

Ihr Opty Modul benötigt die Header-Komponente exportiert, so kann es die Verwendung in anderen Komponenten

opty.module.ts

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { OptyPage } from './opty'; 

import { OptyHeaderComponent } from '../../components/opty-header/opty-header' 
@NgModule({ 
    declarations: [ 
    OptyPage, 
    OptyHeaderComponent 
    ], 
    imports: [ 
    IonicPageModule.forChild(OptyPage) 
    ], 
    exports: [ 
    OptyHeaderComponent 
    ] 
})