Ionic3延迟加载意外指令导入

Question

我正在使用 Ionic3，并且正在实施延迟加载以提高启动性能。

我已经转换了以下内容：

loginemail.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginEmailPage } from './loginemail';
import { ControlMessages } from '../validation/controlMessages';

@NgModule({
  declarations: [LoginEmailPage],
  imports: [IonicPageModule.forChild(LoginEmailPage), ControlMessages],
})
export class LoginEmailPageModule { }

如您所见，我导入了 ControlMessages，这是一个自定义组件（与 app.module.ts 中导入的预加载完美配合）。

但是，当我尝试访问 LoginEmailPage 时，我收到以下运行时错误：

core.es5.js:1085 ERROR Error: Uncaught (in promise): Error: Unexpected directive 'ControlMessages' imported by the module 'LoginEmailPageModule'. Please add a @NgModule annotation.
Error: Unexpected directive 'ControlMessages' imported by the module 'LoginEmailPageModule'. Please add a @NgModule annotation.

任何建议表示赞赏。

附言ControlMessages 仍被导入到 app.module.ts 以供其他使用它的页面使用。

controlMessages.ts

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ValidationService } from './validationService';

@Component({
  selector: 'control-messages',
  template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ControlMessages {
  @Input() control: FormControl;

  constructor() {

  }

  get errorMessage(): string {
    for (let propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
      }
    }

    return null;
  }
}

Answer 1

需要创建一个ControlMessagesModule 并导入它。

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { CommonModule } from '@angular/common';
import { ControlMessages } from './controlMessages';

@NgModule({
  declarations: [ControlMessages],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [ControlMessages]
})
export class ControlMessagesModule { } 

和

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginEmailPage } from './loginemail';
import { ControlMessagesModule } from '../validation/controlMessages.module';

@NgModule({
  declarations: [LoginEmailPage],
  imports: [IonicPageModule.forChild(LoginEmailPage), ControlMessagesModule],
  exports: [LoginEmailPage]
})
export class LoginEmailPageModule { }