通用的@Component/@directive... 共用到各Lazy Page會遇到 error

** 這問題發生在 Angular4.0, 其它版本沒試過 **

如果你有一個 Component 或者 Directive 會在各個 Page 重複使用，你可能會遇到這樣的錯誤訊息

Error: Type ValidateOnBlurDirective is part of the declarations of 2 modules: SignupPageModule  and LoginPageModule! Please consider moving ValidateOnBlurDirective to a higher module that imports SignupPageModule and LoginPageModule. You can also create a new NgModule that exports and includes ValidateOnBlurDirective then import that NgModule in SignupPageModule and LoginPageModule.

意思就是說你有個 component 分別在 LoginPage 及 SignupPage 這2個 LazyPage 共用了。解決方法就是新建一個 NgModule ，將 該 Component 放在該 NgModule 裡，然後再由 LoginPage 及 SignupPage  Import 進去使用即可解決





例如我有個 HighlightDirective 的 directive 放在   [src]/directives/highlight.directive.ts
這個

@Directive({ 
    selector: '[myHighlight]' 
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

而這個 HighlightDirective 會在 Page1 & Page2 裡用到，這時我們則應該先建立一個 top module ，例如把這個 top module 叫 MyHighlightModule，將 directive HighlightDirective import 進 MyHighlightModule

import { NgModule, ErrorHandler } from '@angular/core';
import { HighlightDirective, } from '../directives/highlight.directive'

@NgModule({
 declarations: [
  HighlightDirective,
 ],
 exports: [
  HighlightDirective,
 ],
})
export class MyHighlightModule { }

然後分別在你的 Page1 及 Page2 的 imports 匯入
你的 Page1 則用如下 Import 使用, 切忌勿放到 declarations [X] 下

import { NgModule } from '@angular/core';
import { Page1 } from './page1';
import { MyHighlightModule } from '../../modules/highlight.module'

@NgModule({
 declarations: [
  Page1,
 ],
 imports: [
  IonicPageModule.forChild(Page1),
  MyHighlightModule,
 ],
 exports: [
  Page1
 ]
})
export class Page1Module { }

你的 Page2 則用如下 Import 使用

import { NgModule } from '@angular/core';
import { Page2 } from './page2';
import { MyHighlightModule } from '../../modules/highlight.module'

@NgModule({
 declarations: [
  Page2,
 ],
 imports: [
  IonicPageModule.forChild(Page2),
  MyHighlightModule,
 ],
 exports: [
  Page2
 ]
})
export class Page2Module { }