Skip to content

Generating then trying to use a simple directive isn;t working in Ionic 4 #15249

@nikmartin

Description

@nikmartin

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.


Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/home/nmartin/npm/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.4
   @angular-devkit/schematics : 0.7.4
   @angular/cli               : 6.1.4
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

System:

   NodeJS : v10.6.0 (/usr/local/bin/node)
   npm    : 6.3.0
   OS     : Linux 4.18

Describe the Bug
custom attribute Directives are not working in Ionic 4

Steps to Reproduce
Steps to reproduce the behavior:

  1. run ionic start myApp tabs --type=angular
  2. run ionic g directive hilite
  3. edit hilite.directive.ts to look like:
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHilite]',
})
export class HiliteDirective {
  constructor(el: ElementRef) {
    console.log('hilite!!!');
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

  1. edit app/home/homt.page.html to look like:
<p appHilite>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs">docs</a>
    will be your guide.</p>
  1. run the app

Expected Behavior
the paragraph to have a yellow background

Actual Behavior
Nothing. Interestingly, If I move the directive injection from app.module.ts to home.module.ts, it works, BUT only in home.page.html, not any other page in the app, due to duplicate declarations

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions