Ionic3 Lazy Loading Unexpected directive imported

Question

I am using Ionic3, and am in the process of implementing Lazy Loading in order to improve startup performance.

I have converted the following:

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

As you can see, I import ControlMessages, which is a custom component (that worked perfectly with eager loading imported in app.module.ts).

However, when I try access the LoginEmailPage, I get the following runtime error:

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.

Any advise appreciated.

p.s. ControlMessages is still imported in app.module.ts for other pages that use it.

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

Here is a similar issue. However, the suggested solution says to put the import in app.module.ts, which is not conducive to lazy loading. stackoverflow.com/questions/43603515/… — Richard
– Richard, Commented May 4, 2017 at 8:19
no the solution says to remove the import from app.module.ts — Suraj Rao
– Suraj Rao, Commented May 4, 2017 at 8:21

Richard · Accepted Answer · 2017-05-04 09:35:05Z

1

Need to create a ControlMessagesModule and rather import that.

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

and

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

answered May 4, 2017 at 9:35

Richard

8,99534 gold badges128 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ionic3 Lazy Loading Unexpected directive imported

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related