Directive in Ionic 3

Question

In app on Ionic 2 Directive declared in app.module.ts.

But in Ionic 3 (lazy load) this Directive not working. I try to import Directive in component module, such:

...
import { TabindexDirective } from '../../../app/tabindex.directive';

@NgModule({
  declarations: [
    ...
    TabindexDirective,
  ],
  imports: [
   ...
  ],
  exports: [
    ...
  ],
})
export class SignupModule {}

This code works fine, but then i Import this directive in another component module, i have error:

Type GoComponent is part of the declarations of 2 modules: SignupModule and AddPageModule! Please consider moving GoComponent to a higher module that imports

How to fix it and use Directives in Ionic 3?

Possible duplicate of [Ionic 3 iOS build --prod Not Working: Declarations of 2 Modules Error](https://stackoverflow.com/questions/46840108/ionic-3-ios-build-prod-not-working-declarations-of-2-modules-error) — Anthony Krivonos, Oct 24 '17 at 12:10

score 2 · Answer 1 · answered Mar 15 '18 at 09:05

The exact same thing happened to me as well while working on my recent project. The solution to this problem is to import the directive in the directives.module.ts, for instance:

import { NgModule } from '@angular/core';
import { XYZDirective } from './XYZ/XYZ';
@NgModule({
    declarations: [XYZDirective],
    imports: [],
    exports: [XYZDirective]
})
export class DirectivesModule {}

and, import the XYZDirective in your page where you need the directive.

score 1 · Answer 2 · answered Jul 19 '17 at 08:55

In Angular 2 and above which Ionic 3 internally uses, a directive or component cannot be declared in two modules.

You need to create a common module where all the components which need to be reused in other modules should be declared. Then you can import this common module in any module where you wish to use the component.

score 1 · Answer 3 · answered Oct 18 '18 at 07:07

Declaring directives in component has changed in ionic -3, actually it will bind by the module itself.

The solution to this problem is as following

Solution - 1

Declare and export all directive in one module, so you can use it in your module/ionic page

import { NgModule } from '@angular/core';
import { TabindexDirective } from '../../../app/tabindex.directive';
@NgModule({
    declarations: [TabindexDirective],
    imports: [],
    exports: [TabindexDirective]
})
export class SharedDirectives {}

and in your module you can import SharedDirectives

Solution - 2

Bind the directive in your module and import to child component using .forchild();

import { TabindexDirective } from '../../../app/tabindex.directive';
@NgModule({
  declarations: [
    TabindexDirective,
  ],
  imports: [
    ...
    IonicPageModule.forChild(TabindexDirective)
  ],

})
export class SignupModule {}

score 0 · Answer 4 · answered Oct 24 '17 at 12:12

I have experienced the exact same error recently, except with Angular components, when trying to build in --prod mode. I finally got it fixed by removing the .module.ts files from certain directives and components.

I marked your question as a duplicate, so please redirect to this link for several solutions to your issue.

score 0 · Answer 5 · answered Nov 12 '17 at 19:52

I don't want to replicate my answer, but here is the idea :

import { IonicModule; IonicPageModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { MyComponent } from '../directives/my-directive/my-directive';

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp),
    IonicPageModule.forChild(MyComponent) // Here
  ],
  declarations: [MyApp, MyComponent]
})

Original answer : https://stackoverflow.com/a/47253126/1311952

Directive in Ionic 3

5 Answers5