ionic 3 angular Unhandled Promise 拒绝：模板解析错误：

Question

我使用 ionic start 生成了一个空白应用程序。那运行良好。

现在我添加了一个名为 opty 的新页面 ionic g page opty。

单击按钮时使用 navPush 从 home.html 到 opty.html 创建导航。效果很好。

现在，我添加了一个组件，使用： ionic g 组件 opty-header

到这里为止一切都很好。现在，如果将其包含在 opty.html 中

它以错误结束：

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' 

我的 opty.module.ts 看起来像

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 {}

我的 components.module.ts 看起来像

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

由于 opty.module.ts 明确导入 OptyHeaderComponent 并声明，所以我无法理解如何修复它。

Answer 1

因为在您的components.module.ts 文件中，您声明并导出了OptyHeaderComponent：

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

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

现在在opty.module.ts 文件中只需导入ComponentsModule，如下所示：

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 { }

Ionic 中的延迟加载功能仍在改进中，但这是处理延迟加载的页面和组件的推荐方式。 因此，您需要创建一个包含所有组件的单个模块（ComponentsModule），然后将该模块导入每个页面模块中，使其在该页面中可用。

Answer 2

首先您的 components.module 需要在导入时列出组件模块的类。

components.module

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

您的 opty 模块需要导出 header 组件，以便它可以在其他组件中使用

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
  ]
})