Directive in Ionic 3

Ionic Framework ionic-v3
1

Hello!
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?

1 Like
2

How exactly do you do that?
The error message indicates that you are also declaring the directive there again which is not necessary and causes this quite clearly worded error message.

1 Like
3

I also have the same problem.
I create a directive with the CLI. It adds the directive to app.module.ts.
If I want to use on another page I have to import to that page.
But directive can not be imported into two modules.
My solution was to create a module for directives (below). This is the best practice?

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { ElasticDirective } from './elastic.directive';
import { FocusNextDirective} from './focus-next.directive';

@NgModule({
	declarations: [
		ElasticDirective,
		FocusNextDirective
	],
	imports: [
		IonicModule
	],
	exports: [
		ElasticDirective,
		FocusNextDirective
	]
})
export class DirectivesModule { }
4

If you are OK with your app bundle having N duplicate copies of all your directive code, one for each lazily loaded page that uses any of them, then carry on. If that bothers you, then I would suggest ditching lazy loading until that is resolved.

1 Like
5

Hi, I got the same problem after a “ionic g directive …” command to create my 1st directive, solved by declaring the DirectivesModule in app.module.ts:

import { MyApp } from './app.component';
import { DirectivesModule } from '../directives/directives.module';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    DirectivesModule
  ], (...)
1 Like