Directives not working but there's no error in console

my ionic info:

@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0

The issue is that I created a directive with the ionic cli which automatically updates my app.modules.ts, but i tried in several ways and the directive doesn’t work,

this is my app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule } from '@angular/http';

import { MyApp } from './app.component'; 

import { HighlightDirective } from '../directives/highlight/highlight';

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
   //native providers
export class AppModule {}

this is highlight.ts

import { Directive, ElementRef } from '@angular/core';

 * Generated class for the HighlightDirective directive.
 * See
 * for more info on Angular Directives.
  selector: '[highlight]' // Attribute selector
export class HighlightDirective {

  constructor(el: ElementRef) {
    console.log("Directive initialized"); = 'yellow';


and in the page i’m using the directive its the following


    <ion-title>New Page</ion-title>


<ion-content padding>
  <div highlight>

the page.ts

  selector: 'page-new-client',
  templateUrl: 'new-client.html',
export class NewClientPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {

  ionViewDidLoad() {


but when I load the page that tries to use the directive, i get nothing

and this is my console:


I’m using Lazy loading for Page navigation, any help will be appreciated

1 Like

I have exactly the same issue… have you find a solution ?

At that moment I tried a different approach, then the official blog article was released so I followed that, basically it said that you need to create a specific module only for directives that imports and exports those directives, then on each component where you intent to use the directive(s) , you should import the directives module on your “componentName”.module.ts, here is the link of the article

1 Like

Thank you very much maaan!!!